aboutsummaryrefslogtreecommitdiff
path: root/layouts/partials/meta.html
diff options
context:
space:
mode:
authorMantas <mistermantas@users.noreply.github.com>2017-11-25 12:05:33 +0200
committerMantas <mistermantas@users.noreply.github.com>2017-11-25 12:05:33 +0200
commit3208df6352c0e05208bce95f8d9e9f16769a57ed (patch)
tree6d784f09fa6dc7d85438ca1086e32ba363d90483 /layouts/partials/meta.html
parent4bc818712d9b0133dd22326052a99ef1f36f4aa0 (diff)
cState goes stable 1.0; fix #4 & fix #5
Diffstat (limited to 'layouts/partials/meta.html')
-rw-r--r--layouts/partials/meta.html194
1 files changed, 105 insertions, 89 deletions
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index cea1571..e3ebbf1 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="{{ .Site.LanguageCode }}" class="nojs">
+<html lang="{{ .Site.LanguageCode }}" class="no-js">
<head>
<!-- Basics -->
<meta charset="utf-8">
@@ -9,13 +9,22 @@
<meta name="description" content="{{ if .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<title>{{ .Site.Title }}</title>
<link rel="canonical" href="{{ .Permalink }}">
- <meta name="theme-color" content="#000000">
+ {{ .Hugo.Generator }}
+ <meta name="theme-color" content="#{{ .Site.Params.ok }}">
+ <script>
+ var themeOkColor = '#{{ .Site.Params.ok }}';
+ var themeNoticeColor = '#{{ .Site.Params.notice }}';
+ var themeDisruptedColor = '#{{ .Site.Params.disrupted }}';
+ var themeDownColor = '#{{ .Site.Params.down }}';
+ </script>
<!-- Sources -->
<style>
/**
* Color palette
*
+ * Default:
* white: #fff;
+ * whitesmoke: #f5f5f5;
* forestgreen: #228B22;
* crimson: #DC143C;
* darkorange: #FF8C00;
@@ -27,29 +36,49 @@
margin: 0;
background: #fff;
color: #444;
- font: 16px sans-serif;
+ font: 100%/1.5 BlinkMacSystemFont, -apple-system, 'San Francisco Text', Helvetica, Arial, sans-serif;
+ box-sizing: border-box;
+ }
+
+ *, *:before, *:after {
+ box-sizing: inherit;
+ }
+
+ hr {
+ border: 0;
+ border-bottom: 1px solid #dedede;
+ margin: 24px 0;
}
a {
text-decoration: none;
- border-bottom: 0.2px dotted currentColor;
+ 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; }
+
+ h2 { font-size: 26px; }
+ h3 { font-size: 20px; }
+ h4 { font-size: 18px; }
- h1, h2, h4 {
+ h2, h4 {
font-weight: normal;
color: #000;
}
h3 {
- margin-bottom: 0;
+ margin: 0;
color: #000;
}
- h4 {
- margin-top: 0;
- color: #999;
+ .date {
+ margin-bottom: 0;
+ color: #666;
+ font-variant: small-caps;
}
.faded {
@@ -58,12 +87,17 @@
.header {
padding: 16px;
+ }
+
+ .header a {
color: #fff;
+ font-size: 24px;
+ font-variant: small-caps;
}
img {
- height: 16px;
- padding: 4px;
+ width: 100%;
+ height: auto;
}
.contain {
@@ -72,96 +106,79 @@
padding: 16px;
}
- .summary {
- border: 2px solid #fff;
+ .contain--more {
+ max-width: 480px;
}
- .summary .tldr {
+ .center { text-align: center; }
+ .padding { padding: 12px; }
+
+ .summary {
padding: 16px;
color: #fff;
}
- .components {
- border: 2px solid #ccc;
- border-bottom: 0;
+ .summary__date {
+ display: block;
+ cursor: pointer;
}
- .component {
- color: #000;
- padding: 16px;
- border-bottom: 2px solid #ccc;
+ .summary__date:hover {
+ color: #{{ .Site.Params.faded }};
}
- .ping.testing {
- color: #dcdcdc;
- font-style: italic;
+ .summary__date:hover:after {
+ content: ' ⟳ ';
+ color: #fff;
}
- .ping.done {
- color: #aaa;
+ .components {
+ border: 2px solid #{{ .Site.Params.border }};
+ border-bottom: 0;
}
- .error {
- color: #DC143C;
+ .component {
+ color: #000;
+ padding: 16px;
+ border-bottom: 2px solid #{{ .Site.Params.border }};
}
- /* .component:before {
- content: '[+]';
- opacity: 0.4;
- cursor: pointer;
- } */
+ .ok { color: #{{ .Site.Params.ok }}; }
+ .error { color: #{{ .Site.Params.down }}; }
- .close {
- float: right;
+ .footer {
+ margin-top: 64px;
+ padding: 20px 0;
+ background: #f5f5f5;
}
- .subscribe, .status {
+ .copyright {
display: block;
+ font-variant: small-caps;
}
- .subscribe {
- margin: 8px 0;
- }
-
- button, .close {
- cursor: pointer;
- }
-
- .subscriber-box.active {
- display: block;
+ .copyright a, a.logo {
+ border-bottom: 0;
}
- .subscriber-box {
- display: none;
- background: #fff;
- position: fixed;
+ .logo img {
+ height: auto;
width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- z-index: 1;
- overflow-y: scroll;
}
- .subscriber-box--header {
- color: #000;
- border-bottom: 1px solid #aaa;
- }
-
- .footer {
- padding: 64px;
- background: #F0F0F0;
- text-align: center;
+ .logo--small img {
+ height: 32px;
+ width: auto;
}
- .copyright {
- display: block;
- font-variant: small-caps;
- text-align: center;
- }
+ .article h3 a { border: 0; }
- .copyright a, a.logo {
- border-bottom: 0;
+ .marker {
+ text-transform: uppercase;
+ font-size: smaller;
+ padding: 2px 8px;
+ padding-right: 4px;
+ border: 2px solid #{{ .Site.Params.border }};
}
@@ -169,36 +186,35 @@
* Specific to the status
*/
- .header.ok, .tldr.ok { background: #228B22; }
- .header.disrupted, .tldr.disrupted { background: #FF8C00; }
- .header.down, .tldr.down { background: #DC143C; }
- .header.notice, .tldr.notice { background: #708090; }
-
- .summary.ok { border-color: #228B22; }
- .summary.disrupted { border-color: #FF8C00; }
- .summary.down { border-color: #DC143C; }
- .summary.notice { border-color: #708090; }
+ .status-ok .summary, .status-ok .header { background: #{{ .Site.Params.ok }}; }
+ .status-disrupted .summary, .status-disrupted .header { background: #{{ .Site.Params.disrupted }}; }
+ .status-down .summary, .status-down .header { background: #{{ .Site.Params.down }}; }
+ .status-notice .summary, .status-notice .header { background: #{{ .Site.Params.notice }}; }
+ .marker-ok { background: #{{ .Site.Params.ok }}; }
+ .marker-disrupted { background: #{{ .Site.Params.disrupted }}; }
+ .marker-down { background: #{{ .Site.Params.down }}; }
+ .marker-notice { background: #{{ .Site.Params.notice }}; }
/**
* Dynamically show individual component statuses
*/
- .component:after { float: right; }
- .component[data-status="ok"]:after { content: "Operational"; color: #228B22; }
- .component[data-status="disrupted"]:after { content: "Disrupted"; color: #FF8C00; }
- .component[data-status="down"]:after { content: "Down"; color: #DC143C; }
- .component[data-status="notice"]:after { content: "Maintenance"; color: #708090; }
+ .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 }};; }
/**
- * Extend to desktops
+ * Responsiveness
*/
- @media (min-width: 560px) {
- .status, .subscribe {
+ @media (min-width: 640px) {
+ .summary__date {
float: right;
- display: inline-block;
+ display: inline;
}
}
</style>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-11-24 00:33:20 +0000