cState is now stable on v3.0 - 2019-01-24 (info: #41)

4 files changed, 179 insertions, 109 deletions

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index edbbb57..2dcea70 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -4,14 +4,30 @@
 
 <div class="footer">
   <div class="contain">
-    <p><strong>{{ now.Year }} &copy; {{ .Site.Title }}</strong>
-       &nbsp; • &nbsp; <a href="#">Back to top</a>
+    <p><strong class="bold">{{ now.Year }} &copy; {{ .Site.Title }}</strong>
+       &nbsp; • &nbsp; <a href="#">{{ T "backToTop" }}</a>
     </p>
 
     <p>{{ .Site.Params.description }}</p>
 
     <!-- Please keep this one around to help cState grow <3 -->
-    <small class="copyright faded">Powered by <a href="https://github.com/cstate/cstate">cState v2.0.2</a></small>
+    <small class="footer__copyright faded">{{ T "poweredBy" }} <a href="https://github.com/cstate/cstate"><b>cState</b></a></small>
+
+    <hr>
+
+    <p class="hinted">
+      <small>
+        {{ T "rss" }} —
+        {{ with $.Site.Home.OutputFormats.Get "rss" }}
+          <a href="{{ .Permalink }}" class="no-underline">{{ T "toAllUpdates" }}</a>
+        {{ end }}
+        {{ if not .IsHome }}
+        {{ with .OutputFormats.Get "rss" }}
+          {{ T "or" }} <a href="{{ .Permalink }}" class="no-underline">{{ T "onlyThisFeed" }} ({{ $.Title }})</a>
+        {{ end }}
+        {{ end }}
+      </small>
+    </p>
   </div>
 </div>
 
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index cfe6109..242c4f3 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -5,7 +5,7 @@
 {{ if .Site.Params.useLargeHeaderDesign }}
 <div class="header header--large">
   <div class="contain contain--more center">
-    <a href="/" class="logo">
+    <a href="/" class="header__logo">
       {{ if .Site.Params.useLogo }}
         <img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}">
           {{ else }}
@@ -17,7 +17,7 @@
 {{ else }}
 <div class="header">
   <div class="contain">
-    <a href="/" class="logo logo--small">
+    <a href="/" class="header__logo header__logo--small">
       {{ if .Site.Params.useLogo }}
         <img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}">
           {{ else }}
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index 6282729..af3bb80 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -3,9 +3,8 @@
    * Dev toolset
    */
 
-  console.log('You are using cState v2.0.1: https://github.com/cstate/cstate');
-  document.querySelector('html').className = 'js';
-
+  console.log('cState v3.0.0 - Stable 2019-01-24 - https://github.com/cstate/cstate');
+  document.getElementsByTagName('html')[0].className = 'js';
 
   /**
    * Make theme color pretty
@@ -21,13 +20,25 @@
     }
   }
 
+  /**
+   * Admin redirect
+   */
+
+  if (window.location.hash.match('access_token')) {
+    document.location.pathname = '/admin';
+  }
+
+  /**
+   * Timer
+   */
+
   function hasClass(element, className) {
     return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
   }
 
   if (hasClass(document.querySelector('body'), 'status-homepage')) {
     var lastUpdated = document.querySelector('.summary__date');
-    lastUpdated.innerHTML = 'Last checked just now';
+    lastUpdated.innerHTML = '{{ T "lastChecked" }} {{ T "justNow" }}';
 
     var lastUpdate = new Date();
 
@@ -37,32 +48,32 @@
       var interval = Math.floor(seconds / 31536000);
 
       if (interval > 1) {
-        return interval + ' years';
+        return interval + ' {{ T "yearsAgo" }}';
       }
       interval = Math.floor(seconds / 2592000);
       if (interval > 1) {
-        return interval + ' months';
+        return interval + ' {{ T "monthsAgo" }}';
       }
       interval = Math.floor(seconds / 86400);
       if (interval > 1) {
-        return interval + 'd';
+        return interval + '{{ T "daysAgo" }}';
       }
       interval = Math.floor(seconds / 3600);
       if (interval > 1) {
-        return interval + 'h';
+        return interval + '{{ T "hoursAgo" }}';
       }
       interval = Math.floor(seconds / 60);
       if (interval > 1) {
-        return interval + ' min';
+        return interval + ' {{ T "minsAgo" }}';
       }
-      return Math.floor(seconds) + 's';
+      return Math.floor(seconds) + '{{ T "secondsAgo" }}';
     }
     var aDay = 24*60*60*1000;
   }
 
   window.setInterval(function() {
     if (hasClass(document.querySelector('body'), 'status-homepage')) {
-      lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago';
+      lastUpdated.innerHTML = '{{ T "lastChecked" }} ' + timeSince(lastUpdate) + ' {{ T "someTimeAgo" }}';
 
       // Refresh almost every 5m
       if (lastUpdate > 290000) {
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index eb4e33a..df6b8d0 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -7,9 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- Data -->
     <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Summary }}{{ end }}">
-    <title>{{ if eq .Title .Site.Title }}{{ .Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
+    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} — {{ end }}{{ .Site.Title }}{{ end }}</title>
     <link rel="canonical" href="{{ .Permalink }}">
-    {{ .Hugo.Generator }}
+    {{ range .AlternativeOutputFormats -}}
+    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+    {{ end -}}
+    <meta name="generator" content="cState v3.0.0 - Stable 2019-01-24">
     <meta name="theme-color" content="#{{ .Site.Params.brand }}">
     <script>
     var themeBrandColor = '#{{ .Site.Params.brand }}';
@@ -28,7 +31,7 @@
      * whitesmoke: #f5f5f5;
      * forestgreen: #228B22;
      * crimson: #DC143C;
-     * darkorange: #FF8C00;
+     * darkorange: #EE7600;
      * slategray: #708090;
      *
      */
@@ -37,41 +40,44 @@
       margin: 0;
       background: #fff;
       color: #444;
-      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";;
+      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;
+      -webkit-tap-highlight-color: rgba(0,0,0, 0.25);
     }
 
+    ::selection { background: #B4D5FF; }
+
     *, *:before, *:after {
       box-sizing: inherit;
     }
 
-    hr {
-      border: 0;
-      border-bottom: 1px solid #ccc;
-      margin: 24px 0;
-    }
-
     a {
       text-decoration: none;
       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; }
 
+    hr {
+      border: 0;
+      border-bottom: 1px solid #ccc;
+      margin: 24px 0;
+    }
+
+    h1 {
+      font-size: 40px;
+      line-height: 1;
+    }
     h2 { font-size: 26px; }
     h3 { font-size: 20px; }
     h4 { font-size: 18px; }
 
-    .headline { font-size: 20px; }
-    .bold { color: #000; }
-
-    h2, h4 {
+    h1, h2, h4 {
       font-weight: normal;
       color: #000;
+      font-family: "Segoe UI", BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     }
 
     h3 {
@@ -79,16 +85,68 @@
       color: #000;
     }
 
+    img {
+      border: 0;
+      width: 100%;
+      height: auto;
+    }
+
+    /**
+     * Classes
+     */
+
+    a.no-underline { border-bottom: 0; }
+
+    .headline { font-size: 20px; }
+
+    .bold { color: #000; }
+    .hinted { color: #777; }
+    .faded { color: #999; }
+
+    .clean { margin: 0; }
+
+    .ok { color: #{{ .Site.Params.ok }}; }
+    .warning { color: #{{ .Site.Params.disrupted }}; }
+    .error { color: #{{ .Site.Params.down }}; }
+
+    .contain {
+      max-width: 640px;
+      margin: 16px auto;
+      padding: 16px;
+    }
+
+    .contain--more { max-width: 680px; }
+
+    .center { text-align: center; }
+    .right { text-align: right; }
+    .padding-s { padding: 6px; }
+    .padding { padding: 12px; }
+
+    /**
+     * UI elements
+     */
+
     .date {
-      margin-bottom: 0;
+      display: block;
+      margin-top: 12px;
       color: #666;
       font-variant: small-caps;
     }
 
-    .faded {
-      color: #999;
+    .tag {
+      display: inline-block;
+      padding: 4px 8px;
+      margin-right: 4px;
+      margin-bottom: 2px;
+      background: #eee;
     }
 
+    .tag:hover { background: #ddd; }
+
+    /**
+     * Section blocks
+     */
+
     .header {
       padding: 8px 0;
       background: #{{ .Site.Params.brand }};
@@ -100,29 +158,36 @@
       font-variant: small-caps;
     }
 
+    .header__logo img {
+      height: auto;
+      width: 320px;
+    }
+
+    .header__logo--small img {
+      height: auto;
+      width: 160px;
+    }
+
     .header--large { padding: 16px; }
     .header--large a { font-size: 20px; }
 
-    img {
-      border: 0;
-      width: 100%;
-      height: auto;
+    .footer {
+      padding: 10px;
+      background: #f5f5f5;
     }
 
-    .contain {
-      max-width: 640px;
-      margin: 16px auto;
-      padding: 16px;
+    .footer__copyright {
+      display: block;
+      font-variant: small-caps;
     }
 
-    .contain--more {
-      max-width: 480px;
+    .footer__copyright a, a.header__logo {
+      border-bottom: 0;
     }
 
-    .center { text-align: center; }
-    .right { text-align: right; }
-    .padding-s { padding: 6px; }
-    .padding { padding: 12px; }
+    /**
+     * Homepage: summaries
+     */
 
     .summary {
       padding: 16px;
@@ -143,25 +208,29 @@
       color: #fff;
     }
 
-    .components {
-      border: 2px solid #ddd;
-      border-bottom: 0;
-    }
-
-    .component {
-      color: #000;
-      padding: 16px;
-      border-bottom: 2px solid #ddd;
-    }
+    /**
+     * Homepage: systems, tooltips
+     */
 
-    .description { cursor: pointer; position: relative; }
-    .description__text { display: none; }
-    .description:hover .description__text,
-    .description:active .description__text  {
+     .components {
+       border: 2px solid #ddd;
+       border-bottom: 0;
+     }
+
+     .component {
+       color: #000;
+       padding: 16px;
+       border-bottom: 2px solid #ddd;
+     }
+
+    .tooltip { cursor: pointer; position: relative; }
+    .tooltip__text { display: none; }
+    .tooltip:hover .tooltip__text,
+    .tooltip:active .tooltip__text  {
       display: block;
       position: absolute;
       top: 0;
-      left: 32px;
+      left: 24px;
       background: #181818;
       color: #fff;
       z-index: 50;
@@ -169,47 +238,25 @@
       border: 2px solid #242424;
       font-size: 14px;
       color: #ccc;
-      width: 1000%;
+      width: 320px;
       height: auto;
     }
 
     @media (max-width: 640px) {
-      .description:hover .description__text,
-      .description:active .description__text {
+      .tooltip:hover .tooltip__text,
+      .tooltip:active .tooltip__text {
         width: 50vw;
       }
     }
 
-    .ok { color: #{{ .Site.Params.ok }}; }
-    .error { color: #{{ .Site.Params.down }}; }
-
-    .footer {
-      padding: 10px;
-      background: #f5f5f5;
-    }
-
-    .copyright {
-      display: block;
-      font-variant: small-caps;
-    }
-
-    .copyright a, a.logo {
-      border-bottom: 0;
-    }
-
-    .logo img {
-      height: auto;
-      width: 320px;
-    }
-
-    .logo--small img {
-      height: auto;
-      width: 160px;
-    }
+    /**
+     * Tabs
+     */
 
     .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;
@@ -225,15 +272,18 @@
       top: 1px;
       color: #aaa;
     }
+
     .tab--other:hover { color: #000; }
 
-    .article {
-      padding-bottom: 20px;
-    }
+    /**
+     * Articles
+     */
+
+    .issue { display: block; padding: 14px 24px; }
+    .issue:hover { background: #f5f5f5; }
+    .issue:active { background: #eee; }
 
-    .article h3 { line-height: 1.25; }
-    .article h3 a { border: 0; }
-    .article h3 a:hover { border-bottom: 1px solid currentColor; }
+    .issue h3 { line-height: 1.25; }
 
 
     /**
@@ -247,19 +297,15 @@
 
     .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 }}; }
 
-    .status-homepage .announcement-box { border-bottom-width: 1px; }
+
+    .status-ok .status-homepage .announcement-box { border-bottom-width: 1px; }
 
 
     /**
@@ -277,14 +323,11 @@
      */
 
     @media (min-width: 640px) {
-      .summary__date {
+      .float-right {
         float: right;
         display: inline;
       }
     }
-
-    ::selection { background: #B4D5FF; }
-    html { -webkit-tap-highlight-color: rgba(0,0,0, 0.25); }
     </style>
     {{ if .Site.Params.enableCustomHTML }}
       {{ partial "custom/meta" . }}