diff --git a/output/index.css b/output/index.css index dab7db67..e6277af9 100644 --- a/output/index.css +++ b/output/index.css @@ -36,51 +36,60 @@ } html { + font-size: clamp(10px, 2vw, var(--max-font-size-unitless) * 1px); +} + +body { + margin: 0; +} + +#toggle-theme-switch { + display: none; +} + +#theming-root { + width: 100%; + height: 100%; + margin: 0; + background-color: var(--secondary-color); + color: var(--primary-color); +} + +#toggle-theme-switch:not(:checked) ~ #theming-root { --primary-color: hsl(0, 0%, 100%); --secondary-color: hsl(0, 0%, 0%); --secondary-color-heading: hsl(0, 0%, 17%); --secondary-color-shaded: hsl(0, 0%, 9%); + --anchor-color: hsl(210, 100%, 60%); + --color-http: hsl(0, 0%, 17%); + --color-https: hsl(195, 53%, 21%); } -html.light-theme { + +#toggle-theme-switch:checked ~ #theming-root { --primary-color: hsl(0, 0%, 0%); --secondary-color: hsl(0, 0%, 100%); --secondary-color-heading: hsl(0, 0%, 83%); --secondary-color-shaded: hsl(0, 0%, 91%); + --anchor-color: hsl(210, 100%, 40%); + --color-http: hsl(0, 0%, 83%); + --color-https: hsl(195, 53%, 79%) } a, .anchorstyle { - color: hsl(210, 100%, 60%); - text-decoration: underline; -} - -html.light-theme :is(a, .anchorstyle) { - color: hsl(210, 100%, 40%); + color: var(--anchor-color); text-decoration: underline; + cursor: pointer; } *, *::after, *::before { transition: color 3s, background-color 2s; } -html { - font-size: clamp(10px, 2vw, var(--max-font-size-unitless) * 1px); - color: var(--primary-color); - background-color: var(--secondary-color); -} - -body { - margin: 0; -} - html.js .noscript, .hidden { display: none; } -.clickable { - cursor: pointer; -} - html:not(.js) .js-only { display: none; } @@ -263,19 +272,11 @@ header { } a[href^="http:"] .protocol-indicator { - background-color: hsl(0, 0%, 17%); -} - -html.light-theme a[href^="http:"] .protocol-indicator { - background-color: hsl(0, 0%, 83%); + background-color: var(--color-http); } a[href^="https:"] .protocol-indicator { - background-color: hsl(195, 53%, 21%); -} - -html.light-theme a[href^="https:"] .protocol-indicator { - background-color: hsl(195, 53%, 79%) + background-color: var(--color-https); } a[href^="http:"] .protocol-indicator::after { diff --git a/output/main.js b/output/main.js index 0745c587..a1650e2b 100644 --- a/output/main.js +++ b/output/main.js @@ -69,7 +69,6 @@ function onLoad() { markSortableColumns(); addQRModalHandlers(); addServerIconInteractions(); - addThemeHandlers(); } function displayQRModal(communityID) { @@ -98,15 +97,6 @@ function addQRModalHandlers() { } } -function addThemeHandlers() { - document.getElementById("theme-switch").addEventListener( - 'click', - () => { - document.documentElement.classList.toggle('light-theme'); - } - ); -} - function createJoinLinkButtons() { const join_URLs = dom.join_urls(); Array.from(join_URLs).forEach((td_url) => { @@ -329,4 +319,4 @@ function sortTable(column) { // `html.js` selector for styling purposes document.documentElement.classList.add("js"); -document.addEventListener('DOMContentLoaded', () => onLoad()); +document.addEventListener('DOMContentLoaded', () => onLoad()); \ No newline at end of file diff --git a/sites/index.php b/sites/index.php index 854e581e..78bf6e90 100644 --- a/sites/index.php +++ b/sites/index.php @@ -51,126 +51,128 @@ -
-
-
- - Switch theme - - Instructions -
-
+ +
+
+
+
+ + Instructions +
+

Session Communities

- + - + - + -
+
- +
+ Copied URL to clipboard. Paste into Session app to join +