v2 Dev Preview 1

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>