aboutsummaryrefslogtreecommitdiff
path: root/layouts/partials
diff options
context:
space:
mode:
Diffstat (limited to 'layouts/partials')
-rw-r--r--layouts/partials/footer.html22
-rw-r--r--layouts/partials/header.html4
-rw-r--r--layouts/partials/js.html33
-rw-r--r--layouts/partials/meta.html229
4 files changed, 179 insertions, 109 deletions
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 }} &copy; {{ .Site.Title }}</strong>
- &nbsp; • &nbsp; <a href="#">Back to top</a>
+ <p><strong class="bold">{{ now.Year }} &copy; {{ .Site.Title }}</strong>
+ &nbsp; • &nbsp; <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" . }}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-11-10 09:35:29 +0000