From 6b286431b7e90487b31e8bbf14ce13d172d7476c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Tue, 25 Jul 2023 11:48:25 +0000 Subject: [PATCH 1/5] Added version --- VERSION | 1 + css/main.css | 12 ++++++++++++ index.html | 1 + js/app.js | 27 ++++++++++++++++++++++++++- 4 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 VERSION diff --git a/VERSION b/VERSION new file mode 100644 index 0000000..626799f --- /dev/null +++ b/VERSION @@ -0,0 +1 @@ +v1 diff --git a/css/main.css b/css/main.css index f8a374d..df3aa6a 100644 --- a/css/main.css +++ b/css/main.css @@ -38,6 +38,18 @@ header .page { font-weight: 500; } +footer { + position: absolute; + left: 0px; + right: 0px; + bottom: 0px; + text-align: center; + color: #f0f; + padding: 6px 0; + font-size: 0.75em; + font-weight: 500; +} + #page-label { font-weight: 500; font-size: 1.25em; diff --git a/index.html b/index.html index 8fc2931..801d895 100644 --- a/index.html +++ b/index.html @@ -28,5 +28,6 @@
+ diff --git a/js/app.js b/js/app.js index e2d423f..ed5f642 100644 --- a/js/app.js +++ b/js/app.js @@ -9,6 +9,8 @@ class App { this.themes = { default: Theme.default() } this.sections = [] + this.retrieveVersion() + this.retrieveThemes() .then(()=>this.retrieveConfig()) .then(config=>this.parseConfig(config)) @@ -30,6 +32,18 @@ class App { }) }) }//}}} + retrieveVersion() {//{{{ + return fetch('/VERSION') + .then(res=>{ + if(res.ok) + return res.text() + throw `Error when fetching /${page}.yaml: ${res.status} ${res.statusText}` + }) + .then(version=>{ + this.version = version + document.querySelector('footer').innerHTML = `Dashie ${version}` + }) + }//}}} retrieveConfig() {//{{{ const urlParams = new URLSearchParams(window.location.search); let page = urlParams.get('page') @@ -103,6 +117,12 @@ class App { let sectionHTML = this.sections.map(s=>s.html()) document.getElementById('sections').innerHTML = sectionHTML.join('') + + // Footer + let footer = document.querySelector('footer') + footer.style.display = t.colors.page.footer.show ? 'block' : 'none'; + footer.style.color = t.colors.page.footer.text + footer.style.backgroundColor = t.colors.page.footer.background }//}}} setTheme(theme) {//{{{ this.theme = theme @@ -159,7 +179,12 @@ class Theme { page: { text: '#fff', header: '#333', - background: '#fff' + background: '#fff', + footer: { + show: true, + text: "#aaa", + background: "#eee" + } }, page_select: { From cd23679d8b97303addc867803eb80ea147b9f438 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Tue, 25 Jul 2023 11:49:03 +0000 Subject: [PATCH 2/5] Added the subdued and colorful themes --- themes.yaml | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 themes.yaml diff --git a/themes.yaml b/themes.yaml new file mode 100644 index 0000000..c37d1e0 --- /dev/null +++ b/themes.yaml @@ -0,0 +1,77 @@ +# Colorful +# ======== +colorful: + page: + text: "#fff" + background: "#2f3542" + header: "#1e232b" + footer: + show: true + text: "#56647a" + background: "#1e232b" + + page_select: + text: "#fff" + background: "#2f3542" + + theme_select: + text: "#9db0d9" + background: "#2f3542" + border: "#3e4556" + + section: + background: "#252932" + borders: + - ["#ffb932", "#222"] + - ["#ff58ae", "#222"] + - ["#e65272", "#222"] + - ["#68e2ff", "#222"] + - ["#33b3b6", "#222"] + - ["#1a66cc", "#222"] + - ["#883fbb", "#222"] + - ["#4da769", "#222"] + + item: + label: + background: "#333a48" + description: "#9db0d9" + url: "#8393b6" + icon: + hover: brighter + +# Subdued +# ======= +subdued: + page: + text: "#ccc" + background: "#f4f0ee" + header: "#545454" + footer: + show: true + text: "#c1aba0" + background: "#ebe4e0" + + page_select: + text: "#3c3c3c" + background: "#888" + + theme_select: + text: "#ccc" + background: "#545454" + border: "#888" + + section: + background: "#f4f0ee" + borders: + - ["#bd9391", "#333"] + - ["#adbabd", "#333"] + - ["#91b7c7", "#333"] + - ["#6c4b5e", "#bbb"] + + item: + label: "#6c4b5e" + background: "#ece4e1" + description: "#9d828f" + url: "#9d828f" + icon: "#9d828f" + hover: brighter From 3e3f40b80e1bbf32b0d503a8a62ca0980291ed95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Tue, 25 Jul 2023 12:08:31 +0000 Subject: [PATCH 3/5] Gruvbox theme --- themes.yaml | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/themes.yaml b/themes.yaml index c37d1e0..7ed7f7d 100644 --- a/themes.yaml +++ b/themes.yaml @@ -75,3 +75,42 @@ subdued: url: "#9d828f" icon: "#9d828f" hover: brighter + +# Gruvbox +# ======= +gruvbox: + page: + text: "#bdae93" + background: "#282828" + header: "#504945" + footer: + show: true + text: "#a89984" + background: "#504945" + + page_select: + text: "#bdae93" + background: "#3c3836" + + theme_select: + text: "#bdae93" + background: "#3c3c36" + border: "#665c54" + + section: + background: "#504945" + borders: + - ["#fb4934", "#eee"] + - ["#b8bb26", "#333"] + - ["#fabd2f", "#333"] + - ["#458588", "#eee"] + - ["#fe8019", "#333"] + - ["#689d6a", "#333"] + + item: + label: + background: "#282828" + description: "#d5c4a1" + url: "#a89984" + icon: + hover: brighter From 79423505990a08cb3cc103e13fa60c750df6e00b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Tue, 25 Jul 2023 12:32:21 +0000 Subject: [PATCH 4/5] Better mobile view --- css/main.css | 39 ++++++++++++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 5 deletions(-) diff --git a/css/main.css b/css/main.css index df3aa6a..4bb1ee2 100644 --- a/css/main.css +++ b/css/main.css @@ -11,13 +11,13 @@ html, body { } body { + position: relative; + min-height: 100vh; font-size: 14pt; - font-family: 'Roboto', sans-serif; } header { - position: relative; display: grid; grid-template-columns: min-content min-content 1fr min-content; grid-gap: 16px; @@ -38,14 +38,41 @@ header .page { font-weight: 500; } +@media only screen and (max-width: 700px) { + header { + display: flex; + flex-flow: wrap; + justify-content: center; + } + + header #page-label { + width: 100%; + text-align: center; + } + + header #pages { + display: flex; + flex-flow: wrap; + justify-content: center; + } + + header #theme { + display: flex; + justify-content: center; + width: 100%; + } + + .spacer { display: none; } +} + footer { position: absolute; left: 0px; right: 0px; bottom: 0px; - text-align: center; - color: #f0f; padding: 6px 0; + color: #f0f; + text-align: center; font-size: 0.75em; font-weight: 500; } @@ -73,7 +100,7 @@ footer { justify-content: center; gap: 32px; margin-top: 32px; - padding: 32px; + padding: 32px 32px 96px 32px; } .section { @@ -145,3 +172,5 @@ footer { font-weight: 300; font-size: 0.85em; } + +/* vim: ts=8 sw=8 noexpandtab */ From cb6654aeeeb71310651134fbc3b0827df1e54594 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Tue, 25 Jul 2023 12:32:36 +0000 Subject: [PATCH 5/5] Bumped to v2 --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index 626799f..8c1384d 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -v1 +v2