Enhance theme management and update site layout

Added RGB variables for colors and improved theme switching in JS. Updated HTML files to better fit dark theme and revamped the site layout, including navigation links and styling for better consistency across pages.
MatejMa2ur · Oct 10, 2024 · f3f3781 · f3f3781
1 parent 040d274
commit f3f3781
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 34 deletions.
diff --git a/about-me.html b/about-me.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,18 +8,13 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
     <link rel="stylesheet" HREF="style/style.css">
-    <style>
-        .links{
-            position: absolute;
-        }
-    </style>
 </head>
-<body class="yellow">
-<div class="container position-relative vh-100 pt-5">
+<body class="p-0 m-0">
+<div class="screen">
     <div class="p-sm-5">
         <div class="border border-2 border-dark text-center p-5">
-            <div class="rounded-pill border border-2 border-dark m-auto p-2 mb-4 yellow user-image">
-                <img src="img/Me.png" class="img-fluid rounded-pill">
+            <div class="rounded-pill border border-2 border-dark m-auto mb-4 yellow user-image" style="width: 9em; height: 9em; padding: 0.5em">
+                <img src="img/Me.png" class="img-fluid rounded-pill" style="max-width: 7.8em; max-height: 7.8em">
             </div>
             <h1 class="h1 nordic">Matej Mazur</h1>
             <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-4">
@@ -45,11 +40,15 @@ <h4 class="h4 fw-light">Student interested in learning new things and sharing my
         </div>
 
     </div>
-    <div class="links nordic">
-        <a href="index.html"
-           class="b" style="margin-right: 8%;">Home</a>
-        <a href="projects.html"
-           class="b">Projects</a>
+    <div class="position-absolute top-0 end-0">
+        <div class="d-flex flex-column links nordic">
+            <a href="index.html"
+               class="b" style="margin-right: 8%;">Home</a>
+            <a href="projects.html"
+               class="b" style="margin-right: 8%;">Projects</a>
+            <a href="#"
+               class="b">About Me</a>
+        </div>
     </div>
 </div>
 

diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
@@ -16,7 +16,7 @@
 
     <link rel="stylesheet" HREF="style/style.css" >
 </head>
-<body class="p-0 m-0" data-bs-theme="light">
+<body class="p-0 m-0">
 <div class="screen">
     <div class="h-100 d-flex flex-column flex-sm-row align-sm-items-center">
         <div class="col-sm-6 d-flex justify-content-sm-center align-items-sm-center">
@@ -54,6 +54,8 @@ <h2 class="fw-black roboto h1 display-1 text-body-secondary" style="font-weight:
     </div>
     <div class="position-absolute top-0 end-0">
         <div class="d-flex flex-column links nordic">
+            <a href="#"
+               class="b" style="margin-right: 8%;">Home</a>
             <a href="projects.html"
                class="b" style="margin-right: 8%;">Projects</a>
             <a href="about-me.html"

diff --git a/js/script.js b/js/script.js
@@ -7,11 +7,18 @@ const toggleTheme = () => {
     sessionStorage.setItem('theme', newTheme);
 };
 
-// Add event listener to the theme switcher button
-document.getElementById('theme-switcher').addEventListener('click', toggleTheme);
-
-// Check session storage for saved theme on page load
-window.addEventListener('DOMContentLoaded', () => {
+// Function to apply the saved theme on page load
+const applySavedTheme = () => {
     const savedTheme = sessionStorage.getItem('theme') || 'light';
     document.body.setAttribute('data-bs-theme', savedTheme);
+};
+
+// Add event listener to the theme switcher button if it exists
+document.addEventListener('DOMContentLoaded', () => {
+    applySavedTheme();
+
+    const themeSwitcher = document.getElementById('theme-switcher');
+    if (themeSwitcher) {
+        themeSwitcher.addEventListener('click', toggleTheme);
+    }
 });
diff --git a/projects.html b/projects.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -16,7 +16,20 @@
         }
     </style>
 </head>
-<body class="yellow vh-100 flex-column">
+<body class="p-0 m-0">
+<div class="screen">
+
+    <div class="position-absolute top-0 end-0">
+        <div class="d-flex flex-column links nordic">
+            <a href="index.html"
+               class="b" style="margin-right: 8%;">Home</a>
+            <a href="#"
+               class="b" style="margin-right: 8%;">Projects</a>
+            <a href="about-me.html"
+               class="b">About Me</a>
+        </div>
+    </div>
+
 <!-- My projects -->
 <div class="container pt-5">
     <div class="border border-2 border-dark text-center p-5">
@@ -28,7 +41,7 @@ <h1 class="nordic h1 text-center">My projects</h1>
             <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
         </div>
 
-        <p class="container">
+        <p class="container roboto">
             These are all the project I have created over the years of coding.
         </p>
     </div>
@@ -57,7 +70,7 @@ <h2 class="nordic h2 text-center">Hack The Flag</h2>
                  class="border border-2 border-dark"></div>
             <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
         </div>
-        <p class="container">
+        <p class="container roboto">
             Hack the Flag is a competition for anyone who likes to solve ciphers. The competition aims to promote the
             world of cryptography and encourage people to learn more about it.
             The competition will test your skills in solving ciphers and how quickly you can do it.
@@ -91,7 +104,7 @@ <h2 class="nordic h2 text-center">Y-A-S</h2>
                  class="border border-2 border-dark"></div>
             <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
         </div>
-        <p class="container">
+        <p class="container roboto">
             Y-A-S is a group of people who are interested in creating a solution for real life problems.
             I started this alone during high school, but soon I found more people to join and started creating a community out of it.
         </p>
@@ -108,13 +121,6 @@ <h2 class="nordic h2 text-center">Y-A-S</h2>
     </div>
 </div>
 
-<!-- Menu -->
-
-<div class="links nordic">
-    <a href="index.html"
-       class="b" style="margin-right: 8%;">Home</a>
-    <a href="about-me.html"
-       class="b">About Me</a>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

diff --git a/style/style.css b/style/style.css
@@ -17,7 +17,9 @@ body, .nordic {
     --light-200: #ACCBE1;
     --light-300: #7C98B3;
     --yellow: #F4C244;
+    --yellow-rgb: 244, 194, 68;
     --gray: #222529;
+    --gray-rgb: 34, 37, 41;
 }
 
 html {
@@ -34,12 +36,14 @@ body[data-bs-theme="light"] {
     --bs-body-color: var(--light-300);
     --bs-emphasis-color: var(--light-200);
     --bs-secondary-color: var(--gray);
+    --bs-dark-rgb: var(--gray-rgb);
 }
 body[data-bs-theme="dark"] {
     --bs-body-bg: var(--gray);
     --bs-body-color: var(--light-300);
     --bs-emphasis-color: var(--light-200);
     --bs-secondary-color: var(--yellow);
+    --bs-dark-rgb: var(--yellow-rgb);
 }
 
 .screen{
@@ -88,6 +92,7 @@ svg#theme-switcher {
     }
     .tilt-text h2 {
         transform: rotate(-45deg);
+        margin-bottom: 0.5em;
         margin-left: -0.5em;
     }
     svg#theme-switcher {