aboutsummaryrefslogtreecommitdiff
path: root/layouts/partials
diff options
context:
space:
mode:
Diffstat (limited to 'layouts/partials')
-rw-r--r--layouts/partials/footer.html20
-rw-r--r--layouts/partials/header-mini.html7
-rw-r--r--layouts/partials/js.html62
-rw-r--r--layouts/partials/meta.html194
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>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-09-22 22:25:33 +0000