Merge pull request #51 from andybelldesign/feature/dark-mode

Feature/dark mode

.eleventy.js

@@ -29,6 +29,7 @@ module.exports = function(config) {
   // Passthrough copy
   config.addPassthroughCopy('src/fonts');
   config.addPassthroughCopy('src/images');
+  config.addPassthroughCopy('src/js');
   config.addPassthroughCopy('src/admin/config.yml');
   config.addPassthroughCopy('src/admin/previews.js');
   config.addPassthroughCopy('node_modules/nunjucks/browser/nunjucks-slim.js');

README.md

@@ -10,7 +10,7 @@ Get started now by **[deploying Hylia to Netlify.][deploy-to-netlify]**
 
 ## Features
 
-Hylia version 0.3.1 features:
+Hylia version 0.4.0 features:
 
 ✍️ A pre-configured [Netlify CMS](https://www.netlifycms.org/) setup  
 🎨 Customisable design tokens to make it your own  
@@ -19,13 +19,13 @@ Hylia version 0.3.1 features:
 ✅ Progressively enhanced, semantic and accessible  
 🎈 _Super_ lightweight front-end  
 🚰 Sass powered CSS system with utility class generator  
-⚙️  Service worker that caches pages so people can read your articles offline  
+⚙️ Service worker that caches pages so people can read your articles offline  
 🚀 An RSS feed for your posts
 
 ## Roadmap
 
 💬 [Netlify Forms](https://www.netlify.com/docs/form-handling/) powered comments  
-💡 Dark/Light mode toggle  
+💡 ~~Dark/Light mode toggle~~ [Added in 0.4.0](https://github.com/andybelldesign/hylia/releases/tag/0.4.0)  
 🗣 Webmentions  
 📖 Pagination  
 🐦 Web sharing API integration  
@@ -35,7 +35,7 @@ Hylia version 0.3.1 features:
 ✍️ Proper CMS documentation  
 🖼 A facility for you to be able to add your logo / branding
 
-***
+---
 
 ## Getting started
 
@@ -47,7 +47,6 @@ You can [deploy Hylia to Netlify with one click][deploy-to-netlify] and you’ll
 
 I recorded a quick start video of me deploying Hylia to Netlify and getting the CMS set up. [Check it out here](https://youtu.be/0hM_0BH-Y_A).
 
-
 ### Method two: Clone / Fork
 
 1. Clone or fork this repo: `git clone https://github.com/andybelldesign/hylia`
@@ -102,11 +101,11 @@ In short, though:
 
 Although Hylia has a pretty simple design, you can configure the core design tokens that control the colours, size ratio and fonts.
 
-***
+---
 
-**Note**: *Credit must be given to the hard work [Jina Anne](https://twitter.com/jina) did in order for the concept of design tokens to even exist. You should watch [this video](https://www.youtube.com/watch?v=wDBEc3dJJV8), then [read this article](https://the-pastry-box-project.net/jina-bolton/2015-march-28) and then sign up for [this course](https://aycl.uie.com/virtual_seminars/design_tokens_scaling_design_with_a_single_source_of_truth) to expand your knowledge.*
+**Note**: _Credit must be given to the hard work [Jina Anne](https://twitter.com/jina) did in order for the concept of design tokens to even exist. You should watch [this video](https://www.youtube.com/watch?v=wDBEc3dJJV8), then [read this article](https://the-pastry-box-project.net/jina-bolton/2015-march-28) and then sign up for [this course](https://aycl.uie.com/virtual_seminars/design_tokens_scaling_design_with_a_single_source_of_truth) to expand your knowledge._
 
-***
+---
 
 To change the design tokens in the CMS, find the “Globals” in the sidebar then in the presented options, select “Theme Settings”.
 
@@ -145,14 +144,11 @@ The utility class generator lets you generate whatever you want, with no opinion
 To add a new class, add another item to the exists `$stalfos-config` map. This example adds a utility for floating elements.
 
 ```scss
-'float': (
-  'items': (
-    'left': 'left',
-    'right': 'right'
+'float':('items':('left':'left','right': 'right'
   ),
   'output': 'responsive',
   'property': 'float'
-)
+);
 ```
 
 The `output` is set to `responsive` which means every breakpoint will generate a prefixed class for itself. If you only wanted elements to float left in the `md` breakpoint, you’d now be able to add a class of `md:float-left` to your HTML elements.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hylia",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "A simple Eleventy starter kit to help you have a blog of your own",
   "main": "index.js",
   "dependencies": {

src/_data/tokens.json

@@ -16,7 +16,8 @@
     "highlight": "hsl(42, 98%, 77%)",
     "light": "hsl(0, 0%, 100%)",
     "mid": "hsl(0, 0%, 80%)",
-    "dark": "hsl(0, 0%, 20%)"
+    "dark": "hsl(0, 0%, 20%)",
+    "slate": "hsl(0, 0%, 25%)"
   },
   "fonts": {
     "base": "\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'\"",

src/_includes/layouts/base.njk

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-js">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,6 +8,7 @@
   <link rel="icon" href="https://hankchizljaw.imgix.net/hylia-favicon.png" type="image/png" />
   <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/lora-v13-latin-700.woff2" />
   {% include "partials/global/meta-info.njk" %}
+  <script>document.documentElement.classList.remove('no-js');</script>
   <style>{% include "assets/css/global.css" %}</style>
   {% block head %}
   {% endblock %}
@@ -20,6 +21,7 @@
   {% include "partials/global/site-foot.njk" %}
   {% block foot %}
   {% endblock %}
+  <script type="module" src="/js/components/theme-toggle.js" async defer></script>
   <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', () => {

src/_includes/partials/global/site-foot.njk

@@ -2,12 +2,17 @@
   <div class="wrapper">
     <div class="[ site-foot__inner ] [ md:box-flex space-between align-start ]">
       {% if site.shortDesc %}
-        <article class="[ site-foot__details ] [ sf-flow measure-compact ]">
-          <h2 class="font-base text-600">{{ site.name }}</h2>
-          {{ site.shortDesc | markdownFilter | safe }}
-        </article>
+        <div>
+          <article class="[ site-foot__details ] [ sf-flow measure-compact ]">
+            <h2 class="font-base text-600">{{ site.name }}</h2>
+            {{ site.shortDesc | markdownFilter | safe }}
+          </article>
+        </div>
       {% endif %}
-      {% include "partials/components/nav.njk" %}
+      <div>
+        {% include "partials/components/nav.njk" %}
+        <theme-toggle></theme-toggle>
+      </div>
     </div>
     {% if site.showThemeCredit %}
       <p class="[ site-foot__credit ] [ pad-top-900 ]">