Beginning of size logic
This commit is contained in:
parent
0cb04d1205
commit
38629ae55a
4 changed files with 107 additions and 16 deletions
|
|
@ -1,4 +1,12 @@
|
||||||
// Sidebar
|
// Sidebar
|
||||||
|
[data-theme="light"] {
|
||||||
|
--sb-color: #101419;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--sb-color: #09090c;
|
||||||
|
}
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
width: 8em;
|
width: 8em;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -14,7 +22,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
|
|
||||||
background-color: #101419;
|
background-color: var(--sb-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sb_header {
|
.sb_header {
|
||||||
|
|
@ -52,6 +60,22 @@
|
||||||
max-width: calc(100% - 2em);
|
max-width: calc(100% - 2em);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.theme-toggle-button {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
border: none;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
cursor: crosshair;
|
||||||
|
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.personal { color:#fc3f5b; }
|
.personal { color:#fc3f5b; }
|
||||||
.nixfox { color:#2abafc; }
|
.nixfox { color:#2abafc; }
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,17 +4,31 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] {
|
||||||
|
--bg-color: #DDE1E9;
|
||||||
|
--elm-bg-color: #EFF1F5;
|
||||||
|
--text-color: #141414;
|
||||||
|
--link-color: #b7162e;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-color: #181A1B;
|
||||||
|
--elm-bg-color: #1F2223;
|
||||||
|
--text-color: #DBD8D4;
|
||||||
|
--link-color: #DB4E63;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: #DDE1E9;
|
background-color: var(--bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: #141414;
|
color: var(--text-color);
|
||||||
padding-bottom: 5em;
|
padding-bottom: 5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color:#b7162e;
|
color: var(--link-color);
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
outline: 1px solid transparent;
|
outline: 1px solid transparent;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -32,27 +46,35 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
|
background-color: var(--elm-bg-color);
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width:60%;
|
width: 60%;
|
||||||
max-width:50em;
|
max-width: 50em;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
top: 3em;
|
top: 3em;
|
||||||
left: 6.5em;
|
left: 6.5em;
|
||||||
|
|
||||||
padding-top: 1em;
|
padding: 3em;
|
||||||
padding-bottom: 1em;
|
|
||||||
padding-left: 3em;
|
|
||||||
padding-right: 3em;
|
|
||||||
|
|
||||||
background-color: #EFF1F5;
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
list-style-type: square;
|
list-style-type: square;
|
||||||
padding-bottom: 2em;
|
padding-bottom: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
42
static/darkmode.js
Normal file
42
static/darkmode.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
// Stolen code from https://dev.to/mdhassanpatwary/creating-a-css-darklight-mode-switcher-26cd
|
||||||
|
function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
|
||||||
|
if (localStorageTheme !== null) {
|
||||||
|
return localStorageTheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (systemSettingDark.matches) {
|
||||||
|
return "dark";
|
||||||
|
}
|
||||||
|
|
||||||
|
return "light";
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateButton({ buttonEl, isDark }) {
|
||||||
|
const newCta = isDark ? "toggle light" : "toggle dark";
|
||||||
|
buttonEl.setAttribute("aria-label", newCta);
|
||||||
|
buttonEl.innerText = newCta;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateThemeOnHtmlEl({ theme }) {
|
||||||
|
document.querySelector("html").setAttribute("data-theme", theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const button = document.querySelector("[data-theme-toggle]");
|
||||||
|
const localStorageTheme = localStorage.getItem("theme");
|
||||||
|
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
|
||||||
|
|
||||||
|
let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
|
||||||
|
|
||||||
|
updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
|
||||||
|
updateThemeOnHtmlEl({ theme: currentThemeSetting });
|
||||||
|
|
||||||
|
button.addEventListener("click", (event) => {
|
||||||
|
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
|
||||||
|
|
||||||
|
localStorage.setItem("theme", newTheme);
|
||||||
|
updateButton({ buttonEl: button, isDark: newTheme === "dark" });
|
||||||
|
updateThemeOnHtmlEl({ theme: newTheme });
|
||||||
|
|
||||||
|
currentThemeSetting = newTheme;
|
||||||
|
});
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" data-theme="light">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
|
@ -15,6 +15,9 @@
|
||||||
<div id="sidebar" class="column">
|
<div id="sidebar" class="column">
|
||||||
<a href="/" class="sb_img"><img src="https://art.pixilart.com/sr2a62fc9ed2173.png" alt="teto creature"></a>
|
<a href="/" class="sb_img"><img src="https://art.pixilart.com/sr2a62fc9ed2173.png" alt="teto creature"></a>
|
||||||
|
|
||||||
|
<button type="button" class="theme-toggle-button" data-theme-toggle aria-label="Toggle to dark"></button>
|
||||||
|
<script src="/darkmode.js"></script>
|
||||||
|
|
||||||
<div class="sb_header personal"><b>personal</b></div>
|
<div class="sb_header personal"><b>personal</b></div>
|
||||||
<a href="/blog" class="sb_link pers">📰 blog</a><br>
|
<a href="/blog" class="sb_link pers">📰 blog</a><br>
|
||||||
<a href="/images" class="sb_link pers">🖼️ images</a><br>
|
<a href="/images" class="sb_link pers">🖼️ images</a><br>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue