diff --git a/output/style.css b/output/style.css
index 2d30120..06657b8 100644
--- a/output/style.css
+++ b/output/style.css
@@ -119,6 +119,12 @@ button {
body > footer {
padding-block: calc(var(--pico-block-spacing-vertical) * 2);
+ background: linear-gradient(180deg, black, transparent);
+}
+
+:root:not([data-theme=dark]) body > footer,
+[data-theme=light] body > footer {
+ background: linear-gradient(180deg, rgba(0,0,0,.1), transparent);
}
/* approx 800px */
@@ -177,3 +183,59 @@ body > footer {
font-style: italic;
padding: calc(var(--pico-spacing) / 3) 0;
}
+
+/* List index.html */
+ol {
+ counter-reset: index;
+ padding: 0;
+ width: 100%;
+}
+
+/* List element index.html */
+ol li {
+ counter-increment: index;
+ display: flex;
+ align-items: center;
+ padding: 12px 0;
+ box-sizing: border-box;
+}
+
+
+/* Element counter */
+ol li::before {
+ content: "§";
+ font-size: 1.5rem;
+ text-align: right;
+ font-weight: bold;
+ padding-right: 12px;
+ align-self: flex-start;
+ background-image: linear-gradient(to bottom, #08AEEA, #2AF598);
+ background-attachment: fixed;
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+
+/* Element separation */
+ol li + li {
+ border-top: var(--pico-contrast-focus) solid 1px;
+}
+
+.hidden {
+ display: none;
+}
+
+.inline {
+ display: inline;
+}
+
+:root:not([data-theme=dark]) .dark-inline,
+[data-theme=light] .dark-inline{
+ display: inline;
+}
+
+:root:not([data-theme=dark]) .dark-hidden,
+[data-theme=light] .dark-hidden {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/main.rs b/src/main.rs
index def9fbd..2c375ec 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -111,7 +111,7 @@ fn main() {
.replace("{{title}}", &lawname);
li_of_files.push_str(&format!(
- "{lawname}
\n"
+ "{lawname}"
));
fs::write(&format!("output/{law_name}.html"), &site).expect("Unable to write file");
}
@@ -124,6 +124,9 @@ fn main() {
let js = fs::read_to_string("templates/app.js").unwrap();
fs::write(&format!("output/app.js"), &js).expect("Unable to write file");
+ let js = fs::read_to_string("templates/toggle.js").unwrap();
+ fs::write(&format!("output/toggle.js"), &js).expect("Unable to write file");
+
let mut index = fs::read_to_string("templates/index.html").unwrap();
index = index.replace("{{content}}", &li_of_files);
fs::write(&format!("output/index.html"), &index).expect("Unable to write file");
diff --git a/templates/app.js b/templates/app.js
index cc7dc92..9d54501 100644
--- a/templates/app.js
+++ b/templates/app.js
@@ -1,21 +1,71 @@
document.addEventListener('DOMContentLoaded', function() {
- toggleSummary();
+ changeTheme();
+ initcolorTheme();
});
-function toggleSummary() {
- const openBtns = document.querySelectorAll('.open-js');
- const closeBtns = document.querySelectorAll('.close-js');
- const detailElements = document.querySelectorAll('details');
+function changeTheme() {
+ let toggleBtn = document.querySelector('#theme-toggle-js');
- openBtns.forEach(function(openBtn) {
- openBtn.addEventListener('click', function(){
- detailElements.forEach((detail) => detail.setAttribute("open", ""));
+ if(toggleBtn) {
+ toggleBtn.addEventListener('click', function() {
+ if(toggleBtn.dataset.theme === 'light') {
+ setTheme('dark', true);
+ } else {
+ setTheme('light', true);
+ }
});
- });
-
- closeBtns.forEach(function(closeBtn) {
- closeBtn.addEventListener('click', function(){
- detailElements.forEach((detail) => detail.removeAttribute("open", ""));
- });
- });
+ }
+}
+
+/***
+* init javascript
+* 1) detect native color scheme or use set theme in local storage
+* 2) detect view (desktop or responsive) if on mobile device with touch screen
+* 3) set base font size to 112.5% -> 18px
+*/
+function initcolorTheme() {
+ colorThemeWatcher();
+ let theme = localStorage.getItem('theme');
+ if (theme == null || theme === 'auto') {
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ setTheme('dark', false);
+ } else {
+ setTheme('light', false);
+ }
+ } else {
+ setTheme(theme)
+ }
+}
+
+/***
+* Listener operating system native color configuration
+*/
+function colorThemeWatcher() {
+ try {
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+ setTheme(e.matches ? 'dark' : 'light');
+ });
+ } catch {
+ console.warn('color theme watcher not supported');
+ }
+}
+
+/**
+* Define color scheme, colors without losing the base font size configuration
+* and add data-theme to html tag
+* @param theme
+*/
+function setTheme(theme, setLocalStorage = true) {
+ let toggleBtn = document.querySelector('#theme-toggle-js');
+
+ if (setLocalStorage) {
+ localStorage.setItem('theme', theme);
+ }
+ if (toggleBtn) toggleBtn.setAttribute('data-theme', theme);
+
+ if (document.documentElement.dataset.theme === 'dark' && theme === 'light') {
+ document.documentElement.dataset.theme = 'light';
+ } else if(document.documentElement.dataset.theme === 'light' && theme === 'dark'){
+ document.documentElement.dataset.theme = 'dark';
+ }
}
diff --git a/templates/index.html b/templates/index.html
index 41e0755..4f3dc9d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,4 +1,4 @@
-
+
@@ -19,18 +19,33 @@
{{content}}
-