fix: posthog unwrapped fonts and grid (#19229)

* fix: YIH fonts * better grid for things
PostHog · Dec 9, 2023 · ca316c8 · ca316c8
1 parent 544b2b8
commit ca316c8
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/posthog/year_in_posthog/2023.html b/posthog/year_in_posthog/2023.html
@@ -13,8 +13,8 @@
     {% else %}
         <link rel="shortcut icon" href="/static/icons/favicon-dev.ico?v=2021-04-29">
     {% endif %}
-    <link rel="preload" href="https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff2" as="font" type="font/woff" crossorigin>
+    <link rel="preload" href="https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff" as="font" type="font/woff" crossorigin>
+    <link rel="preload" href="https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff" as="font" type="font/woff" crossorigin>
     <link rel="preload" href="{% static image_webp %}" as="image">
     <link rel="preload" href="{% static 'year_in_hog/background.png' %}" as="image">
     <script>
@@ -57,15 +57,15 @@
             font-family: MatterSQ;
             font-style: normal;
             font-weight: 700;
-            src: url(https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff2) format("woff2"), url(https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff) format("woff");
+            src: url(https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff) format("woff");
             font-display: swap
         }
 
         @font-face {
             font-family: MatterSQ;
             font-style: normal;
             font-weight: 500;
-            src: url(https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff2) format("woff2"), url(https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff) format("woff");
+            src: url(https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff) format("woff");
             font-display: swap
         }
 
@@ -261,6 +261,7 @@
         }
 
         .grid {
+            display: grid;
             grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* Change to 1 column */
         }
 
@@ -303,6 +304,20 @@
             --microtip-font-size: 15px;
         }
 
+        @media (min-width: 600px) {
+            .grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
+                gap: 10px; /* Adjust the gap between grid items as needed */
+                width: 100%;
+            }
+
+            .badge.mini {
+                width: 100px;
+                height: 100px;
+            }
+        }
+
         @media (min-width: 769px) {
             main {
                 flex-direction: row;