aboutsummaryrefslogtreecommitdiff
path: root/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'layouts')
-rw-r--r--layouts/_default/single.html4
-rw-r--r--layouts/_default/single.json8
-rw-r--r--layouts/index.html8
-rw-r--r--layouts/index.json59
-rw-r--r--layouts/issues/issue.html13
-rw-r--r--layouts/issues/single.json13
-rw-r--r--layouts/issues/small.html52
-rw-r--r--layouts/partials/footer.html1
-rw-r--r--layouts/partials/index/autorefresh.html8
-rw-r--r--layouts/partials/index/components.html130
-rw-r--r--layouts/partials/index/incidents-monthly.html29
-rw-r--r--layouts/partials/index/incidents-yearly.html14
-rw-r--r--layouts/partials/index/summary.html2
-rw-r--r--layouts/partials/js.html2
-rw-r--r--layouts/partials/meta.html139
15 files changed, 381 insertions, 101 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 51a09e8..48596df 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -2,7 +2,9 @@
<body class="default single">
<div class="contain">
<a href="{{ .Site.BaseURL }}">← {{ T "goBack" }} <em>{{ .Site.Title }}</em></a>
- <hr>
+
+ <div class="padding"></div>
+
{{ .Content }}
</div>
diff --git a/layouts/_default/single.json b/layouts/_default/single.json
new file mode 100644
index 0000000..634e2bc
--- /dev/null
+++ b/layouts/_default/single.json
@@ -0,0 +1,8 @@
+{
+ "is": "page",
+ "title": "{{ .Title }}",
+ "createdAt": "{{ .Date }}",
+ "filename": "{{ .File.LogicalName }}",
+ "permalink": "{{ .Permalink }}",
+ "body": {{ jsonify .Content }}
+} \ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index be887c8..c02224a 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -38,7 +38,13 @@
<!-- All incidents + pagination -->
<div class="contain contain--more" id="incidents">
- {{ partial "index/incidents" . }}
+ {{ if eq .Site.Params.incidentHistoryFormat "yearly" }}
+ {{ partial "index/incidents-yearly" . }}
+ {{ else if eq .Site.Params.incidentHistoryFormat "monthly" }}
+ {{ partial "index/incidents-monthly" . }}
+ {{ else }}
+ {{ partial "index/incidents" . }}
+ {{ end }}
<div class="padding"></div>
</div>
diff --git a/layouts/index.json b/layouts/index.json
new file mode 100644
index 0000000..3a2c299
--- /dev/null
+++ b/layouts/index.json
@@ -0,0 +1,59 @@
+{{ $incidents := where .Site.RegularPages "Params.section" "issue" }}
+{{ $active := where $incidents "Params.resolved" "=" false }}
+{{ $isNotice := where $active "Params.severity" "=" "notice" }}
+{{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
+{{ $isDown := where $active "Params.severity" "=" "down" }}
+{
+ "is": "index",
+ "cStateVersion": "4.0.0",
+ "apiVersion": "1.0.0",
+ "title": "{{ .Site.Title }}",
+ "languageCodeHTML": "{{ .Site.LanguageCode }}",
+ "languageCode": "{{ T "languageCode" }}",
+ "baseURL": "{{ .Site.BaseURL }}",
+ "description": "{{ .Site.Params.Description }}",
+ "logo": "{{ .Site.Params.logo | absURL }}",
+ "categories": [
+ {{ range $i, $e := .Site.Params.categories }}{{ if $i }},{{ end }}
+ {
+ "name": "{{ .name }}",{{ if .description }}
+ "description": "{{ .description }}",{{ end }}
+ "hideTitle": {{ if .untitled }}true{{ else }}false{{ end }},
+ "closedByDefault": {{ if .closed }}true{{ else }}false{{ end }}
+ }
+ {{ end }}
+ ],
+ "systems": [
+ {{ range $i, $e := .Site.Params.systems }}{{ if $i }},{{ end }}
+ {
+ "name": "{{ .name }}",{{ if .description }}
+ "description": "{{ .description }}",{{ end }}
+ "category": "{{ .category }}"
+ }
+ {{ end }}
+ ],
+
+
+ "buildDate": "{{ now.Format "2006-01-02" }}",
+ "buildTime": "{{ now.Format "15:04" }}",
+ "buildTimezone": "{{ now.Format "MST" }}",
+ "summaryStatus":{{ if $isDown }}
+ "down",
+ {{ else }}
+ {{ if $isDisrupted }}
+ "disrupted",
+ {{ else }}
+ {{ if $isNotice }}
+ "notice",
+ {{ else }}
+ "ok",
+ {{ end }}{{ end }}{{ end }}
+ "colorBrand": "{{ .Site.Params.Brand }}",
+ "colorOk": "{{ .Site.Params.Ok }}",
+ "colorDisrupted": "{{ .Site.Params.Disrupted }}",
+ "colorDown": "{{ .Site.Params.Down }}",
+ "colorNotice": "{{ .Site.Params.Notice }}",
+ "alwaysKeepBrandColor": "{{ .Site.Params.alwaysKeepBrandColor }}",
+
+ "googleAnalytics": "{{ .Site.Params.googleAnalytics }}"
+} \ No newline at end of file
diff --git a/layouts/issues/issue.html b/layouts/issues/issue.html
index c344f57..62f3ab3 100644
--- a/layouts/issues/issue.html
+++ b/layouts/issues/issue.html
@@ -24,7 +24,8 @@
{{ end }}
</small></p>
- {{ if .Params.Resolved }}
+ {{ if .Params.informational }}
+ {{ else if .Params.Resolved }}
{{ $t := (time .Params.ResolvedWhen) }}
{{ $timeDiff := (sub $t.Unix .Date.Unix) }}
{{ $diffInMin := (div $timeDiff 60) }}
@@ -79,7 +80,15 @@
{{ end }}
{{ end }}
{{ else }}
- <strong class="error">{{ T "downtimeOngoing" }}</strong>
+ <strong class="error">
+ {{ if eq .Params.severity "down" }}
+ ■
+ {{ else if eq .Params.severity "disrupted" }}
+ ▲
+ {{ else }}
+ ◆
+ {{ end }}
+ {{ T "downtimeOngoing" }}</strong>
{{ end }}
<hr>
diff --git a/layouts/issues/single.json b/layouts/issues/single.json
new file mode 100644
index 0000000..36b0f67
--- /dev/null
+++ b/layouts/issues/single.json
@@ -0,0 +1,13 @@
+{
+ "is": "issue",
+ "title": "{{ .Title }}",
+ "createdAt": "{{ .Date }}",
+ "permalink": "{{ .Permalink }}",
+ "severity": "{{ .Params.severity }}",
+ "resolved": "{{ .Params.resolved }}",
+ "informational": "{{ .Params.informational }}",
+ "resolvedAt": "{{ .Params.resolvedWhen }}",
+ "affected": [{{ range $i, $e := .Params.Affected }}{{ if $i }}, {{ end }}"{{ . }}"{{ end }}],
+ "filename": "{{ .File.LogicalName }}",
+ "body": {{ jsonify .Content }}
+} \ No newline at end of file
diff --git a/layouts/issues/small.html b/layouts/issues/small.html
index ef30b75..0e1d5ed 100644
--- a/layouts/issues/small.html
+++ b/layouts/issues/small.html
@@ -6,7 +6,23 @@
{{ $isDown := where $active "Params.severity" "=" "down" }}
<a href="{{ .Permalink }}" class="issue no-underline">
- {{ if .Params.Resolved }}
+ {{ if .Params.informational }}
+
+ <small class="date float-right">
+ {{ if .Site.Params.dateFormat }}
+ {{ .Date.Format .Site.Params.dateFormat }}
+ {{ else }}
+ {{ .Date.Format "January 2, 2006 at 3:04 PM" }}
+ {{ end }}
+ </small>
+
+ <h3>
+ {{ .Title }} &nbsp;ℹ
+ </h3>
+ <span class="faded">{{ .Summary | truncate 200 }}
+ </span>
+
+ {{ else if .Params.Resolved }}
<small class="date float-right">
{{ if .Site.Params.dateFormat }}
{{ .Date.Format .Site.Params.dateFormat }}
@@ -49,24 +65,30 @@
</div>
{{ end }}
{{ end }}
-
-
{{ else }}
- <small class="date float-right">
- {{ if .Site.Params.dateFormat }}
- {{ .Date.Format .Site.Params.dateFormat }}
- {{ else }}
- {{ .Date.Format "January 2, 2006 at 3:04 PM" }}
- {{ end }}
- </small>
+ <small class="date float-right">
+ {{ if .Site.Params.dateFormat }}
+ {{ .Date.Format .Site.Params.dateFormat }}
+ {{ else }}
+ {{ .Date.Format "January 2, 2006 at 3:04 PM" }}
+ {{ end }}
+ </small>
- <h3>
- {{ .Title }}
- </h3>
+ <h3>
+ {{ .Title }}
+ </h3>
- <!-- Marker -->
- <div class="error">{{ T "downtimeOngoing" }}</div>
+ <!-- Marker -->
+ <strong class="error">
+ {{ if eq .Params.severity "down" }}
+ ■
+ {{ else if eq .Params.severity "disrupted" }}
+ ▲
+ {{ else }}
+ ◆
+ {{ end }}
+ {{ T "downtimeOngoing" }}</strong>
{{ end }}
</a>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 6187f61..ceeea29 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -17,6 +17,7 @@
<p class="hinted">
<small>
+ ⚡
{{ T "rss" }} —
{{ with $.Site.Home.OutputFormats.Get "rss" }}
<a href="{{ .Permalink }}" class="no-underline">{{ T "toAllUpdates" }}</a>
diff --git a/layouts/partials/index/autorefresh.html b/layouts/partials/index/autorefresh.html
index b419e2f..e69de29 100644
--- a/layouts/partials/index/autorefresh.html
+++ b/layouts/partials/index/autorefresh.html
@@ -1,8 +0,0 @@
-{{ if .Site.Params.autoRefresh }}
- <div class="faded right">
- <small><em>{{ T "autoRefreshNotice" }}</em></small>
- </div>
- <div class="padding-s"></div>
- {{ else }}
- <div class="padding"></div>
-{{ end }} \ No newline at end of file
diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index 128b887..135349a 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -5,49 +5,97 @@
{{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
{{ $isDown := where $active "Params.severity" "=" "down" }}
-<div class="components">
- {{ $systems := .Site.Params.systems }}
- {{ range $systems }}
- {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
-
- {{ $thisIsNotice := where $activeComponentIssues "Params.severity" "=" "notice" }}
- {{ $thisIsDisrupted := where $activeComponentIssues "Params.severity" "=" "disrupted" }}
- {{ $thisIsDown := where $activeComponentIssues "Params.severity" "=" "down" }}
-
- <div class="component" data-status="{{ if $thisIsDown }}down{{ else }}{{ if $thisIsDisrupted }}disrupted{{ else }}{{ if $thisIsNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
- <a href="/affected/{{ .name | urlize }}" class="no-underline">
- {{ .name }}
- </a>
-
- {{ with .description }}
- <span class="tooltip tooltip--small">
- &nbsp; <span class="faded">(?)</span>
-
- <span class="tooltip__text">
- {{ . }}
- </span>
+<!-- Individual info -->
+<div class="categories">
+ {{ $systems := .Site.Params.systems }}
+ {{ $categories := .Site.Params.categories }}
+
+ <script>
+ function toggleCategoryHead(el) {
+ if (el.parentNode.className == 'category category--open') {
+ el.parentNode.className = 'category category--closed';
+ } else {
+ el.parentNode.className = 'category category--open';
+ }
+ }
+ </script>
+
+ {{ range $categories }}
+ <div class="category {{ if .closed }}category--closed{{ else }}category--open{{ end }}" id="{{ .name | urlize }}">
+ {{ if not .untitled }}
+ <div class="bold padding clicky category__head" onclick="toggleCategoryHead(this)">
+ <span class="hide-without-js">
+ <span class="category__closed-marker">⯈</span>
+ <span class="category__open-marker">⯆</span>
+ </span>
+
+ <b>
+ {{ .name }}
+ </b>
+
+ {{ with .description }}
+ <span class="tooltip tooltip--small">
+ &nbsp; <span class="faded">(?)</span>
+
+ <span class="tooltip__text">
+ {{ . }}
</span>
- {{ end }}
-
- <span class="component-status">
- {{ if $thisIsDown }}
- <b>{{ T "thisIsDown" }}</b>
- {{ else }}
- {{ if $thisIsDisrupted }}
- <b>{{ T "thisIsDisrupted" }}</b>
- {{ else }}
- {{ if $thisIsNotice }}
- <b>{{ T "thisIsNotice" }}</b>
- {{ else }}
- {{ T "thisIsOk" }}
- {{ end }}{{ end }}{{ end }}
</span>
+ {{ end }}
+
+ </div>
+ {{ else }}
+ <div class="padding"></div>
+ {{ end }}
+
+ {{ $categorySystems := where $systems "category" "=" .name }}
- {{ with .partial }}
- <div>
- {{ partial . . }}
+ <div class="components">
+ {{ range $categorySystems }}
+ {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
+
+ {{ $thisIsNotice := where $activeComponentIssues "Params.severity" "=" "notice" }}
+ {{ $thisIsDisrupted := where $activeComponentIssues "Params.severity" "=" "disrupted" }}
+ {{ $thisIsDown := where $activeComponentIssues "Params.severity" "=" "down" }}
+
+ <div class="component" data-status="{{ if $thisIsDown }}down{{ else }}{{ if $thisIsDisrupted }}disrupted{{ else }}{{ if $thisIsNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
+ <a href="/affected/{{ .name | urlize }}" class="no-underline">
+ {{ .name }}
+ </a>
+
+ {{ with .description }}
+ <span class="tooltip tooltip--small">
+ &nbsp; <span class="faded">(?)</span>
+
+ <span class="tooltip__text">
+ {{ . }}
+ </span>
+ </span>
+ {{ end }}
+
+ <span class="component-status">
+ {{ if $thisIsDown }}
+ {{ T "thisIsDown" }}
+ {{ else }}
+ {{ if $thisIsDisrupted }}
+ {{ T "thisIsDisrupted" }}
+ {{ else }}
+ {{ if $thisIsNotice }}
+ {{ T "thisIsNotice" }}
+ {{ else }}
+ {{ T "thisIsOk" }}
+ {{ end }}{{ end }}{{ end }}
+ </span>
+
+ {{ with .partial }}
+ <div>
+ {{ partial . . }}
+ </div>
+ {{ end }}
</div>
- {{ end }}
+ {{ end }}
</div>
- {{ end }}
- </div> \ No newline at end of file
+ </div>
+ {{ end }}
+
+</div> \ No newline at end of file
diff --git a/layouts/partials/index/incidents-monthly.html b/layouts/partials/index/incidents-monthly.html
new file mode 100644
index 0000000..263bc52
--- /dev/null
+++ b/layouts/partials/index/incidents-monthly.html
@@ -0,0 +1,29 @@
+{{ $incidents := where .Site.RegularPages "Params.section" "issue" }}
+
+
+
+{{ range ($incidents.GroupByDate "1") }}
+ <div class="padding"></div>
+ <hr>
+ <p class="center" id="archive-{{ range first 1 .Pages }}{{ .Date.Format "2006" }}{{ end }}-{{ .Key }}"><a href="#archive-{{ range first 1 .Pages }}{{ .Date.Format "2006" }}{{ end }}-{{ .Key }}" class="no-underline">
+ <b>
+ <!-- Hugo requires a '0' in the month
+ which is why this check exists -->
+ {{ if gt .Key 9 }}
+ {{ $month := printf "2006-%s-02" .Key }}
+ {{ $monthDate := $month | time }}
+ {{ $monthDate.Format "January" }}
+ {{ else }}
+ {{ $month := printf "2006-0%s-02" .Key }}
+ {{ $monthDate := $month | time }}
+ {{ $monthDate.Format "January" }}
+ {{ end }}
+ {{ range first 1 .Pages }}{{ .Date.Format "2006" }}{{ end }}
+ </b><small class="faded">({{ len .Pages }})</small>
+ </a></p>
+ <hr>
+
+ {{ range .Pages }}
+ {{ .Render "small" }}
+ {{ end }}
+{{ end }}
diff --git a/layouts/partials/index/incidents-yearly.html b/layouts/partials/index/incidents-yearly.html
new file mode 100644
index 0000000..d07be9d
--- /dev/null
+++ b/layouts/partials/index/incidents-yearly.html
@@ -0,0 +1,14 @@
+{{ $incidents := where .Site.RegularPages "Params.section" "issue" }}
+
+
+{{ range ($incidents.GroupByDate "2006") }}
+ <div class="padding"></div>
+ <hr>
+ <p class="center" id="archive-{{ .Key }}"><a href="#archive-{{ .Key }}" class="no-underline"><strong>{{ .Key }}</strong>
+ <span class="faded">({{ len .Pages }})</span>
+ </a></p><hr>
+
+ {{ range .Pages }}
+ {{ .Render "small" }}
+ {{ end }}
+{{ end }}
diff --git a/layouts/partials/index/summary.html b/layouts/partials/index/summary.html
index d8e3108..de6bceb 100644
--- a/layouts/partials/index/summary.html
+++ b/layouts/partials/index/summary.html
@@ -20,5 +20,5 @@
{{ end }}{{ end }}{{ end }}
</strong>
- <span class="summary__date float-right" onclick="location.reload()"></span>
+ <div class="summary__date clicky float-right" onclick="location.reload()"></div>
</div> \ No newline at end of file
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index 388b706..7740d85 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -3,7 +3,7 @@
* Dev toolset
*/
- console.log('cState v3.1.0 - Stable 2019-04-08 - https://github.com/cstate/cstate');
+ console.log('cState v4.0.0 - rc1 2019-12-15 - https://github.com/cstate/cstate');
document.getElementsByTagName('html')[0].className = 'js';
/**
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 6a6f790..19ac00c 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -12,14 +12,16 @@
{{ range .AlternativeOutputFormats -}}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}
- <meta name="generator" content="cState v3.1.0 - Stable 2019-04-08">
- <meta name="theme-color" content="#{{ .Site.Params.brand }}">
+ <meta name="generator" content="cState v4.0.0 - rc1 2019-12-15 - https://github.com/cstate/cstate">
+ <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>
<!-- Sources -->
<style>
@@ -27,7 +29,7 @@
margin: 0;
background: #fff;
color: #4d4d4d;
- font: 100%/1.5 BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ font: 100%/1.5 "Inter", "Inter UI", BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0, 0.25);
}
@@ -64,7 +66,8 @@
h1, h2, h4 {
font-weight: normal;
color: #000;
- font-family: "Segoe UI", BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ font-family: "Inter", "Inter UI", "Segoe UI", BlinkMacSystemFont, -apple-system, "San Francisco Display", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ letter-spacing: -0.4px;
}
h3 {
@@ -92,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;
@@ -108,6 +111,24 @@
.right { text-align: right; }
.padding-s { padding: 6px; }
.padding { padding: 12px; }
+ .clicky { cursor: pointer; }
+
+
+ /**
+ * Categories
+ */
+
+ /* Categories themselves */
+ .js .category--open .category__closed-marker { display: none; }
+ .js .category--closed .components { display: none; }
+ .js .category--closed .category__open-marker { display: none; }
+
+ /* Markers */
+ .js .hidden-with-js { display: none; }
+ .hide-without-js { display: none; }
+ .js span.hide-without-js { display: inline; }
+ .js div.hide-without-js { display: block; }
+
/**
* UI elements
@@ -136,7 +157,7 @@
.header {
padding: 8px 0;
- background: #{{ .Site.Params.brand }};
+ background: {{ .Site.Params.brand }};
}
.header a {
@@ -181,11 +202,6 @@
color: #fff;
}
- .summary__date {
- display: block;
- cursor: pointer;
- }
-
.summary__date:hover {
color: #ccc;
}
@@ -267,28 +283,30 @@
*/
.issue { display: block; padding: 14px 24px; }
- .issue:hover { background: #f5f5f5; }
- .issue:active { background: #eee; }
+ .issue:hover, .category__head:hover { background: #f5f5f5; }
+ .issue:active, .category__head:active { background: #eee; }
.issue h3 { line-height: 1.25; }
+ .category__head { margin-top: 20px; }
+
/**
* 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; }
@@ -298,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
@@ -313,6 +331,65 @@
display: inline;
}
}
+
+ {{ if not .Site.Params.disableDarkMode }}
+ /**
+ * Dark theme
+ */
+
+ @media (prefers-color-scheme: dark) {
+ /* Basics */
+ html, body { background: #181a1b; color: #ccc9c1; }
+ h1, h2, h3, h4, a, .bold { color: #fafafa; }
+ hr { border-bottom-color: #3d3d3d; }
+
+ /* Sections */
+ .footer { background: #1b1d1e; }
+
+ .components {
+ border: 2px solid #ddd;
+ border-bottom: 0;
+ border-color: #3a3a3a;
+ }
+
+ .component {
+ border-bottom: 2px solid #ddd;
+ color: #e8e6e3;
+ border-bottom-color: #3a3a3a;
+ }
+
+ .tabs { border-bottom-color: #3d3d3d; }
+ .tab--current {
+ border-color: #3d3d3d;
+ border-bottom-color: #181a1b;
+ }
+ .tab--other { color: #757575; }
+ .tab--other:hover { color: #fff; }
+
+ .date { color: #c3bfb6; }
+
+ .tag { background-color: #1d1f20; }
+ .tag:hover { background: #222; }
+ .issue:hover,
+ .category__head:hover { background-color: #212121; }
+
+ /* Colors for dark mode */
+
+ .hinted, .faded { color: #c1bcb3; }
+ .error { color: #ff4242; }
+ .warning {color: #ffde7f; }
+ .ok { color: #7fff7f; }
+
+ .component[data-status="ok"]
+ .component-status { color: #7fff7f; }
+ .component[data-status="disrupted"]
+ .component-status { color: #ffde7f; }
+ .component[data-status="notice"]
+ .component-status { color: #83a4e8; }
+ .component[data-status="down"]
+ .component-status { color: #ff8181; }
+ }
+ {{ end }}
</style>
{{ if .Site.Params.enableCustomHTML }}
{{ partial "custom/meta" . }}