deploy: 5147a26

helenclx · Apr 10, 2024 · 0a85c18 · 0a85c18
1 parent 6d80440
commit 0a85c18
Show file tree

Hide file tree

Showing 34 changed files with 1,452 additions and 214 deletions.
diff --git a/about/index.html b/about/index.html
@@ -38,15 +38,51 @@
 
         <link rel="stylesheet" href="/assets/css/style.css">
 
-
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> About |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    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></top-btn>
+
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
 
+
             <main class="main container">
 
 <article class="bio prose">
@@ -227,6 +264,7 @@ <h3>My Certificates:</h3>
 </article>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -161,22 +161,6 @@ button:hover {
     outline-offset: 0;
 }
 
-/* Scrool to Top Button */
-.top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 999;
-    border: none;
-    background-color: var(--clr-top-btn);
-    border-radius: 50em;
-    padding: 0.5em;
-}
-
-.top-btn img {
-    width: 2rem;
-}
-
 /* Footer Style */
 
 .footer {

diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html
@@ -38,15 +38,51 @@
 
         <link rel="stylesheet" href="/assets/css/style.css">
 
-
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;about this blog&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    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></top-btn>
+
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
 
+
             <main class="main container">
 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>

diff --git a/blog/categories/cassette-beasts/index.html b/blog/categories/cassette-beasts/index.html
@@ -38,15 +38,51 @@
 
         <link rel="stylesheet" href="/assets/css/style.css">
 
-
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;cassette beasts&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    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></top-btn>
+
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
 
+
             <main class="main container">
 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>

diff --git a/blog/categories/cbpickaxe/index.html b/blog/categories/cbpickaxe/index.html
@@ -38,15 +38,51 @@
 
         <link rel="stylesheet" href="/assets/css/style.css">
 
-
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;cbpickaxe&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    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></top-btn>
+
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
 
+
             <main class="main container">
 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>

diff --git a/blog/categories/chingu/index.html b/blog/categories/chingu/index.html
@@ -38,15 +38,51 @@
 
         <link rel="stylesheet" href="/assets/css/style.css">
 
-
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;chingu&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    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></top-btn>
+
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
 
+
             <main class="main container">
 
 <nav class="blog__nav">
@@ -247,6 +284,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>