cState v4.0 Final (#82)

cState v4.0 Final
author: Mantas Vilčinskas <11616378+mistermantas@users.noreply.github.com> 2019-12-21 21:25:21 +0200
committer: GitHub <noreply@github.com> 2019-12-21 21:25:21 +0200
commit: a8f60c31b75fe5a3c91a6595585738523f1cad25 (patch)
tree: 7528a3042e37765e286c9490f5b321e6799acb41 /layouts
parent: 96394ffb854ec6b8f17aa1ef105eb9ff92e5e676 (diff)
parent: 12e885ad58d44d55603a64906d1dcf7f1d961b4c (diff)
15 files changed, 382 insertions, 102 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..5faf5c6 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -8,7 +8,7 @@
        &nbsp; • &nbsp; <a href="#">{{ T "backToTop" }}</a>
     </p>
 
-    <p>{{ .Site.Params.description }}</p>
+    <p>{{ .Site.Params.description | markdownify }}</p>
 
     <!-- Please keep this one around to help cState grow <3 -->
     <small class="footer__copyright faded">{{ T "poweredBy" }} <a href="https://github.com/cstate/cstate"><b>cState</b></a></small>
@@ -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..ffdced4 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 - 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..9389c54 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 - 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" . }}
author	Mantas Vilčinskas <11616378+mistermantas@users.noreply.github.com>	2019-12-21 21:25:21 +0200
committer	GitHub <noreply@github.com>	2019-12-21 21:25:21 +0200
commit	a8f60c31b75fe5a3c91a6595585738523f1cad25 (patch)
tree	7528a3042e37765e286c9490f5b321e6799acb41 /layouts
parent	96394ffb854ec6b8f17aa1ef105eb9ff92e5e676 (diff)
parent	12e885ad58d44d55603a64906d1dcf7f1d961b4c (diff)