Merge pull request #57 from mbland/update-css

Update basic web page CSS
mbland · Dec 18, 2023 · 60e379a · 60e379a
2 parents 6f930c3 + 8472616
commit 60e379a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 42 deletions.
diff --git a/strcalc/src/main/frontend/components/placeholder.hbs b/strcalc/src/main/frontend/components/placeholder.hbs
@@ -6,4 +6,4 @@
   This is an example of a Handlebars template that invokes a partial template
   via '{{>'. See: https://handlebarsjs.com/guide/partials.html#basic-partials
 --}}
-<p class="placeholder">{{> message-link }}</p>
+<h1 class="placeholder">{{> message-link }}</h1>
diff --git a/strcalc/src/main/frontend/style.css b/strcalc/src/main/frontend/style.css
@@ -1,6 +1,7 @@
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
+  font-size: 1em;
+  line-height: 1.7;
   font-weight: 400;
 
   color-scheme: light dark;
@@ -31,56 +32,45 @@ body {
   min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
 #app {
-  max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
+  width: 320px;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #f7df1eaa);
+#app h1 {
+  margin-top: 0;
+  line-height: 1.1;
 }
 
-.card {
-  padding: 2em;
+form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  row-gap: 1em;
 }
 
-.read-the-docs {
-  color: #888;
+input[type="text"] {
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 1em;
+  outline: 0;
+  border-radius: 5px;
+  border: 1px solid;
+  padding: 2px 5px;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
+input[type="submit"] {
   font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+  line-height: 1.7em;
+  width: max-content;
+  border-radius: 5px;
 }
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+.result {
+  font-weight: bold;
+  height: 1.7em;
 }
 
 @media (prefers-color-scheme: light) {
@@ -91,7 +81,4 @@ button:focus-visible {
   a:hover {
     color: #747bff;
   }
-  button {
-    background-color: #f9f9f9;
-  }
 }