v2-dev2

29 files changed, 405 insertions, 126 deletions

diff --git a/README.md b/README.md
index 786de79..ba6a6e2 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,17 @@
-# cState
 
-![Screnshot](https://raw.githubusercontent.com/mistermantas/cstate/master/images/screenshot.png)
+<p style="text-align:center">
+
+![cState](https://raw.githubusercontent.com/mistermantas/cstate/master/images/highlight.png)
 
 [![GitHub release](https://img.shields.io/github/release/mistermantas/cstate.svg?style=flat-square)](https://github.com/mistermantas/cstate/releases) [![GitHub last commit](https://img.shields.io/github/last-commit/mistermantas/cstate.svg?style=flat-square)](https://github.com/mistermantas/cstate/commits/master) [![GitHub repo size in bytes](https://img.shields.io/github/repo-size/mistermantas/cstate.svg?style=flat-square)](https://github.com/mistermantas/cstate/tree/master/) [![Gitter](https://img.shields.io/badge/chat-gitter-ed1965.svg?style=flat-square)](https://gitter.im/cState/Lobby) [![Twitter](https://img.shields.io/twitter/follow/mistermantas.svg?style=social&label=Follow)](https://twitter.com/mistermantas)
 
+</p>
+
 > Über fast, backwards compatible (IE8+), tiny, and simple status page built with Hugo. Compatible with Netlify & GitHub Pages.
 
 *This release is a developer preview.*
 
-[**Live demo**](https://cstate.netlify.com)
+[**Live demo**](https://themes.gohugo.io/theme/cstate/)
 
 ## Contents
 
@@ -131,18 +134,6 @@ Time to break that down.
 `Affected`. Add the items that were present in the config file which should alter the status of each individual system (component). *(array, required)*  
 `Section`. This must be `issue`, so that Hugo treats it as one. *(required)*  
 
-### Is there an admin panel or some easy way to change the state of each issue?
-
-If you use [Netlify](https://www.netlify.com), you can expect to see Netlify CMS integration very soon. Otherwise, you could fall back to [prose.io](http://prose.io) or something similar.
-
-### How do I make this work on GitHub Pages?
-
-Compile locally (using production instructions), commit changes, and push them out. Using [Netlify](https://www.netlify.com) is recommended as it simplifies the process.
-
-### My question was not answered!
-
-This part of the documentation still needs to finished. [Questions](https://github.com/mistermantas/cstate/issues) are more than welcome and you should get a pretty fast response as well.
-
 ## Contribute
 
 + Glance over the [Code of Conduct](/CODE_OF_CONDUCT.md).
diff --git a/archetypes/default.md b/archetypes/default.md
index 4908b8a..96949b9 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -3,6 +3,7 @@ Title:
 Date:
 Resolved:
 ResolvedWhen:
+# down, disrupted, notice
 Severity:
 Affected:
 Section: issue
diff --git a/exampleSite/config.yml b/exampleSite/config.yml
index f731012..c75c9b6 100644
--- a/exampleSite/config.yml
+++ b/exampleSite/config.yml
@@ -37,7 +37,7 @@
 
 # What is your status page called?
 # Shows up in the browser bar and meta tags
-title: Example Chat App Status
+title: Example Status
 
 # What language is this page in?
 # Only alters the html[lang] attribute
@@ -58,52 +58,71 @@ baseURL: /
 # +------------------------------------------------------+ #
 ############################################################
 
-# Should posts, which have a publish date
-# from the future, be built? Useful for
-# sharing upcoming maintenance, etc.
-#
-# We recommend to keep this at `true`.
-# BOOLEAN; `true`, `false`
-buildFuture: true
-
 params:
   # These are your systems. Change them to
   # change the amount of components.
+  #
+  # For help, see the wiki:
+  # https://github.com/mistermantas/cstate/wiki/Customization
   systems:
-    #-
-    #  name: Client Area
-    #  codename: panel
-    #-
-    #  name: Minecraft
-    #  codename: mc
-    #-
-    #  name: Web Hosting
-    #  codename: web
-    - Gateway
-    - API
-    - Media Proxy
+    -
+      name: Gateway
+    -
+      name: API
+      description: The guts of the application.
+    -
+      name: Media Proxy
+      description: This is the service responsible for serving images, audio, and video. It is reliant on Fastly.
+  #   partial: custom/metrics
 
   # What header design should we use?
+  #
   # Default: true
   # BOOLEAN; `true`, `false`
   useLargeHeaderDesign: false
 
   # Should we show the logo or the title
   # of the status page?
-  useLogo: false
+  #
+  # Default: false
+  # BOOLEAN; `true`, `false`
+  useLogo: true
 
   # Where is the logo located, if one is
   # present at all?
   #
-  # Recommended: png or jpg for best
-  # browser support!
-  # logo: /logo.png
+  # Recommended: png is best used for
+  # images like logos.
+  #
+  # Recommended: png, bmp, jpg, or gif
+  # for best browser support!
+  logo: /logo.png
 
   # This is the description that is shown
   # in the footer and meta tags.
+  #
+  # Default: We continuously monitor the status of our services and if there are any interruptions, a note will be posted here.
   description: We continuously monitor the status of our services and if there are any interruptions, a note will be posted here.
 
-  # Cplors throughout cState
+  # Tabs on homepage
+  # Uncomment to enable.
+  #
+  # Format:
+  # customTabs:
+  #  -
+  #    name: Name
+  #    link: https://example.com
+
+  # Uptime statistics tab
+  #
+  # Shows link to /stats
+  # (uptime stats)
+  #
+  # Default: true
+  # BOOLEAN; `true`, `false`
+  showUptime: true
+
+  # Colors throughout cState
   #
   # Defaults:
   #
@@ -117,8 +136,6 @@ params:
   disrupted: FF8C00
   down: DC143C
   notice: 708090
-  border: dfdfdf
-  faded: ccc
 
   # If the status page shows that
   # there are disruptions or outages
@@ -131,37 +148,20 @@ params:
   # BOOLEAN; `true`, `false`
   alwaysKeepBrandColor: true
 
-############################################################
-# +------------------------------------------------------+ #
-# |                    Developer                         | #
-# +------------------------------------------------------+ #
-############################################################
-
-  # Custom CSS file
-  # If you want to add any
-  # custom styling, you may
-  # link to one file with all
-  # your modifications here.
-  #
-  # This has *intentionally*
-  # been left uncommented,
-  # as it is not an advanced
-  # feature for developers.
+  # Google Analytics tracking code
   #
-  # customCSS: /custom.css
-
-  # Custom JavaScript file
-  # If you want to add any
-  # custom scripting, you may
-  # link to one file with all
-  # your modifications here.
+  # By default, cState does not use
+  # Google Analytics. If you choose
+  # to use it, you may change the
+  # placeholder code below to your
+  # own and thereby enable the
+  # tracking service.
   #
-  # This has *intentionally*
-  # been left uncommented,
-  # as it is not an advanced
-  # feature for developers.
+  # To disable the analytics, change
+  # the value to the default:
   #
-  # customJS: /custom.js
+  # Default: UA-00000000-1
+  googleAnalytics: UA-00000000-1
 
 ############################################################
 # +------------------------------------------------------+ #
@@ -169,13 +169,21 @@ params:
 # +------------------------------------------------------+ #
 ############################################################
 
+# Should posts, which have a publish date
+# from the future, be built? Useful for
+# sharing upcoming maintenance, etc.
+#
+# We recommend to keep this at `true`.
+# BOOLEAN; `true`, `false`
+buildFuture: true
+
 # These options affect the core of cState.
 # Please do not change them if you do not
 # know what you are doing.
-theme: cstate
+theme: cstate-dev
 
 # If you are developing locally and want
 # to contribute to the cState Git repo,
 # please uncomment this option but do not
 # forget to re-comment it when
-# themesDir: ../..
+themesDir: ../..
diff --git a/exampleSite/content/api.html b/exampleSite/content/api.html
new file mode 100644
index 0000000..bf2b338
--- /dev/null
+++ b/exampleSite/content/api.html
@@ -0,0 +1,6 @@
+---
+---
+
+<!--
+Please keep this file if you wish to enable API access.
+-->
diff --git a/exampleSite/content/stats.html b/exampleSite/content/stats.html
index d4dd1aa..bee2349 100644
--- a/exampleSite/content/stats.html
+++ b/exampleSite/content/stats.html
@@ -1,4 +1,9 @@
 ---
 title: Uptime
+description: This page has some information analyzing the downtime that has been reported on this status page.
 type: uptime
 ---
+
+<!--
+Please keep this file if you wish to show uptime stats.
+-->
diff --git a/exampleSite/layouts/README.md b/exampleSite/layouts/README.md
new file mode 100644
index 0000000..61e8a98
--- /dev/null
+++ b/exampleSite/layouts/README.md
@@ -0,0 +1,3 @@
+This folder can be used to overwrite or add any layouts to your status page.
+
+For more, please [read the documentation](https://github.com/mistermantas/cstate/wiki/Customization).
diff --git a/exampleSite/netlify.toml b/exampleSite/netlify.toml
new file mode 100644
index 0000000..3ef9150
--- /dev/null
+++ b/exampleSite/netlify.toml
@@ -0,0 +1,14 @@
+[build]
+    command = "hugo"
+    publish = "public"
+    functions = "functions"
+
+[build.environment]
+    HUGO_VERSION = "0.41"
+
+[context.production.environment]
+    HUGO_ENV = "production"
+    NODE_ENV = "production"
+
+[context.deploy-preview]
+    command = "hugo"
diff --git a/exampleSite/static/README.md b/exampleSite/static/README.md
new file mode 100644
index 0000000..7541621
--- /dev/null
+++ b/exampleSite/static/README.md
@@ -0,0 +1,9 @@
+This folder can be used to store any static content that you may want to link to on your status page.
+
+You may replace the default favicons by creating icons with these names:
+
+- favicon-16x16.png
+- favicon-32x32.png
+- favicon.ico
+
+You may also replace the Netlify CMS configuration by creating an `admin` folder and placing your own `config.yml` or `index.html` file by following the project's given instructions.
diff --git a/exampleSite/static/logo.png b/exampleSite/static/logo.png
new file mode 100644
index 0000000..851d104
--- /dev/null
+++ b/exampleSite/static/logo.png
diff --git a/images/highlight.png b/images/highlight.png
new file mode 100644
index 0000000..19dc9b2
--- /dev/null
+++ b/images/highlight.png
diff --git a/images/screenshot.png b/images/screenshot.png
index 70bd28c..9f4b673 100644
--- a/images/screenshot.png
+++ b/images/screenshot.png
diff --git a/images/tn.png b/images/tn.png
index 604e341..5c59fc4 100644
--- a/images/tn.png
+++ b/images/tn.png
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index c0a9070..8463204 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,4 +7,8 @@
       {{ .Render "post" }}
     </div>
 
-{{ partial "footer" . }}
+
+    {{ partial "js" . }}
+    {{ partial "footer" . }}
+  </body>
+</html>
diff --git a/layouts/index.html b/layouts/index.html
index eedb08d..f80dfe0 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -7,7 +7,7 @@
 {{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
 {{ $isDown := where $active "Params.severity" "=" "down" }}
 
-  <body class="status status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }} {{ if not .Site.Params.alwaysKeepBrandColor }}change-header-color{{ end }}">
+  <body class="status-homepage status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }} {{ if not .Site.Params.alwaysKeepBrandColor }}change-header-color{{ end }}">
     {{ partial "header" . }}
 
     <!-- Main -->
@@ -33,15 +33,16 @@
           {{ end }}{{ end }}{{ end }}
         </strong>
 
-          <span class="status summary__date" onclick="location.reload()"></span>
-        </div>
+        <span class="summary__date" onclick="location.reload()"></span>
+      </div>
 
       {{ if $active }}
       <div class="announcement-box">
         {{ range $active }}
           <div class="padding">
             <p><strong>{{ .Title }}</strong></p>
-            {{ .Content }}
+            {{ .Content | safeHTML | truncate 500 "…" }}
+            <p><a href="{{ .Permalink }}">Continue reading</a></p>
           </div>
         {{ else }}{{ end }}
       </div>
@@ -53,15 +54,26 @@
       <div class="components">
         {{ $systems := .Site.Params.systems }}
         {{ range $index, $systems }}
-          {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .) }}
+          {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
 
           {{ $thisIsNotice := where $activeComponentIssues "Params.severity" "=" "notice" }}
           {{ $thisIsDisrupted := where $activeComponentIssues "Params.severity" "=" "disrupted" }}
           {{ $thisIsDown := where $activeComponentIssues "Params.severity" "=" "down" }}
 
           <div class="component" data-status="{{ if $thisIsDown }}down{{ else }}{{ if $thisIsDisrupted }}disrupted{{ else }}{{ if $thisIsNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
-            {{ $this := . }}
-            {{ . }}
+            {{ $this := .name }}
+            {{ .name }}
+
+            {{ with .description }}
+              <span class="description">
+                &nbsp; <span class="faded">(?)</span>
+
+                <span class="description__text">
+                  {{ . }}
+                </span>
+              </span>
+            {{ end }}
+
             <span class="component-status">
               {{ if $thisIsDown }}
                 Down
@@ -75,6 +87,12 @@
                 Operational
               {{ end }}{{ end }}{{ end }}
             </span>
+
+            {{ with .partial }}
+            <div>
+              {{ partial . . }}
+            </div>
+            {{ end }}
           </div>
         {{ end }}
       </div>
@@ -88,9 +106,17 @@
       <a href="#incidents" class="tab tab--current">
         Incidents
       </a>
+      {{ if .Site.Params.showUptime }}
       <a href="/stats" class="tab tab--other">
         Uptime
       </a>
+      {{ end }}
+
+      {{ range .Site.Params.customTabs }}
+       <a href="{{ .link }}" class="tab tab--other">
+         {{ .name }}
+       </a>
+     {{ end }}
     </div>
   </div>
 
diff --git a/layouts/issues/single.html b/layouts/issues/single.html
index bc48ed3..5076148 100644
--- a/layouts/issues/single.html
+++ b/layouts/issues/single.html
@@ -11,7 +11,15 @@
     {{ partial "header" . }}
 
     <div class="contain">
+      <a href="{{ .Site.BaseURL }}">← Go back</a>
+    </div>
+
+    <div class="contain">
       {{ .Render "issue" }}
     </div>
 
-{{ partial "footer" . }}
+
+    {{ partial "js" . }}
+    {{ partial "footer" . }}
+  </body>
+</html>
diff --git a/layouts/partials/custom/above-footer.html b/layouts/partials/custom/above-footer.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/above-footer.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/above-header.html b/layouts/partials/custom/above-header.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/above-header.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/below-footer.html b/layouts/partials/custom/below-footer.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/below-footer.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/below-header.html b/layouts/partials/custom/below-header.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/below-header.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/meta.html b/layouts/partials/custom/meta.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/meta.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 085b814..d6b5486 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,3 +1,4 @@
+
 <div class="footer">
   <div class="contain">
     <p><strong>{{ now.Year }} &copy; {{ .Site.Title }}</strong>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c378998..94bef80 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,3 +1,4 @@
+
 {{ if .Site.Params.useLargeHeaderDesign }}
 <div class="header header--large">
   <div class="contain contain--more center">
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index d47cd5d..a26d36c 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -18,48 +18,150 @@
   } else {
     document.querySelector('meta[name=theme-color]').setAttribute('content', themeNoticeColor);
   }
+</script>
 
-
+<!--
+<script>
   /**
    * Check for internet
    */
 
-  var lastUpdated = document.querySelector('.summary__date');
-  var lastUpdate = new Date();
+  function hasClass(element, className) {
+    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
+  }
+
+  if (hasClass(document.querySelector('body'), 'status-homepage')) {
+    var lastUpdated = document.querySelector('.summary__date');
+    var lastUpdate = new Date();
 
-  function timeSince(date) {
-    var seconds = Math.floor((new Date() - date) / 1000);
+    function timeSince(date) {
+      var seconds = Math.floor((new Date() - date) / 1000);
 
-    var interval = Math.floor(seconds / 31536000);
+      var interval = Math.floor(seconds / 31536000);
 
-    if (interval > 1) {
-      return interval + ' years';
+      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';
     }
-    interval = Math.floor(seconds / 2592000);
-    if (interval > 1) {
-      return interval + ' months';
+    var aDay = 24*60*60*1000;
+  }
+
+  function checkCurrentStatus() {
+    // Check for each status
+    if (hasClass(document.querySelector('body'), 'status-ok')) {
+      window.currentState = 'Operational';
     }
-    interval = Math.floor(seconds / 86400);
-    if (interval > 1) {
-      return interval + 'd';
+    if (hasClass(document.querySelector('body'), 'status-disrupted')) {
+      window.currentState = 'Disrupted';
     }
-    interval = Math.floor(seconds / 3600);
-    if (interval > 1) {
-      return interval + 'h';
+    if (hasClass(document.querySelector('body'), 'status-down')) {
+      window.currentState = 'Down';
     }
-    interval = Math.floor(seconds / 60);
-    if (interval > 1) {
-      return interval + 'min';
+    if (hasClass(document.querySelector('body'), 'status-notice')) {
+      window.currentState = 'Maintenance';
     }
-    return Math.floor(seconds) + 's';
   }
-  var aDay = 24*60*60*1000;
+  checkCurrentStatus();
+
+  // Set for first time use
+  if (typeof(Storage) !== 'undefined') {
+    window.sessionStorage.setItem('priorState', currentState);
+  }
 
   // Show second by second updates
   window.setInterval(function() {
-    lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago';
+    if (hasClass(document.querySelector('body'), 'status-homepage')) {
+      lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago';
+    }
+
+    checkCurrentStatus();
+
+    if (typeof(Storage) !== "undefined") {
+      if (window.sessionStorage.getItem('priorState') !== currentState) {
+        displayNotification('Status changed from ' + window.sessionStorage.getItem('priorState') + ' to ' + currentState);
+      }
+
+      window.sessionStorage.setItem('priorState', currentState);
+    } else {
+      console.log('UNSUPPORTED - SMART NOTIFICATIONS');
+    }
   }, 1000);
+
+
+  /**
+   * Modern browser shiz
+   */
+
+  if (navigator.serviceWorker) {
+    console.log('Service Worker and Push is supported');
+
+    navigator.serviceWorker.register('sw.js')
+    .then(function(swReg) {
+      console.log('Service Worker is registered', swReg);
+
+      swRegistration = swReg;
+    })
+    .catch(function(error) {
+      console.error('Service Worker Error', error);
+    });
+  } else {
+    console.log('Push messaging is not supported');
+  }
+
+
+  Notification.requestPermission(function(status) {
+    console.log('Notification permission status:', status);
+  });
+
+
+  function displayNotification(title, body) {
+    if (Notification.permission == 'granted') {
+      navigator.serviceWorker.getRegistration().then(function(reg) {
+        var options = {
+          body: body,
+          icon: '/favicon.png',
+          vibrate: [100, 50, 100],
+          data: {
+            dateOfArrival: Date.now(),
+            primaryKey: 1
+          },
+          actions: [
+            {action: 'view', title: 'View incident'},
+            {action: 'close', title: 'Dismiss'},
+          ]
+        };
+        reg.showNotification(title, options);
+      });
+    }
+  }
 </script>
-{{ with .Site.Params.customJS }}
-<script type="text/javascript" src="{{ . }}"></script>
+-->
+
+{{ if ne .Site.Params.googleAnalytics "UA-00000000-1" }}
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script type="text/javascript" defer src="https://www.googletagmanager.com/gtag/js?id=UA-109775664-1"></script>
+  <script type="text/javascript" defer>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', '{{ .Site.Params.googleAnalytics }}');
+  </script>
 {{ end }}
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 2bef153..7b45778 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -132,7 +132,7 @@
     }
 
     .summary__date:hover {
-      color: #{{ .Site.Params.faded }};
+      color: #ccc;
     }
 
     .summary__date:hover:after {
@@ -141,21 +141,47 @@
     }
 
     .components {
-      border: 2px solid #{{ .Site.Params.border }};
+      border: 2px solid #ddd;
       border-bottom: 0;
     }
 
     .component {
       color: #000;
       padding: 16px;
-      border-bottom: 2px solid #{{ .Site.Params.border }};
+      border-bottom: 2px solid #ddd;
+    }
+
+    .description { cursor: pointer; position: relative; }
+    .description__text { display: none; }
+    .description:hover .description__text,
+    .description:active .description__text  {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 32px;
+      background: #181818;
+      color: #fff;
+      z-index: 50;
+      padding: 8px;
+      border: 2px solid #242424;
+      font-size: 14px;
+      color: #ccc;
+      width: 1000%;
+      height: auto;
+    }
+
+    @media (max-width: 640px) {
+      .description:hover .description__text,
+      .description:active .description__text {
+        width: 50vw;
+      }
     }
 
     .ok { color: #{{ .Site.Params.ok }}; }
     .error { color: #{{ .Site.Params.down }}; }
 
     .footer {
-      margin-top: 20px;
+      padding: 10px;
       background: #f5f5f5;
     }
 
@@ -230,7 +256,7 @@
     .status-down .announcement-box { border: 2px solid #{{ .Site.Params.down }}; }
     .status-notice .announcement-box { border: 2px solid #{{ .Site.Params.notice }}; }
 
-    .status .announcement-box { border-bottom-width: 1px; }
+    .status-homepage .announcement-box { border-bottom-width: 1px; }
 
 
     /**
@@ -254,7 +280,5 @@
       }
     }
     </style>
-    {{ with .Site.Params.customCSS }}
-    <link href="{{ . }}" rel="stylesheet">
-    {{ end }}
+
   </head>
diff --git a/layouts/uptime/single.html b/layouts/uptime/single.html
index 957ca8f..cfad105 100644
--- a/layouts/uptime/single.html
+++ b/layouts/uptime/single.html
@@ -36,6 +36,7 @@
         {{ $.Scratch.Add "rackedUpDowntime" $timeDiff }}
       {{ end }}
       {{ $scratchValue := $.Scratch.Get "rackedUpDowntime" }}
+      <noscript>
       <div class="stat">
         {{ if gt $scratchValue 3600 }}
           {{ $minutesForCalc := (mod (div $scratchValue 60) 60) }}
@@ -50,6 +51,26 @@
         {{ end }} of downtime so far
         <hr>
       </div>
+      </noscript>
+      <script>
+      function roundUp(rnum, rlength) {
+        var newnumber = Math.round(rnum * Math.pow(10, rlength)) / Math.pow(10, rlength);
+        return newnumber;
+      }
+
+      var x = (  ((2419200 - {{ $scratchValue }}) / 2419200) * 100  );
+
+      document.write(
+        '<div class="stat">' + roundUp(x, 2) + '% uptime' + '<hr></div>';
+      );
+
+      /*
+      7 week - 604800
+      30 days - 2419200
+      60 days - 4838400
+      90 days - 7257600
+      */
+      </script>
       <p>
         There have been {{ len $incidents }} incidents in total so far.
         In total, this added up to {{ $scratchValue }}s (or {{ div $scratchValue 60 }} min) of downtime. Please note that the uptime  statistics only counts resolved incidents, ongoing incidents are not included in these calculations.
diff --git a/static/admin/config.yml b/static/admin/config.yml
index 93ec4d5..7749a76 100644
--- a/static/admin/config.yml
+++ b/static/admin/config.yml
@@ -11,9 +11,8 @@
 
 backend:
   name: git-gateway
-  branch: master
-  media_folder: "static/img"
-  public_folder: "/img"
+media_folder: "static/img"
+public_folder: "/img"
   # Do not change this!
   collections:
     # Used in routes, e.g., /admin/collections/blog
@@ -29,11 +28,13 @@ backend:
     # The fields for each document, usually in front matter
     fields:
       - {label: "Section", name: "Section", widget: "hidden", default: "issue"}
-      - {label: "Title", name: "Title", widget: "string"}
-      - {label: "Description", name: "Description", widget: "string"}
-      - {label: "Date", name: "Date", widget: "datetime"}
-      - {label: "Is this completely resolved?", name: "Resolved", widget: "boolean"}
+
+      - {label: "What is this issue about?", name: "Title", widget: "string"}
+      - {label: "When did this issue begin?", name: "Date", widget: "datetime"}
+
+      - {label: "Has it now been fully resolved?", name: "Resolved", widget: "boolean"}
       - {label: "When did downtime end (if it did)?", name: "ResolvedWhen", widget: "date"}
-      - {label: "Severity (enter disrupted, down, or notice)", name: "Severity", widget: "string"}
-      - {label: "Affected (example: ['API', ['Media Proxy']])", name: "Affected", widget: "string"}
-      - {label: "Body", name: "body", widget: "markdown"}
+
+      - {label: "What is the severity?", name: "Severity", widget: "string", options: ['disrupted', 'down', 'notice']}
+      - {label: "What is affected? Example: ['API', 'Media Proxy']", name: "Affected", widget: "string"}
+      - {label: "Write any relevant notes here.", name: "body", widget: "markdown"}
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..0dd88ce
--- /dev/null
+++ b/static/favicon.png
diff --git a/static/sw.js b/static/sw.js
new file mode 100644
index 0000000..e778677
--- /dev/null
+++ b/static/sw.js
@@ -0,0 +1,14 @@
+'use strict';
+
+self.addEventListener('notificationclick', function(e) {
+  var notification = e.notification;
+  var primaryKey = notification.data.primaryKey;
+  var action = e.action;
+
+  if (action === 'close') {
+    notification.close();
+  } else {
+    clients.openWindow(permalink);
+    notification.close();
+  }
+});
diff --git a/theme.toml b/theme.toml
index 45b3b66..42e6261 100644
--- a/theme.toml
+++ b/theme.toml
@@ -3,7 +3,7 @@ license = "MIT"
 licenselink = "https://github.com/mistermantas/cstate/blob/master/LICENSE.md"
 description = "Über fast, backwards compatible (IE8+), tiny, and simple status page built with Hugo. Compatible with Netlify & GitHub Pages."
 homepage = "https://github.com/mistermantas/cstate"
-tags = ['hugo', 'netlify', 'status', 'statuspage', 'fast', 'light', 'ie8', 'ie9', 'ie10', 'ie11', 'github', 'github-pages', 'gh-pages', 'serverside', 'serverless', 'no-javascript', 'github-page', 'netlify-cms', 'gh-pages']
+tags = ['hugo', 'netlify', 'status', 'statuspage', 'fast', 'light', 'ie8', 'ie9', 'ie10', 'ie11', 'github', 'github-pages', 'gh-pages', 'serverside', 'serverless', 'no-javascript', 'github-page', 'netlify-cms', 'gh-pages', 'responsive', 'minimal', 'google analytics', 'clean', 'minimalist', 'light', 'product', 'technical', 'widgets', 'products', 'mobile', 'onepage', 'singlepage', 'single page', 'spa']
 min_version = "0.28"
 
 [author]