modified styling for index, fixed imports for coursework, added retur…

…n to top of page to all scrollable pages
jonathanzhou1 · Nov 13, 2023 · e62f94f · e62f94f
1 parent 31af85e
commit e62f94f
Show file tree

Hide file tree

Showing 13 changed files with 894 additions and 315 deletions.
diff --git a/blog-posts/charity.html b/blog-posts/charity.html
@@ -34,6 +34,34 @@
             <h1 class="display-4">God, <i>Gilead</i>, and the Gift of Charity</h1>
             <p class="lead">Should we love people regardless of whether or not they are deserving of love? Should loving the unlovable be deemed practical and laudable?</p>
         </div>
+
+        <div class="tag">
+            <button onclick="topFunction()" id="topBtn" title="Return to top">Top &#8593</button>
+        </div>
+
+        <script>
+            let topButton = document.getElementById("topBtn");
+            var tag = $(".tag");
+
+            window.onscroll = function() {scrollFunction()};
+
+            function scrollFunction() {
+                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)
+                {
+                    $(tag).addClass("visible");
+                }
+                else
+                {
+                    $(tag).removeClass("visible");
+                }
+            }
+
+            function topFunction() {
+                document.body.scrollTop = 0;
+                document.documentElement.scrollTop = 0;
+            }
+        </script>
+
         <div class="container">
             <main>
                 <div>

diff --git a/blog-posts/eros.html b/blog-posts/eros.html
@@ -34,6 +34,34 @@
             <h1 class="display-4">The Pursuit of Passion</h1>
             <p class="lead">What is Eros, or romantic love? A comparison between C.S. Lewis and Alice Munros' perspectives, and my own.</p>
         </div>
+
+        <div class="tag">
+            <button onclick="topFunction()" id="topBtn" title="Return to top">Top &#8593</button>
+        </div>
+
+        <script>
+            let topButton = document.getElementById("topBtn");
+            var tag = $(".tag");
+
+            window.onscroll = function() {scrollFunction()};
+
+            function scrollFunction() {
+                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)
+                {
+                    $(tag).addClass("visible");
+                }
+                else
+                {
+                    $(tag).removeClass("visible");
+                }
+            }
+
+            function topFunction() {
+                document.body.scrollTop = 0;
+                document.documentElement.scrollTop = 0;
+            }
+        </script>
+
         <div class="container">
             <main>
                 <div>

diff --git a/blog-posts/life.html b/blog-posts/life.html
@@ -72,6 +72,34 @@
     >
       <h1 class="display-4">Life</h1>
     </div>
+
+    <div class="tag">
+            <button onclick="topFunction()" id="topBtn" title="Return to top">Top &#8593</button>
+        </div>
+
+        <script>
+            let topButton = document.getElementById("topBtn");
+            var tag = $(".tag");
+
+            window.onscroll = function() {scrollFunction()};
+
+            function scrollFunction() {
+                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)
+                {
+                    $(tag).addClass("visible");
+                }
+                else
+                {
+                    $(tag).removeClass("visible");
+                }
+            }
+
+            function topFunction() {
+                document.body.scrollTop = 0;
+                document.documentElement.scrollTop = 0;
+            }
+        </script>
+
     <div class="container">
       <main>
         <div>

diff --git a/blog-posts/symposium.html b/blog-posts/symposium.html
@@ -34,6 +34,34 @@
             <h1 class="display-4">A Student's Symposium</h1>
             <p class="lead">A discussion on love, charity, and friendship.</p>
         </div>
+
+        <div class="tag">
+            <button onclick="topFunction()" id="topBtn" title="Return to top">Top &#8593</button>
+        </div>
+
+        <script>
+            let topButton = document.getElementById("topBtn");
+            var tag = $(".tag");
+
+            window.onscroll = function() {scrollFunction()};
+
+            function scrollFunction() {
+                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)
+                {
+                    $(tag).addClass("visible");
+                }
+                else
+                {
+                    $(tag).removeClass("visible");
+                }
+            }
+
+            function topFunction() {
+                document.body.scrollTop = 0;
+                document.documentElement.scrollTop = 0;
+            }
+        </script>
+
         <div class="container">
             <main>
                 <div>

diff --git a/coursework.css b/coursework.css
@@ -1,85 +1,87 @@
 body {
-    background-color: rgb(255, 254, 243) !important;
-    font-family: 'Poppins', sans-serif !important;
+  background-color: rgb(255, 254, 243) !important;
+  font-family: "Poppins", sans-serif !important;
 }
 
 .card {
-    border-radius: 8px !important;
-    min-width: 300px !important;
-    margin-bottom: 3vh !important;
-    border: 0 !important;
-    box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2) !important;
-    width: 100%;
-    padding: 30px 30px;
-    border-radius: 8px;
+  border-radius: 8px !important;
+  min-width: 300px !important;
+  margin-bottom: 3vh !important;
+  border: 0 !important;
+  box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2) !important;
+  width: 100%;
+  padding: 30px 30px;
+  border-radius: 8px;
 }
 
 #card1 {
-    background: linear-gradient(rgb(252, 250, 229), rgb(252, 250, 229) 50%, rgb(213, 247, 234) 50%, rgb(236, 245, 193) 75%, rgb(254, 226, 184));
-    background-size: 100% 200%;
-    transition: all 0.2s ease;
-    position: relative;
-    animation: down-bump 0.2s ease;
+  background: linear-gradient(
+    rgb(252, 250, 229),
+    rgb(252, 250, 229) 50%,
+    rgb(213, 247, 234) 50%,
+    rgb(236, 245, 193) 75%,
+    rgb(254, 226, 184)
+  );
+  background-size: 100% 200%;
+  transition: all 0.2s ease;
+  position: relative;
 }
 
 #card1:hover {
-    background-position: 100% 100%;
-    animation: up-bump 0.2s ease;
-    padding: 28px;
+  background-position: 100% 100%;
+  padding: 28px;
 }
 
 #card2 {
-    background: linear-gradient(rgb(252, 250, 229), rgb(252, 250, 229) 50%, rgb(213, 233, 247) 50%, rgb(214, 215, 246) 76%, rgb(228, 212, 250) 90%, rgb(230, 199, 252));
-    background-size: 100% 200%;
-    transition: all 0.2s ease;
-    position: relative;
-    animation: down-bump 0.2s ease;
+  background: linear-gradient(
+    rgb(252, 250, 229),
+    rgb(252, 250, 229) 50%,
+    rgb(213, 233, 247) 50%,
+    rgb(214, 215, 246) 76%,
+    rgb(228, 212, 250) 90%,
+    rgb(230, 199, 252)
+  );
+  background-size: 100% 200%;
+  transition: all 0.2s ease;
+  position: relative;
 }
 
 #card2:hover {
-    background-position: 100% 100%;
-    animation: up-bump 0.2s ease;
-    padding: 28px;
+  background-position: 100% 100%;
+  padding: 28px;
 }
 
 #card3 {
-    background: linear-gradient(rgb(252, 250, 229), rgb(252, 250, 229) 50%, rgb(247, 213, 213) 50%, rgb(254, 181, 181) 76%, rgb(255, 157, 157) 90%, rgb(243, 115, 115));
-    background-size: 100% 200%;
-    transition: all 0.2s ease;
-    position: relative;
-    animation: down-bump 0.2s ease;
+  background: linear-gradient(
+    rgb(252, 250, 229),
+    rgb(252, 250, 229) 50%,
+    rgb(247, 213, 213) 50%,
+    rgb(254, 181, 181) 76%,
+    rgb(255, 157, 157) 90%,
+    rgb(243, 115, 115)
+  );
+  background-size: 100% 200%;
+  transition: all 0.2s ease;
+  position: relative;
 }
 
 #card3:hover {
-    background-position: 100% 100%;
-    animation: up-bump 0.2s ease;
-    padding: 28px;
+  background-position: 100% 100%;
+  padding: 28px;
 }
 
 #card4 {
-    background: linear-gradient(rgb(252, 250, 229), rgb(252, 250, 229) 100%);
-    background-size: 100% 200%;
-    transition: all 0.2s ease;
-    position: relative;
-    animation: down-bump 0.2s ease;
+  background: linear-gradient(rgb(252, 250, 229), rgb(252, 250, 229) 100%);
+  background-size: 100% 200%;
+  transition: all 0.2s ease;
+  position: relative;
 }
 
 #card4:hover {
-    background-position: 100% 100%;
-    animation: up-bump 0.2s ease;
-    padding: 28px;
-}
-
-
-@keyframes up-bump {
-    0% { padding-top: 30px; }
-    100% { padding-top: 28px; }
-}
-@keyframes down-bump {
-    0% { padding-top: 28px; }
-    100% { padding-top: 30px; }
+  background-position: 100% 100%;
+  padding: 28px;
 }
 
 #first-page {
-    height: 100vh;
-}
+  height: 100vh;
+}
diff --git a/cs.html b/cs.html
@@ -36,6 +36,34 @@
         <div class="jumbotron text-center rounded-0" style="background: none; color: black; margin-bottom: -30px;">
             <h1 class="display-4">Coursework</h1>
         </div>
+
+        <div class="tag">
+            <button onclick="topFunction()" id="topBtn" title="Return to top">Top &#8593</button>
+        </div>
+
+        <script>
+            let topButton = document.getElementById("topBtn");
+            var tag = $(".tag");
+
+            window.onscroll = function() {scrollFunction()};
+
+            function scrollFunction() {
+                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)
+                {
+                    $(tag).addClass("visible");
+                }
+                else
+                {
+                    $(tag).removeClass("visible");
+                }
+            }
+
+            function topFunction() {
+                document.body.scrollTop = 0;
+                document.documentElement.scrollTop = 0;
+            }
+        </script>
+
         <div class="container">
             <div id="first-page">
                 <main>

diff --git a/general.css b/general.css
@@ -1,7 +1,51 @@
 html {
   scroll-behavior: smooth;
 }
-  
+
 body {
   cursor: crosshair;
-}
+}
+
+/*Scroll to top btn*/
+#topBtn {
+  display: block;
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  z-index: 99;
+  border: none;
+  outline: none;
+  color: white;
+  cursor: pointer;
+  border-radius: 8px;
+  font-size: 18px;
+
+  padding: 20px;
+  background: linear-gradient(
+    rgb(233, 227, 227),
+    rgb(233, 227, 227) 50%,
+    rgb(187, 225, 177) 50%,
+    rgb(187, 225, 177)
+  );
+  background-size: 100% 200%;
+  transition: all 0.2s ease;
+  animation: down-bump 0.2s ease;
+}
+
+#topBtn:hover {
+  background-position: 100% 100%;
+  animation: up-bump 0.2s ease;
+  padding: 19px;
+}
+
+.tag {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.4s, visibility 0.4s;
+}
+
+.tag.visible {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.4s, visibility 0.4s;
+}