aboutsummaryrefslogtreecommitdiff
path: root/layouts/partials
diff options
context:
space:
mode:
Diffstat (limited to 'layouts/partials')
-rw-r--r--layouts/partials/footer.html4
-rw-r--r--layouts/partials/header-mini.html7
-rw-r--r--layouts/partials/header.html25
-rw-r--r--layouts/partials/js.html3
-rw-r--r--layouts/partials/meta.html93
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 }} &copy; {{ .Site.Title }}</strong></p>
+ <p><strong>{{ now.Year }} &copy; {{ .Site.Title }}</strong>
+ &nbsp; • &nbsp; <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>