style: 💄 increase font and decrease hex size

jaskaransarkaria · Jan 3, 2022 · e66ad2b · e66ad2b
1 parent c1e9a76
commit e66ad2b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 15 deletions.
diff --git a/.routify/config.js b/.routify/config.js
@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2021-12-27T13:07:50.640Z',
+  started: '2022-01-03T18:32:02.464Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Mon Dec 27 2021 13:07:53 GMT+0000 (Greenwich Mean Time)
+ * File generated Mon Jan 03 2022 18:32:05 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2021-12-27T13:07:53.623Z';
+export const __timestamp = '2022-01-03T18:32:05.385Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -9,9 +9,9 @@
 
     <link rel='icon' type='image/png' href='/favicon.png'>
     <link rel='stylesheet' href='/global.css'>
-    <link rel='stylesheet' href='/build/bundle-1640610470638.css'>
+    <link rel='stylesheet' href='/build/bundle-1641234722462.css'>
 
-    <script defer src='/build/bundle-1640610470638.js'></script>
+    <script defer src='/build/bundle-1641234722462.js'></script>
   </head>
   <body>
   </body>

diff --git a/src/components/HexGrid/HexGrid.svelte b/src/components/HexGrid/HexGrid.svelte
@@ -54,7 +54,6 @@
                 Math.random() * (6 - 1 + 1) + 1
               )}.svg`}
               alt="hexagon shape for the category button"
-              class="hexagon-shape"
               loading="lazy"
             />
           {/if}
@@ -146,7 +145,7 @@
     width: 100%;
     height: 100%;
     text-align: center;
-    color: #fff;
+    color: black;
     overflow: hidden;
     transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
   }
@@ -159,7 +158,7 @@
   h3 {
     left: -100%;
     right: -100%;
-    width: auto;
+    width: 98%;
     height: 100%;
     margin: 0 auto;
     transform: rotate3d(0, 0, 0, 0deg);
@@ -181,7 +180,7 @@
   .hex-flex h3,
   .hex h3 {
     width: 95px;
-    font-size: 0.5em;
+    font-size: 0.55em;
     vertical-align: middle;
     height: auto;
   }
@@ -211,15 +210,15 @@
     .hex h3,
     .hex-flex h3 {
       width: 110px;
-      font-size: 0.55em;
+      font-size: 0.7em;
     }
   }
 
   @media (min-width: 700px) {
     .hex-flex h3,
     .hex h3 {
       width: 175px;
-      font-size: 0.8em;
+      font-size: 1em;
     }
 
     .flexbox-container {
@@ -236,7 +235,7 @@
     .hex-flex h3,
     .hex h3 {
       width: 185px;
-      font-size: 0.85em;
+      font-size: 1.1em;
     }
 
     .flexbox-container {
@@ -253,7 +252,7 @@
     .hex-flex h3,
     .hex h3 {
       width: 195px;
-      font-size: 0.9em;
+      font-size: 1.2em;
     }
 
     .hex-flex {
@@ -277,7 +276,7 @@
     .hex-flex h3,
     .hex h3 {
       width: 200px;
-      font-size: 1em;
+      font-size: 1.2em;
     }
 
     .hex-flex {
@@ -290,7 +289,7 @@
     .hex-flex h3,
     .hex h3 {
       width: 205px;
-      font-size: 1.2em;
+      font-size: 1.285em;
     }
 
     .hex-flex {