deploy: bae2c4c

helenclx · Jun 10, 2024 · 4e48523 · 4e48523
1 parent 7d00b10
commit 4e48523
Show file tree

Hide file tree

Showing 58 changed files with 799 additions and 954 deletions.
diff --git a/404.html b/404.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
 
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }

diff --git a/about/index.html b/about/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
 
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }

diff --git a/accessibility/index.html b/accessibility/index.html
@@ -102,7 +102,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -127,16 +127,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -179,10 +184,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -197,32 +198,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
 
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -241,7 +238,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }

diff --git a/assets/css/blog.css b/assets/css/blog.css
@@ -15,7 +15,7 @@
 
 .blog__post--info {
     gap: 0.3em;
-    font-size: var(--sz-home-txt);
+    font-size: var(--fs-home-txt);
     margin-bottom: 2em;
 }
 

diff --git a/assets/css/components.css b/assets/css/components.css
@@ -26,14 +26,14 @@
 
 .section--home {
     display: grid;
-    font-size: var(--sz-home-txt);
+    font-size: var(--fs-home-txt);
     padding: 2em 1em;
 }
 
 .section--home,
 .profile {
     max-width: 64rem;
-    font-size: var(--sz-home-txt);
+    font-size: var(--fs-home-txt);
     justify-self: center;
 }
 
@@ -153,7 +153,7 @@
     gap: 0.5em;
     flex-wrap: wrap;
     justify-content: center;
-    font-size: var(--sz-home-txt);
+    font-size: var(--fs-home-txt);
 }
 
 .breadcrumbs li::after {

diff --git a/assets/css/content.css b/assets/css/content.css
@@ -13,7 +13,7 @@
 }
 
 .prose {
-    font-size: var(--sz-main-txt);
+    font-size: var(--fs-main-txt);
     color: var(--clr-slate-600);
     padding: 0 var(--sz-main-padding);
 }

diff --git a/assets/css/general.css b/assets/css/general.css
@@ -24,19 +24,19 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-    font-size: var(--sz-h1);
+    font-size: var(--fs-h1);
 }
 
 h2 {
-    font-size: var(--sz-h2);
+    font-size: var(--fs-h2);
 }
 
 h3 {
-    font-size: var(--sz-h3);
+    font-size: var(--fs-h3);
 }
 
 h4 {
-    font-size: var(--sz-h4);
+    font-size: var(--fs-h4);
 }
 
 code {

diff --git a/assets/css/global.css b/assets/css/global.css
@@ -18,17 +18,18 @@
     --clr-top-btn-bg: #4153b6;
     --clr-top-btn-txt: #fff;
 
-    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
-        0 4px 6px -4px rgb(0 0 0 / 0.2);
+    --fs-main-txt: 1.2rem;
+    --fs-home-txt: 1.15rem;
+    --fs-h1: clamp(2rem, 1rem + 5vw, 3rem);
+    --fs-h2: clamp(1.55rem, 1rem + 3vw, 2.15rem);
+    --fs-h3: clamp(1.55rem, 1rem + 3vw, 1.8rem);
+    --fs-h4: clamp(1.4rem, 1rem + 3vw, 1.6rem);
 
-    --sz-main-txt: 1.2rem;
-    --sz-home-txt: 1.15rem;
-    --sz-h1: clamp(2rem, 1rem + 5vw, 3rem);
-    --sz-h2: clamp(1.55rem, 1rem + 3vw, 2.15rem);
-    --sz-h3: clamp(1.55rem, 1rem + 3vw, 1.8rem);
-    --sz-h4: clamp(1.4rem, 1rem + 3vw, 1.6rem);
     --sz-main-padding: clamp(1em, 5%, 1.5em);
     --sz-paragraph-margin: 1.15em;
+
+    --bs-main: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
+        0 4px 6px -4px rgb(0 0 0 / 0.2);
 }
 
 /* ------------------- */

diff --git a/assets/css/projects.css b/assets/css/projects.css
@@ -12,7 +12,7 @@
 }
 
 .project-card {
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--bs-main);
     border-radius: 0.375rem;
 }