Fix #83 - hex colors now need hash

3 files changed, 44 insertions, 42 deletions

diff --git a/exampleSite/config.yml b/exampleSite/config.yml
index 98f95c0..3e474b1 100644
--- a/exampleSite/config.yml
+++ b/exampleSite/config.yml
@@ -237,20 +237,22 @@ params:
   incidentPostsPerPage: 10
 
   # Colors throughout cState
-  # HEX codes without the #
+  #
+  # We recommend using HEX
+  # (with the # symbol).
   #
   # Defaults:
   #
-  # brand: "0a0c0f"
-  # ok: "008000"
-  # disrupted: "cc4400"
-  # down: "e60000"
-  # notice: "24478f"
-  brand: "0a0c0f"
-  ok: "008000"
-  disrupted: "cc4400"
-  down: "e60000"
-  notice: "24478f"
+  # brand: "#0a0c0f"
+  # ok: "#008000"
+  # disrupted: "#cc4400"
+  # down: "#e60000"
+  # notice: "#24478f"
+  brand: "#0a0c0f"
+  ok: "#008000"
+  disrupted: "#cc4400"
+  down: "#e60000"
+  notice: "#24478f"
 
   # If the status page shows that
   # there are disruptions or outages
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index bcd3967..d953331 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -13,13 +13,13 @@
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
     {{ end -}}
     <meta name="generator" content="cState v4.0.0 - Dev 2019-10-06">
-    <meta name="theme-color" content="#{{ .Site.Params.brand }}">
+    <meta name="theme-color" content="{{ .Site.Params.brand }}">
     <script>
-    var themeBrandColor = '#{{ .Site.Params.brand }}';
-    var themeOkColor = '#{{ .Site.Params.ok }}';
-    var themeNoticeColor = '#{{ .Site.Params.notice }}';
-    var themeDisruptedColor = '#{{ .Site.Params.disrupted }}';
-    var themeDownColor = '#{{ .Site.Params.down }}';
+    var themeBrandColor = '{{ .Site.Params.brand }}';
+    var themeOkColor = '{{ .Site.Params.ok }}';
+    var themeNoticeColor = '{{ .Site.Params.notice }}';
+    var themeDisruptedColor = '{{ .Site.Params.disrupted }}';
+    var themeDownColor = '{{ .Site.Params.down }}';
 
 
     </script>
@@ -95,9 +95,9 @@
 
     .clean { margin: 0; }
 
-    .ok { color: #{{ .Site.Params.ok }}; }
-    .warning { color: #{{ .Site.Params.disrupted }}; }
-    .error { color: #{{ .Site.Params.down }}; }
+    .ok { color: {{ .Site.Params.ok }}; }
+    .warning { color: {{ .Site.Params.disrupted }}; }
+    .error { color: {{ .Site.Params.down }}; }
 
     .contain {
       max-width: 640px;
@@ -157,7 +157,7 @@
 
     .header {
       padding: 8px 0;
-      background: #{{ .Site.Params.brand }};
+      background: {{ .Site.Params.brand }};
     }
 
     .header a {
@@ -295,18 +295,18 @@
      * Specific to the status
      */
 
-    .status-ok .summary { background: #{{ .Site.Params.ok }}; }
-    .status-disrupted .summary, .change-header-color.status-disrupted .header { background: #{{ .Site.Params.disrupted }}; }
-    .status-down .summary, .change-header-color.status-down .header { background: #{{ .Site.Params.down }}; }
-    .status-notice .summary, .change-header-color.status-notice .header { background: #{{ .Site.Params.notice }}; }
+    .status-ok .summary { background: {{ .Site.Params.ok }}; }
+    .status-disrupted .summary, .change-header-color.status-disrupted .header { background: {{ .Site.Params.disrupted }}; }
+    .status-down .summary, .change-header-color.status-down .header { background: {{ .Site.Params.down }}; }
+    .status-notice .summary, .change-header-color.status-notice .header { background: {{ .Site.Params.notice }}; }
 
     .announcement-box .padding {
       padding: 16px;
     }
 
-    .status-disrupted .announcement-box { border: 2px solid #{{ .Site.Params.disrupted }}; }
-    .status-down .announcement-box { border: 2px solid #{{ .Site.Params.down }}; }
-    .status-notice .announcement-box { border: 2px solid #{{ .Site.Params.notice }}; }
+    .status-disrupted .announcement-box { border: 2px solid {{ .Site.Params.disrupted }}; }
+    .status-down .announcement-box { border: 2px solid {{ .Site.Params.down }}; }
+    .status-notice .announcement-box { border: 2px solid {{ .Site.Params.notice }}; }
     .status-disrupted .announcement-box,
     .status-down .announcement-box,
     .status-notice .announcement-box { border-top: 0; }
@@ -316,10 +316,10 @@
      */
 
     .component-status { float: right; }
-    .component[data-status="ok"] .component-status { color: #{{ .Site.Params.ok }}; }
-    .component[data-status="disrupted"] .component-status { color: #{{ .Site.Params.disrupted }}; }
-    .component[data-status="down"] .component-status { color: #{{ .Site.Params.down }}; }
-    .component[data-status="notice"] .component-status { color: #{{ .Site.Params.notice }}; }
+    .component[data-status="ok"] .component-status { color: {{ .Site.Params.ok }}; }
+    .component[data-status="disrupted"] .component-status { color: {{ .Site.Params.disrupted }}; }
+    .component[data-status="down"] .component-status { color: {{ .Site.Params.down }}; }
+    .component[data-status="notice"] .component-status { color: {{ .Site.Params.notice }}; }
 
     /**
      * Responsiveness
diff --git a/static/admin/config.yml b/static/admin/config.yml
index 1b64060..0827f66 100644
--- a/static/admin/config.yml
+++ b/static/admin/config.yml
@@ -201,30 +201,30 @@ collections:
                 default: true
               # Colors
               - label: 'Site HEX color: Brand'
-                hint: 'Should not have # mark. Default: 181818'
+                hint: 'Use any color type, even rgb() works. We recommend HEX: #123456. Default: #0a0c0f'
                 name: 'brand'
                 widget: 'string'
-                default: '181818'
+                default: '#0a0c0f'
               - label: 'Site HEX color: Operational / OK'
-                hint: 'Should not have # mark. Default: 228B22'
+                hint: 'Use any color type, even rgb() works. We recommend HEX: #123456. Default: #008000'
                 name: 'ok'
                 widget: 'string'
-                default: '228B22'
+                default: '#008000'
               - label: 'Site HEX color: Disrupted'
-                hint: 'Should not have # mark. Default: FF8C00'
+                hint: 'Use any color type, even rgb() works. We recommend HEX: #123456. Default: #cc4400'
                 name: 'disrupted'
                 widget: 'string'
-                default: 'FF8C00'
+                default: '#cc4400'
               - label: 'Site HEX color: Down / Offline / Major'
-                hint: 'Should not have # mark. Default: DC143C'
+                hint: 'Use any color type, even rgb() works. We recommend HEX: #123456. Default: #e60000'
                 name: 'down'
                 widget: 'string'
-                default: 'DC143C'
+                default: '#e60000'
               - label: 'Site HEX color: Notice'
-                hint: 'Should not have # mark. Default: 708090'
+                hint: 'Use any color type, even rgb() works. We recommend HEX: #123456. Default: #24478f'
                 name: 'notice'
                 widget: 'string'
-                default: '708090'
+                default: '#24478f'
               # Google Analytics
               - label: 'Google Analytics tracking code'
                 hint: 'By default, cState does not use Google Analytics. If you choose to use it, you may change the placeholder code below to your own and thereby enable the tracking service. If you set the value back to UA-00000000-1, the code will once again be removed.'