Use css variables for colours. Move color, font and variable files to sass root folder.

assets/js/search.js

@@ -44,7 +44,7 @@
     const results = index.search({
       query: query,
       enrich: true,
-      limit: {{ .Site.Params.searchLimit | default 20 }}
+      limit: {{ site.Params.searchLimit | default 20 }}
     });
     const items = {};
     results.forEach( function(result) {

assets/js/tracking.js

@@ -5,11 +5,11 @@
  * A JavaScript file for analytic tracking.
  */
 
-var cookiebanner = {{ .Site.Params.cookieConsent | default false }};
+var cookiebanner = {{ site.Params.cookieConsent | default false }};
 var cookieconsent = localStorage.getItem('cookieconsent');
-var idSite = '{{ .Site.Params.piwikSiteID }}';
+var idSite = '{{ site.Params.piwikSiteID }}';
-var matomoTrackingApiUrl = 'https://{{ .Site.Params.piwikTrackerUrl }}/matomo.php';
+var matomoTrackingApiUrl = 'https://{{ site.Params.piwikTrackerUrl }}/matomo.php';
-var googleAnalytics = '{{ .Site.GoogleAnalytics }}';
+var googleAnalytics = '{{ site.GoogleAnalytics }}';
 
 if (idSite) {
   var _paq = window._paq || [];

assets/sass/_colors.scss

@@ -0,0 +1,87 @@
+// stylelint-disable color-no-hex, color-named
+
+// Base colors.
+$black:                 #000;
+$nearblack:             lighten($black, 20%); // #333
+$grey-dark:             lighten($black, 40%); // #666
+$grey:                  lighten($black, 60%); // #999
+$grey-light:            lighten($black, 80%); // #ccc
+$grey-extra-light:      lighten($black, 93.33%); // #eee
+$white:                 #fff;
+
+$blue:                  #0072b9;
+$red:                   #c00;
+$green:                 #43a808;
+$yellow:                #fd0;
+
+$brand:                 $nearblack;
+$brand-alt:             $grey;
+$brand-dark:            $grey-dark;
+
+// Colour map.
+$colors: (
+  brand:                  $brand,
+  brand-alt:              $brand-alt,
+  brand-dark:             $brand-dark,
+  text:                   $black,
+  text-bg:                $white,
+  text-meta:              $grey-dark,
+
+  link:                   $black,
+  link-visited:           $black,
+  link-hover:             $nearblack,
+  link-active:            $red,
+
+  border:                 $grey-light,
+  border-dark:            $nearblack,
+
+  autocomplete:           $black,
+  autocomplete-bg:        $white,
+  autocomplete-select:    $white,
+  autocomplete-select-bg: $blue,
+
+  body-bg:                $white,
+  header-bg:              $nearblack,
+  backdrop:               $grey-extra-light,
+
+  mobile-menu:            $nearblack,
+  mobile-menu-cover:      rgba($black, .2),
+
+  button:                 $nearblack,
+  button-disabled:        $grey,
+
+  form-error:             $red,
+
+  mark-highlight:         $red,
+  mark-bg:                $yellow,
+
+  menu-active:            $black,
+
+  preview-bg:             lighten($yellow, 43%),
+
+  row-stripe:             $white,
+  row-disabled:           $grey-light,
+
+  status:                 $green,
+  status-bg:              lighten($green, 62%),
+  status-highlight:       $black,
+  warning:                $black,
+  warning-bg:             lighten($yellow, 45%),
+  warning-border:         $yellow,
+  error:                  $red,
+  error-bg:               lighten($red, 57%),
+
+  watermark:              $grey-extra-light,
+
+  headings:               $nearblack,
+
+  code:                   $nearblack,
+);
+
+// Convert colour map to css4 variables.
+// Use like this: var(--color-brand)
+:root {
+  @each $name, $color in $colors {
+    --color-#{$name}: #{$color};
+  }
+}

assets/sass/_fonts.scss

@@ -0,0 +1,34 @@
+// Font faces
+//
+// Instead of relying on the fonts that are available on a user's computer, you
+// can use web fonts which, like images, are resources downloaded to the user's
+// browser. Because of the bandwidth and rendering resources required, web fonts
+// should be used with care.
+//
+// Numerous resources for web fonts can be found on Google. Here are a few
+// websites where you can find Open Source fonts to download:
+// - http://www.fontsquirrel.com/fontface
+// - http://www.theleagueofmoveabletype.com
+// - https://fonts.google.com
+//
+// In order to use these fonts, you will need to convert them into formats
+// suitable for web fonts. We recommend the free-to-use Font Squirrel's
+// Font-Face Generator:
+//   http://www.fontsquirrel.com/fontface/generator
+//
+// The following is an example @font-face declaration. This font can then be
+// used in any ruleset using a property like this:  font-family: Example, serif;
+//
+// Since we're using Sass, you'll need to declare your font faces here, then you
+// can add them to the font variables in the _init.scss partial.
+
+// @font-face {
+//   font-family: 'Example';
+//   src: url('../fonts/example.eot');
+//   src: url('../fonts/example.eot?iefix') format('eot'),
+//     url('../fonts/example.woff') format('woff'),
+//     url('../fonts/example.ttf') format('truetype'),
+//     url('../fonts/example.svg#webfontOkOndcij') format('svg');
+//   font-weight: normal;
+//   font-style: normal;
+// }

assets/sass/_init.scss

@@ -6,8 +6,8 @@
 // project.
 
 // Colours and variables.
-@import 'init/colors';
+@import 'colors';
-@import 'init/variables';
+@import 'variables';
 
 // Add typey to manage font sizes and margins.
 @import 'typey';

assets/sass/_variables.scss

@@ -0,0 +1,154 @@
+// Variables
+//
+// Set variables for this site before a library sets its !default value.
+
+
+// Font faces, stacks and sizes.
+//
+// Font styling and line heights are controlled by the several variables that
+// used by mixins like `type-layout()`, `margin-top()`, and `margin-bottom()`.
+// These variable and mixins are documented on the [Typey
+// homepage](https://github.com/jptaranto/typey).
+
+// The font size set on the root html element.
+$base-font-size:    22px;
+$base-font-size-2:  18px;
+
+// The base line height determines the basic unit of vertical rhythm.
+$base-line-height:    31px;
+$base-line-height-2:  25px;
+
+$base-multiplier: $base-font-size / $base-font-size-2;
+
+$xxl-2: 34px * $base-multiplier;
+$xl-2:  28px * $base-multiplier;
+$l-2:   22px * $base-multiplier;
+$m-2:   18px * $base-multiplier;
+$s-2:   16px * $base-multiplier;
+$xs-2:  14px * $base-multiplier;
+
+// The font sizes in our type hierarchy as tee shirt sizes.
+$font-size: (
+  xxl:              28px,
+  xl:               26px,
+  l:                24px,
+  m:                $base-font-size,
+  s:                18px,
+  xs:               16px,
+  xxl-2:            $xxl-2,
+  xl-2:             $xl-2,
+  l-2:              $l-2,
+  m-2:              $m-2,
+  s-2:              $s-2,
+  xs-2:             $xs-2
+);
+
+// Typey allows you to alter font weights site-wide with this map.
+$font-weight: (
+  bold:             bold,
+  medium:           500,
+  normal:           normal,
+  light:            300,
+  lighter:          lighter,
+);
+
+// The following font family declarations use widely available fonts.
+// A user's web browser will look at the comma-separated list and will
+// attempt to use each font in turn until it finds one that is available
+// on the user's computer. The final "generic" font (sans-serif, serif or
+// monospace) hints at what type of font to use if the web browser doesn't
+// find any of the fonts in the list.
+
+// Serif font stacks.
+$times-new-roman: 'Times New Roman', Times, Georgia, 'DejaVu Serif', serif;
+$times:           Times, 'Times New Roman', Georgia, 'DejaVu Serif', serif;
+$georgia:         Georgia, 'Times New Roman', 'DejaVu Serif', serif;
+$garamond:        'Garamond Premier Pro', Charter, 'Times New Roman', serif;
+
+// Sans-serif font stacks.
+$verdana:         Verdana, Tahoma, 'DejaVu Sans', sans-serif;
+$tahoma:          Tahoma, Verdana, 'DejaVu Sans', sans-serif;
+$helvetica:       Helvetica, Arial, 'Nimbus Sans L', sans-serif;
+$arial:           Arial, Helvetica, 'Nimbus Sans L', sans-serif;
+$impact:          Impact, 'Arial Narrow', Helvetica, sans-serif;
+$lucida:          'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif;
+$futura:          Futura, 'Century Gothic', AppleGothic, sans-serif;
+
+// System-ui font stack.
+$system-ui:       system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+
+// Monospace font stacks.
+// For an explanation of why "sans-serif" is at the end of this list, see
+// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
+//$menlo:           Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif;
+$menlo:           Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif;
+
+// The font faces you specify in the $typefaces map can be used in the
+// typeface() mixin.
+$typefaces: (
+  body: (
+    font-family: $garamond,
+  ),
+  headings: (
+    font-family: $futura,
+  ),
+  monospace: (
+    font-family: $menlo,
+  ),
+  compact: (
+    font-family: $impact,
+    weight: bold,
+    case: uppercase,
+    // We could also specify the following property:
+    // letter-spacing: .5px,
+  ),
+); // stylelint-disable indentation
+
+// Output a horizontal grid to help with debugging typography.
+$typey-debug: false;
+$with-wireframes: false;
+
+// The length unit in which to output font size and margin values.
+// Supported values: px, em, rem.
+$base-unit:         'rem';
+
+// px fallbacks for rem units are needed for IE 8 and earlier.
+$rem-fallback:      false;
+
+// We have separate print file.
+$auto-print-sizing: false;
+
+// Breakpoints
+//
+// Use the `respond-to()` mixin to use named breakpoints.
+
+$breakpoints: (
+  'xxxs': 333px,
+  'xxs':  444px,
+  'xs':   555px,
+  's':    666px,
+  'm':    777px,
+  'l':    888px,
+  'xl':   999px,
+  'xxl':  1111px,
+  'xxxl': 1222px
+) !default;
+
+// Layout
+
+// The max content width.
+$max-content-width: 960px;
+
+// The default left/right gutter/padding.
+$zen-gutters: 20px;
+
+
+// Miscellaneous variables
+//
+// `$indent-amount` controls the amount lists, blockquotes and comments are indented.
+//
+// `$include-rtl` controls whether RTL styles are output.
+
+$indent-amount: 2 * $base-font-size;
+
+$include-rtl: false;

assets/sass/_zen.scss

@@ -3,11 +3,11 @@
 // Page
 
 body {
-  background-color: $backdrop;
+  background-color: var(--color-backdrop);
 }
 
 .page {
-  background-color: $body-bg;
+  background-color: var(--color-body-bg);
 }
 
 .header {
@@ -22,7 +22,7 @@ body {
   @include margin-top(1.5);
   @include padding(.5 0);
   text-align: center;
-  border-top: 2px solid $brand;
+  border-top: 2px solid var(--color-brand);
 
   p {
     margin: 0;
@@ -67,7 +67,7 @@ article > header,
 .header,
 .footer {
   @include typeface(headings);
-  color: $headings;
+  color: var(--color-headings);
   font-weight: normal;
 }
 
@@ -84,7 +84,7 @@ aside {
 
 article {
   & > header {
-    color: $text-meta;
+    color: var(--color-text-meta);
   }
 
   .submitted {
@@ -114,7 +114,7 @@ article {
   }
 
   .content-dates {
-    color: $text-meta;
+    color: var(--color-text-meta);
     text-align: right;
   }
 
@@ -128,11 +128,11 @@ article {
   }
 
   pre {
-    color: $code;
+    color: var(--color-code);
     border-radius: 3px;
     padding: 5px;
-    border: 1px solid $border;
+    border: 1px solid var(--color-border);
-    background-color: $text-bg;
+    background-color: var(--color-text-bg);
     overflow: auto;
     max-height: 300px;
     max-width: 90vw;
@@ -228,19 +228,19 @@ figure {
 
   a {
     display: block;
-    background-color: $brand;
+    background-color: var(--color-brand);
-    color: $text-bg;
+    color: var(--color-text-bg);
     padding: 2px 8px;
     text-decoration: none;
 
     &:hover,
     &:focus {
-      background-color: $brand-dark;
+      background-color: var(--color-brand-dark);
     }
 
     &:active,
     &.active {
-      background-color: $brand;
+      background-color: var(--color-brand);
       text-decoration: underline;
     }
   }
@@ -271,16 +271,16 @@ figure {
 
     &:required+span::after {
       content: ' *';
-      color: $red;
+      color: var(--color-red);
       vertical-align: top;
     }
 
     &:not(:placeholder-shown):valid {
-      background-color: $status-bg;
+      background-color: var(--color-status-bg);
     }
 
     &:not(:placeholder-shown):invalid {
-      background-color: $error-bg;
+      background-color: var(--color-error-bg);
     }
   }
 }
@@ -289,11 +289,11 @@ figure {
   input,
   textarea {
     &:valid {
-      background-color: $status-bg;
+      background-color: var(--color-status-bg);
     }
 
     &:invalid {
-      background-color: $error-bg;
+      background-color: var(--color-error-bg);
     }
   }
 }

assets/sass/base/forms/_forms.scss

@@ -166,7 +166,7 @@ input {
 fieldset {
   // Correct the padding in Firefox.
   @include padding(.35 .5 .65);
-  border: 1px solid $border;
+  border: 1px solid var(--color-border);
 }
 
 legend {

assets/sass/base/links/_links.scss

@@ -13,7 +13,7 @@
 
 a,
 %link {
-  color: $link;
+  color: var(--color-link);
   // stylelint-disable property-no-vendor-prefix
   // Remove gaps in links underline in iOS 8+ and Safari 8+.
   -webkit-text-decoration-skip: objects;
@@ -23,14 +23,14 @@ a,
 // safely lower this selector's specificity. This also ensures visited links
 // with additional styles won't have their styles overridden.
 :visited {
-  color: $link-visited;
+  color: var(--color-link-visited);
 }
 
 a:hover,
 a:focus {
-  color: $link-hover;
+  color: var(--color-link-hover);
 }
 
 a:active {
-  color: $link-active;
+  color: var(--color-link-active);
 }

assets/sass/components/box/_box.scss

@@ -20,7 +20,7 @@
 .box,
 %box {
   @include margin-bottom(1);
-  border: 5px solid $border;
+  border: 5px solid var(--color-border);
   padding: 1em;
 
   // Sass compiles this to the selector: .box__title, %box__title {}
@@ -44,7 +44,7 @@
   &:hover,
   &.is-focus,
   &--is-focus {
-    border-color: $text;
+    border-color: var(--color-text);
   }
 
   // Sass compiles this to the selector: .box--highlight, %box--highlight {}
@@ -52,6 +52,6 @@
   // the "highlight" is a _modifier_, creating a new variation of the standard
   // "box" component.
   &--highlight {
-    border-color: $link;
+    border-color: var(--color-link);
   }
 }

assets/sass/components/button/_button.scss

@@ -29,7 +29,7 @@ button,
   text-decoration: none;
   // Improve usability and consistency of cursor style between image-type `input` and others.
   cursor: pointer;
-  color: $button;
+  color: var(--color-button);
   text-align: center;
   background-image: linear-gradient(#f6f6f6, #e2e2e2);
   border: 1px solid #e4e4e4;
@@ -60,14 +60,14 @@ button,
   &:active {
     // Override any link underlines and color changes.
     text-decoration: none;
-    color: $button;
+    color: var(--color-button);
   }
 
   &:active {
     border-color: #555;
-    text-shadow: $button 0 -1px 0;
+    text-shadow: var(--color-button 0 -1px 0)  0 -1px 0;
-    background: $grey-dark;
+    background: var(--color-grey-dark);
-    color: $text-bg;
+    color: var(--color-text-bg);
   }
 }
 
@@ -91,9 +91,9 @@ button,
 %button--disabled[disabled] {
   // Re-set default cursor for disabled elements.
   cursor: default;
-  color: $button-disabled;
+  color: var(--color-button-disabled);
-  background-color: $grey-extra-light;
+  background-color: var(--color-grey-extra-light);
-  border-color: $grey-extra-light;
+  border-color: var(--color-grey-extra-light);
   background-image: none;
   text-shadow: none;
 
@@ -101,6 +101,6 @@ button,
   &:focus,
   &:active {
     // Override any link underlines and color changes.
-    color: $button-disabled;
+    color: var(--color-button-disabled);
   }
 }

assets/sass/components/cookieconsent/_cookieconsent.scss

@@ -5,9 +5,9 @@
   position: sticky;
   bottom: 0;
   width: 100%;
-  color: $warning;
+  color: var(--color-warning);
-  background-color: $warning-bg;
+  background-color: var(--color-warning-bg);
-  border-top: 4px solid $warning-border;
+  border-top: 4px solid var(--color-warning-border);
   text-align: center;
   transform: translateY(100vh);
   transition: all 130ms ease-in;
@@ -19,11 +19,11 @@
 
 .button {
   &--accept {
-    border-color: $status;
+    border-color: var(--color-status);
   }
 
   &--decline {
-    border-color: $warning-border;
+    border-color: var(--color-warning-border);
   }
 }
 

assets/sass/components/divider/_divider.scss

@@ -6,7 +6,7 @@
 %divider {
   @include margin(1 0);
   border: 0;
-  border-top: 1px solid $border;
+  border-top: 1px solid var(--color-border);
 
   // If used as a container, add a top margin to the first child.
   > :first-child {

assets/sass/components/header/_header.scss

@@ -31,7 +31,7 @@
   &__site-link {
     &:link,
     &:visited {
-      color: $text;
+      color: var(--color-text);
       text-decoration: none;
     }
 

assets/sass/components/highlight-mark/_highlight-mark.scss

@@ -6,7 +6,7 @@
 
 .highlight-mark,
 %highlight-mark {
-  color: $mark-highlight;
+  color: var(--color-mark-highlight);
   // Remove background highlighting from <mark> in normalize.
   background-color: transparent;
 }

assets/sass/components/inverted-box/_inverted-box.scss

@@ -3,13 +3,13 @@
 .inverted-box,
 %inverted-box {
   @include padding(.5);
-  background: $brand;
+  background: var(--color-brand);
-  color: $text-bg;
+  color: var(--color-text-bg);
   border-radius: 5px;
 
   :link,
   :visited {
-    color: $text-bg;
+    color: var(--color-text-bg);
   }
 
   p,

assets/sass/components/messages/_messages.scss

@@ -7,20 +7,20 @@
   width: 95%;
 
   &.status {
-    background-color: $status-bg;
+    background-color: var(--color-status-bg);
-    color: $status;
+    color: var(--color-status);
-    border-color: $status;
+    border-color: var(--color-status);
   }
 
   &.warning {
-    background-color: $warning-bg;
+    background-color: var(--color-warning-bg);
-    color: $warning;
+    color: var(--color-warning);
-    border-color: $warning;
+    border-color: var(--color-warning);
   }
 
   &.error {
-    background-color: $error-bg;
+    background-color: var(--color-error-bg);
-    color: $error;
+    color: var(--color-error);
-    border-color: $error;
+    border-color: var(--color-error);
   }
 }

assets/sass/components/watermark/_watermark.scss

@@ -10,7 +10,7 @@
   overflow: visible;
   // Remove background highlighting from <mark> in normalize.
   background-color: transparent;
-  color: $watermark;
+  color: var(--color-watermark);
   font-size: 75px;
   line-height: 1;
   text-align: center;

assets/sass/components/wireframe/_wireframe.scss

@@ -11,7 +11,7 @@ $with-wireframes: false !default;
 @if $with-wireframes {
   .wireframe,
   %wireframe {
-    outline: 1px solid $border;
+    outline: 1px solid var(--color-border);
   }
 
   //

assets/sass/init/_colors.scss

@@ -1,73 +0,0 @@
-// stylelint-disable color-no-hex, color-named
-
-// Base colors.
-$black:                  #000;
-$nearblack:              lighten($black, 20%); // #333
-$grey-dark:              lighten($black, 40%); // #666
-$grey:                   lighten($black, 60%); // #999
-$grey-light:             lighten($black, 80%); // #ccc
-$grey-extra-light:       lighten($black, 93.33%); // #eee
-$white:                  #fff;
-
-$blue:                   #0072b9;
-$red:                    #c00;
-$green:                  #43a808;
-$yellow:                 #fd0;
-
-// Colors used in the main content area.
-$brand:                  $nearblack;
-$brand-alt:              $grey;
-$brand-dark:             $grey-dark;
-$text:                   $black;
-$text-bg:                $white;
-$text-meta:              $grey-dark;
-
-$link:                   $black;
-$link-visited:           $black;
-$link-hover:             $brand;
-$link-active:            $red;
-
-$border:                 $grey-light;
-$border-dark:            $nearblack;
-
-$autocomplete:           $text;
-$autocomplete-bg:        $text-bg;
-$autocomplete-select:    $white;
-$autocomplete-select-bg: $blue;
-
-$body-bg:                $white;
-$header-bg:              $brand;
-$backdrop:               $grey-extra-light;
-
-$mobile-menu:            $header-bg;
-$mobile-menu-cover:      rgba($black, .2);
-
-$button:                 $nearblack;
-$button-disabled:        $grey;
-
-$form-error:             $red;
-
-$mark-highlight:         $red;
-$mark-bg:                $yellow;
-
-$menu-active:            $text;
-
-$preview-bg:             lighten($yellow, 43%);
-
-$row-stripe:             $white;
-$row-disabled:           $grey-light;
-
-$status:                 $green;
-$status-bg:              lighten($status, 62%);
-$status-highlight:       $text;
-$warning:                $text;
-$warning-bg:             lighten($yellow, 45%);
-$warning-border:         $yellow;
-$error:                  $red;
-$error-bg:               lighten($error, 57%);
-
-$watermark:              $grey-extra-light;
-
-$headings:               $nearblack;
-
-$code:                   $nearblack;