Improve Design Done (#358)

* changed colors when toggle: light and dark mode

* displays menu when click menu icon

* added all links to menu

* change menu icon color when toggle mode

* added moire links to menu

* open and close menu working

* close menu icon changes color when toggle mode

* menu-display flex instead of block

* backdrop filter

* styled header

* added img

* i dont know why there are 2 toggle buttons, i did display none in the second one

* styling

* styled toggle mode buton

* styled menu

* styles

* styling

* styled lyrics page

* styled you might also like

* styled different pages

* styled more pages

* styled photo gallery (toggle mode doesnt owrk

* styled rate sogn page

* changed ratings title page

* toggle mode works in all pages

* menu appear and desappear smoothly

* go back arrow moves smootly

* fixed small bug in style

* more styling

* shows range input for rating

* mobile design

* snow effect

* picture effect

* pic effect in lyrics page

* remove pic effect from mobile version

* styled each lyrics page

* more styling

* styling mobile version

* changed color xmas countdown

* styled youtube video lyrics

* almost done with styling, need to center things better

* hover effect for buttons

* styling header icon

* added switch input styling to css file

* added role=switch to toggle mode button

credits/styles.css

@@ -11,10 +11,6 @@ body {
   text-align: center;
 }
 
-h1 {
-  color: blue;
-  font-family: "Handlee", cursive;
-}
 
 a:visited {
   color: blue;

index.js

@@ -31,9 +31,8 @@ const songs = {
 };
 const songsDOM = document.querySelector(".songs");
 const embed = document.getElementById("embed");
-const newTabGithub = document.querySelector(".social");
+const newTabGithub = document.getElementById('grey');
 const toggle = document.getElementById("round");
-const toggle1 = document.getElementById("round1");
 const slider = document.querySelector(".slider");
 const audioControls = document.querySelector(".audio-controls");
 const loader = document.querySelector("#loader");
@@ -48,13 +47,14 @@ const canvasHead = document.getElementById("canvasHead");
 const navB = document.getElementById("navB");
 const switchh = document.getElementById("switch");
 let christmasCountdown = document.getElementById("christmasDayCountdown");
+const body = document.getElementById("body")
 let player;
 let currSong;
 let songList = [];
 let playedNext = true;
 let intervalId;
 toggle.addEventListener("click", modeSwitch);
-toggle1.addEventListener("click", modeSwitch);
+// toggle1.addEventListener("click", modeSwitch);
 
 // Darkmode/Lightmode + Making songs play when clicked
 let isLight = localStorage.getItem("darkmode") === "false";
@@ -69,26 +69,37 @@ newTabGithub.addEventListener("click", () => {
   );
 });
 
+document.getElementById('closed-menu-icon').addEventListener('click', displayMenu)
+document.getElementById('open-menu-icon').addEventListener('click', closeMenu)
+
 const updateMode = () => {
   const rootElement = document.body;
-  if (isLight) {
-    slider.style.backgroundImage = "url('./images/light.png')";
-    toggle1.style.backgroundImage = "url('./images/light.png')";
-    canvasBody.style.backgroundColor = "#fdd7d1";
-    canvasHead.style.backgroundColor = "#fdd7d1";
-    navB.style.backgroundColor = "#fdd7d1c4";
+  if (!isLight) {
+    canvasBody.style.backgroundColor = "#F8F6EE";
+    canvasHead.style.backgroundColor = "#F8F6EE";
+    body.style.backgroundColor = "#F8F6EE";
+    // navB.style.backgroundColor = "#F8F6EE";
+    document.getElementById('line-1').style.stroke = "#272B2E";
+    document.getElementById('line-2').style.stroke = "#272B2E";
+    document.getElementById('line-3').style.stroke = "#272B2E";
+    document.getElementById('line-4').style.stroke = "#272B2E";
+    document.getElementById('line-5').style.stroke = "#272B2E";
     rootElement.classList.remove("darkMode");
   } else {
-    slider.style.backgroundImage = "url('./images/dark.png')";
-    toggle1.style.backgroundImage = "url('./images/dark.png')";
-    canvasBody.style.backgroundColor = "#dadada";
-    canvasHead.style.backgroundColor = "#dadada";
-    navB.style.backgroundColor = "#e1e1e1c4";
+    canvasBody.style.backgroundColor = "#272B2E";
+    canvasHead.style.backgroundColor = "#272B2E";
+    body.style.backgroundColor = "#272B2E";
+    // navB.style.backgroundColor = "#272B2E";
+    document.getElementById('line-1').style.stroke = "#F8F6EE";
+    document.getElementById('line-2').style.stroke = "#F8F6EE";
+    document.getElementById('line-3').style.stroke = "#F8F6EE";
+    document.getElementById('line-4').style.stroke = "#F8F6EE";
+    document.getElementById('line-5').style.stroke = "#F8F6EE";
     rootElement.classList.add("darkMode");
-    christmasCountdown.style.background = "rgba(235, 235, 235, 0.05)";
   }
 
 };
+window.addEventListener("load", updateMode)
 
 function modeSwitch() {
   isLight = !isLight;
@@ -307,3 +318,17 @@ function clearTimeLeft() {
     a[i].classList.remove("active");
   }
 }
+
+function displayMenu(){
+  document.getElementById('menu-display').style.display = 'flex'
+  document.getElementById('menu-display').style.animationName = 'appear'
+  document.getElementById('closed-menu-icon').style.display = 'none'
+  document.getElementById('open-menu-icon').style.display = 'block'
+}
+function closeMenu(){
+  document.getElementById('menu-display').style.animationName = 'desappear'
+  document.getElementById('closed-menu-icon').style.display = 'block'
+  document.getElementById('open-menu-icon').style.display = 'none'
+  const displayToNone = () => document.getElementById('menu-display').style.display = 'none'
+  setTimeout(displayToNone, 1000)
+}

ludsocials/index.html

@@ -10,27 +10,47 @@
       <script src="https://kit.fontawesome.com/72f2609661.js" crossorigin="anonymous"></script>
    </head>
    <body class="lyrics">
-      <div id="header">
-         <h1 class="ludsocials-heading">Ludwig's Socials</h1>
-         <div id="switch">
-            <label class="switch">
-            <input type="checkbox">
-            </label>
-         </div>
-      </div>
-      <div class="lud-socials">
-         <p><a href="https://open.spotify.com/artist/7dicaSC16N5UkDPLfojKhX" target="_blank">Spotify <i class="fab fa-spotify" style="color:#1DB954 "></i></a></p>
-         <p><a href="https://music.apple.com/id/artist/ludwig-ahgren/1543744765" target="_blank">Apple Music <i class="fas fa-music" style="color:purple "></i></a></p>
-         <p><a href="https://youtube.com/MrAndersLA" target="_blank">YouTube <i class="fab fa-youtube" style="color:red "></i> </a></p>
-         <p><a href="https://twitter.com/LudwigAhgren" target="_blank">Twitter <i class="fab fa-twitter" style="color:#00ACEE "></i></a></p>
-         <p><a href="https://www.instagram.com/ludwigahgren" target="_blank">Instagram <i class="fab fa-instagram" style="color:#8A3AB9 "></i></a></p>
-         <p><a href="https://twitch.tv/ludwig" target="_blank">Twitch <i class="fab fa-twitch" style="color:purple "></i></a></p>
-         <p><a href="https://ludwig.gg" target="_blank">Merch <i class="fa fa-globe"></i></a></p>
-         <p><a href="https://www.tiktok.com/@ludwig?lang=en" target="_blank">TikTok <i class="fab fa-tiktok"></i></a></p>
-         <p><a href="/ludsocials/podcasts" target="_blank">Podcast/Podcast Socials <i class="fas fa-podcast" style="color:crimson "></i></a></p>
-      </div>
-      <div id="official" class="button">
-         <a href="https://wlo.link/@ludwig" target="_blank" id="official-btn" class="btn"> Official Link-Tree Page
-      </div>
+      <header>
+         <a href="../index.html">
+         <svg width="40" height="40" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+           <path class='arrow' d="M0.792893 6.79289C0.402369 7.18342 0.402369 7.81658 0.792893 8.20711L7.15685 14.5711C7.54738 14.9616 8.18054 14.9616 8.57107 14.5711C8.96159 14.1805 8.96159 13.5474 8.57107 13.1569L2.91421 7.5L8.57107 1.84315C8.96159 1.45262 8.96159 0.819456 8.57107 0.428932C8.18054 0.0384079 7.54738 0.0384079 7.15685 0.428932L0.792893 6.79289ZM18.5 8.5C19.0523 8.5 19.5 8.05228 19.5 7.5C19.5 6.94772 19.0523 6.5 18.5 6.5V8.5ZM1.5 8.5H18.5V6.5H1.5V8.5Z" fill="#496C42"/>
+           </svg>
+         </a> 
+         <h1 class="h1">Ludwig's Socials</h1>
+
+               <!-- Toggler Outside Menu -->
+               <div id="header">
+                 <div id="switch">
+                    <label role='switch' class="switch">
+                      <input class="switch-input" type="checkbox" />
+                     <span class="switch slider round" id="round"></span>
+                   </label>
+                 </div>
+               </div>
+         </header>
+         <main>
+            <section id='img-section'>
+              <img id='home-page-img' src="../images/second-family-pic.png" />
+            </section>
+            <section id=song-section>
+               <div class="lud-socials">
+                  <p><a href="https://open.spotify.com/artist/7dicaSC16N5UkDPLfojKhX" target="_blank">Spotify <i class="fab fa-spotify" style="color:#1DB954 "></i></a></p>
+                  <p><a href="https://music.apple.com/id/artist/ludwig-ahgren/1543744765" target="_blank">Apple Music <i class="fas fa-music" style="color:purple "></i></a></p>
+                  <p><a href="https://youtube.com/MrAndersLA" target="_blank">YouTube <i class="fab fa-youtube" style="color:red "></i> </a></p>
+                  <p><a href="https://twitter.com/LudwigAhgren" target="_blank">Twitter <i class="fab fa-twitter" style="color:#00ACEE "></i></a></p>
+                  <p><a href="https://www.instagram.com/ludwigahgren" target="_blank">Instagram <i class="fab fa-instagram" style="color:#8A3AB9 "></i></a></p>
+                  <p><a href="https://twitch.tv/ludwig" target="_blank">Twitch <i class="fab fa-twitch" style="color:purple "></i></a></p>
+                  <p><a href="https://ludwig.gg" target="_blank">Merch <i class="fa fa-globe"></i></a></p>
+                  <p><a href="https://www.tiktok.com/@ludwig?lang=en" target="_blank">TikTok <i class="fab fa-tiktok"></i></a></p>
+                  <p><a href="/ludsocials/podcasts" target="_blank">Podcast/Podcast Socials <i class="fas fa-podcast" style="color:crimson "></i></a></p>
+               </div>
+               <div id="official" class="button">
+                  <a href="https://wlo.link/@ludwig" target="_blank" id="official-btn" class="btn"> Official Link
+               </div>
+            </section>
+        </main>
+
    </body>
+   <script type="text/javascript" src="/lyrics/darkmode.js"></script>
+   <script type="text/javascript" src="../index.js"></script>
 </html>

ludsocials/podcasts/styles.css

@@ -20,13 +20,6 @@ body {
   /* Internet Explorer/Edge */
 }
 
-h1 {
-  font-family: "Menlo", monospace;
-  font-size: 22px;
-  font-weight: 400;
-  margin: 0;
-  color: #2f5876;
-}
 
 a:link,
 a:visited {

ludsocials/styles.css

@@ -1,8 +1,10 @@
-html,
-body {
-  background: url(/images/linktree-bg.png) no-repeat center center fixed;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
+#official-btn {
+    color: white;
+}
+
+@media screen and (max-width: 763px){
+    .h1 {
+      font-size: 20px;
+    }
+
+  }