diff --git a/assets/sass/_custom.scss b/assets/sass/_custom.scss
index d5295e9..bb3af8b 100644
--- a/assets/sass/_custom.scss
+++ b/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;
+// }
diff --git a/assets/sass/_init.scss b/assets/sass/_init.scss
index aa29fb8..8a7ad40 100644
--- a/assets/sass/_init.scss
+++ b/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';
 
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index 20d43d2..707fa70 100644
--- a/assets/sass/styles.scss
+++ b/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';
diff --git a/layouts/partials/styles.html b/layouts/partials/styles.html
index e4cd66e..87e0aad 100644
--- a/layouts/partials/styles.html
+++ b/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">