Include templating for site theme

.eleventy.js

@@ -10,6 +10,9 @@ const {
 } = require("./src/filters/date.js")
 
 module.exports = config => {
+  config.watchIgnores.add("/src/scss/components/config/_palette.scss.njk");
+  config.watchIgnores.add("/src/scss/components/config/_palette.scss");
+
   config.setUseGitIgnore(false);
   config.setLibrary('md', markdownIt);
 

src/_data/navigation.json

@@ -7,14 +7,6 @@
     {
       "text": "About",
       "url": "/about/"
-    },
-    {
-      "text": "Blog",
-      "url": "/blog/"
-    },
-    {
-      "text": "Contact",
-      "url": "/contact/"
     }
   ]
 }

src/_data/site.js

@@ -9,10 +9,10 @@ module.exports = {
   },
   buildTime: new Date(),
   isProduction: process.env.NODE_ENV === 'production',
-  title: "SuperMinimalCSS",
+  title: "TheThomaas",
-  description: "Superminimal Superminimal",
+  description: "A blog built with Eleventy",
   lang: "fr",
-  theme: "auto", // "light", "dark" or "auto"
+  theme: "dark", // "light", "dark" or "auto"
   feed: "feed.xml",
   url: "http://localhost:8080"
 }

src/_includes/partials/footer.html

@@ -8,6 +8,6 @@
   </div>
   <div></div>
   <div>
-    <p><small>{{Term.Site.Footer.createdWith}} <a href="https://www.11ty.dev/" rel="nofollow">11ty</a> / {{Term.Site.Footer.lastDeployment}} {{ site.buildTime | toFullDate }}</small></p>
+    <p><small>{{Term.Site.Footer.createdWith}} <a href="https://www.11ty.dev/" rel="nofollow">11ty</a> ⚬ {{Term.Site.Footer.lastDeployment}} {{ site.buildTime | toFullDate }}</small></p>
   </div>
 </footer>

src/_includes/partials/hero-section.html

@@ -1,16 +1,28 @@
-<header class="hero">
+{% if heroTitle or description %}
-  <div class="wrapper">
+  {% if heroBackground or heroColor %}
-    <div class="hero-content">
+  <style>
-      <h1>
+    .hero {
-        {% if heroTitle %}
+      {% if heroBackground %}
-          {{ heroTitle }}
+        --hero-background: {{ heroBackground }};
-        {% else %}
-          {{ title }}
-        {% endif %}
-      </h1>
-      {% if description %}
-        <p>{{ description }}</p>
       {% endif %}
+      {% if heroColor %}
+        --hero-color: {{ heroColor }};
+      {% endif %}
+    }
+  </style>
+  {% endif %}
+  <header class="hero">
+    <div class="wrapper">
+      <div class="hero-content">
+        {% if heroTitle %}
+          <h1>
+            {{ heroTitle }}
+          </h1>
+        {% endif %}
+        {% if description %}
+          <p>{{ description }}</p>
+        {% endif %}
+      </div>
     </div>
-  </div>
+  </header>
-</header>
+{% endif %}

src/_includes/partials/metas.html

@@ -66,6 +66,7 @@
   {% endif %}
   {% include "css/critical.css" %}
 </style>
+
 {# Add facility for pages to delare an array of critical styles #}
 {% if pageCriticalStyles %}
   {% for item in pageCriticalStyles %}

src/index.md

@@ -1,11 +1,10 @@
 ---
 title: 'Home'
-description: 'A website made with Eleventy'
+heroTitle: 'Welcome to my website'
-heroTitle: 'Welcome'
+heroBackground: var(--surface1)
+heroColor: var(--text1)
 metaDesc: 'A made up agency site that you build if you take Learn Eleventy From Scratch, by Piccalilli'
 layout: 'home'
 ---
 
-## Posts
-
 {% include "partials/post-list.html" %}

src/scss/components/config/_palette.scss

@@ -39,7 +39,7 @@
   --secondary-accent: hsl(172, 65%, 65%);
   --text1: hsl(22, 22%, 90%);
   --text2: hsl(20, 10%, 70%);
-  --surface1: hsl(24, 0%, 10%);
+  --surface1: hsl(0, 0%, 9%);
   --surface2: hsl(23, 0%, 15%);
   --surface3: hsl(24, 0%, 20%);
   --surface4: hsl(23, 0%, 25%);
@@ -50,20 +50,10 @@
 }
 
 
+
+
 :root {
-  @include light-theme;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    @include dark-theme;
-  }
-}
-
-[data-theme="light"] {
-  @include light-theme;
-}
-
-[data-theme="dark"] {
   @include dark-theme;
-}
+}
+
+

src/scss/components/config/_palette.scss.njk.ignore

@@ -0,0 +1,86 @@
+---
+permalink: 'src/scss/components/config/_palette.scss'
+permalinkBypassOutputDir: true
+---
+@mixin light-theme-font {
+  --font-weight-regular: 400;
+	--tracking: -0.006em;
+}
+
+@mixin dark-theme-font {
+  --font-weight-regular: 300;
+	--tracking: 0;
+}
+
+/**
+ * Palette
+ */
+ @mixin light-theme {
+  color-scheme: light;
+
+  --brand: hsl(22, 60%, 60%);
+  --brand-variant: hsl(22, 60%, 50%);
+  --primary-accent: hsl(232, 60%, 60%);
+  --secondary-accent: hsl(172, 35%, 35%);
+  --text1: hsl(22, 96%, 6%);
+  --text2: hsl(20, 10%, 30%);
+  --surface1: hsl(20, 12%, 95%);
+  --surface2: hsl(24, 10%, 90%);
+  --surface3: hsl(22, 11%, 85%);
+  --surface4: hsl(24, 10%, 80%);
+  --img-opacity: 1;
+  --shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+	
+	@include light-theme-font;
+}
+
+@mixin dark-theme {
+  color-scheme: dark;
+
+  --brand: hsl(22, 45%, 45%);
+  --brand-variant: hsl(22, 45%, 55%);
+  --primary-accent: hsl(232, 65%, 65%);
+  --secondary-accent: hsl(172, 65%, 65%);
+  --text1: hsl(22, 22%, 90%);
+  --text2: hsl(20, 10%, 70%);
+  --surface1: hsl(0, 0%, 9%);
+  --surface2: hsl(23, 0%, 15%);
+  --surface3: hsl(24, 0%, 20%);
+  --surface4: hsl(23, 0%, 25%);
+  --img-opacity: .8;
+  --shadow: 0 0 0 rgba(0, 0, 0, 0);
+
+	@include dark-theme-font;
+}
+
+{% if site.theme == "auto" %}
+:root {
+  @include light-theme;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include dark-theme;
+  }
+}
+
+[data-theme="light"] {
+  @include light-theme;
+}
+
+[data-theme="dark"] {
+  @include dark-theme;
+}
+{% endif %}
+
+{% if site.theme == "dark" %}
+:root {
+  @include dark-theme;
+}
+{% endif %}
+
+{% if site.theme == "light" %}
+:root {
+  @include light-theme;
+}
+{% endif %}

src/scss/critical.scss

@@ -15,6 +15,9 @@
 
 body {
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
   > header {
     display: flex;
@@ -35,10 +38,7 @@ body {
       }
       li {
         padding: 6px 20px;
-    
+        display: inline-block;
-        @media screen and (min-width: 768px) {
-          display: inline-block;
-        }
       }
 
       a[aria-current="page"] {