diff options
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/404.html | 21 | ||||
| -rw-r--r-- | layouts/_default/list.html | 88 | ||||
| -rw-r--r-- | layouts/_default/list.xml | 30 | ||||
| -rw-r--r-- | layouts/_default/single.html | 8 | ||||
| -rw-r--r-- | layouts/index.html | 61 | ||||
| -rw-r--r-- | layouts/index.xml | 30 | ||||
| -rw-r--r-- | layouts/issues/issue.html | 96 | ||||
| -rw-r--r-- | layouts/issues/single.html | 6 | ||||
| -rw-r--r-- | layouts/issues/small.html | 76 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 22 | ||||
| -rw-r--r-- | layouts/partials/header.html | 4 | ||||
| -rw-r--r-- | layouts/partials/js.html | 33 | ||||
| -rw-r--r-- | layouts/partials/meta.html | 229 | ||||
| -rw-r--r-- | layouts/shortcodes/track.html | 6 |
14 files changed, 532 insertions, 178 deletions
diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..64ff118 --- /dev/null +++ b/layouts/404.html @@ -0,0 +1,21 @@ +{{ partial "meta" . }} + +{{ $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" }} + + <body class="status-homepage status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }} {{ if not .Site.Params.alwaysKeepBrandColor }}change-header-color{{ end }}"> + {{ partial "header" . }} + + <div class="contain center"> + <h1 class="bold">{{ T "notFound" }}</h1> + <p>{{ T "notFoundText" }}</p> + </div> + + {{ partial "js" . }} + {{ partial "footer" . }} + </body> +</html> diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..b8c14c6 --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,88 @@ +{{ partial "meta" . }} +{{ $title := .Title }} + + <body class="default list"> + <header> + <div class="contain"> + <a href="{{ .Site.BaseURL }}">← {{ T "goBack" }} <em>{{ .Site.Title }}</em></a> + <div class="padding"></div> + <div class="padding"></div> + + <h1 class="clean">{{ $title }}</h1> + + {{ range .Site.Params.systems }} + {{ if eq .name $title }} + {{ with .description }} + <p class="bold">{{ . }}</p> + {{ end }} + {{ end }} + {{ end }} + + <small class="faded">{{ len .Pages }} {{ T "entries" }}, {{ T "newestToOldest" }}</small> + + <div class="padding"></div> + <hr class="clean"> + </div> + {{ $incidents := .Pages }} + </header> + + <div class="contain contain--more" id="incidents"> + {{ if not $incidents }} + <div class="padding"></div> + <h3>{{ T "calmBeforeTheStorm" }}</h3> + <p>{{ T "noIncidentsDesc" }}</p> + <div class="padding"></div> + <div class="padding"></div> + <div class="padding"></div> + {{ else }} + {{ $paginator := .Paginate $incidents .Site.Params.incidentPostsPerPage }} + {{ range $paginator.Pages }} + {{ .Render "small" }} + {{ end }} + + <!-- If there are more than 2 pages, show pagination --> + {{ if gt $paginator.TotalPages 1 }} + <hr> + + <div class="center"> + {{ if $paginator.HasPrev }} + <a href="{{ $paginator.Prev.URL }}#incidents"> + ⭠ + {{ T "prev" }} + </a> + {{ else }} + <span class="faded"> + ⭠ + {{ T "prev" }} + </span> + {{ end }} + + + + {{ $paginator.PageNumber }} + / + {{ $paginator.TotalPages }} + + + + {{ if $paginator.HasNext }} + <a href="{{ $paginator.Next.URL }}#incidents"> + {{ T "next" }} + ⭢ + </a> + {{ else }} + <span class="faded"> + {{ T "next" }} + ⭢ + </span> + {{ end }} + </div> + {{ end }} + {{ end }} + <div class="padding"></div> + </div> + + {{ partial "js" . }} + {{ partial "footer" . }} + </body> +</html> diff --git a/layouts/_default/list.xml b/layouts/_default/list.xml new file mode 100644 index 0000000..219354b --- /dev/null +++ b/layouts/_default/list.xml @@ -0,0 +1,30 @@ +<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> + <channel> + <link rel="alternate" type="text/html" href="{{ .Site.BaseURL }}"/> + <title>{{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title> + <link>{{ .Permalink }}</link> + <description>{{ T "incidentHistory" }}</description> + <generator>github.com/cstate</generator> + {{ with .Site.LanguageCode }}<language>{{.}}</language>{{end}} + {{ if not .Date.IsZero }} + <lastBuildDate>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</lastBuildDate> + <updated>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated> + {{ end }} + {{ with .Site.Copyright }} + <copyright>{{.}}</copyright>{{end}} + {{ with .OutputFormats.Get "RSS" }} + {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }} + {{ end }} + {{ range .Pages }} + <item> + <title>{{ if .Params.resolved }}[{{ T "resolved" }}] {{ end }}{{ .Title }}</title> + <link>{{ .Permalink }}</link> + <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate> + <guid>{{ .Permalink }}</guid> + <category>{{ .Params.resolvedWhen }}</category> + <description>{{ .Summary | html }}</description> + <content type="html">{{ .Content | html }}</content> + </item> + {{ end }} + </channel> +</rss> diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 8463204..c1292b2 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,13 +1,11 @@ {{ partial "meta" . }} - - <body> + <body class="default single"> <div class="contain"> - <a href="{{ .Site.BaseURL }}">← Go back</a> + <a href="{{ .Site.BaseURL }}">← {{ T "goBack" }} <em>{{ .Site.Title }}<em></a> <hr> - {{ .Render "post" }} + {{ .Content }} </div> - {{ partial "js" . }} {{ partial "footer" . }} </body> diff --git a/layouts/index.html b/layouts/index.html index 13e684d..2802ce1 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -13,7 +13,7 @@ <!-- Main --> <div class="contain"> <noscript> - <p class="error">Uh oh! It looks like you have disabled JavaScript. Please <a href="//enable-javascript.com">enable scripting</a> to enhance your experience on this website.</p> + <p class="error">{{ T "noScriptingIntro" }} <a href="//enable-javascript.com">{{ T "noScriptingLink" }}</a> {{ T "noScriptingOutro" }}</p> <div class="padding"></div> </noscript> @@ -21,28 +21,28 @@ <div class="summary"> <strong> {{ if $isDown }} - Experiencing major issues + {{ T "isDown" }} {{ else }} {{ if $isDisrupted }} - Experiencing disruptions + {{ T "isDisrupted" }} {{ else }} {{ if $isNotice }} - Please read announcement + {{ T "isNotice" }} {{ else }} - All systems operational + {{ T "isOk" }} {{ end }}{{ end }}{{ end }} </strong> - <span class="summary__date" onclick="location.reload()"></span> + <span class="summary__date float-right" onclick="location.reload()"></span> </div> {{ if $active }} <div class="announcement-box"> {{ range $active }} <div class="padding"> - <p><strong>{{ .Title }}</strong></p> + <p><strong class="bold">{{ .Title }}</strong></p> {{ .Content | safeHTML | truncate 500 "…" }} - <p><a href="{{ .Permalink }}">Continue reading</a></p> + <p><a href="{{ .Permalink }}">{{ T "continueReading" }}</a></p> </div> {{ else }}{{ end }} </div> @@ -50,7 +50,7 @@ {{ if .Site.Params.autoRefresh }} <div class="faded right"> - <small><em>We will try to refresh every 5 minutes</em></small> + <small><em>{{ T "autoRefreshNotice" }}</em></small> </div> <div class="padding-s"></div> {{ else }} @@ -68,14 +68,15 @@ {{ $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 }}"> - {{ $this := .name }} - {{ .name }} + <a href="/affected/{{ .name | urlize }}" class="no-underline"> + {{ .name }} + </a> {{ with .description }} - <span class="description"> + <span class="tooltip tooltip--small"> <span class="faded">(?)</span> - <span class="description__text"> + <span class="tooltip__text"> {{ . }} </span> </span> @@ -83,15 +84,15 @@ <span class="component-status"> {{ if $thisIsDown }} - Down + {{ T "thisIsDown" }} {{ else }} {{ if $thisIsDisrupted }} - Disrupted + {{ T "thisIsDisrupted" }} {{ else }} {{ if $thisIsNotice }} - Maintenance + {{ T "thisIsNotice" }} {{ else }} - Operational + {{ T "thisIsOk" }} {{ end }}{{ end }}{{ end }} </span> @@ -114,7 +115,7 @@ <div class="tabs"> <div class="contain tabs--inner"> <a href="/#incidents" class="tab tab--current"> - Incidents + {{ T "incidents" }} </a> {{ range .Site.Params.customTabs }} @@ -125,26 +126,25 @@ </div> </div> {{ else }} - <div class="contain"> - <h2 class="center">Incident history</h2> - <hr> + <div class="contain contain--more"> + <h2 class="center">{{ T "incidentHistory" }}</h2> + <hr class="clean"> </div> {{ end }} - <div class="contain" id="incidents"> - <div class="padding"></div> + <div class="contain contain--more" id="incidents"> {{ if not $incidents }} <div class="padding"></div> - <h3>Is it the calm before the storm?</h3> - <p>This status page has no logged incidents. This may be because the status page owner (or owners) have recently set up their status page, have had no downtime, or have not logged any downtime.</p> + <h3>{{ T "calmBeforeTheStorm" }}</h3> + <p>{{ T "noIncidentsDesc" }}</p> <div class="padding"></div> <div class="padding"></div> <div class="padding"></div> {{ else }} {{ $paginator := .Paginate $incidents .Site.Params.incidentPostsPerPage }} {{ range $paginator.Pages }} - {{ .Render "issue" }} + {{ .Render "small" }} {{ end }} <!-- If there are more than 2 pages, show pagination --> @@ -155,12 +155,12 @@ {{ if $paginator.HasPrev }} <a href="{{ $paginator.Prev.URL }}#incidents"> ⭠ - Previuos + {{ T "prev" }} </a> {{ else }} <span class="faded"> ⭠ - Previuos + {{ T "prev" }} </span> {{ end }} @@ -174,18 +174,19 @@ {{ if $paginator.HasNext }} <a href="{{ $paginator.Next.URL }}#incidents"> - Next + {{ T "next" }} ⭢ </a> {{ else }} <span class="faded"> - Next + {{ T "next" }} ⭢ </span> {{ end }} </div> {{ end }} {{ end }} + <div class="padding"></div> </div> diff --git a/layouts/index.xml b/layouts/index.xml new file mode 100644 index 0000000..e9ae53d --- /dev/null +++ b/layouts/index.xml @@ -0,0 +1,30 @@ +<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> + <channel> + <!-- + <link rel="alternate" type="text/html" href="{{ .Site.BaseURL }}"/> --> + <title>{{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title> + <link>{{ .Permalink }}</link> + <description>{{ T "incidentHistory" }}</description> + <generator>github.com/cstate</generator> + {{ with .Site.LanguageCode }}<language>{{.}}</language>{{end}} + {{ if not .Date.IsZero }} + <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate> + {{ end }} + {{ with .Site.Copyright }} + <copyright>{{.}}</copyright>{{end}} + {{ with .OutputFormats.Get "RSS" }} + {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }} + {{ end }} + {{ $incidents := where .Site.RegularPages "Params.section" "issue" }} + {{ range $incidents }} + <item> + <title>{{ if .Params.resolved }}[{{ T "resolved" }}] {{ end }}{{ .Title }}</title> + <link>{{ .Permalink }}</link> + <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate> + <guid>{{ .Permalink }}</guid> + <category>{{ .Params.resolvedWhen }}</category> + <description>{{ .Content | html }}</description> + </item> + {{ end }} + </channel> +</rss> diff --git a/layouts/issues/issue.html b/layouts/issues/issue.html index 014a33a..c344f57 100644 --- a/layouts/issues/issue.html +++ b/layouts/issues/issue.html @@ -6,43 +6,81 @@ {{ $isDown := where $active "Params.severity" "=" "down" }} <div class="article"> + <h1 class="clean"> + {{ .Title }} + </h1> + + <small class="date"> + {{ if .Site.Params.dateFormat }} + {{ .Date.Format .Site.Params.dateFormat }} + {{ else }} + {{ .Date.Format "January 2, 2006 at 3:04 PM" }} + {{ end }} + </small> + + <p><small> + {{ range .Params.Affected }} + <a href="/affected/{{ . | urlize }}" class="tag no-underline">{{ . }}</a> + {{ end }} + </small></p> + {{ if .Params.Resolved }} - <span class="ok"> - - {{ $t := (time .Params.ResolvedWhen) }} - {{ $timeDiff := (sub $t.Unix .Date.Unix) }} - {{ $diffInMin := (div $timeDiff 60) }} - - <!-- Marker --> - {{ if lt $timeDiff 60 }} - ✓ Resolved + {{ $t := (time .Params.ResolvedWhen) }} + {{ $timeDiff := (sub $t.Unix .Date.Unix) }} + {{ $diffInMin := (div $timeDiff 60) }} + + + <!-- Marker --> + {{ if lt $timeDiff 60 }} + <div class="faded"> + <strong> + {{ T "resolved" }} {{ T "inUnderAMinute" }}. + </strong> + </div> + {{ else }} + {{ if gt $timeDiff 3600 }} + <div class="warning tooltip"> + <strong> + {{ T "resolvedAfter" }} + + {{ $minutesForCalc := (mod $diffInMin 60) }} + + {{ div (sub $diffInMin $minutesForCalc) 60 }}h + {{ $minutesForCalc }}m {{ T "ofDowntime" }}. + </strong> + + <span class="tooltip__text"> + {{ if .Site.Params.dateFormat }} + {{ dateFormat .Site.Params.dateFormat .Params.resolvedWhen }} + {{ else }} + {{ dateFormat "January 2, 2006 at 3:04 PM" .Params.resolvedWhen }} + {{ end }} + </span> + </div> {{ else }} + <div class="ok tooltip"> + <strong> + {{ T "resolvedAfter" }} - ✓ Resolved after - {{ if gt $timeDiff 3600 }} - {{ $minutesForCalc := (mod $diffInMin 60) }} + {{ $secsForCalc := (mod $timeDiff 60) }} - {{ div (sub $diffInMin $minutesForCalc) 60 }}h - {{ $minutesForCalc }}m of downtime - {{ else }} - {{ $secsForCalc := (mod $timeDiff 60) }} + {{ div (sub $timeDiff $secsForCalc) 60 }}m + {{ T "ofDowntime" }}. + </strong> - {{ div (sub $timeDiff $secsForCalc) 60 }}m - <!-- {{ $secsForCalc }}s --> of downtime - {{ end }} - + <span class="tooltip__text"> + {{ if .Site.Params.dateFormat }} + {{ dateFormat .Site.Params.dateFormat .Params.resolvedWhen }} + {{ else }} + {{ dateFormat "January 2, 2006 at 3:04 PM" .Params.resolvedWhen }} + {{ end }} + </span> + </div> {{ end }} - </span> + {{ end }} {{ else }} - <em>Ongoing, services {{ if eq .Params.severity "notice" }}on notice{{ else }}{{ .Params.severity }}{{ end }}</em> + <strong class="error">{{ T "downtimeOngoing" }}</strong> {{ end }} - <h3> - <a href="{{ .Permalink }}">{{ .Title }}</a> - </h3> - - <small class="date"> - {{ .Date.Format "January 02, 2006 at 3:04 PM" }} - </small> <hr> {{ .Content }} diff --git a/layouts/issues/single.html b/layouts/issues/single.html index 5076148..5761477 100644 --- a/layouts/issues/single.html +++ b/layouts/issues/single.html @@ -7,11 +7,9 @@ {{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }} {{ $isDown := where $active "Params.severity" "=" "down" }} - <body class="status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}"> - {{ partial "header" . }} - + <body class="issues single"> <div class="contain"> - <a href="{{ .Site.BaseURL }}">← Go back</a> + <a href="{{ .Site.BaseURL }}">← {{ T "goBack" }} <em>{{ .Site.Title }}</em></a> </div> <div class="contain"> diff --git a/layouts/issues/small.html b/layouts/issues/small.html new file mode 100644 index 0000000..6833b68 --- /dev/null +++ b/layouts/issues/small.html @@ -0,0 +1,76 @@ +{{ $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" }} + +<a href="{{ .Permalink }}" class="issue no-underline"> + {{ if .Params.Resolved }} + <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> + + {{ $t := (time .Params.ResolvedWhen) }} + {{ $timeDiff := (sub $t.Unix .Date.Unix) }} + {{ $diffInMin := (div $timeDiff 60) }} + + <!-- Marker --> + {{ if lt $timeDiff 60 }} + <div class="faded"> + {{ T "resolved" }} {{ T "inUnderAMinute" }} + </div> + {{ else }} + {{ if gt $timeDiff 3600 }} + <div class="warning"> + {{ T "resolvedAfter" }} + + {{ $minutesForCalc := (mod $diffInMin 60) }} + + {{ div (sub $diffInMin $minutesForCalc) 60 }}h + {{ $minutesForCalc }}m {{ T "ofDowntime" }} + </div> + {{ else }} + <div class="ok"> + {{ T "resolvedAfter" }} + + {{ $secsForCalc := (mod $timeDiff 60) }} + + {{ div (sub $timeDiff $secsForCalc) 60 }}m + <!-- {{ $secsForCalc }}s --> {{ T "ofDowntime" }} + </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> + + <h3> + {{ .Title }} + </h3> + + {{ $t := (time .Params.ResolvedWhen) }} + {{ $timeDiff := (sub $t.Unix .Date.Unix) }} + {{ $diffInMin := (div $timeDiff 60) }} + + <!-- Marker --> + <div class="error">{{ T "downtimeOngoing" }}</div> + + {{ end }} +</a> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index edbbb57..2dcea70 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -4,14 +4,30 @@ <div class="footer"> <div class="contain"> - <p><strong>{{ now.Year }} © {{ .Site.Title }}</strong> - • <a href="#">Back to top</a> + <p><strong class="bold">{{ now.Year }} © {{ .Site.Title }}</strong> + • <a href="#">{{ T "backToTop" }}</a> </p> <p>{{ .Site.Params.description }}</p> <!-- Please keep this one around to help cState grow <3 --> - <small class="copyright faded">Powered by <a href="https://github.com/cstate/cstate">cState v2.0.2</a></small> + <small class="footer__copyright faded">{{ T "poweredBy" }} <a href="https://github.com/cstate/cstate"><b>cState</b></a></small> + + <hr> + + <p class="hinted"> + <small> + {{ T "rss" }} — + {{ with $.Site.Home.OutputFormats.Get "rss" }} + <a href="{{ .Permalink }}" class="no-underline">{{ T "toAllUpdates" }}</a> + {{ end }} + {{ if not .IsHome }} + {{ with .OutputFormats.Get "rss" }} + {{ T "or" }} <a href="{{ .Permalink }}" class="no-underline">{{ T "onlyThisFeed" }} ({{ $.Title }})</a> + {{ end }} + {{ end }} + </small> + </p> </div> </div> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index cfe6109..242c4f3 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -5,7 +5,7 @@ {{ if .Site.Params.useLargeHeaderDesign }} <div class="header header--large"> <div class="contain contain--more center"> - <a href="/" class="logo"> + <a href="/" class="header__logo"> {{ if .Site.Params.useLogo }} <img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}"> {{ else }} @@ -17,7 +17,7 @@ {{ else }} <div class="header"> <div class="contain"> - <a href="/" class="logo logo--small"> + <a href="/" class="header__logo header__logo--small"> {{ if .Site.Params.useLogo }} <img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}"> {{ else }} diff --git a/layouts/partials/js.html b/layouts/partials/js.html index 6282729..af3bb80 100644 --- a/layouts/partials/js.html +++ b/layouts/partials/js.html @@ -3,9 +3,8 @@ * Dev toolset */ - console.log('You are using cState v2.0.1: https://github.com/cstate/cstate'); - document.querySelector('html').className = 'js'; - + console.log('cState v3.0.0 - Stable 2019-01-24 - https://github.com/cstate/cstate'); + document.getElementsByTagName('html')[0].className = 'js'; /** * Make theme color pretty @@ -21,13 +20,25 @@ } } + /** + * Admin redirect + */ + + if (window.location.hash.match('access_token')) { + document.location.pathname = '/admin'; + } + + /** + * Timer + */ + function hasClass(element, className) { return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1; } if (hasClass(document.querySelector('body'), 'status-homepage')) { var lastUpdated = document.querySelector('.summary__date'); - lastUpdated.innerHTML = 'Last checked just now'; + lastUpdated.innerHTML = '{{ T "lastChecked" }} {{ T "justNow" }}'; var lastUpdate = new Date(); @@ -37,32 +48,32 @@ var interval = Math.floor(seconds / 31536000); if (interval > 1) { - return interval + ' years'; + return interval + ' {{ T "yearsAgo" }}'; } interval = Math.floor(seconds / 2592000); if (interval > 1) { - return interval + ' months'; + return interval + ' {{ T "monthsAgo" }}'; } interval = Math.floor(seconds / 86400); if (interval > 1) { - return interval + 'd'; + return interval + '{{ T "daysAgo" }}'; } interval = Math.floor(seconds / 3600); if (interval > 1) { - return interval + 'h'; + return interval + '{{ T "hoursAgo" }}'; } interval = Math.floor(seconds / 60); if (interval > 1) { - return interval + ' min'; + return interval + ' {{ T "minsAgo" }}'; } - return Math.floor(seconds) + 's'; + return Math.floor(seconds) + '{{ T "secondsAgo" }}'; } var aDay = 24*60*60*1000; } window.setInterval(function() { if (hasClass(document.querySelector('body'), 'status-homepage')) { - lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago'; + lastUpdated.innerHTML = '{{ T "lastChecked" }} ' + timeSince(lastUpdate) + ' {{ T "someTimeAgo" }}'; // Refresh almost every 5m if (lastUpdate > 290000) { diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html index eb4e33a..df6b8d0 100644 --- a/layouts/partials/meta.html +++ b/layouts/partials/meta.html @@ -7,9 +7,12 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Data --> <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Summary }}{{ end }}"> - <title>{{ if eq .Title .Site.Title }}{{ .Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title> + <title>{{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} — {{ end }}{{ .Site.Title }}{{ end }}</title> <link rel="canonical" href="{{ .Permalink }}"> - {{ .Hugo.Generator }} + {{ 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.0.0 - Stable 2019-01-24"> <meta name="theme-color" content="#{{ .Site.Params.brand }}"> <script> var themeBrandColor = '#{{ .Site.Params.brand }}'; @@ -28,7 +31,7 @@ * whitesmoke: #f5f5f5; * forestgreen: #228B22; * crimson: #DC143C; - * darkorange: #FF8C00; + * darkorange: #EE7600; * slategray: #708090; * */ @@ -37,41 +40,44 @@ margin: 0; background: #fff; color: #444; - 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 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); } + ::selection { background: #B4D5FF; } + *, *:before, *:after { box-sizing: inherit; } - hr { - border: 0; - border-bottom: 1px solid #ccc; - margin: 24px 0; - } - a { text-decoration: none; color: #000; border-bottom: 1px dotted currentColor; } - a.no-underline { border-bottom: 0; } - a:hover { border-bottom-style: solid; } a:active { position: relative; top: 2px; } + hr { + border: 0; + border-bottom: 1px solid #ccc; + margin: 24px 0; + } + + h1 { + font-size: 40px; + line-height: 1; + } h2 { font-size: 26px; } h3 { font-size: 20px; } h4 { font-size: 18px; } - .headline { font-size: 20px; } - .bold { color: #000; } - - h2, h4 { + 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"; } h3 { @@ -79,16 +85,68 @@ color: #000; } + img { + border: 0; + width: 100%; + height: auto; + } + + /** + * Classes + */ + + a.no-underline { border-bottom: 0; } + + .headline { font-size: 20px; } + + .bold { color: #000; } + .hinted { color: #777; } + .faded { color: #999; } + + .clean { margin: 0; } + + .ok { color: #{{ .Site.Params.ok }}; } + .warning { color: #{{ .Site.Params.disrupted }}; } + .error { color: #{{ .Site.Params.down }}; } + + .contain { + max-width: 640px; + margin: 16px auto; + padding: 16px; + } + + .contain--more { max-width: 680px; } + + .center { text-align: center; } + .right { text-align: right; } + .padding-s { padding: 6px; } + .padding { padding: 12px; } + + /** + * UI elements + */ + .date { - margin-bottom: 0; + display: block; + margin-top: 12px; color: #666; font-variant: small-caps; } - .faded { - color: #999; + .tag { + display: inline-block; + padding: 4px 8px; + margin-right: 4px; + margin-bottom: 2px; + background: #eee; } + .tag:hover { background: #ddd; } + + /** + * Section blocks + */ + .header { padding: 8px 0; background: #{{ .Site.Params.brand }}; @@ -100,29 +158,36 @@ font-variant: small-caps; } + .header__logo img { + height: auto; + width: 320px; + } + + .header__logo--small img { + height: auto; + width: 160px; + } + .header--large { padding: 16px; } .header--large a { font-size: 20px; } - img { - border: 0; - width: 100%; - height: auto; + .footer { + padding: 10px; + background: #f5f5f5; } - .contain { - max-width: 640px; - margin: 16px auto; - padding: 16px; + .footer__copyright { + display: block; + font-variant: small-caps; } - .contain--more { - max-width: 480px; + .footer__copyright a, a.header__logo { + border-bottom: 0; } - .center { text-align: center; } - .right { text-align: right; } - .padding-s { padding: 6px; } - .padding { padding: 12px; } + /** + * Homepage: summaries + */ .summary { padding: 16px; @@ -143,25 +208,29 @@ color: #fff; } - .components { - border: 2px solid #ddd; - border-bottom: 0; - } - - .component { - color: #000; - padding: 16px; - border-bottom: 2px solid #ddd; - } + /** + * Homepage: systems, tooltips + */ - .description { cursor: pointer; position: relative; } - .description__text { display: none; } - .description:hover .description__text, - .description:active .description__text { + .components { + border: 2px solid #ddd; + border-bottom: 0; + } + + .component { + color: #000; + padding: 16px; + border-bottom: 2px solid #ddd; + } + + .tooltip { cursor: pointer; position: relative; } + .tooltip__text { display: none; } + .tooltip:hover .tooltip__text, + .tooltip:active .tooltip__text { display: block; position: absolute; top: 0; - left: 32px; + left: 24px; background: #181818; color: #fff; z-index: 50; @@ -169,47 +238,25 @@ border: 2px solid #242424; font-size: 14px; color: #ccc; - width: 1000%; + width: 320px; height: auto; } @media (max-width: 640px) { - .description:hover .description__text, - .description:active .description__text { + .tooltip:hover .tooltip__text, + .tooltip:active .tooltip__text { width: 50vw; } } - .ok { color: #{{ .Site.Params.ok }}; } - .error { color: #{{ .Site.Params.down }}; } - - .footer { - padding: 10px; - background: #f5f5f5; - } - - .copyright { - display: block; - font-variant: small-caps; - } - - .copyright a, a.logo { - border-bottom: 0; - } - - .logo img { - height: auto; - width: 320px; - } - - .logo--small img { - height: auto; - width: 160px; - } + /** + * Tabs + */ .tabs { border-bottom: 1px solid #ccc; } .tabs--inner { padding: 0 16px; margin: 0 auto; } a.tab { display: inline-table; } + .tab--current { border: 1px solid #ccc; border-bottom-color: #fff; @@ -225,15 +272,18 @@ top: 1px; color: #aaa; } + .tab--other:hover { color: #000; } - .article { - padding-bottom: 20px; - } + /** + * Articles + */ + + .issue { display: block; padding: 14px 24px; } + .issue:hover { background: #f5f5f5; } + .issue:active { background: #eee; } - .article h3 { line-height: 1.25; } - .article h3 a { border: 0; } - .article h3 a:hover { border-bottom: 1px solid currentColor; } + .issue h3 { line-height: 1.25; } /** @@ -247,19 +297,15 @@ .announcement-box .padding { padding: 16px; - border-bottom: 1px solid currentColor; } - .status-disrupted .announcement-box .padding { border-bottom-color: #{{ .Site.Params.disrupted }}; } - .status-down .announcement-box .padding { border-bottom-color: #{{ .Site.Params.down }}; } - .status-notice .announcement-box .padding { border-bottom-color: #{{ .Site.Params.notice }}; } - .status-ok .announcement-box { border: 2px solid #{{ .Site.Params.ok }}; } .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-homepage .announcement-box { border-bottom-width: 1px; } + + .status-ok .status-homepage .announcement-box { border-bottom-width: 1px; } /** @@ -277,14 +323,11 @@ */ @media (min-width: 640px) { - .summary__date { + .float-right { float: right; display: inline; } } - - ::selection { background: #B4D5FF; } - html { -webkit-tap-highlight-color: rgba(0,0,0, 0.25); } </style> {{ if .Site.Params.enableCustomHTML }} {{ partial "custom/meta" . }} diff --git a/layouts/shortcodes/track.html b/layouts/shortcodes/track.html index 3a80221..9fe4597 100644 --- a/layouts/shortcodes/track.html +++ b/layouts/shortcodes/track.html @@ -1 +1,5 @@ -<span class="faded">({{ dateFormat "Jan 02, 2006 - 15:04" (.Get 0) }})</span> +{{ if .Site.Params.dateFormat }} + <span class="faded">({{ dateFormat .Site.Params.shortDateFormat (.Get 0) }})</span> +{{ else }} + <span class="faded">({{ dateFormat "15:04 — Jan 2" (.Get 0) }})</span> +{{ end }} |