Added dark mode to the website :3

tayrp · Oct 10, 2024 · 5db1d4f · 5db1d4f
1 parent e58ff52
commit 5db1d4f
Show file tree

Hide file tree

Showing 17 changed files with 189 additions and 74 deletions.
diff --git a/content/about/index.html b/content/about/index.html
@@ -53,8 +53,7 @@ <h1>Hiya, Call me Tee!</h1>
               class="social-logo"
               alt="NameMC"
           /></a>
-            <!-- <a class="btn btn-link-3" button id="aboutpauseBtn" onclick="togglePause()">⏸️</a></p> -->
-          </div>
+        </div>
         </div>
         <video autoplay loop id="aboutvideo">
           <source

diff --git a/content/pages/index.html b/content/pages/index.html
@@ -9,7 +9,8 @@
       <li><a href="/discord">Discord</a> - Redirects you to my Discord.</li>
       <li><a href="/pages">Pages</a> - Takes you to this page.</li>
       <li><a href="/credits">Credits</a> - Takes you to my credits page.</li>
-      <li><a href="/readme">README</a> - Takes you to my README page.</li>      <li>
+      <li><a href="/readme">README</a> - Takes you to my README page.</li>
+      <li>
         <a href="https://docs.mysty.one/">GitBook</a> - Takes you to my GitBook
         website.
       </li>

diff --git a/layouts/404.html b/layouts/404.html
@@ -1,13 +1,6 @@
 <main>
     <div class="about">
-      <div>
-        <div style="background: #ed9458; border-radius: 25px;
-        font-size: 20px; 
-        padding: 10px; 
-        border: 1px solid #FFFFFF; 
-        margin: 10px;
-        text-align: center;
-        vertical-align: middle;">
+      <div class="bgbox">
         <p>404</p>
         <p>Page not found, Meaning it either does not exist or is broken.</p>
         <div>

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -13,6 +13,7 @@
     <title>{{ .Title }}</title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="{{ "/assets/js/dark-mode.js" | relURL }}"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -61,6 +62,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>

diff --git a/public/about/index.html b/public/about/index.html
@@ -13,6 +13,7 @@
     <title></title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="/assets/js/dark-mode.js"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -61,6 +62,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>
@@ -122,8 +124,7 @@ <h1>Hiya, Call me Tee!</h1>
               class="social-logo"
               alt="NameMC"
           /></a>
-            <!-- <a class="btn btn-link-3" button id="aboutpauseBtn" onclick="togglePause()">⏸️</a></p> -->
-          </div>
+        </div>
         </div>
         <video autoplay loop id="aboutvideo">
           <source

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
@@ -53,6 +53,40 @@ body {
   background-size: cover;
   background-color: #36454f;
 }
+
+body.dark-mode {
+  font-family: "Vujahday Script", cursive;
+  font-size: 18px;
+  font-weight: 360;
+  color: #888;
+  line-height: 30px;
+  text-align: center;
+  background-size: cover;
+  background-color: #36454f;
+  background-image: url("../imgs/backgrounds/vecteezy_abstract-purple-gradient-texture-with-geometric-elements_7355486.jpg");
+}
+
+body.dark-mode a {
+  color: #80b3ff;
+}
+
+body.dark-mode a:hover {
+  color: #b3c7ff;
+}
+
+.btn-link-3 {
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 20px;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.btn-link-3:hover {
+  color: #b3c7ff;
+}
+
 .background-tint {
   filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(330deg);
 }
@@ -141,19 +175,19 @@ ul.navbar-nav {
   display: inline-block;
   margin: 9px 0 0 15px;
   padding: 6px 15px;
-  /* background: #b1cbcc; */
-  background: #ff96b4;
-  /* background: #ed9458; /* Halloween navbar */
+  background: #ff96b4; /* Light background */
   border: 0;
   font-size: 14px;
   font-weight: 360;
-  color: #fff;
-  /* opacity: 0.7; */
-  opacity: 10; /* Halloween Background Opacity */
+  color: #fff; /* Text color */
+  opacity: 1; /* Opacity */
   text-transform: uppercase;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  border-radius: 6px;
+  border-radius: 6px; /* Rounded corners */
+}
+
+body.dark-mode .navbar-inverse ul.navbar-nav li a.btn-link-3 {
+  background: #a81cbe; /* Darker pink background for dark mode */
+  color: #ffffff; /* Maintain white text color */
 }
 
 .navbar-brand {
@@ -174,6 +208,17 @@ a:hover {
   color: #770d88;
 }
 
+body.dark-mode a:link {
+  color: #3b001b;
+}
+
+body.dark-mode a:visited {
+  color: #3b001b;
+}
+body.dark-mode a:hover {
+  color: #1a000b;
+}
+
 /* Doctor Who List? */
 .dw1 {
   text-align: center;
@@ -282,17 +327,30 @@ aboutvideo {
   border-radius: 25px;
   font-size: 20px;
   padding: 25px;
-  border: 1px solid #FFFFFF;
+  border: 1px solid #ffffff;
   margin: 10px;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .bgboxfooter {
   background: #ff96b4;
   border-radius: 25px;
   font-size: 15px;
   padding: auto;
-  border: 1px solid #FFFFFF;
+  width: auto;
+  border: 1px solid #ffffff;
   margin: auto;
-  color: #FFFFFF;
+  color: #ffffff;
+}
+
+body.dark-mode .bgbox {
+  background: #a81cbe;
+  border: 1px solid #cccccc;
+  color: #ffffff;
+}
+
+body.dark-mode .bgboxfooter {
+  background: #a81cbe;
+  border: 1px solid #cccccc;
+  color: #ffffff;
 }
diff --git a/public/assets/js/lanyard.js b/public/assets/js/lanyard.js
@@ -11,9 +11,11 @@ fetch(apiEndpoint)
       dcstat.src =
         "/assets/imgs/status/online.png"; /* dcstat.innerHTML = "{ONLINE}" */
     } else if (dcStatus === "idle") {
-      dcstat.src = "/assets/imgs/status/away.png"; /* dcstat.innerHTML = "{AWAY}" */
+      dcstat.src =
+        "/assets/imgs/status/away.png"; /* dcstat.innerHTML = "{AWAY}" */
     } else if (dcStatus === "dnd") {
-      dcstat.src = "/assets/imgs/status/dnd.png"; /* dcstat.innerHTML = "{DND}" */
+      dcstat.src =
+        "/assets/imgs/status/dnd.png"; /* dcstat.innerHTML = "{DND}" */
     }
   })
   .catch((error) => {

diff --git a/public/credits/index.html b/public/credits/index.html
@@ -13,6 +13,7 @@
     <title></title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="/assets/js/dark-mode.js"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -51,15 +52,6 @@
             />
             <script src="/assets/js/lanyard.js"></script>
           </a>
-          <a
-            style="margin-left: 59px; margin-top: 7px; display: inline-block"
-            href="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml"
-          >
-            <img
-              src="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml/badge.svg?branch=main"
-              alt="Deploy Hugo site to Pages"
-            />
-          </a>
           <link rel="home" href="/" />
         </div>
         <div class="collapse navbar-collapse" id="top-navbar-1">
@@ -70,6 +62,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>
@@ -89,7 +82,7 @@
 
     <footer>
       <div class="container">
-        <div class="bgbox">
+        <div class="bgboxfooter">
           <div class="row">
             &copy;
             <b

diff --git a/public/discord/index.html b/public/discord/index.html
@@ -13,6 +13,7 @@
     <title></title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="/assets/js/dark-mode.js"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -51,15 +52,6 @@
             />
             <script src="/assets/js/lanyard.js"></script>
           </a>
-          <a
-            style="margin-left: 59px; margin-top: 7px; display: inline-block"
-            href="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml"
-          >
-            <img
-              src="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml/badge.svg?branch=main"
-              alt="Deploy Hugo site to Pages"
-            />
-          </a>
           <link rel="home" href="/" />
         </div>
         <div class="collapse navbar-collapse" id="top-navbar-1">
@@ -70,6 +62,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>
@@ -144,7 +137,7 @@ <h3 id="pageBeginCountdownText" class="clock">3</h3>
 
     <footer>
       <div class="container">
-        <div class="bgbox">
+        <div class="bgboxfooter">
           <div class="row">
             &copy;
             <b

diff --git a/public/index.html b/public/index.html
@@ -14,6 +14,7 @@
     <title>tees website</title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="/assets/js/dark-mode.js"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -62,6 +63,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>

diff --git a/public/pages/index.html b/public/pages/index.html
@@ -13,6 +13,7 @@
     <title></title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="/assets/js/dark-mode.js"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -51,15 +52,6 @@
             />
             <script src="/assets/js/lanyard.js"></script>
           </a>
-          <a
-            style="margin-left: 59px; margin-top: 7px; display: inline-block"
-            href="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml"
-          >
-            <img
-              src="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml/badge.svg?branch=main"
-              alt="Deploy Hugo site to Pages"
-            />
-          </a>
           <link rel="home" href="/" />
         </div>
         <div class="collapse navbar-collapse" id="top-navbar-1">
@@ -70,6 +62,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>
@@ -87,7 +80,8 @@
       <li><a href="/discord">Discord</a> - Redirects you to my Discord.</li>
       <li><a href="/pages">Pages</a> - Takes you to this page.</li>
       <li><a href="/credits">Credits</a> - Takes you to my credits page.</li>
-      <li><a href="/readme">README</a> - Takes you to my README page.</li>      <li>
+      <li><a href="/readme">README</a> - Takes you to my README page.</li>
+      <li>
         <a href="https://docs.mysty.one/">GitBook</a> - Takes you to my GitBook
         website.
       </li>
@@ -102,7 +96,7 @@
 
     <footer>
       <div class="container">
-        <div class="bgbox">
+        <div class="bgboxfooter">
           <div class="row">
             &copy;
             <b