lynnesbian/lynnesbian.space
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add light/dark theme toggle

Browse source
This commit is contained in:
Lynne Megido 2020-03-17 01:15:43 +10:00
parent 834e97971b
commit 2be750d5c6
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
4 changed files with 106 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_includes/header.html
View file

@ -6,13 +6,11 @@
<a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>{{ html_page.title }}</a> <a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>{{ html_page.title }}</a>
{%- endunless -%} {%- endunless -%}
{%- endfor -%} {%- endfor -%}
{%- comment -%} {%- if page.title != "Contact" -%}<a href='/contact.html'>Contact</a>{% endif -%}
{%- if page.title != "Projects" -%}<a href='/projects.html'>Projects</a>{% endif -%}
{%- if page.title != "Donate" -%}<a href='/donate.html'>Donate</a>{% endif -%} {%- endcomment -%}
</span> </span>
<span class='external'> <span class='other'>
<a href='https://bune.city'>Blog</a><a href='https://github.com/lynnesbian'>GitHub</a><a href='https://git.bune.city/lynnesbian'>Gitea</a> <a href='https://bune.city'>Blog</a><a href='https://github.com/lynnesbian'>GitHub</a><a href='https://git.bune.city/lynnesbian'>Gitea</a>
<span id='theme-control'></span>
</span> </span>
</header> </header>

1
_layouts/default.html
View file

@ -4,6 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/assets/style.css"> <link rel="stylesheet" type="text/css" href="/assets/style.css">
<script src='/assets/script.js'></script>
<title>{{ page.title | default: "lynnesbian dot space" }}</title> <title>{{ page.title | default: "lynnesbian dot space" }}</title>
</head> </head>

57
assets/script.js Normal file
View file

@ -0,0 +1,57 @@
var use_local_storage = storage_check();
function dgel(id) {
return document.getElementById(id);
}
function storage_check() {
// based on https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
try {
let x = 'test';
localStorage.setItem(x, x);
localStorage.removeItem(x);
return true;
}
catch (e) {
// fall back to cookies
// i guess this might break if someone has cookies and localstorage disabled but people with first party cookies blocked are used to things breaking anyway ;)
return false;
}
}
function theme_get() {
// true if night theme
if (use_local_storage) {
// weakly typed languages. not even once.
return localStorage.getItem('theme') == 'true';
} else {
return document.cookie == 'theme=true';
}
}
function theme_set(night) {
if (use_local_storage) {
localStorage.setItem('theme', night);
} else {
document.cookie = `theme=${night}`;
}
}
function update_page_theme() {
let night = theme_get();
let html_element = document.getElementsByTagName('html')[0];
if (night) {
html_element.classList.add('night');
} else {
html_element.classList.remove('night');
}
}
window.addEventListener('DOMContentLoaded', (event) => {
update_page_theme();
dgel('theme-control').onclick = function () {
theme_set(!theme_get());
update_page_theme();
};
});

51
assets/style.css
View file

@ -1,6 +1,9 @@
html { html {
background: #fafafa; background: #fafafa;
} }
html.night {
background: #333;
}
body { body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
display: flex; display: flex;
@ -8,6 +11,9 @@ body {
min-height: 100vh; min-height: 100vh;
margin: 0 0 15px 0; margin: 0 0 15px 0;
} }
html.night body {
color: white;
}
#main { #main {
flex-grow: 1; flex-grow: 1;
width: 80%; width: 80%;
@ -49,10 +55,8 @@ a {
color: mediumpurple; color: mediumpurple;
text-decoration: none; text-decoration: none;
} }
a.current { html.night a {
background: linear-gradient(to bottom, white, #fafafa); color: #a9f;
color: mediumpurple;
pointer-events: none;
} }
#projects, #screenshots, .donation-methods { #projects, #screenshots, .donation-methods {
@ -81,7 +85,10 @@ a.current {
z-index: -1; z-index: -1;
position: absolute; position: absolute;
background: linear-gradient(to bottom right, #00000003, #0000000c); background: linear-gradient(to bottom right, #00000003, #0000000c);
}
html.night .project::before,
html.night .donation-method::before {
background: linear-gradient(to bottom right, #ffffff03, #ffffff0c);
} }
.project .footer, .donation-method .footer { .project .footer, .donation-method .footer {
position: absolute; position: absolute;
@ -89,7 +96,8 @@ a.current {
margin: 10px 0; margin: 10px 0;
font-style: italic; font-style: italic;
} }
.project .footer a:not(:last-child)::after { .project .footer a:not(:last-child)::after,
.subheading-links a:not(:last-child)::after {
content: " - "; content: " - ";
} }
.project h2, .donation-method h2 { .project h2, .donation-method h2 {
@ -116,6 +124,9 @@ header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
html.night header {
background: #555;
}
header span { header span {
display: inline-block; display: inline-block;
} }
@ -125,9 +136,37 @@ header a {
padding: 5px 15px; padding: 5px 15px;
transition: 0.2s all; transition: 0.2s all;
} }
html.night header a {
color: white;
}
header a.current {
background: linear-gradient(to bottom, white, #fafafa);
color: mediumpurple;
pointer-events: none;
}
html.night header a.current {
background: linear-gradient(to bottom, #282828, #333);
}
header a:hover { header a:hover {
background-color: #fff8; background-color: #fff8;
} }
html.night header a:hover {
background-color: #0008;
}
#theme-control {
color: white;
border: thin white solid;
border-radius: 2px;
padding: 2px 10px;
cursor: pointer;
}
#theme-control::before {
content: "Theme: Day";
}
html.night #theme-control::before {
content: "Theme: Night";
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#main { #main {