Update Cookbook for dark mode

enhance-dev · Jun 6, 2024 · 67cffb4 · 67cffb4
1 parent b9ed9d7
commit 67cffb4
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 2 deletions.
diff --git a/app/elements/cookbook/article.mjs b/app/elements/cookbook/article.mjs
@@ -210,7 +210,7 @@ export default function CookbookArticle ({ html }) {
     <hr class="mbs4 pbs4 border-bs1 border-solid mi-auto" />
 
     <aside class="mi-auto leading4 mbe6">
-      <h1 class="text3 leading1 tracking-1 font-bold mbe2">Find more recipes in the Enhance Cookbook!</h1>
+      <h2 class="text3 leading1 tracking-1 font-bold mbe2">Find more recipes in the Enhance Cookbook!</h2>
       <p class="text1 mbe4">Learning new things can be fun — but also challenging. The Enhance Cookbook is here to show you around the kitchen and help you get your hands dirty.</p>
 
       <a class="linkButton pi2 pb0 font-semibold no-underline" href="/cookbook/">

diff --git a/app/elements/cookbook/header.mjs b/app/elements/cookbook/header.mjs
@@ -7,8 +7,14 @@ export default function CookbookHeader ({ html }) {
         padding-block: var(--space-6);
       }
 
+      @media (prefers-color-scheme: dark) {
+        :host {
+          background: linear-gradient(to bottom, var(--dark-purple), var(--denim));
+        }
+      }
+
       h1 {
-        color: var(--dark-purple);
+        color: var(--purple-princess);
       }
 
       figure {

diff --git a/app/elements/cookbook/recipe-card.mjs b/app/elements/cookbook/recipe-card.mjs
@@ -9,6 +9,7 @@ export default function Recipe ({ html, state }) {
         border: 1px solid var(--gray-200);
         border-radius: 0.25em;
         box-shadow: 0 2px 8px hsla(0deg 0% 0% / 0.1);
+        color: var(--rift);
         transition: background-color 0.15s linear;
       }
 

diff --git a/app/pages/cookbook/$$.mjs b/app/pages/cookbook/$$.mjs
@@ -4,6 +4,16 @@ export default function CookbookPage ({ html, state }) {
   const { title, html: recipeHtml } = recipe
 
   return html`
+    <style scope="global">
+      /* Colors */
+      body {
+        background-color: var(--white-denim);
+        color: var(--rift-white);
+      }
+      a {
+        color: var(--purple-princess);
+      }
+    </style>
     <site-header active="/cookbook"></site-header>
     <site-container>
       <cookbook-article>

diff --git a/app/pages/cookbook/index.html b/app/pages/cookbook/index.html
@@ -1,3 +1,11 @@
+<style scope="global">
+  /* Colors */
+  body {
+    background-color: var(--white-denim);
+    color: var(--rift-white);
+  }
+</style>
+
 <site-header active="/cookbook"></site-header>
 <cookbook-header></cookbook-header>