fix: dark mode button

alfrdkang · Nov 2, 2023 · 32d55d4 · 32d55d4
1 parent 23690c0
commit 32d55d4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="script.js"></script>
     <script src="https://kit.fontawesome.com/c14073a443.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" type="text/css" href="style.css"/>
@@ -10,18 +11,19 @@
     <header>
       <nav>
         <ul class='navBar'>
-          <li class='navItem'><a href="#">Week1</a></li>
-          <li class='navItem'><a href="#">Week2</a></li>
-          <li class='navItem'><a href="#">Week3</a></li>      
-          <li class='navTheme'><button onclick="modeSwitch()">
-            <i class="fa-solid fa-circle-half-stroke icon-4x"></i></button>
+          <li class='navItem'><a href="#week1">Week1</a></li>
+          <li class='navItem'><a href="#week2">Week2</a></li>
+          <li class='navItem'><a href="#week3">Week3</a></li>      
+          <li class='navTheme'><span onclick="modeSwitch()">
+            <i class="fa-solid fa-circle-half-stroke icon-4x"></i></span>
           </li>      
         </ul>
       </nav>
       <h1><br><br>Alfred's Web Development Blog!</h1> 
       <p>Featuring my thoughts and findings as I learn how to (front end) develop websites</p>
     </header>
 
+    <h2 id="week1">Week 1: Introduction</h2>
     <section>
       <h2>The 3 Core Pillars of a Website</h2> 
       <img style="background-color: #F7F7F7;" src="Images/websitepillars.png" alt="HTML, JS, CSS">
@@ -59,6 +61,10 @@ <h5>An HTML element is defined by a start tag, some content, and an end tag</h5>
         <p>Lorem ipsum dolor sit amet. Cum earum velit ex iure consequatur est ducimus quis aut enim distinctio et voluptas dolor quo animi repellat. Sit eveniet officiis sed perspiciatis quos non recusandae nemo aut quam amet! Id quas vero eum nulla omnis et tenetur dolores vel placeat accusamus et quas voluptatum. </p><p>Sit voluptatum dignissimos sed nemo veritatis eum quia vitae nam nulla nihil est quia harum vel quibusdam ducimus. Et magnam modi aut autem tempora est autem voluptas et veritatis officia ex sequi nemo 33 amet tempora aut reprehenderit nihil. </p><p>Rem alias fuga quo nesciunt earum et laudantium officia id accusantium voluptas ut impedit quaerat rem tempora pariatur nam quos debitis. Eum enim nostrum et minima optio et dolorum numquam qui libero possimus sit eveniet rerum rem aliquid voluptatem. Eos commodi totam et tempore nulla ut sint quibusdam? </p>
       </section>
 
+    <h2 id="week2">Week 2: Semantic CSS</h2>
+
+    <h2 id="week3">Week 3: Forms Advanced CSS Layouts</h2>
+
     <footer>
       <p>&copy; 2023 Web Development Blog</p>
       <p>Follow me on <a href="#">Github</a>, <a href="#">Instagram</a> and <a href="#">Linkedin</a></p>

diff --git a/script.js b/script.js
@@ -1,4 +1,8 @@
 function modeSwitch() {
     var element = document.body;
-    element.classList.toggle("dark-mode");
+    element.classList.toggle("light-mode");
+  }
+
+  window.onbeforeunload = function () {
+    window.scrollTo(0, 0);
   }
diff --git a/style.css b/style.css
@@ -50,11 +50,11 @@ img {
 body {
     max-width: 800px;
     margin: auto;
-    background-color: #F7F7F7;
-    color: #393E46
+    background-color: #393E46;
+    color: #F7F7F7
   }
 
-.dark-mode {
-  background-color: #393E46;
-  color: #F7F7F7;
+.light-mode {
+  background-color: #F7F7F7;
+  color: #393E46;
 }