Update binary clock layout and styling

DavidTbilisi · Jan 12, 2024 · 881deff · 881deff
1 parent aff604f
commit 881deff
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 14 deletions.
diff --git a/binary.html b/binary.html
@@ -9,38 +9,45 @@
     <link rel="stylesheet" href="./style.css">
 </head>
 <body>
-    <!-- Only Binary Clock -->
-    <div class="container" id="binary-only">
-        <!-- Hours -->
+    <div class="center">
+        <div class="container" id="binary-only">
             <div class="eight hours H81"><span>H81</span></div>
             <div class="eight hours H82"><span>H82</span></div>
+            <div class="space"></div>
             <div class="eight minutes M81"><span>M81</span></div>
             <div class="eight minutes M82"><span>M82</span></div>
+            <div class="space"></div>
             <div class="eight secondes S81"><span>S81</span></div>
             <div class="eight secondes S82"><span>S82</span></div>
 
             <div class="four hours H41"><span>H41</span></div>
             <div class="four hours H42"><span>H42</span></div>
+            <div class="space"></div>
             <div class="four minutes M41"><span>M41</span></div>
             <div class="four minutes M42"><span>M42</span></div>
+            <div class="space"></div>
             <div class="four secondes S41"><span>S41</span></div>
             <div class="four secondes S42"><span>S42</span></div>
 
             <div class="two hours H21"><span>H21</span></div>
             <div class="two hours H22"><span>H22</span></div>
+            <div class="space"></div>
             <div class="two minutes M21"><span>M21</span></div>
             <div class="two minutes M22"><span>M22</span></div>
+            <div class="space"></div>
             <div class="two secondes S21"><span>S21</span></div>
             <div class="two secondes S22"><span>S22</span></div>
 
             <div class="one hours H11"><span>H11</span></div>
             <div class="one hours H12"><span>H12</span></div>
+            <div class="space"></div>
             <div class="one minutes M11"><span>M11</span></div>
             <div class="one minutes M12"><span>M12</span></div>
+            <div class="space"></div>
             <div class="one secondes S11"><span>S11</span></div>
             <div class="one secondes S12"><span>S12</span></div>
+        </div>
     </div>
-
       <script src="./binary.js"></script>
 </body>
 </html>

diff --git a/style.css b/style.css
@@ -44,34 +44,52 @@ body {
     cursor: cell
   }
 }
-
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
 #binary-only{
+  --size: 180px;
+  --space: 20px;
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  grid-template-rows: repeat(4, 1fr);
+  grid-template-columns: repeat(2, 1fr) var(--space) repeat(2, 1fr) var(--space)  repeat(2, 1fr); 
   justify-items: center;
+  gap: 1rem;
   width: 90%;
+  height: 80%;
   margin: 0 auto;
-  div {
+  padding: 10px 0; 
+  div:not(.space) {
     span {
-      display: inline-block;
+      opacity: 0;
     }
     border: 1px solid var(--islamic-green);
+    border-radius: 15px;
     min-width: 100px;
     min-height: 100px;
-    height: 200px;
-    width: 200px;
+    height: var(--size);
+    width: var(--size);
     text-align: center;
-    line-height: 200px;
+    line-height: var(--size);
     color:var(--malachite);
-    transition: all 0.3s ease-in-out;
+    transition: all 0.5s ease-in-out;
   }
   div:hover {
     box-shadow: inset 0 0 15px var(--malachite);
-    cursor: cell
+    cursor: cell;
+    transition: all 0.3s ease-in-out;
+    span {
+      opacity: 1;
+    }
   }
   div.on{
     background-color: var(--malachite);
     color: var(--dark-green);
+    box-shadow: 0 0 45px var(--malachite);
+  }
+  .H81, .H82, .H41, .H42, .H21, .H22, .H11, .H12 {
+    column-gap: 1px;
   }
 }