aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMantas Vilčinskas <hi@mnts.lt>2019-12-15 12:37:26 +0200
committerMantas Vilčinskas <hi@mnts.lt>2019-12-15 12:37:26 +0200
commitd04adae5f8ac3e8296b2efc1c455abdafc37eb60 (patch)
tree16a26395839b6e56c836f84fb3cda31d1b226ffb
parent91f464f8f67e172f7276b3644e16b3b89a992113 (diff)
Fix #83 - hex colors now need hash
-rw-r--r--exampleSite/config.yml24
-rw-r--r--layouts/partials/meta.html42
-rw-r--r--static/admin/config.yml20
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.'