Added crucial style related features

Made the following changes: - Added light-mode that changes based on browser theme - Fixed style-related issues concerning the projects page - Refactored code - Fixed an issue where the LastFM music details were hidden when there was enough space to show them -
JonasunderscoreJones · Sep 27, 2023 · 7e9110d · 7e9110d
1 parent 0923936
commit 7e9110d
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 36 deletions.
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -2,11 +2,16 @@
   <p>Website by Jonas_Jones 2021 - 2023</p>
 </div>
 
+<script>
+  //import main css file
+  import "../routes/+page.css";
+</script>
+
 <style>
   .footer {
     height: 1rem;
-    background-color: #000;
-    color: #fff;
+    background-color: var(--footer-background-color);
+    color: var(--footer-font-color);
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
@@ -146,7 +146,7 @@
     position: absolute;
     width: 100%;
     height: 4px;
-    background-color: #fff;
+    background-color: var(--header-font-color);
     border-radius: 4px;
     transition: transform 0.3s, opacity 0.3s;
   }
@@ -178,7 +178,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: var(--nav-menu-background-color);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -199,7 +199,7 @@
     top: 1px;
     left: 1px;
     font-size: 24px;
-    color: #fff;
+    color: var(--header-font-color);
     cursor: pointer;
   }
 
@@ -216,13 +216,13 @@
   }
 
   .links a {
-    color: #fff;
+    color: var(--header-font-color);
     text-decoration: none;
     font-size: 18px;
   }
 
   .navbar {
-    background-color: #2023247c;
+    background-color: var(--header-background-color);
     padding: 10px;
     padding-top: 0;
     padding-bottom: 0;
@@ -271,13 +271,13 @@
 
   a {
     text-decoration: none;
-    color: #ffffff;
+    color: var(--header-font-color);
     padding: 5px;
     font-size: 23px;
   }
 
   a:hover {
-    color: #ddd;
+    color: var(--header-font-color-hover);
   }
 
   .lastfm {
@@ -299,7 +299,7 @@
     overflow: hidden;
   }
   .lastfm:hover {
-    background-color: #202324;
+    background-color: var(--header-background-color-hover);
   }
   .lastfm img {
     width: 30px;
@@ -366,10 +366,6 @@
   }
 
   @media only screen and (max-width: 900px) and (min-width: 650px) {
-    .lastfm #lastfm_title,
-    .lastfm #lastfm_artist {
-      display: none;
-    }
     .lastfm {
       width: 50px;
     }
@@ -379,6 +375,9 @@
   }
 
   @media only screen and (max-width: 650px) and (min-width: 375px) {
+    .lastfm-text {
+      display: block;
+    }
     .nav-links {
       display: none;
     }
@@ -395,10 +394,6 @@
   }
 
   @media only screen and (max-width: 375px) and (min-width: 300px) {
-    .lastfm #lastfm_title,
-    .lastfm #lastfm_artist {
-      display: none;
-    }
     .lastfm {
       width: 50px;
     }
@@ -414,10 +409,6 @@
   }
 
   @media only screen and (max-width: 300px) and (min-width: 0px) {
-    .lastfm #lastfm_title,
-    .lastfm #lastfm_artist {
-      display: none;
-    }
     .lastfm {
       width: 50px;
     }

diff --git a/src/routes/+page.css b/src/routes/+page.css
@@ -10,26 +10,69 @@
 
 }
 
+:root {
+	--background-color: #202324;
+  --font-color: rgb(0, 255, 0);
+  --font-hover-color: green;
+  --header-background-color: rgba(0, 0, 0, 0.4);
+  --header-background-color-hover: #202324;
+  --header-font-color: white;
+  --header-font-color-hover: #ddd;
+  --image-filter: none;
+  --footer-background-color: #000;
+  --footer-font-color: #fff;
+  --projects-background-color: rgba(0, 0, 0, 0.8);
+  --project-border-color: white;
+  --project-link-color: white;
+  --project-link-color-hover: #666;
+  --project-search-background-color: rgba(0, 0, 0, 0.678);
+  --project-search-input-font-color: white;
+  --nav-menu-background-color: rgba(0, 0, 0, 0.8)
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--background-color: #dfdcdb;
+    --font-color: green;
+    --font-hover-color: rgb(0, 255, 0);
+    --header-background-color: rgba(255, 255, 255, 0.5);
+    --header-background-color-hover: #ddd;
+    --header-font-color: black;
+    --header-font-color-hover: #333;
+    --image-filter: invert(0.8);
+    --footer-background-color: #fff;
+    --footer-font-color: #000;
+    --projects-background-color: rgba(255, 255, 255, 0.4);
+    --project-border-color: black;
+    --project-link-color: white;
+    --project-link-color-hover: #666;
+    --project-search-background-color: rgba(255, 255, 255, 0.5);
+    --project-search-input-font-color: black;
+    --nav-menu-background-color: rgba(255, 255, 255, 0.8)
+	}
+}
+
+
 html {
   font-family: 'sary_soft_semiboldregular';
   margin: 0px;
-  background-color: #202324;
+  background-color: var(--background-color);
 }
 
 body {
   margin: 0;
   padding: 0;
   font-family: 'sary_soft_semiboldregular';
-  color: rgb(0, 255, 0);
+  color: var(--font-color);
   text-align: center;
 }
 
 a {
-  color: rgb(0, 255, 0);
+  color: var(--font-color)
 }
 
 a:hover {
-  color: green;
+  color: var(--font-hover-color);
 }
 
 .parallax-background {
@@ -39,6 +82,7 @@ a:hover {
   width: 100%;
   height: 100%;
   background-image: url('/ricky.png');
+  filter: var(--image-filter);
   background-repeat: no-repeat;
   background-size: 90%;
   background-position: center center;
@@ -115,7 +159,7 @@ a:hover {
 .for-the-based-link {
   font-size: 2rem;
   margin: 0 0.5rem;
-  color: rgb(0, 255, 0);
+  color: var(--font-color);
   text-decoration: underline;
   transition: all 0.2s ease-in-out;
   font-family: 'sary_soft_semiboldregular';
@@ -124,7 +168,7 @@ a:hover {
 
 .home-link:hover,
 .for-the-based-link:hover {
-  color: green;
+  color: var(--font-hover-color);
   text-decoration: none;
   font-size: 2.5rem;
 }
@@ -145,15 +189,15 @@ a:hover {
 
 .row a {
   margin-right: 1rem;
-  color: rgb(0, 255, 0);
+  color: var(--font-color);
   text-decoration: none;
   font-size: 24px;
   transition: transform 0.2s ease-in-out;
 }
 
 .row a:hover {
   transform: scale(1.3);
-  /* make icon 20% bigger on hover */
+  color: var(--font-hover-color);
 }
 
 .line {

diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
@@ -6,6 +6,8 @@
   import Padding from "../../components/padding.svelte";
 
   import projects from "./projects.json";
+  
+  import "../../routes/+page.css";
 
   var searchResults = projects.filter((project) => {
     return project.visible === true;
@@ -209,6 +211,7 @@
     overflow: hidden;
     cursor: pointer;
     padding-bottom: 50px;
+    border: 2px solid var(--project-border-color);
   }
 
   .project-bg {
@@ -219,7 +222,7 @@
     top: 0;
     left: 0;
     z-index: -1;
-    background-color: black;
+    background-color: var(--project-background-color);
   }
 
   .project-bg img {
@@ -291,13 +294,13 @@
   .project-link {
     display: inline-block;
     margin-left: 10px;
-    color: #333;
+    color: var(--project-link-color);
     text-decoration: none;
     transition: color 0.3s;
   }
 
   .project-link:hover {
-    color: #666;
+    color: var(--project-link-color-hover);
   }
 
   .download-button {
@@ -318,7 +321,7 @@
 
   .search-bar {
     margin-bottom: 20px;
-    background-color: rgba(0, 0, 0, 0.678);
+    background-color: var(--project-search-background-color);
     padding: 10px;
     border-radius: 5px;
   }
@@ -327,7 +330,7 @@
     background-color: transparent;
     border: none;
     outline: none;
-    color: white;
+    color: var(--project-search-input-font-color);
     font-size: 20px;
     width: 100%;
     padding-left: 10px;
@@ -339,7 +342,7 @@
     background-color: transparent;
     border: none;
     outline: none;
-    color: white;
+    color: var(--project-search-input-font-color);
     font-size: 20px;
     padding-left: 10px;
     padding-right: 10px;