From 17aa659a17e05ed3662301caf8ce75da207b41e7 Mon Sep 17 00:00:00 2001 From: Anand Chowdhary Date: Fri, 22 Jan 2021 19:29:03 +0530 Subject: [PATCH] :sparkles: Add support for multiple themes --- src/routes/_layout.svelte | 60 ++++++++++++++++--------------- static/global.css | 69 ++++-------------------------------- static/themes/dark.css | 15 ++++++++ static/themes/light.css | 74 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 127 insertions(+), 91 deletions(-) create mode 100644 static/themes/dark.css create mode 100644 static/themes/light.css diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index 40f47ef..503674b 100644 --- a/src/routes/_layout.svelte +++ b/src/routes/_layout.svelte @@ -2,51 +2,43 @@ import Nav from "../components/Nav.svelte"; import config from "../data/config.json"; import snarkdown from "snarkdown"; - import { each } from "svelte/internal"; export let segment; - - + href={(config["status-website"] || {}).faviconSvg || + (config["status-website"] || {}).favicon || + `https://github.com/raw/koj-co/upptime/master/assets/icon.svg`} + /> - {#if config['status-website'].scripts} - {#each config['status-website'].scripts as script} - - {/each} + href={(config["status-website"] || {}).favicon || `/logo-192.png`} + /> + {#if config["status-website"].scripts} + {#each config["status-website"].scripts as script}{/each} {/if} - {#if config['status-website'].links} - {#each config['status-website'].links as link} + {#if config["status-website"].links} + {#each config["status-website"].links as link} {/each} {/if} + {#if config['status-website'].css} - {@html ` - ` - } + {@html ``} {/if} {#if config['status-website'].js} - {@html ` - ` - } + {@html ``} {/if} @@ -58,6 +50,16 @@ ${config['status-website'].js} + + diff --git a/static/global.css b/static/global.css index f44e1d9..e40bc6c 100644 --- a/static/global.css +++ b/static/global.css @@ -4,8 +4,6 @@ body { Fira Sans, Droid Sans, Helvetica Neue, sans-serif; line-height: 1.5; padding-bottom: 2.5rem; - color: #333; - background-color: #f0f7f7; } h1, @@ -30,8 +28,6 @@ a { code { font-family: menlo, inconsolata, monospace; font-size: calc(1em - 2px); - color: #555; - background-color: #f0f0f0; padding: 0.2em 0.4em; border-radius: 2px; } @@ -50,11 +46,10 @@ code { } article { - background-color: #fff; - border: 1px solid rgba(0, 0, 0, 0.1); padding: 1rem 1.25rem; position: relative; border-radius: 0.2rem; + border: 1px solid; } article.link a::after { content: ""; @@ -77,13 +72,13 @@ h4 { font-weight: bold; } article.down { - border-left: 0.2rem solid #e74c3c; + border-left: 0.2rem solid; } article.degraded { - border-left: 0.2rem solid #f39c12 !important; + border-left: 0.2rem solid; } article.up { - border-left: 0.2rem solid #2ecc71; + border-left: 0.2rem solid; } .f { @@ -97,20 +92,8 @@ section + h2 { margin-top: 2rem; } -.tag.closed, -.tag.up { - background-color: #16a085; -} -.tag.open, -.tag.down { - background-color: #c0392b; -} -.tag.degraded { - background-color: #f39c12 !important; -} .tag { display: inline-block; - color: #fff; padding: 0.33rem 0.5rem; border-radius: 0.2rem; font-size: 70%; @@ -129,54 +112,16 @@ dl dd { margin: 0 0 1rem 0; } -.dark body { - background-color: #001716; - color: #f0ffff; -} -.dark article { - background-color: #002b29; -} - -article.down { - background-color: #ffdce3; -} -article.degraded { - background-color: #ffdfad; -} -article.good { - background-color: #dcffeb; - color: #003300; -} - -.live-status article { - background-color: #fff; -} - -.dark article { - background-color: #700000; -} - -.changed + section .data { - background-color: #fdcb6e; -} - nav { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - background-color: #fff; -} -.dark nav { - background-color: #002b29; + border-bottom: 1px solid; } [aria-current] { - border-bottom: 2px solid #3498db; + border-bottom: 2px solid; } a.error-button { - border: 0.1rem solid rgba(0, 0, 0, 0.25); - background-color: #01a3a4; - color: #fff; - border-color: transparent; + border: 0.1rem solid; } .submit-button { diff --git a/static/themes/dark.css b/static/themes/dark.css new file mode 100644 index 0000000..b74d299 --- /dev/null +++ b/static/themes/dark.css @@ -0,0 +1,15 @@ +.dark body { + background-color: #001716; + color: #f0ffff; +} +.dark article { + background-color: #002b29; +} + +.dark article { + background-color: #700000; +} + +.dark nav { + background-color: #002b29; +} diff --git a/static/themes/light.css b/static/themes/light.css new file mode 100644 index 0000000..81ceb5d --- /dev/null +++ b/static/themes/light.css @@ -0,0 +1,74 @@ +body { + color: #333; + background-color: #f0f7f7; +} + +code { + color: #555; + background-color: #f0f0f0; +} + +article { + background-color: #fff; + border-color: rgba(0, 0, 0, 0.1); +} + +article.down { + border-left-color: #e74c3c; + background-color: #ffdce3; +} +article.degraded { + border-left-color: #f39c12 !important; + background-color: #ffdfad; +} +article.up { + border-left-color: #2ecc71; +} +article.good { + background-color: #dcffeb; + color: #003300; +} + +.tag { + color: #fff; +} +.tag.closed, +.tag.up { + background-color: #16a085; +} +.tag.open, +.tag.down { + background-color: #c0392b; +} +.tag.degraded { + background-color: #f39c12 !important; +} + +.changed + section .data { + background-color: #fdcb6e; +} + +.live-status article { + background-color: #fff; +} + +nav { + border-bottom-color: rgba(0, 0, 0, 0.1); + background-color: #fff; +} + +[aria-current] { + border-bottom-color: #3498db; +} + +a.error-button { + border-color: rgba(0, 0, 0, 0.25); + background-color: #01a3a4; + color: #fff; +} + +.submit-button { + background-color: #01a3a4; + color: #fff; + border-color: transparent; +}