Finish night mode home page styling

bobbysebolao · Nov 26, 2021 · d744495 · d744495
1 parent 0a1f29a
commit d744495
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 33 deletions.
diff --git a/src/app.css b/src/app.css
@@ -8,6 +8,8 @@
 
   /* Primary colours */
   /* Normal state */
+  --neutral-grey: #cccccc;
+
   --postit-green: #afec6a;
   --postit-yellow: #faf557;
   --postit-blue: #7fd9cf;
@@ -20,9 +22,10 @@
   --postit-pink-hover: hsl(341, 98%, 90%);
 
   /* Night mode */
-  --night-light: #707993;
+  --night-light: #3d465c;
   --night-medium: #252d3e;
   --night-dark: #10161d;
+  --night-text-color: #fdfdfd;
 }
 
 body {
@@ -55,7 +58,6 @@ h3,
 h4 {
   margin: 1.414em 0 0.5em;
   line-height: 1.35;
-  color: #111;
   font-weight: 400;
   text-align: left;
   margin-bottom: 2.5em;

diff --git a/src/lib/home/Aliens.svelte b/src/lib/home/Aliens.svelte
@@ -2,12 +2,12 @@
   export let display_mode_classes = "";
 
   export let alienCount = 0;
-  export let alienType = "one";
+  export let alienType = "default";
 </script>
 
 <div class="aliens {display_mode_classes}">
   {#each Array(alienCount) as _}
-    <div class="aliens__{alienType}" />
+    <div class={alienType} />
   {/each}
 </div>
 
@@ -27,23 +27,23 @@
         animation: alienAnim 2s steps(2) infinite;
       }
 
-      .aliens__one {
+      .default {
         background-image: url(/static/alien_1.svg);
       }
 
-      .aliens__two {
+      .alien0 {
         background-image: url(/static/alien_2.svg);
       }
 
-      .aliens__three {
+      .alien1 {
         background-image: url(/static/alien_3.svg);
       }
 
-      .aliens__defense {
+      .alien2 {
         background-image: url(/static/defense.svg);
       }
 
-      .aliens__player {
+      .alien3 {
         background-image: url(/static/player.svg);
       }
 

diff --git a/src/lib/home/ProjectSummary.svelte b/src/lib/home/ProjectSummary.svelte
@@ -1,5 +1,5 @@
 <script>
-  export let colour = "#cccccc";
+  export let colour = "grey";
   export let projectData = {
     Type: "Distributed Cloud Platform",
     Title: "Rate My Barber",
@@ -65,6 +65,14 @@
       z-index: -1;
       border-radius: 5px;
 
+      &.night {
+        background: var(--night-medium);
+      }
+
+      &.grey {
+        background: var(--neutral-grey);
+      }
+
       &.green {
         background: var(--postit-green);
       }

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
@@ -68,6 +68,10 @@
     max-width: 840px;
     z-index: 0;
     position: relative;
+    &.night {
+      background-color: var(--night-light);
+      color: var(--night-text-color);
+    }
     &.sprite {
       font-family: "VT323", monospace;
     }

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -9,15 +9,16 @@
 </script>
 
 <script>
-  import { active_display_modes } from "./stores";
+  import { active_display_modes as _active_display_modes } from "./stores";
   import Aliens from "../lib/home/Aliens.svelte";
   import ContactForm from "../lib/home/ContactForm.svelte";
   import ProjectSummary from "../lib/home/ProjectSummary.svelte";
   export const prerender = true;
-  let display_mode_classes = "";
+  let active_display_modes = [];
+  const COLOURS = ["green", "yellow", "blue", "pink"];
 
-  active_display_modes.subscribe((value) => {
-    display_mode_classes = value.join(" ");
+  _active_display_modes.subscribe((value) => {
+    active_display_modes = value;
   });
 
   export let projects_data = [];
@@ -52,33 +53,35 @@
   <a href="https://www.bobbysebolao.com/" class="u-url" />
 </div>
 
-<h1 class="intro {display_mode_classes}">
+<h1 class="intro {active_display_modes.join(' ')}">
   <span>Hi </span>-<span> I'm</span><br /><span>Bobby</span>
 </h1>
 
-<p class="intro {display_mode_classes}">I tell stories with prose and code</p>
+<p class="intro {active_display_modes.join(' ')}">
+  I tell stories with prose and code
+</p>
 
-<Aliens {display_mode_classes} alienCount={5} alienType="one" />
+<Aliens
+  active_display_modes={active_display_modes.join(" ")}
+  alienCount={3}
+  alienType="default"
+/>
 
-<hr class="home-separators" />
+<hr class="home-separators {active_display_modes.join(' ')}" />
 
 <h2>Web Projects</h2>
 
-<ProjectSummary colour="green" projectData={projects_data[0]} />
-
-<Aliens {display_mode_classes} alienCount={5} alienType="two" />
-
-<ProjectSummary colour="yellow" projectData={projects_data[1]} />
-
-<Aliens {display_mode_classes} alienCount={5} alienType="three" />
-
-<ProjectSummary colour="blue" projectData={projects_data[2]} />
-
-<Aliens {display_mode_classes} alienCount={3} alienType="defense" />
-
-<ProjectSummary colour="pink" projectData={projects_data[3]} />
-
-<Aliens {display_mode_classes} alienCount={3} alienType="player" />
+{#each projects_data as d, i}
+  <ProjectSummary
+    colour={active_display_modes.includes("night") ? "night" : COLOURS[i]}
+    projectData={d}
+  />
+  <Aliens
+    active_display_modes={active_display_modes.join(" ")}
+    alienCount={3}
+    alienType="alien{i}"
+  />
+{/each}
 
 <hr class="home-separators" />
 
@@ -114,5 +117,8 @@
   .home-separators {
     display: block;
     margin-top: 5em;
+    &.night {
+      border: 1px solid var(--night-text-color);
+    }
   }
 </style>