Add helix to page

Loyen · Jul 11, 2024 · 587432e · 587432e
1 parent de9e6a7
commit 587432e
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -56,7 +56,7 @@
 .site {
     display: grid;
     grid-template-rows: 1fr auto 1fr;
-    grid-gap: 1em;
+    gap: 1em;
 }
 
 .personal {
@@ -77,8 +77,10 @@
 .keyboards {
     display: flex;
     flex-wrap: wrap;
-    grid-gap: 1rem;
+    gap: 1rem;
     justify-content: center;
+    justify-self: center;
+    max-width: 900px;
 }
 
 .keyboard {
@@ -92,6 +94,7 @@
     transition-property: background-color, color;
     transition-duration: 120ms;
     text-decoration: none;
+    width: 300px;
 }
 
 .keyboard:hover,
@@ -102,7 +105,7 @@
 
 .keyboard-image {
     height: auto;
-    width: 300px;
+    width: auto;
 }
 
 .links {
@@ -155,6 +158,11 @@
                 <img class="keyboard-image" src="./image/preonic.svg" width="113" height="50" alt="Illustration of a Preonic Keyboard" />
                 <div class="keyboard-name">Preonic Swedish Layout</div>
             </a>
+
+            <a class="keyboard" href="https://github.com/Loyen/qmk-keyboard-layouts/blob/main/keyboards/helix_rev3_5rows_swedish.json">
+                <img class="keyboard-image" src="./image/helix.svg" width="113" height="50" alt="Illustration of a Helix Keyboard" />
+                <div class="keyboard-name">Helix Swedish Layout</div>
+            </a>
         </div>
 
         <div class="links">