cState goes stable 1.0; fix #4 & fix #5

author: Mantas <mistermantas@users.noreply.github.com> 2017-11-25 12:05:33 +0200
committer: Mantas <mistermantas@users.noreply.github.com> 2017-11-25 12:05:33 +0200
commit: 3208df6352c0e05208bce95f8d9e9f16769a57ed (patch)
tree: 6d784f09fa6dc7d85438ca1086e32ba363d90483 /layouts/partials
parent: 4bc818712d9b0133dd22326052a99ef1f36f4aa0 (diff)
4 files changed, 182 insertions, 101 deletions
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 1773af9..e1314ce 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,14 +1,10 @@
-    <div class="footer">
-      <div class="contain">
+<div class="footer">
+  <div class="contain">
+    <p><strong>{{ now.Year }} &copy; {{ .Site.Title }}</strong></p>
 
-        <p id="disclaimer">{{ .Site.Params.description }}</p>
+    <p>{{ .Site.Params.description }}</p>
 
-        <small class="copyright">Powered by <a href="https://github.com/mistermantas/cstate">cState</a></small>
-
-      </div>
-    </div>
-
-
-    <script defer>window.$crisp=[];window.CRISP_WEBSITE_ID="1456a9bd-7292-4dee-b61d-5d9946f925b5";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
-  </body>
-</html>
+    <!-- Please keep this one around to help cState grow <3 -->
+    <small class="copyright faded">Powered by <a href="https://github.com/mistermantas/cstate">cState</a></small>
+  </div>
+</div>
diff --git a/layouts/partials/header-mini.html b/layouts/partials/header-mini.html
new file mode 100644
index 0000000..93a26c2
--- /dev/null
+++ b/layouts/partials/header-mini.html
@@ -0,0 +1,7 @@
+<div class="header">
+  <div class="contain">
+    <a href="/" class="no-underline">←
+      <strong>{{ .Site.Title }}</strong>
+    </a>
+  </div>
+</div>
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
new file mode 100644
index 0000000..9ef2a23
--- /dev/null
+++ b/layouts/partials/js.html
@@ -0,0 +1,62 @@
+<script type="javascript">
+  /**
+   * Dev toolset
+   */
+
+  console.log('Welcome to cState! https://github.com/mistermantas/cstate');
+  document.querySelector('html').className = 'js';
+
+
+  /**
+   * Make theme color pretty
+   */
+
+  if (document.body.className === 'status-down') {
+    document.querySelector('meta[name=theme-color]').setAttribute('content', themeDownColor);
+  } else if (document.body.className === 'status-disrupted') {
+    document.querySelector('meta[name=theme-color]').setAttribute('content', themeDisruptedColor);
+  } else {
+    document.querySelector('meta[name=theme-color]').setAttribute('content', themeNoticeColor);
+  }
+
+
+  /**
+   * Check for internet
+   */
+
+  var lastUpdated = document.querySelector('.summary__date');
+  var lastUpdate = new Date();
+
+  function timeSince(date) {
+    var seconds = Math.floor((new Date() - date) / 1000);
+
+    var interval = Math.floor(seconds / 31536000);
+
+    if (interval > 1) {
+      return interval + ' years';
+    }
+    interval = Math.floor(seconds / 2592000);
+    if (interval > 1) {
+      return interval + ' months';
+    }
+    interval = Math.floor(seconds / 86400);
+    if (interval > 1) {
+      return interval + 'd';
+    }
+    interval = Math.floor(seconds / 3600);
+    if (interval > 1) {
+      return interval + 'h';
+    }
+    interval = Math.floor(seconds / 60);
+    if (interval > 1) {
+      return interval + 'min';
+    }
+    return Math.floor(seconds) + 's';
+  }
+  var aDay = 24*60*60*1000;
+
+  // Show second by second updates
+  window.setInterval(function() {
+    lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago';
+  }, 1000);
+</script>
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index cea1571..e3ebbf1 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ .Site.LanguageCode }}" class="nojs">
+<html lang="{{ .Site.LanguageCode }}" class="no-js">
   <head>
     <!-- Basics -->
     <meta charset="utf-8">
@@ -9,13 +9,22 @@
     <meta name="description" content="{{ if .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
     <title>{{ .Site.Title }}</title>
     <link rel="canonical" href="{{ .Permalink }}">
-    <meta name="theme-color" content="#000000">
+    {{ .Hugo.Generator }}
+    <meta name="theme-color" content="#{{ .Site.Params.ok }}">
+    <script>
+    var themeOkColor = '#{{ .Site.Params.ok }}';
+    var themeNoticeColor = '#{{ .Site.Params.notice }}';
+    var themeDisruptedColor = '#{{ .Site.Params.disrupted }}';
+    var themeDownColor = '#{{ .Site.Params.down }}';
+    </script>
     <!-- Sources -->
     <style>
     /**
      * Color palette
      *
+     * Default:
      * white: #fff;
+     * whitesmoke: #f5f5f5;
      * forestgreen: #228B22;
      * crimson: #DC143C;
      * darkorange: #FF8C00;
@@ -27,29 +36,49 @@
       margin: 0;
       background: #fff;
       color: #444;
-      font: 16px sans-serif;
+      font: 100%/1.5 BlinkMacSystemFont, -apple-system, 'San Francisco Text', Helvetica, Arial, sans-serif;
+      box-sizing: border-box;
+    }
+
+    *, *:before, *:after {
+      box-sizing: inherit;
+    }
+
+    hr {
+      border: 0;
+      border-bottom: 1px solid #dedede;
+      margin: 24px 0;
     }
 
     a {
       text-decoration: none;
-      border-bottom: 0.2px dotted currentColor;
+      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; }
+
+    h2 { font-size: 26px; }
+    h3 { font-size: 20px; }
+    h4 { font-size: 18px; }
 
-    h1, h2, h4 {
+    h2, h4 {
       font-weight: normal;
       color: #000;
     }
 
     h3 {
-      margin-bottom: 0;
+      margin: 0;
       color: #000;
     }
 
-    h4 {
-      margin-top: 0;
-      color: #999;
+    .date {
+      margin-bottom: 0;
+      color: #666;
+      font-variant: small-caps;
     }
 
     .faded {
@@ -58,12 +87,17 @@
 
     .header {
       padding: 16px;
+    }
+
+    .header a {
       color: #fff;
+      font-size: 24px;
+      font-variant: small-caps;
     }
 
     img {
-      height: 16px;
-      padding: 4px;
+      width: 100%;
+      height: auto;
     }
 
     .contain {
@@ -72,96 +106,79 @@
       padding: 16px;
     }
 
-    .summary {
-      border: 2px solid #fff;
+    .contain--more {
+      max-width: 480px;
     }
 
-    .summary .tldr {
+    .center { text-align: center; }
+    .padding { padding: 12px; }
+
+    .summary {
       padding: 16px;
       color: #fff;
     }
 
-    .components {
-      border: 2px solid #ccc;
-      border-bottom: 0;
+    .summary__date {
+      display: block;
+      cursor: pointer;
     }
 
-    .component {
-      color: #000;
-      padding: 16px;
-      border-bottom: 2px solid #ccc;
+    .summary__date:hover {
+      color: #{{ .Site.Params.faded }};
     }
 
-    .ping.testing {
-      color: #dcdcdc;
-      font-style: italic;
+    .summary__date:hover:after {
+      content: ' ⟳ ';
+      color: #fff;
     }
 
-    .ping.done {
-      color: #aaa;
+    .components {
+      border: 2px solid #{{ .Site.Params.border }};
+      border-bottom: 0;
     }
 
-    .error {
-      color: #DC143C;
+    .component {
+      color: #000;
+      padding: 16px;
+      border-bottom: 2px solid #{{ .Site.Params.border }};
     }
 
-    /* .component:before {
-      content: '[+]';
-      opacity: 0.4;
-      cursor: pointer;
-    } */
+    .ok { color: #{{ .Site.Params.ok }}; }
+    .error { color: #{{ .Site.Params.down }}; }
 
-    .close {
-      float: right;
+    .footer {
+      margin-top: 64px;
+      padding: 20px 0;
+      background: #f5f5f5;
     }
 
-    .subscribe, .status {
+    .copyright {
       display: block;
+      font-variant: small-caps;
     }
 
-    .subscribe {
-      margin: 8px 0;
-    }
-
-    button, .close {
-      cursor: pointer;
-    }
-
-    .subscriber-box.active {
-      display: block;
+    .copyright a, a.logo {
+      border-bottom: 0;
     }
 
-    .subscriber-box {
-      display: none;
-      background: #fff;
-      position: fixed;
+    .logo img {
+      height: auto;
       width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      overflow-y: scroll;
     }
 
-    .subscriber-box--header {
-      color: #000;
-      border-bottom: 1px solid #aaa;
-    }
-
-    .footer {
-      padding: 64px;
-      background: #F0F0F0;
-      text-align: center;
+    .logo--small img {
+      height: 32px;
+      width: auto;
     }
 
-    .copyright {
-      display: block;
-      font-variant: small-caps;
-      text-align: center;
-    }
+    .article h3 a { border: 0; }
 
-    .copyright a, a.logo {
-      border-bottom: 0;
+    .marker {
+      text-transform: uppercase;
+      font-size: smaller;
+      padding: 2px 8px;
+      padding-right: 4px;
+      border: 2px solid #{{ .Site.Params.border }};
     }
 
 
@@ -169,36 +186,35 @@
      * Specific to the status
      */
 
-    .header.ok, .tldr.ok { background: #228B22; }
-    .header.disrupted, .tldr.disrupted { background: #FF8C00; }
-    .header.down, .tldr.down { background: #DC143C; }
-    .header.notice, .tldr.notice { background: #708090; }
-
-    .summary.ok { border-color: #228B22; }
-    .summary.disrupted { border-color: #FF8C00; }
-    .summary.down { border-color: #DC143C; }
-    .summary.notice { border-color: #708090; }
+    .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 }}; }
 
+    .marker-ok { background: #{{ .Site.Params.ok }}; }
+    .marker-disrupted { background: #{{ .Site.Params.disrupted }}; }
+    .marker-down { background: #{{ .Site.Params.down }}; }
+    .marker-notice { background: #{{ .Site.Params.notice }}; }
 
 
     /**
      * Dynamically show individual component statuses
      */
 
-    .component:after { float: right; }
-    .component[data-status="ok"]:after { content: "Operational"; color: #228B22; }
-    .component[data-status="disrupted"]:after { content: "Disrupted"; color: #FF8C00; }
-    .component[data-status="down"]:after { content: "Down"; color: #DC143C; }
-    .component[data-status="notice"]:after { content: "Maintenance"; color: #708090; }
+    .component-status { float: right; }
+    .component[data-status="ok"] .component-status { color: #{{ .Site.Params.ok }};; }
+    .component[data-status="disrupted"] .component-status { color: #{{ .Site.Params.disrupted }};; }
+    .component[data-status="down"] .component-status { color: #{{ .Site.Params.down }};; }
+    .component[data-status="notice"] .component-status { color: #{{ .Site.Params.notice }};; }
 
     /**
-     * Extend to desktops
+     * Responsiveness
      */
 
-    @media (min-width: 560px) {
-      .status, .subscribe {
+    @media (min-width: 640px) {
+      .summary__date {
         float: right;
-        display: inline-block;
+        display: inline;
       }
     }
     </style>
author	Mantas <mistermantas@users.noreply.github.com>	2017-11-25 12:05:33 +0200
committer	Mantas <mistermantas@users.noreply.github.com>	2017-11-25 12:05:33 +0200
commit	3208df6352c0e05208bce95f8d9e9f16769a57ed (patch)
tree	6d784f09fa6dc7d85438ca1086e32ba363d90483 /layouts/partials
parent	4bc818712d9b0133dd22326052a99ef1f36f4aa0 (diff)