From 11f52b64d7dd47ef06fe8e0fa67d9ca0e4eff17c Mon Sep 17 00:00:00 2001 From: helenclx Date: Sun, 21 Jul 2024 02:04:53 +0000 Subject: [PATCH] deploy: 4652a48ec08a883e1a91836875df66165ac60204 --- 404.html | 17 +++++++++++------ about/index.html | 17 +++++++++++------ accessibility/index.html | 17 +++++++++++------ blog/categories/100-days-of-code/index.html | 17 +++++++++++------ blog/categories/about-this-blog/index.html | 17 +++++++++++------ blog/categories/about-this-website/index.html | 17 +++++++++++------ blog/categories/bellabuffs/index.html | 17 +++++++++++------ blog/categories/cassette-beasts/index.html | 17 +++++++++++------ blog/categories/cbpickaxe/index.html | 17 +++++++++++------ blog/categories/chingu/index.html | 17 +++++++++++------ blog/categories/cs50/index.html | 17 +++++++++++------ blog/categories/cs50x/index.html | 17 +++++++++++------ blog/categories/css/index.html | 17 +++++++++++------ blog/categories/eleventy/index.html | 17 +++++++++++------ blog/categories/flask/index.html | 17 +++++++++++------ blog/categories/freecodecamp/index.html | 17 +++++++++++------ blog/categories/github-pages/index.html | 17 +++++++++++------ blog/categories/github/index.html | 17 +++++++++++------ blog/categories/html/index.html | 17 +++++++++++------ blog/categories/index.html | 17 +++++++++++------ blog/categories/javascript/index.html | 17 +++++++++++------ blog/categories/javascriptmas/index.html | 17 +++++++++++------ blog/categories/php/index.html | 17 +++++++++++------ blog/categories/python/index.html | 17 +++++++++++------ blog/categories/react/index.html | 17 +++++++++++------ blog/categories/scrimba/index.html | 17 +++++++++++------ blog/categories/sql/index.html | 17 +++++++++++------ blog/index.html | 17 +++++++++++------ blog/posts/1/index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../2023-11-13-My-First-PR-in-Python/index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../index.html | 17 +++++++++++------ .../2024-07-19-eleventy-3-0-upgrade/index.html | 17 +++++++++++------ blog/posts/index.html | 17 +++++++++++------ colophon/index.html | 17 +++++++++++------ contact/index.html | 17 +++++++++++------ index.html | 17 +++++++++++------ now/index.html | 17 +++++++++++------ projects/frontend-mentor/index.html | 17 +++++++++++------ projects/index.html | 17 +++++++++++------ projects/quizzical/index.html | 17 +++++++++++------ projects/recipe-hub/index.html | 17 +++++++++++------ projects/scrimba/index.html | 17 +++++++++++------ projects/tenzies/index.html | 17 +++++++++++------ 56 files changed, 616 insertions(+), 336 deletions(-) diff --git a/404.html b/404.html index dc03355a..d3a12e7a 100644 --- 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 index 28cd44d2..0e2c1dd5 100644 --- 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 index daa527d8..fe6d0755 100644 --- 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 index c59f5ff6..94f12244 100644 --- 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 index 5f768d6f..2a4d1236 100644 --- 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 index 75362fa7..84e756e3 100644 --- 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 index 17b64b5b..a21a1a64 100644 --- 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 index c477c46c..d54cb9db 100644 --- 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; } } diff --git a/blog/categories/cbpickaxe/index.html b/blog/categories/cbpickaxe/index.html index e6b8c8d9..50da4f7a 100644 --- a/blog/categories/cbpickaxe/index.html +++ b/blog/categories/cbpickaxe/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/chingu/index.html b/blog/categories/chingu/index.html index ba334074..bdd995ab 100644 --- a/blog/categories/chingu/index.html +++ b/blog/categories/chingu/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/cs50/index.html b/blog/categories/cs50/index.html index a005277b..7e6f0319 100644 --- a/blog/categories/cs50/index.html +++ b/blog/categories/cs50/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/cs50x/index.html b/blog/categories/cs50x/index.html index 131e0336..65bbf8f4 100644 --- a/blog/categories/cs50x/index.html +++ b/blog/categories/cs50x/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/css/index.html b/blog/categories/css/index.html index 9f8830bb..e1349fd4 100644 --- a/blog/categories/css/index.html +++ b/blog/categories/css/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/eleventy/index.html b/blog/categories/eleventy/index.html index 64339d54..bf02467a 100644 --- a/blog/categories/eleventy/index.html +++ b/blog/categories/eleventy/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/flask/index.html b/blog/categories/flask/index.html index 17345abe..d39fd33c 100644 --- a/blog/categories/flask/index.html +++ b/blog/categories/flask/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/freecodecamp/index.html b/blog/categories/freecodecamp/index.html index a546e614..6d947a4a 100644 --- a/blog/categories/freecodecamp/index.html +++ b/blog/categories/freecodecamp/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/github-pages/index.html b/blog/categories/github-pages/index.html index 6f772d9d..1ece85f3 100644 --- a/blog/categories/github-pages/index.html +++ b/blog/categories/github-pages/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/github/index.html b/blog/categories/github/index.html index 22266d80..836b2305 100644 --- a/blog/categories/github/index.html +++ b/blog/categories/github/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/html/index.html b/blog/categories/html/index.html index 2a3776ae..3c85d2b3 100644 --- a/blog/categories/html/index.html +++ b/blog/categories/html/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/index.html b/blog/categories/index.html index 3eb90fe4..365bb42b 100644 --- a/blog/categories/index.html +++ b/blog/categories/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/javascript/index.html b/blog/categories/javascript/index.html index de5fede5..1572d7a5 100644 --- a/blog/categories/javascript/index.html +++ b/blog/categories/javascript/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/javascriptmas/index.html b/blog/categories/javascriptmas/index.html index b564c2c0..99d55693 100644 --- a/blog/categories/javascriptmas/index.html +++ b/blog/categories/javascriptmas/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/php/index.html b/blog/categories/php/index.html index 03bdacc3..3414d179 100644 --- a/blog/categories/php/index.html +++ b/blog/categories/php/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/python/index.html b/blog/categories/python/index.html index 266d88ae..726507f3 100644 --- a/blog/categories/python/index.html +++ b/blog/categories/python/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/react/index.html b/blog/categories/react/index.html index 0efb28be..bf676e51 100644 --- a/blog/categories/react/index.html +++ b/blog/categories/react/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/scrimba/index.html b/blog/categories/scrimba/index.html index b8b9de18..659a0f00 100644 --- a/blog/categories/scrimba/index.html +++ b/blog/categories/scrimba/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/sql/index.html b/blog/categories/sql/index.html index 3e043985..c4420c32 100644 --- a/blog/categories/sql/index.html +++ b/blog/categories/sql/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/index.html b/blog/index.html index a725d8d0..315877a6 100644 --- a/blog/index.html +++ b/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/posts/1/index.html b/blog/posts/1/index.html index abcea346..0492e038 100644 --- a/blog/posts/1/index.html +++ b/blog/posts/1/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/posts/2023-08-21-Welcome-to-Helen-Codes/index.html b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html index fc96696b..96a18e01 100644 --- a/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html +++ b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/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/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html index 215a0df3..8242f9ad 100644 --- a/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html +++ b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/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/posts/2023-09-10-CS50x-Week-7-Completed/index.html b/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html index 31559217..7eebbb0b 100644 --- a/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html +++ b/blog/posts/2023-09-10-CS50x-Week-7-Completed/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/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html index 9c6fe6ac..4a50bf09 100644 --- a/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html +++ b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/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/posts/2023-11-13-My-First-PR-in-Python/index.html b/blog/posts/2023-11-13-My-First-PR-in-Python/index.html index f648d7b6..87a45936 100644 --- a/blog/posts/2023-11-13-My-First-PR-in-Python/index.html +++ b/blog/posts/2023-11-13-My-First-PR-in-Python/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/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html index 95c3f13b..c71243d7 100644 --- a/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html +++ b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/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/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html index 94122d5e..190b8bba 100644 --- a/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html +++ b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/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/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html b/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html index cfe68ee0..ce63b5be 100644 --- a/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html +++ b/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/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/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html b/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html index 9b4fe123..7f19f24a 100644 --- a/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html +++ b/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/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/posts/2024-04-15-cs50x-week-9-completed/index.html b/blog/posts/2024-04-15-cs50x-week-9-completed/index.html index 54a312b2..f4889059 100644 --- a/blog/posts/2024-04-15-cs50x-week-9-completed/index.html +++ b/blog/posts/2024-04-15-cs50x-week-9-completed/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/posts/2024-04-22-now-page-for-my-website/index.html b/blog/posts/2024-04-22-now-page-for-my-website/index.html index 93c9dd06..05767de8 100644 --- a/blog/posts/2024-04-22-now-page-for-my-website/index.html +++ b/blog/posts/2024-04-22-now-page-for-my-website/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/posts/2024-05-27-cs50x-course-completed/index.html b/blog/posts/2024-05-27-cs50x-course-completed/index.html index 1412d166..a10c1c61 100644 --- a/blog/posts/2024-05-27-cs50x-course-completed/index.html +++ b/blog/posts/2024-05-27-cs50x-course-completed/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/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html b/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html index 36cff6f0..6c712a91 100644 --- a/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html +++ b/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/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/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html b/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html index 0bb525e1..68abe613 100644 --- a/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html +++ b/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/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/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/index.html b/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/index.html index 7a55e892..bf842706 100644 --- a/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/index.html +++ b/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/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/posts/2024-07-19-eleventy-3-0-upgrade/index.html b/blog/posts/2024-07-19-eleventy-3-0-upgrade/index.html index 8c4dd718..f3f2dc6b 100644 --- a/blog/posts/2024-07-19-eleventy-3-0-upgrade/index.html +++ b/blog/posts/2024-07-19-eleventy-3-0-upgrade/index.html @@ -78,13 +78,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; @@ -118,8 +123,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; } @@ -129,7 +135,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 { @@ -178,7 +184,6 @@ .header__links { display: flex; - flex-direction: row; flex-wrap: wrap; } } diff --git a/blog/posts/index.html b/blog/posts/index.html index a7206934..548b67a7 100644 --- a/blog/posts/index.html +++ b/blog/posts/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/colophon/index.html b/colophon/index.html index 3eafc016..4ddf7bbf 100644 --- a/colophon/index.html +++ b/colophon/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/contact/index.html b/contact/index.html index 405772b0..2364a1da 100644 --- a/contact/index.html +++ b/contact/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/index.html b/index.html index 43de732b..1a2dcff3 100644 --- a/index.html +++ b/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/now/index.html b/now/index.html index bf918297..ea948c3e 100644 --- a/now/index.html +++ b/now/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/projects/frontend-mentor/index.html b/projects/frontend-mentor/index.html index 8d0fb806..f0bdeb4e 100644 --- a/projects/frontend-mentor/index.html +++ b/projects/frontend-mentor/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/projects/index.html b/projects/index.html index e850feda..9f45e314 100644 --- a/projects/index.html +++ b/projects/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/projects/quizzical/index.html b/projects/quizzical/index.html index 5ba4e5be..7a3a2ab4 100644 --- a/projects/quizzical/index.html +++ b/projects/quizzical/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/projects/recipe-hub/index.html b/projects/recipe-hub/index.html index c0c851bb..b3c0c58e 100644 --- a/projects/recipe-hub/index.html +++ b/projects/recipe-hub/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/projects/scrimba/index.html b/projects/scrimba/index.html index f15f8d64..15c57053 100644 --- a/projects/scrimba/index.html +++ b/projects/scrimba/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/projects/tenzies/index.html b/projects/tenzies/index.html index 4437ad64..f13864c4 100644 --- a/projects/tenzies/index.html +++ b/projects/tenzies/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; } }