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

1 files changed, 136 insertions, 93 deletions

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" . }}