Only load css colours variables ones.

assets/sass/_custom.scss

@@ -1 +1,8 @@
 // Site custom styles and colours. This file loads last.
+
+// Override colours like this
+// :root {
+//   --color-brand: red;
+//   --color-brand-alt: blue;
+//   --color-brand-dark: green;
+// }

assets/sass/_init.scss

@@ -5,8 +5,7 @@
 // file is in charge of importing all the other partials needed for the
 // project.
 
-// Colours and variables.
-@import 'colors';
+// Variables.
 @import 'variables';
 @import 'extra';
 

assets/sass/styles.scss

@@ -4,7 +4,11 @@
 
 @import 'init';
 
-// Declaring global CSS variables in :root.
+// Declaring CSS colour variables in :root.
+
+@import 'colors';
+
+// Declaring CSS misc variables in :root.
 
 @import 'root';
 
@@ -60,10 +64,10 @@
 @import 'navigation/navbar/navbar';
 @import 'navigation/pager/pager';
 
-// Zen
+// Zen styles
 
 @import 'zen';
 
-// Custom
+// Custom styles
 
 @import 'custom';

layouts/partials/styles.html

@@ -12,8 +12,8 @@
   {{ $mobile_style = $mobile_style | fingerprint -}}
   {{ $print_style = $print_style | fingerprint -}}
 {{ end -}}
+<link rel="stylesheet" href="{{ $main_style.RelPermalink }}">
 {{ if $.Param "mobilemenu" -}}
 <link rel="stylesheet" href="{{ $mobile_style.RelPermalink }}" media="screen">
 {{ end -}}
-<link rel="stylesheet" href="{{ $main_style.RelPermalink }}">
 <link rel="stylesheet" href="{{ $print_style.RelPermalink }}" media="print">