diff --git a/_includes/header.html b/_includes/header.html
index e34b078..050c678 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -6,13 +6,11 @@
{{ html_page.title }}
{%- endunless -%}
{%- endfor -%}
-
- {%- comment -%} {%- if page.title != "Contact" -%}Contact{% endif -%}
- {%- if page.title != "Projects" -%}Projects{% endif -%}
- {%- if page.title != "Donate" -%}Donate{% endif -%} {%- endcomment -%}
-
+
BlogGitHubGitea
+
+
diff --git a/_layouts/default.html b/_layouts/default.html
index cb5795e..0f354f0 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -4,6 +4,7 @@
+
{{ page.title | default: "lynnesbian dot space" }}
diff --git a/assets/script.js b/assets/script.js
new file mode 100644
index 0000000..2011588
--- /dev/null
+++ b/assets/script.js
@@ -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();
+ };
+});
diff --git a/assets/style.css b/assets/style.css
index 9b4dea9..38272c3 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,6 +1,9 @@
html {
background: #fafafa;
}
+html.night {
+ background: #333;
+}
body {
font-family: "Roboto", sans-serif;
display: flex;
@@ -8,6 +11,9 @@ body {
min-height: 100vh;
margin: 0 0 15px 0;
}
+html.night body {
+ color: white;
+}
#main {
flex-grow: 1;
width: 80%;
@@ -49,10 +55,8 @@ a {
color: mediumpurple;
text-decoration: none;
}
-a.current {
- background: linear-gradient(to bottom, white, #fafafa);
- color: mediumpurple;
- pointer-events: none;
+html.night a {
+ color: #a9f;
}
#projects, #screenshots, .donation-methods {
@@ -81,7 +85,10 @@ a.current {
z-index: -1;
position: absolute;
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 {
position: absolute;
@@ -89,7 +96,8 @@ a.current {
margin: 10px 0;
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: " - ";
}
.project h2, .donation-method h2 {
@@ -116,6 +124,9 @@ header {
display: flex;
justify-content: space-between;
}
+html.night header {
+ background: #555;
+}
header span {
display: inline-block;
}
@@ -125,9 +136,37 @@ header a {
padding: 5px 15px;
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 {
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) {
#main {