From 7d61dbadc315e57bd3e174341d2473c77d097dff Mon Sep 17 00:00:00 2001 From: helenclx Date: Wed, 24 Jul 2024 12:37:32 +0000 Subject: [PATCH] deploy: 6d537ceaad79dfd2c4338c52c87535745abbe2a0 --- 404.html | 25 +++++++++++-------- about/index.html | 25 +++++++++++-------- accessibility/index.html | 25 +++++++++++-------- blog/categories/100-days-of-code/index.html | 25 +++++++++++-------- blog/categories/about-this-blog/index.html | 25 +++++++++++-------- blog/categories/about-this-website/index.html | 25 +++++++++++-------- blog/categories/bellabuffs/index.html | 25 +++++++++++-------- blog/categories/cassette-beasts/index.html | 25 +++++++++++-------- blog/categories/cbpickaxe/index.html | 25 +++++++++++-------- blog/categories/chingu/index.html | 25 +++++++++++-------- blog/categories/cs50/index.html | 25 +++++++++++-------- blog/categories/cs50x/index.html | 25 +++++++++++-------- blog/categories/css/index.html | 25 +++++++++++-------- blog/categories/disability-pride/index.html | 25 +++++++++++-------- blog/categories/eleventy/index.html | 25 +++++++++++-------- blog/categories/flask/index.html | 25 +++++++++++-------- blog/categories/freecodecamp/index.html | 25 +++++++++++-------- blog/categories/github-pages/index.html | 25 +++++++++++-------- blog/categories/github/index.html | 25 +++++++++++-------- blog/categories/html/index.html | 25 +++++++++++-------- blog/categories/index.html | 25 +++++++++++-------- blog/categories/javascript/index.html | 25 +++++++++++-------- blog/categories/javascriptmas/index.html | 25 +++++++++++-------- blog/categories/php/index.html | 25 +++++++++++-------- blog/categories/python/index.html | 25 +++++++++++-------- blog/categories/react/index.html | 25 +++++++++++-------- blog/categories/scrimba/index.html | 25 +++++++++++-------- blog/categories/sql/index.html | 25 +++++++++++-------- blog/index.html | 25 +++++++++++-------- blog/posts/1/index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- .../index.html | 25 +++++++++++-------- blog/posts/index.html | 25 +++++++++++-------- colophon/index.html | 25 +++++++++++-------- contact/index.html | 25 +++++++++++-------- contact/thanks.html | 25 +++++++++++-------- index.html | 25 +++++++++++-------- now/index.html | 25 +++++++++++-------- projects/frontend-mentor/index.html | 25 +++++++++++-------- projects/index.html | 25 +++++++++++-------- projects/quizzical/index.html | 25 +++++++++++-------- projects/recipe-hub/index.html | 25 +++++++++++-------- projects/scrimba/index.html | 25 +++++++++++-------- projects/tenzies/index.html | 25 +++++++++++-------- 59 files changed, 885 insertions(+), 590 deletions(-) diff --git a/404.html b/404.html index 5dc843be..1a93399f 100644 --- a/404.html +++ b/404.html @@ -34,7 +34,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -56,7 +56,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -66,17 +66,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -121,6 +121,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -128,12 +135,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/about/index.html b/about/index.html index a3b541b0..a6788b14 100644 --- a/about/index.html +++ b/about/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/accessibility/index.html b/accessibility/index.html index e683171e..f8a85e66 100644 --- a/accessibility/index.html +++ b/accessibility/index.html @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/100-days-of-code/index.html b/blog/categories/100-days-of-code/index.html index e9803ded..95605288 100644 --- a/blog/categories/100-days-of-code/index.html +++ b/blog/categories/100-days-of-code/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html index 90546cbe..731250a3 100644 --- a/blog/categories/about-this-blog/index.html +++ b/blog/categories/about-this-blog/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/about-this-website/index.html b/blog/categories/about-this-website/index.html index 66e7caea..7a31cf53 100644 --- a/blog/categories/about-this-website/index.html +++ b/blog/categories/about-this-website/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/bellabuffs/index.html b/blog/categories/bellabuffs/index.html index d0abd89a..95022887 100644 --- a/blog/categories/bellabuffs/index.html +++ b/blog/categories/bellabuffs/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/cassette-beasts/index.html b/blog/categories/cassette-beasts/index.html index 926b11d0..552ec839 100644 --- a/blog/categories/cassette-beasts/index.html +++ b/blog/categories/cassette-beasts/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/cbpickaxe/index.html b/blog/categories/cbpickaxe/index.html index 03353e86..9a29b963 100644 --- a/blog/categories/cbpickaxe/index.html +++ b/blog/categories/cbpickaxe/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/chingu/index.html b/blog/categories/chingu/index.html index ba6a16aa..3df00725 100644 --- a/blog/categories/chingu/index.html +++ b/blog/categories/chingu/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/cs50/index.html b/blog/categories/cs50/index.html index e6602b70..75287169 100644 --- a/blog/categories/cs50/index.html +++ b/blog/categories/cs50/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/cs50x/index.html b/blog/categories/cs50x/index.html index c210f630..96507074 100644 --- a/blog/categories/cs50x/index.html +++ b/blog/categories/cs50x/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/css/index.html b/blog/categories/css/index.html index bcf07cee..a34f3866 100644 --- a/blog/categories/css/index.html +++ b/blog/categories/css/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/disability-pride/index.html b/blog/categories/disability-pride/index.html index edebcd1a..0440b2d8 100644 --- a/blog/categories/disability-pride/index.html +++ b/blog/categories/disability-pride/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/eleventy/index.html b/blog/categories/eleventy/index.html index 74327dc0..f5146e57 100644 --- a/blog/categories/eleventy/index.html +++ b/blog/categories/eleventy/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/flask/index.html b/blog/categories/flask/index.html index 0eb1afcf..973c04cb 100644 --- a/blog/categories/flask/index.html +++ b/blog/categories/flask/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/freecodecamp/index.html b/blog/categories/freecodecamp/index.html index 311a92f8..cff859c9 100644 --- a/blog/categories/freecodecamp/index.html +++ b/blog/categories/freecodecamp/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/github-pages/index.html b/blog/categories/github-pages/index.html index b53ecefa..c68afd18 100644 --- a/blog/categories/github-pages/index.html +++ b/blog/categories/github-pages/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/github/index.html b/blog/categories/github/index.html index ed4071fd..fda457ce 100644 --- a/blog/categories/github/index.html +++ b/blog/categories/github/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/html/index.html b/blog/categories/html/index.html index 9339f793..50e9c339 100644 --- a/blog/categories/html/index.html +++ b/blog/categories/html/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/index.html b/blog/categories/index.html index ba5e4ac0..664bd428 100644 --- a/blog/categories/index.html +++ b/blog/categories/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/javascript/index.html b/blog/categories/javascript/index.html index 79e0dbd5..bfdb8f7c 100644 --- a/blog/categories/javascript/index.html +++ b/blog/categories/javascript/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/javascriptmas/index.html b/blog/categories/javascriptmas/index.html index dec2730e..6d34219e 100644 --- a/blog/categories/javascriptmas/index.html +++ b/blog/categories/javascriptmas/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/php/index.html b/blog/categories/php/index.html index a21f6c63..0a44573c 100644 --- a/blog/categories/php/index.html +++ b/blog/categories/php/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/python/index.html b/blog/categories/python/index.html index 76751bb1..9c9ccbe0 100644 --- a/blog/categories/python/index.html +++ b/blog/categories/python/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/react/index.html b/blog/categories/react/index.html index 339f45a2..56d42584 100644 --- a/blog/categories/react/index.html +++ b/blog/categories/react/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/scrimba/index.html b/blog/categories/scrimba/index.html index 8a993b47..195c10b2 100644 --- a/blog/categories/scrimba/index.html +++ b/blog/categories/scrimba/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/categories/sql/index.html b/blog/categories/sql/index.html index f7a6df3f..f1f90324 100644 --- a/blog/categories/sql/index.html +++ b/blog/categories/sql/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/index.html b/blog/index.html index fab5e903..bc4953e1 100644 --- a/blog/index.html +++ b/blog/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/posts/1/index.html b/blog/posts/1/index.html index 69b46c0f..21ddb0d9 100644 --- a/blog/posts/1/index.html +++ b/blog/posts/1/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 c6e65dd4..2d9f1200 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 9158954c..72253790 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 99de14db..b7884449 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 50fc2c9c..f6e9a89c 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 97a4a98e..74ea5881 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 0bdbb8e1..2cafb8b6 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 d6b6242d..c8fa2696 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 11e7ca28..2ae1de3a 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 da2fe9b8..6e5509cf 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 994390ac..f309b275 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 3419a2e6..23dfe234 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 b7014a4f..a5bb0f32 100644 --- a/blog/posts/2024-05-27-cs50x-course-completed/index.html +++ b/blog/posts/2024-05-27-cs50x-course-completed/index.html @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 8f5c9f24..e9be3060 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 3ca8f697..db25910f 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 5b3f9478..9228a65c 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 @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } 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 132421c7..f25cfd56 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 @@ -81,7 +81,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -103,7 +103,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -113,17 +113,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -168,6 +168,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -175,12 +182,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/posts/2024-07-23-responsive-disability-pride-flag-css/index.html b/blog/posts/2024-07-23-responsive-disability-pride-flag-css/index.html index c4a35886..3ed835cb 100644 --- a/blog/posts/2024-07-23-responsive-disability-pride-flag-css/index.html +++ b/blog/posts/2024-07-23-responsive-disability-pride-flag-css/index.html @@ -48,7 +48,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -70,7 +70,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -80,17 +80,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -135,6 +135,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -142,12 +149,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/blog/posts/index.html b/blog/posts/index.html index e3a3991f..ddc12c98 100644 --- a/blog/posts/index.html +++ b/blog/posts/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/colophon/index.html b/colophon/index.html index ace507a4..f6ec8275 100644 --- a/colophon/index.html +++ b/colophon/index.html @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/contact/index.html b/contact/index.html index 546d5d03..ba1abd17 100644 --- a/contact/index.html +++ b/contact/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/contact/thanks.html b/contact/thanks.html index 71d6de3f..de4ff9ae 100644 --- a/contact/thanks.html +++ b/contact/thanks.html @@ -34,7 +34,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -56,7 +56,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -66,17 +66,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -121,6 +121,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -128,12 +135,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/index.html b/index.html index 04410f4b..f4eafd60 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/now/index.html b/now/index.html index b78cfe3e..d56ccead 100644 --- a/now/index.html +++ b/now/index.html @@ -36,7 +36,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -58,7 +58,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -68,17 +68,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -123,6 +123,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -130,12 +137,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/projects/frontend-mentor/index.html b/projects/frontend-mentor/index.html index 4c191c51..ac3b6c66 100644 --- a/projects/frontend-mentor/index.html +++ b/projects/frontend-mentor/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/projects/index.html b/projects/index.html index f9634ce0..007c619f 100644 --- a/projects/index.html +++ b/projects/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/projects/quizzical/index.html b/projects/quizzical/index.html index 1355f029..72044609 100644 --- a/projects/quizzical/index.html +++ b/projects/quizzical/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/projects/recipe-hub/index.html b/projects/recipe-hub/index.html index 35837e25..42e53af8 100644 --- a/projects/recipe-hub/index.html +++ b/projects/recipe-hub/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/projects/scrimba/index.html b/projects/scrimba/index.html index c5b75919..11abf8d0 100644 --- a/projects/scrimba/index.html +++ b/projects/scrimba/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); } diff --git a/projects/tenzies/index.html b/projects/tenzies/index.html index 573e37ed..4c2e6a71 100644 --- a/projects/tenzies/index.html +++ b/projects/tenzies/index.html @@ -33,7 +33,7 @@ background-color: var(--clr-body-bg); box-shadow: var(--bs-main); z-index: 998; - position: sticky; + position: static; top: 0; } @@ -55,7 +55,7 @@ background-color: transparent; font-size: 2rem; padding: 0; - display: flex; + display: none; justify-content: center; } @@ -65,17 +65,17 @@ .header__navmenu { list-style-type: ""; padding: 0; - margin: 0; + margin: 1em 0 0 0; font-size: 1.125rem; font-weight: 600; color: var(--clr-accent-600); text-align: center; display: flex; flex-wrap: wrap; - gap: 1em; + gap: 0.5em 1em; } - .header__links { display: none; } + .header__links { display: flex; } .header__popover { background-color: var(--clr-body-bg); @@ -120,6 +120,13 @@ outline-offset: 0.1em; } + @supports selector([popover]) { + .header__toggle { display: flex; } + .header__links { display: none; } + .header__navmenu { margin: 0; } + .header { position: sticky; } + } + /* For larger screen sizes */ @media (min-width: 640px) { .header__title { margin-bottom: 0; } @@ -127,12 +134,10 @@ /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { + .header { position: sticky; } + .header__navmenu { margin: 0; } .header__toggle, .header__popover { display: none; } - - .header__links { - display: flex; - flex-wrap: wrap; - } + .header__links { display: flex; } } .top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); }