diff options
Diffstat (limited to 'layouts/partials')
| -rw-r--r-- | layouts/partials/footer.html | 3 | ||||
| -rw-r--r-- | layouts/partials/index/autorefresh.html | 8 | ||||
| -rw-r--r-- | layouts/partials/index/components.html | 130 | ||||
| -rw-r--r-- | layouts/partials/index/incidents-monthly.html | 29 | ||||
| -rw-r--r-- | layouts/partials/index/incidents-yearly.html | 14 | ||||
| -rw-r--r-- | layouts/partials/index/summary.html | 2 | ||||
| -rw-r--r-- | layouts/partials/js.html | 2 | ||||
| -rw-r--r-- | layouts/partials/meta.html | 139 |
8 files changed, 244 insertions, 83 deletions
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 @@ • <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"> - <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"> + <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"> + <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" . }} |