diff options
Diffstat (limited to 'layouts/partials')
-rw-r--r-- | layouts/partials/footer.html | 4 | ||||
-rw-r--r-- | layouts/partials/header-mini.html | 7 | ||||
-rw-r--r-- | layouts/partials/header.html | 25 | ||||
-rw-r--r-- | layouts/partials/js.html | 3 | ||||
-rw-r--r-- | layouts/partials/meta.html | 93 |
5 files changed, 97 insertions, 35 deletions
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index e1314ce..085b814 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,6 +1,8 @@ <div class="footer"> <div class="contain"> - <p><strong>{{ now.Year }} © {{ .Site.Title }}</strong></p> + <p><strong>{{ now.Year }} © {{ .Site.Title }}</strong> + • <a href="#">Back to top</a> + </p> <p>{{ .Site.Params.description }}</p> diff --git a/layouts/partials/header-mini.html b/layouts/partials/header-mini.html deleted file mode 100644 index 93a26c2..0000000 --- a/layouts/partials/header-mini.html +++ /dev/null @@ -1,7 +0,0 @@ -<div class="header"> - <div class="contain"> - <a href="/" class="no-underline">← - <strong>{{ .Site.Title }}</strong> - </a> - </div> -</div> diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..c378998 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,25 @@ +{{ if .Site.Params.useLargeHeaderDesign }} +<div class="header header--large"> + <div class="contain contain--more center"> + <a href="/" class="logo"> + {{ if .Site.Params.useLogo }} + <img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}"> + {{ else }} + <h1>{{ .Site.Title }}</h1> + {{ end }} + </a> + </div> +</div> +{{ else }} +<div class="header"> + <div class="contain"> + <a href="/" class="logo logo--small"> + {{ if .Site.Params.useLogo }} + <img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}"> + {{ else }} + <h1>{{ .Site.Title }}</h1> + {{ end }} + </a> + </div> +</div> +{{ end }} diff --git a/layouts/partials/js.html b/layouts/partials/js.html index 1e62849..d47cd5d 100644 --- a/layouts/partials/js.html +++ b/layouts/partials/js.html @@ -60,3 +60,6 @@ lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago'; }, 1000); </script> +{{ with .Site.Params.customJS }} +<script type="text/javascript" src="{{ . }}"></script> +{{ end }} diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html index e3ebbf1..2bef153 100644 --- a/layouts/partials/meta.html +++ b/layouts/partials/meta.html @@ -6,12 +6,13 @@ <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> + <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Summary }}{{ end }}"> + <title>{{ if eq .Title .Site.Title }}{{ .Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title> <link rel="canonical" href="{{ .Permalink }}"> {{ .Hugo.Generator }} <meta name="theme-color" content="#{{ .Site.Params.ok }}"> <script> + var themeBrandColor = '#{{ .Site.Params.brand }}'; var themeOkColor = '#{{ .Site.Params.ok }}'; var themeNoticeColor = '#{{ .Site.Params.notice }}'; var themeDisruptedColor = '#{{ .Site.Params.disrupted }}'; @@ -22,7 +23,7 @@ /** * Color palette * - * Default: + * Defaults: * white: #fff; * whitesmoke: #f5f5f5; * forestgreen: #228B22; @@ -36,7 +37,7 @@ margin: 0; background: #fff; color: #444; - font: 100%/1.5 BlinkMacSystemFont, -apple-system, 'San Francisco Text', Helvetica, Arial, sans-serif; + 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; } @@ -46,7 +47,7 @@ hr { border: 0; - border-bottom: 1px solid #dedede; + border-bottom: 1px solid #ccc; margin: 24px 0; } @@ -65,6 +66,8 @@ h3 { font-size: 20px; } h4 { font-size: 18px; } + .stat { font-size: 18px; } + h2, h4 { font-weight: normal; color: #000; @@ -86,16 +89,21 @@ } .header { - padding: 16px; + padding: 8px 0; + background: #{{ .Site.Params.brand }}; } .header a { color: #fff; - font-size: 24px; + font-size: 14px; font-variant: small-caps; } + .header--large { padding: 16px; } + .header--large a { font-size: 20px; } + img { + border: 0; width: 100%; height: auto; } @@ -147,8 +155,7 @@ .error { color: #{{ .Site.Params.down }}; } .footer { - margin-top: 64px; - padding: 20px 0; + margin-top: 20px; background: #f5f5f5; } @@ -162,39 +169,68 @@ } .logo img { - height: auto; - width: 100%; + height: 128px; + width: auto; } .logo--small img { - height: 32px; + height: 64px; width: auto; } - .article h3 a { border: 0; } + .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; + padding: 12px 18px; + position: relative; + top: 1px; + } - .marker { - text-transform: uppercase; - font-size: smaller; - padding: 2px 8px; - padding-right: 4px; - border: 2px solid #{{ .Site.Params.border }}; + .tab--other { + border: 0; + padding: 12px 18px; + position: relative; + top: 1px; + color: #aaa; + } + .tab--other:hover { color: #000; } + + .article { + padding-bottom: 20px; } + .article h3 { line-height: 1.25; } + .article h3 a { border: 0; } + .article h3 a:hover { border-bottom: 1px solid currentColor; } + /** * Specific to the status */ - .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 }}; } + .status-ok .summary { background: #{{ .Site.Params.ok }}; } + .status-disrupted .summary, .change-header-color.status-disrupted .header { background: #{{ .Site.Params.disrupted }}; } + .status-down .summary, .change-header-color.status-down .header { background: #{{ .Site.Params.down }}; } + .status-notice .summary, .change-header-color.status-notice .header { background: #{{ .Site.Params.notice }}; } + + .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 }}; } - .marker-ok { background: #{{ .Site.Params.ok }}; } - .marker-disrupted { background: #{{ .Site.Params.disrupted }}; } - .marker-down { background: #{{ .Site.Params.down }}; } - .marker-notice { background: #{{ .Site.Params.notice }}; } + .status .announcement-box { border-bottom-width: 1px; } /** @@ -218,4 +254,7 @@ } } </style> + {{ with .Site.Params.customCSS }} + <link href="{{ . }}" rel="stylesheet"> + {{ end }} </head> |