deploy: 4652a48

helenclx · Jul 21, 2024 · 11f52b6 · 11f52b6
1 parent ede4abd
commit 11f52b6
Show file tree

Hide file tree

Showing 56 changed files with 616 additions and 336 deletions.
diff --git a/404.html b/404.html
@@ -31,13 +31,18 @@
         align-items: center;
         flex-wrap: wrap;
         padding: 1rem 1.5rem;
-        position: sticky;
-        top: 0;
         background-color: var(--clr-body-bg);
         box-shadow: var(--bs-main);
         z-index: 998;
     }
 
+    @supports selector([popover]) {
+        .header {
+            position: sticky;
+            top: 0;
+        }
+    }
+
     .header__title {
         color: var(--clr-accent-600);
         text-transform: uppercase;
@@ -71,8 +76,9 @@
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
-        display: grid;
-        gap: 2rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
     }
 
     .header__links { display: none; }
@@ -82,7 +88,7 @@
         border: 0.15em solid var(--clr-accent-600);
         padding: 1.5em;
         box-shadow: var(--bs-main);
-        width: 80%;
+        max-width: 80%;
     }
 
     .header__popover::backdrop {
@@ -131,7 +137,6 @@
 
         .header__links {
             display: flex;
-            flex-direction: row;
             flex-wrap: wrap;
         }
     }

diff --git a/about/index.html b/about/index.html
@@ -30,13 +30,18 @@
         align-items: center;
         flex-wrap: wrap;
         padding: 1rem 1.5rem;
-        position: sticky;
-        top: 0;
         background-color: var(--clr-body-bg);
         box-shadow: var(--bs-main);
         z-index: 998;
     }
 
+    @supports selector([popover]) {
+        .header {
+            position: sticky;
+            top: 0;
+        }
+    }
+
     .header__title {
         color: var(--clr-accent-600);
         text-transform: uppercase;
@@ -70,8 +75,9 @@
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
-        display: grid;
-        gap: 2rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
     }
 
     .header__links { display: none; }
@@ -81,7 +87,7 @@
         border: 0.15em solid var(--clr-accent-600);
         padding: 1.5em;
         box-shadow: var(--bs-main);
-        width: 80%;
+        max-width: 80%;
     }
 
     .header__popover::backdrop {
@@ -130,7 +136,6 @@
 
         .header__links {
             display: flex;
-            flex-direction: row;
             flex-wrap: wrap;
         }
     }

diff --git a/accessibility/index.html b/accessibility/index.html
@@ -33,13 +33,18 @@
         align-items: center;
         flex-wrap: wrap;
         padding: 1rem 1.5rem;
-        position: sticky;
-        top: 0;
         background-color: var(--clr-body-bg);
         box-shadow: var(--bs-main);
         z-index: 998;
     }
 
+    @supports selector([popover]) {
+        .header {
+            position: sticky;
+            top: 0;
+        }
+    }
+
     .header__title {
         color: var(--clr-accent-600);
         text-transform: uppercase;
@@ -73,8 +78,9 @@
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
-        display: grid;
-        gap: 2rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
     }
 
     .header__links { display: none; }
@@ -84,7 +90,7 @@
         border: 0.15em solid var(--clr-accent-600);
         padding: 1.5em;
         box-shadow: var(--bs-main);
-        width: 80%;
+        max-width: 80%;
     }
 
     .header__popover::backdrop {
@@ -133,7 +139,6 @@
 
         .header__links {
             display: flex;
-            flex-direction: row;
             flex-wrap: wrap;
         }
     }

diff --git a/blog/categories/100-days-of-code/index.html b/blog/categories/100-days-of-code/index.html
@@ -30,13 +30,18 @@
         align-items: center;
         flex-wrap: wrap;
         padding: 1rem 1.5rem;
-        position: sticky;
-        top: 0;
         background-color: var(--clr-body-bg);
         box-shadow: var(--bs-main);
         z-index: 998;
     }
 
+    @supports selector([popover]) {
+        .header {
+            position: sticky;
+            top: 0;
+        }
+    }
+
     .header__title {
         color: var(--clr-accent-600);
         text-transform: uppercase;
@@ -70,8 +75,9 @@
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
-        display: grid;
-        gap: 2rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
     }
 
     .header__links { display: none; }
@@ -81,7 +87,7 @@
         border: 0.15em solid var(--clr-accent-600);
         padding: 1.5em;
         box-shadow: var(--bs-main);
-        width: 80%;
+        max-width: 80%;
     }
 
     .header__popover::backdrop {
@@ -130,7 +136,6 @@
 
         .header__links {
             display: flex;
-            flex-direction: row;
             flex-wrap: wrap;
         }
     }

diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html
@@ -30,13 +30,18 @@
         align-items: center;
         flex-wrap: wrap;
         padding: 1rem 1.5rem;
-        position: sticky;
-        top: 0;
         background-color: var(--clr-body-bg);
         box-shadow: var(--bs-main);
         z-index: 998;
     }
 
+    @supports selector([popover]) {
+        .header {
+            position: sticky;
+            top: 0;
+        }
+    }
+
     .header__title {
         color: var(--clr-accent-600);
         text-transform: uppercase;
@@ -70,8 +75,9 @@
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
-        display: grid;
-        gap: 2rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
     }
 
     .header__links { display: none; }
@@ -81,7 +87,7 @@
         border: 0.15em solid var(--clr-accent-600);
         padding: 1.5em;
         box-shadow: var(--bs-main);
-        width: 80%;
+        max-width: 80%;
     }
 
     .header__popover::backdrop {
@@ -130,7 +136,6 @@
 
         .header__links {
             display: flex;
-            flex-direction: row;
             flex-wrap: wrap;
         }
     }

diff --git a/blog/categories/about-this-website/index.html b/blog/categories/about-this-website/index.html
@@ -30,13 +30,18 @@
         align-items: center;
         flex-wrap: wrap;
         padding: 1rem 1.5rem;
-        position: sticky;
-        top: 0;
         background-color: var(--clr-body-bg);
         box-shadow: var(--bs-main);
         z-index: 998;
     }
 
+    @supports selector([popover]) {
+        .header {
+            position: sticky;
+            top: 0;
+        }
+    }
+
     .header__title {
         color: var(--clr-accent-600);
         text-transform: uppercase;
@@ -70,8 +75,9 @@
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
-        display: grid;
-        gap: 2rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
     }
 
     .header__links { display: none; }
@@ -81,7 +87,7 @@
         border: 0.15em solid var(--clr-accent-600);
         padding: 1.5em;
         box-shadow: var(--bs-main);
-        width: 80%;
+        max-width: 80%;
     }
 
     .header__popover::backdrop {
@@ -130,7 +136,6 @@
 
         .header__links {
             display: flex;
-            flex-direction: row;
             flex-wrap: wrap;
         }
     }

diff --git a/blog/categories/bellabuffs/index.html b/blog/categories/bellabuffs/index.html
@@ -30,13 +30,18 @@
         align-items: center;
         flex-wrap: wrap;
         padding: 1rem 1.5rem;
-        position: sticky;
-        top: 0;
         background-color: var(--clr-body-bg);
         box-shadow: var(--bs-main);
         z-index: 998;
     }
 
+    @supports selector([popover]) {
+        .header {
+            position: sticky;
+            top: 0;
+        }
+    }
+
     .header__title {
         color: var(--clr-accent-600);
         text-transform: uppercase;
@@ -70,8 +75,9 @@
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
-        display: grid;
-        gap: 2rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
     }
 
     .header__links { display: none; }
@@ -81,7 +87,7 @@
         border: 0.15em solid var(--clr-accent-600);
         padding: 1.5em;
         box-shadow: var(--bs-main);
-        width: 80%;
+        max-width: 80%;
     }
 
     .header__popover::backdrop {
@@ -130,7 +136,6 @@
 
         .header__links {
             display: flex;
-            flex-direction: row;
             flex-wrap: wrap;
         }
     }

diff --git a/blog/categories/cassette-beasts/index.html b/blog/categories/cassette-beasts/index.html
@@ -30,13 +30,18 @@
         align-items: center;
         flex-wrap: wrap;
         padding: 1rem 1.5rem;
-        position: sticky;
-        top: 0;
         background-color: var(--clr-body-bg);
         box-shadow: var(--bs-main);
         z-index: 998;
     }
 
+    @supports selector([popover]) {
+        .header {
+            position: sticky;
+            top: 0;
+        }
+    }
+
     .header__title {
         color: var(--clr-accent-600);
         text-transform: uppercase;
@@ -70,8 +75,9 @@
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
-        display: grid;
-        gap: 2rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
     }
 
     .header__links { display: none; }
@@ -81,7 +87,7 @@
         border: 0.15em solid var(--clr-accent-600);
         padding: 1.5em;
         box-shadow: var(--bs-main);
-        width: 80%;
+        max-width: 80%;
     }
 
     .header__popover::backdrop {
@@ -130,7 +136,6 @@
 
         .header__links {
             display: flex;
-            flex-direction: row;
             flex-wrap: wrap;
         }
     }