aboutsummaryrefslogtreecommitdiff
path: root/layouts/partials/meta.html
diff options
context:
space:
mode:
Diffstat (limited to 'layouts/partials/meta.html')
-rw-r--r--layouts/partials/meta.html229
1 files changed, 136 insertions, 93 deletions
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" . }}