diff --git a/templates/app.js b/templates/app.js
index 86759ca..ae7be83 100644
--- a/templates/app.js
+++ b/templates/app.js
@@ -1,93 +1,93 @@
-document.addEventListener('DOMContentLoaded', function() {
- changeTheme();
- initcolorTheme();
- apply_stickies()
+document.addEventListener("DOMContentLoaded", function () {
+ changeTheme();
+ initcolorTheme();
+ apply_stickies();
});
function changeTheme() {
- let toggleBtn = document.querySelector('#theme-toggle-js');
+ let toggleBtn = document.querySelector("#theme-toggle-js");
- if(toggleBtn) {
- toggleBtn.addEventListener('click', function() {
- if(toggleBtn.dataset.theme === 'light') {
- setTheme('dark', true);
- } else {
- setTheme('light', true);
- }
- });
- }
+ if (toggleBtn) {
+ toggleBtn.addEventListener("click", function () {
+ if (toggleBtn.dataset.theme === "light") {
+ setTheme("dark", true);
+ } else {
+ setTheme("light", true);
+ }
+ });
+ }
}
/***
-* 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
-*/
+ * 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)
- }
+ 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
-*/
+ * 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');
- }
+ 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
-*/
+ * 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');
+ let toggleBtn = document.querySelector("#theme-toggle-js");
- if (setLocalStorage) {
- localStorage.setItem('theme', theme);
- }
- if (toggleBtn) toggleBtn.setAttribute('data-theme', theme);
+ 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';
- }
+ 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";
+ }
}
-window.addEventListener('scroll', function() {
- apply_stickies()
-})
+window.addEventListener("scroll", function () {
+ apply_stickies();
+});
function apply_stickies() {
- var _$stickies = [].slice.call(document.querySelectorAll('.sticky'))
- _$stickies.forEach(function(_$sticky) {
- if (CSS.supports && CSS.supports('position', 'sticky')) {
- apply_sticky_class(_$sticky)
+ var _$stickies = [].slice.call(document.querySelectorAll(".sticky"));
+ _$stickies.forEach(function (_$sticky) {
+ if (CSS.supports && CSS.supports("position", "sticky")) {
+ apply_sticky_class(_$sticky);
}
- })
+ });
}
function apply_sticky_class(_$sticky) {
- var currentOffset = _$sticky.getBoundingClientRect().top
- var stickyOffset = parseInt(getComputedStyle(_$sticky).top.replace('px', ''))
- var isStuck = currentOffset <= stickyOffset
+ var currentOffset = _$sticky.getBoundingClientRect().top;
+ var stickyOffset = parseInt(getComputedStyle(_$sticky).top.replace("px", ""));
+ var isStuck = currentOffset <= stickyOffset;
- _$sticky.classList.toggle('js-is-sticky', isStuck)
-}
\ No newline at end of file
+ _$sticky.classList.toggle("js-is-sticky", isStuck);
+}
diff --git a/templates/index.html b/templates/index.html
index ed0cc83..bb9e680 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,54 +1,58 @@
-
-
-
- RIS Parser
-
-
-
-
-
-
-
-
-
- {{content}}
-
-
-
-
-
+
+
+
+ RIS Parser
+
+
+
+
+
+
+
+
+
+ {{content}}
+
+
+
+
+
diff --git a/templates/law.html b/templates/law.html
index 7b1a4a5..6ac2b89 100644
--- a/templates/law.html
+++ b/templates/law.html
@@ -1,58 +1,62 @@
-
-
-
- RIS Parser
-
-
-
-
-
-
-
-
-
-
-
-
- {{title}}
- {{content}}
-
-
-
-
-
+
+
+
+ RIS Parser
+
+
+
+
+
+
+
+
+
+
+
+
+ {{title}}
+ {{content}}
+
+
+
+
+
diff --git a/templates/style.css b/templates/style.css
index c4f79fc..ae150d6 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -1,281 +1,224 @@
-
-
html {
- -webkit-hyphens: auto;
- hyphens: auto;
+ -webkit-hyphens: auto;
+ hyphens: auto;
}
-
h1 {
- margin-top: var(--pico-spacing);
+ margin-top: var(--pico-spacing);
}
-
h2,
h3,
h4,
-h5,
+h5,
h6 {
- --pico-font-weight: 400;
-
- display: inline;
+ --pico-font-weight: 400;
+ display: inline;
}
-
h2 {
- --pico-font-size: 1.3rem;
- --pico-font-weight: 200;
+ --pico-font-size: 1.3rem;
+ --pico-font-weight: 200;
}
-
h3 {
- --pico-font-size: 1.2rem;
- --pico-font-weight: 200;
+ --pico-font-size: 1.2rem;
+ --pico-font-weight: 200;
}
-
h4 {
- --pico-font-size: 1.1rem;
- --pico-font-weight: 200;
+ --pico-font-size: 1.1rem;
+ --pico-font-weight: 200;
}
-
mark {
- --pico-mark-gradient: linear-gradient(270deg, #08AEEA 0%, #2AF598 100%);
-
- padding: 0;
- background: var(--pico-mark-gradient);
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
+ --pico-mark-gradient: linear-gradient(270deg, #08aeea 0%, #2af598 100%);
+ padding: 0;
+ background: var(--pico-mark-gradient);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
}
-
main {
- min-height: 100vh;
+ min-height: 100vh;
}
-
details summary {
- line-height: unset;
- display: flex;
- width: 100%;
- align-items: center;
+ line-height: unset;
+ display: flex;
+ width: 100%;
+ align-items: center;
}
-
details summary::after {
- flex-shrink: 0;
+ flex-shrink: 0;
}
-
details > summary {
- position: sticky;
- background-color: var(--pico-background-color);
- top: 0;
+ position: sticky;
+ background-color: var(--pico-background-color);
+ top: 0;
}
-
details details > summary {
- position: unset !important;
+ position: unset !important;
}
-
summary h2,
summary h3,
summary h4,
-summary h5 {
- flex-grow: 1;
+summary h5 {
+ flex-grow: 1;
}
-
summary.js-is-sticky {
- padding: 1.5rem 0;
- background: linear-gradient(0deg, transparent 0%, var(--pico-background-color) 30%);
+ padding: 1.5rem 0;
+ background: linear-gradient(0deg, transparent 0%, var(--pico-background-color) 30%);
}
-
summary.js-is-sticky h2,
summary.js-is-sticky h3,
summary.js-is-sticky h4,
-summary.js-is-sticky h5 {
- max-width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- margin-bottom: 0;
- font-size: 1rem;
- font-weight: 700;
+summary.js-is-sticky h5 {
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-bottom: 0;
+ font-size: 1rem;
+ font-weight: 700;
}
-
.par {
- margin-bottom: calc(var(--pico-spacing) * 2);
+ margin-bottom: calc(var(--pico-spacing) * 2);
}
-
.symb {
- --pico-font-weight: 700;
-
- display: inline-block;
- margin-right: calc(var(--pico-spacing) / 3);
- font-weight: var(--pico-font-weight)
+ --pico-font-weight: 700;
+ display: inline-block;
+ margin-right: calc(var(--pico-spacing) / 3);
+ font-weight: var(--pico-font-weight);
}
-
.header {
- --pico-font-weight: 300;
-
- font-weight: var(--pico-font-weight);
+ --pico-font-weight: 300;
+ font-weight: var(--pico-font-weight);
}
-
h4,
-h5,
+h5,
h6 {
- --pico-font-weight: 400;
-
- display: inline;
+ --pico-font-weight: 400;
+ display: inline;
}
-
h2 {
- --pico-font-size: 1.3rem;
- --pico-font-weight: 200;
+ --pico-font-size: 1.3rem;
+ --pico-font-weight: 200;
}
-
h3 {
- --pico-font-size: 1.2rem;
- --pico-font-weight: 200;
+ --pico-font-size: 1.2rem;
+ --pico-font-weight: 200;
}
-
h4 {
- --pico-font-size: 1.1rem;
- --pico-font-weight: 200;
+ --pico-font-size: 1.1rem;
+ --pico-font-weight: 200;
}
-
.par > ul {
- margin: var(--pico-spacing) 0;
- padding: 0;
+ margin: var(--pico-spacing) 0;
+ padding: 0;
}
-
.par > ul > li {
- list-style: none;
- margin: 1rem 0;
+ list-style: none;
+ margin: 1rem 0;
}
-
ul {
- padding: 0 2rem;
+ padding: 0 2rem;
}
-
li {
- list-style: square;
+ list-style: square;
}
-
button {
- --pico-form-element-spacing-vertical: 0.25rem;
+ --pico-form-element-spacing-vertical: 0.25rem;
}
-
body > footer {
- padding-block: calc(var(--pico-block-spacing-vertical) * 2);
- background: linear-gradient(180deg, black, transparent);
+ 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);
+:root:not([data-theme="dark"]) body > footer,
+[data-theme="light"] body > footer {
+ background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent);
}
-
/* approx 800px */
.container {
- max-width: 38rem;
+ max-width: 38rem;
}
-
.btn-container {
- position: fixed;
- bottom: 0rem;
- right: 0rem;
- padding: 1rem;
- width: 100%;
- display: flex;
- justify-content: flex-end;
- background: linear-gradient(180deg, transparent, var(--pico-background-color), var(--pico-background-color));
+ position: fixed;
+ bottom: 0rem;
+ right: 0rem;
+ padding: 1rem;
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ background: linear-gradient(180deg, transparent, var(--pico-background-color), var(--pico-background-color));
}
-
-.btn-open,
+.btn-open,
.btn-close {
- font-size: .8rem;
- display: inline-block;
+ font-size: 0.8rem;
+ display: inline-block;
}
-
.btn-open {
- margin-right: 1rem;
+ margin-right: 1rem;
}
-
.par {
- margin-bottom: calc(var(--pico-spacing) * 2);
+ margin-bottom: calc(var(--pico-spacing) * 2);
}
-
.symb {
- --pico-font-weight: 700;
-
- display: inline-block;
- margin-right: calc(var(--pico-spacing) / 3);
- font-weight: var(--pico-font-weight)
+ --pico-font-weight: 700;
+ display: inline-block;
+ margin-right: calc(var(--pico-spacing) / 3);
+ font-weight: var(--pico-font-weight);
}
-
.header {
- --pico-font-weight: 300;
-
- font-weight: var(--pico-font-weight);
+ --pico-font-weight: 300;
+ font-weight: var(--pico-font-weight);
}
-
.content {
- display: block;
+ display: block;
}
-
.note {
- --pico-font-weight: 200;
-
- font-weight: var(--pico-font-weight);
- display: block;
- font-style: italic;
- padding: calc(var(--pico-spacing) / 3) 0;
+ --pico-font-weight: 200;
+ font-weight: var(--pico-font-weight);
+ display: block;
+ font-style: italic;
+ padding: calc(var(--pico-spacing) / 3) 0;
}
-
/* List index.html */
ol {
- counter-reset: index;
- padding: 0;
- width: 100%;
+ 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;
+ 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;
+ 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;
+ border-top: var(--pico-contrast-focus) solid 1px;
}
-
.hidden {
- display: none;
+ display: none;
}
-
.inline {
- display: inline;
+ display: inline;
}
-
-:root:not([data-theme=dark]) .dark-inline,
-[data-theme=light] .dark-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;
+:root:not([data-theme="dark"]) .dark-hidden,
+[data-theme="light"] .dark-hidden {
+ display: none;
}
diff --git a/templates/toggle.js b/templates/toggle.js
index cc7dc92..9986929 100644
--- a/templates/toggle.js
+++ b/templates/toggle.js
@@ -1,21 +1,21 @@
-document.addEventListener('DOMContentLoaded', function() {
- toggleSummary();
+document.addEventListener("DOMContentLoaded", function () {
+ toggleSummary();
});
function toggleSummary() {
- const openBtns = document.querySelectorAll('.open-js');
- const closeBtns = document.querySelectorAll('.close-js');
- const detailElements = document.querySelectorAll('details');
+ const openBtns = document.querySelectorAll(".open-js");
+ const closeBtns = document.querySelectorAll(".close-js");
+ const detailElements = document.querySelectorAll("details");
- openBtns.forEach(function(openBtn) {
- openBtn.addEventListener('click', function(){
- detailElements.forEach((detail) => detail.setAttribute("open", ""));
+ openBtns.forEach(function (openBtn) {
+ openBtn.addEventListener("click", function () {
+ detailElements.forEach((detail) => detail.setAttribute("open", ""));
+ });
});
- });
- closeBtns.forEach(function(closeBtn) {
- closeBtn.addEventListener('click', function(){
- detailElements.forEach((detail) => detail.removeAttribute("open", ""));
+ closeBtns.forEach(function (closeBtn) {
+ closeBtn.addEventListener("click", function () {
+ detailElements.forEach((detail) => detail.removeAttribute("open", ""));
+ });
});
- });
}