From d04adae5f8ac3e8296b2efc1c455abdafc37eb60 Mon Sep 17 00:00:00 2001 From: Mantas Vilčinskas Date: Sun, 15 Dec 2019 12:37:26 +0200 Subject: Fix #83 - hex colors now need hash --- exampleSite/config.yml | 24 +++++++++++++----------- layouts/partials/meta.html | 42 +++++++++++++++++++++--------------------- static/admin/config.yml | 20 ++++++++++---------- 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 `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}} - + @@ -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.' -- cgit v1.2.3-70-g09d2