From a07a3ccb6d76f3bacc85eddf0c132aa29a1a610c Mon Sep 17 00:00:00 2001 From: Mantas Vilčinskas Date: Fri, 4 Oct 2019 18:59:16 +0300 Subject: Added symbols for severity, informational posts, yearly layout default --- layouts/issues/issue.html | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'layouts/issues/issue.html') diff --git a/layouts/issues/issue.html b/layouts/issues/issue.html index c344f57..24cadd8 100644 --- a/layouts/issues/issue.html +++ b/layouts/issues/issue.html @@ -24,7 +24,8 @@ {{ end }}

- {{ 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 }} - {{ T "downtimeOngoing" }} + + {{ if eq .Params.severity "down" }} + ◼ + {{ else if eq .Params.severity "disrupted" }} + ▲ + {{ else }} + ◆ + {{ end }} + {{ T "downtimeOngoing" }} {{ end }}
-- cgit v1.2.3-70-g09d2 From 91f464f8f67e172f7276b3644e16b3b89a992113 Mon Sep 17 00:00:00 2001 From: Mantas Vilčinskas Date: Sun, 15 Dec 2019 12:12:43 +0200 Subject: Design updates - dark mode finished, mini fixes --- README.md | 2 +- exampleSite/config.yml | 15 ++++ .../issues/2019-10-04-testing-cstate-functions.md | 1 - layouts/issues/issue.html | 6 +- layouts/issues/small.html | 6 +- layouts/partials/meta.html | 82 +++++++++++++++------- 6 files changed, 80 insertions(+), 32 deletions(-) (limited to 'layouts/issues/issue.html') 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 }} {{ if eq .Params.severity "down" }} - ◼ + ■ {{ else if eq .Params.severity "disrupted" }} - ▲ + ▲ {{ else }} - ◆ + ◆ {{ end }} {{ T "downtimeOngoing" }} {{ 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 @@ {{ if eq .Params.severity "down" }} - ◼ + ■ {{ else if eq .Params.severity "disrupted" }} - ▲ + ▲ {{ else }} - ◆ + ◆ {{ end }} {{ T "downtimeOngoing" }} 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 }} {{ if .Site.Params.enableCustomHTML }} {{ partial "custom/meta" . }} -- cgit v1.2.3-70-g09d2