.eleventy.js

@@ -10,9 +10,6 @@ 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,6 +7,14 @@
     {
       "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: "TheThomaas",
-  description: "A blog built with Eleventy",
+  title: "SuperMinimalCSS",
+  description: "Superminimal Superminimal",
   lang: "fr",
-  theme: "dark", // "light", "dark" or "auto"
+  theme: "auto", // "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,28 +1,16 @@
-{% if heroTitle or description %}
-  {% if heroBackground or heroColor %}
-  <style>
-    .hero {
-      {% if heroBackground %}
-        --hero-background: {{ heroBackground }};
-      {% endif %}
-      {% if heroColor %}
-        --hero-color: {{ heroColor }};
-      {% endif %}
-    }
-  </style>
-  {% endif %}
-  <header class="hero">
+<header class="hero">
   <div class="wrapper">
     <div class="hero-content">
-        {% if heroTitle %}
       <h1>
+        {% if heroTitle %}
           {{ heroTitle }}
-          </h1>
+        {% else %}
+          {{ title }}
         {% endif %}
+      </h1>
       {% if description %}
         <p>{{ description }}</p>
       {% endif %}
     </div>
   </div>
-  </header>
-{% endif %}
+</header>

src/_includes/partials/metas.html

@@ -66,7 +66,6 @@
   {% 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,10 +1,11 @@
 ---
 title: 'Home'
-heroTitle: 'Welcome to my website'
-heroBackground: var(--surface1)
-heroColor: var(--text1)
+description: 'A website made with Eleventy'
+heroTitle: 'Welcome'
 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(0, 0%, 9%);
+  --surface1: hsl(24, 0%, 10%);
   --surface2: hsl(23, 0%, 15%);
   --surface3: hsl(24, 0%, 20%);
   --surface4: hsl(23, 0%, 25%);
@@ -50,10 +50,20 @@
 }
 
 
-
-
 :root {
-  @include dark-theme;
+  @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

@@ -1,86 +0,0 @@
----
-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,9 +15,6 @@
 
 body {
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
 
   > header {
     display: flex;
@@ -38,8 +35,11 @@ body {
       }
       li {
         padding: 6px 20px;
+    
+        @media screen and (min-width: 768px) {
           display: inline-block;
         }
+      }
 
       a[aria-current="page"] {
         color: var(--brand-variant);