deploy: dc20f9e

helenclx · Jun 10, 2024 · 2d630c1 · 2d630c1
1 parent 49a6cb1
commit 2d630c1
Show file tree

Hide file tree

Showing 54 changed files with 2,809 additions and 500 deletions.
diff --git a/404.html b/404.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-
+
 
 <header class="header">
     <h2 class="header__title">
@@ -244,13 +243,13 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                <h2 class="heading--main text-center">Oops! Content not found.</h2>
+        <main id="content">
+            <h2 class="heading--main text-center">Oops! Content not found.</h2>
 
 <p class="text-center">Go back to <a href="/">home page</a>.</p>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -296,6 +295,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -366,7 +413,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
diff --git a/about/index.html b/about/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-
+
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+
 <header class="main__header">
 
     <nav>
@@ -284,8 +283,8 @@ <h2>My Certificates:</h2>
 
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -331,6 +330,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -401,7 +448,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
diff --git a/accessibility/index.html b/accessibility/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -48,8 +48,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-
+
 
 <header class="header">
     <h2 class="header__title">
@@ -247,8 +246,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+
 <header class="main__header">
 
 
@@ -295,8 +294,8 @@ <h1 class="heading--main">Accessibility</h1>
 
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -342,6 +341,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -412,7 +459,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
diff --git a/assets/css/components.css b/assets/css/components.css
@@ -19,36 +19,6 @@
     outline: 0.2em solid var(--clr-accent-600);
 }
 
-/* Back to top button */
-.top-btn {
-    --offset: 100px;
-    position: sticky;
-    bottom: 0.5rem;
-    margin-right: 0.5rem;
-    place-self: end;
-    margin-top: calc(100vh + var(--offset));
-    z-index: 999;
-
-    width: 2rem;
-    aspect-ratio: 1;
-    background: var(--clr-top-btn-bg);
-    border-radius: 50em;
-}
-
-.top-btn:before {
-    content:"";
-    position: absolute;
-    inset: 30%;
-    transform: translateY(20%) rotate(-45deg);
-    border-top: 5px solid var(--clr-top-btn-txt);
-    border-right: 5px solid var(--clr-top-btn-txt);
-}
-
-.top-btn:focus {
-    outline: 0.25em solid var(--clr-top-btn-bg);
-    outline-offset: 0.15em;
-}
-
 /* Breadcumbs */
 .breadcrumbs {
     list-style: none;

diff --git a/assets/css/general.css b/assets/css/general.css
@@ -8,9 +8,8 @@ html {
 body {
     color: var(--clr-txt-default);
     background-color: var(--clr-body-bg);
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     display: grid;
-    grid-template-columns: 0px auto 0px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 main {