style: slightly improve layout and design

stevensoyuz · Jul 27, 2024 · b478825 · b478825
1 parent 730df73
commit b478825
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -17,8 +17,8 @@
                 max-width: 30em;
                 margin-left: auto;
                 margin-right: auto;
-                padding-left: 10px;
-                padding-right: 10px;
+                padding-left: 20px;
+                padding-right: 20px;
             }
             h1, h2 {
                 font-family: "tiffin-latin-variable", serif;
@@ -32,6 +32,9 @@
                 font-size: 1.2em;
                 margin-top: 2.5rem
             }
+            p {
+                font-size: 14px;
+            }
         </style>
 
         <link rel="preload" href="https://use.typekit.net/gaf7jha.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
@@ -42,7 +45,9 @@
             <h1>How to Train Your Librarian</h1>
             <p>Practice your alphabetical sorting. Includes Dewey Decimal classifications, famous authors, and book titles. - @stevensoyuz.</p>
             <div id="game">
-                <p id="middle-text">is before or after ..</p>
+                <div id="content">
+                    <div id="middle-text"><p>is before or after ..</p></div>
+                </div>
                 <section>
                     <p id="result">...</p>
                     <button type="button" class="choice" id="before">Before</button>

diff --git a/scripts.js b/scripts.js
@@ -1,5 +1,5 @@
 document.addEventListener("DOMContentLoaded", () => {
-    const game = document.getElementById("game");
+    const game = document.getElementById("content");
     let authors = {};
 
     initialize();

diff --git a/styles.css b/styles.css
@@ -10,10 +10,6 @@
 
     --draw-dark-primary: white;
 }
-
-p {
-    font-size: 14px;
-}
 a {
     color: var(--accent);
 }
@@ -29,20 +25,19 @@ a {
 }
 #game {
     margin-top: 3rem;
-
     height: 25rem;
     width: 20rem;
-
     margin-left: auto;
     margin-right: auto;
-
     position: relative;
-
     text-align: center;
-
     outline: 2px dotted;
 }
-#game > div {
+#game-content {
+    height: 55%;
+    position: relative;
+}
+#game-content > div {
     position: absolute;
     left: 0;
     right: 0;
@@ -52,24 +47,16 @@ a {
     font-variation-settings: "wght" 600;
     font-size: 1.5em;
 }
-#middle-text {
-    position: absolute;
-    top: 10.5em;
-    left: 0;
-    right: 0;
-}
-
 .top {
-    top: 5em;
-    left: 0;
-    right: 0;
+    bottom: 3em;
 
     animation: 0.5s fade-in;
 }
+#middle-text {
+    bottom: 1em;
+}
 .bot {
-    top: 8em;
-    left: 0;
-    right: 0;
+    bottom: 0;
     transition: 1s ease;
 }
 .expire {
@@ -78,15 +65,12 @@ a {
 }
 
 #game > section {
-    left: 0;
-    right: 0;
-    height: 45%;
-    position: absolute;
-    bottom: 0;
+    margin-top: 30px;
     font-size: 0px;
 }
 
 #result {
+    margin: 20px;
     animation: 0.5s linear 1s 1 reverse fade-in running forwards;
 }
 
@@ -101,10 +85,9 @@ a {
     color: black;
     border: none;
 
-    margin: 10px;
-    margin-top: 20px;
-    padding-top: 15px;
-    padding-bottom: 15px;
+    margin-left: 10px;
+    margin-right: 10px;
+    height: 50px;
     min-width: 5em;
 
     cursor: pointer;