diff options
| author | Mantas <mantasevilcinskas+git@gmail.com> | 2017-05-01 19:40:08 +0300 |
|---|---|---|
| committer | Mantas <mantasevilcinskas+git@gmail.com> | 2017-05-01 19:40:08 +0300 |
| commit | 9d6a10ffe260b36ef76a73e8d53c835e8d5562c6 (patch) | |
| tree | d1d86fe338029c29c2e5b573ce343ab864d8acb6 /layouts/partials/meta.html | |
Complete refactor: add beta of #2, fix #1
Diffstat (limited to 'layouts/partials/meta.html')
| -rw-r--r-- | layouts/partials/meta.html | 206 |
1 files changed, 206 insertions, 0 deletions
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html new file mode 100644 index 0000000..8237757 --- /dev/null +++ b/layouts/partials/meta.html @@ -0,0 +1,206 @@ +<!DOCTYPE html> +<html lang="{{ .Site.LanguageCode }}" class="nojs"> + <head> + <!-- Basics --> + <meta charset="utf-8"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- Data --> + <meta name="description" content="{{ if .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}"> + <title>{{ .Site.Title }}</title> + <link rel="canonical" href="{{ .Permalink }}"> + <link href="{{ .RSSlink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}"> + <meta name="theme-color" content="#000000"> + <!-- Sources --> + <style> + /** + * Color palette + * + * white: #fff; + * forestgreen: #228B22; + * crimson: #DC143C; + * darkorange: #FF8C00; + * slategray: #708090; + * + */ + + html, body { + margin: 0; + background: #fff; + color: #444; + font: 16px sans-serif; + } + + a { + text-decoration: none; + border-bottom: 0.2px dotted currentColor; + } + + a:hover { border-bottom-style: solid; } + + h1, h2, h4 { + font-weight: normal; + color: #000; + } + + h3 { + margin-bottom: 0; + color: #000; + } + + h4 { + margin-top: 0; + color: #999; + } + + .faded { + color: #999; + } + + .header { + padding: 16px; + color: #fff; + } + + img { + height: 16px; + padding: 4px; + } + + .contain { + max-width: 640px; + margin: 16px auto; + padding: 16px; + } + + .summary { + border: 2px solid #fff; + } + + .summary .tldr { + padding: 16px; + color: #fff; + } + + .components { + border: 2px solid #ccc; + border-bottom: 0; + } + + .component { + color: #000; + padding: 16px; + border-bottom: 2px solid #ccc; + } + + .ping.testing { + color: #dcdcdc; + font-style: italic; + } + + .ping.done { + color: #aaa; + } + + .error { + color: #DC143C; + } + + /* .component:before { + content: '[+]'; + opacity: 0.4; + cursor: pointer; + } */ + + .close { + float: right; + } + + .subscribe, .status { + display: block; + } + + .subscribe { + margin: 8px 0; + } + + button, .close { + cursor: pointer; + } + + .subscriber-box.active { + display: block; + } + + .subscriber-box { + display: none; + background: #fff; + position: fixed; + 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; + } + + .copyright { + display: block; + font-variant: small-caps; + text-align: center; + } + + .copyright a, a.logo { + border-bottom: 0; + } + + + /** + * 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; } + + + + /** + * 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; } + + /** + * Extend to desktops + */ + + @media (min-width: 560px) { + .status, .subscribe { + float: right; + display: inline-block; + } + } + </style> + </head> |