Design updates - dark mode finished, mini fixes

6 files changed, 80 insertions, 32 deletions

diff --git a/README.md b/README.md
index 809feca..5a047c5 100644
--- a/README.md
+++ b/README.md
@@ -98,7 +98,7 @@ git submodule add https://github.com/cstate/cstate
 1. Clone this repository in the command line:
 
 ```bash
-git clone --recurisve https://github.com/cstate/cstate.git
+git clone --recursive -b master https://github.com/cstate/cstate.git
 ```
 
 2. Navigate to the theme directory:
diff --git a/exampleSite/config.yml b/exampleSite/config.yml
index a894d26..98f95c0 100644
--- a/exampleSite/config.yml
+++ b/exampleSite/config.yml
@@ -172,6 +172,21 @@ params:
   # STRING; `monthly`, `yearly`, `none`
   incidentHistoryFormat: "yearly"
 
+  # Disable dark mode
+  #
+  # If your OS and browser support the
+  # `prefers-color-scheme` media query,
+  # cState will automatically switch to
+  # a darker user interface.
+  #
+  # cState uses its built-in colors for
+  # most of the interface to ensure
+  # a good user experience.
+  #
+  # Default: false
+  # BOOLEAN; `true`, `false`
+  disableDarkMode: false
+
   # Should we show the logo or the title
   # of the status page?
   #
diff --git a/exampleSite/content/issues/2019-10-04-testing-cstate-functions.md b/exampleSite/content/issues/2019-10-04-testing-cstate-functions.md
index e8e2250..efdf7d7 100644
--- a/exampleSite/content/issues/2019-10-04-testing-cstate-functions.md
+++ b/exampleSite/content/issues/2019-10-04-testing-cstate-functions.md
@@ -1,7 +1,6 @@
 ---
 title: Testing New cState Features
 date: 2019-10-04 18:05:00
-resolvedWhen: 2019-10-04 18:05:00
 informational: true
 section: issue
 ---
diff --git a/layouts/issues/issue.html b/layouts/issues/issue.html
index 24cadd8..62f3ab3 100644
--- a/layouts/issues/issue.html
+++ b/layouts/issues/issue.html
@@ -82,11 +82,11 @@
   {{ else }}
     <strong class="error">
       {{ if eq .Params.severity "down" }}
-      ◼ 
+      ■ 
       {{ else if eq .Params.severity "disrupted" }}
-      ▲
+      ▲ 
       {{ else }}
-      ◆
+      ◆ 
       {{ end }}
       {{ T "downtimeOngoing" }}</strong>
   {{ end }}
diff --git a/layouts/issues/small.html b/layouts/issues/small.html
index 9349046..0e1d5ed 100644
--- a/layouts/issues/small.html
+++ b/layouts/issues/small.html
@@ -82,11 +82,11 @@
     <!-- Marker -->
     <strong class="error">
       {{ if eq .Params.severity "down" }}
-      ◼ 
+      ■ 
       {{ else if eq .Params.severity "disrupted" }}
-      ▲
+      ▲ 
       {{ else }}
-      ◆
+      ◆ 
       {{ end }}
       {{ T "downtimeOngoing" }}</strong>
 
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index a5f6472..bcd3967 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -29,7 +29,7 @@
       margin: 0;
       background: #fff;
       color: #4d4d4d;
-      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";
+      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);
     }
@@ -66,7 +66,7 @@
     h1, h2, h4 {
       font-weight: normal;
       color: #000;
-      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";
+      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;
     }
 
@@ -332,30 +332,64 @@
       }
     }
 
-    /**
-     * Dark theme
-     */
+    {{ 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;
+        }
 
-     @media (prefers-color-scheme: dark) {
-          html, body   { background:  #181a1b; color: #ccc9c1; }
-          h1, h2, h3, h4, a, .bold { color: #e8e6e3; }
-          hr { border-bottom-color: #3d3d3d; }
-          .footer { background: #1b1d1e; }
-          .date { color: #c3bfb6; }
-          .components { border: 2px solid #ddd; border-bottom: 0; border-color: #3a3a3a; }
-          .component { border-bottom: 2px solid #ddd; color: #e8e6e3; border-bottom-color: #3a3a3a; }
-          .tag { background-image: initial; background-color: #1d1f20; }
-          .tag:hover { background: #222; }
-          .issue:hover {background-color: #1b1d1e }
-          .error { color: #ff4242; }
-          .hinted, .faded { color: #c1bcb3; }
-          .warning {color: #ff8b52; }
-          .ok { color: #7fff7f; }
-          .component[data-status="disrupted"] 
-          .component-status { color: #ff8b52; }
-          .component[data-status="ok"] 
-          .component-status { color: #7fff7f; }
+        .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" . }}