shadowfacts
/
shadowfacts.net
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: shadowfacts:c26aeb8f990ff0097447dd9756ec00c44b5aead6
Branches Tags
shadowfacts:master
..
compare: shadowfacts:5ba89e0ed2ce3c6c57b1bf5b446be2845ff4077d
Branches Tags
shadowfacts:master

3 Commits
c26aeb8f99 ... 5ba89e0ed2

Author SHA1 Message Date
Shadowfacts 5ba89e0ed2
Add automatic theme switching 2019-06-28 16:06:49 -04:00
Shadowfacts 45c4395729
Tweak article divider color 2019-06-28 15:31:38 -04:00
Shadowfacts 59e7fe74ec
Header/footer style tweaks 2019-06-28 15:28:00 -04:00
6 changed files with 73 additions and 36 deletions
Show Stats Expand all files Collapse all files

11
lib/generate/css.ts
View File

@ -20,12 +20,19 @@ async function generate(theme: string) {
let sass = (await fs.readFile(filename)).toString(); let sass = (await fs.readFile(filename)).toString();
sass = util.render(sass, {}, filename); sass = util.render(sass, {}, filename);
const result = await renderSass(sass); let css = (await renderSass(sass)).css.toString();
css += "\n";
let mainSass = (await fs.readFile("site/css/main.scss")).toString();
mainSass = util.render(mainSass, {}, "site/css/main.scss");
css += (await renderSass(mainSass)).css.toString();
util.write(`css/${theme}.css`, result.css); util.write(`css/${theme}.css`, css);
} }
export default async function css() { export default async function css() {
await generate("light"); await generate("light");
await generate("dark"); await generate("dark");
await generate("auto");
require("fs").watch("site/css/", css);
} }

5
site/css/auto.scss Normal file
View File

@ -0,0 +1,5 @@
<%- include("light.scss"); %>
@media (prefers-color-scheme: dark) {
<%- include("dark.scss"); %>
}

4
site/css/dark.scss
View File

@ -20,6 +20,4 @@
--atom-hue-5-2: #be5046; --atom-hue-5-2: #be5046;
--atom-hue-6: #d19a66; --atom-hue-6: #d19a66;
--atom-hue-6-2: #e6c07b; --atom-hue-6-2: #e6c07b;
} }
<%- include("main.scss") %>

4
site/css/light.scss
View File

@ -20,6 +20,4 @@
--atom-hue-5-2: #c91243; --atom-hue-5-2: #c91243;
--atom-hue-6: #986801; --atom-hue-6: #986801;
--atom-hue-6-2: #c18401; --atom-hue-6-2: #c18401;
} }
<%- include("main.scss") %>

45
site/css/main.scss
View File

@ -47,7 +47,7 @@ article {
content: ""; content: "";
width: calc(100% - 2 * 30px); // account for .container padding, don't overflow width: calc(100% - 2 * 30px); // account for .container padding, don't overflow
height: 1px; height: 1px;
background-image: linear-gradient(to right, var(--secondary-ui-text-color), var(--shadow-color)); background-image: linear-gradient(to right, var(--accent-color), var(--shadow-color));
position: absolute; position: absolute;
} }
@ -236,17 +236,20 @@ figure {
// Header // Header
.site-header { .site-header {
padding: 20px 0; padding-top: 20px;
padding-bottom: 20px;
background-color: var(--ui-background-color); background-color: var(--ui-background-color);
font-size: 16px; font-size: 16px;
box-shadow: 0 10px 15px var(--shadow-color);
.container { > div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
padding-bottom: 10px;
border-bottom: 3px solid var(--accent-color);
} }
.site-title { .site-title {
@ -278,7 +281,7 @@ figure {
} }
a.dropdown-link { a.dropdown-link {
color: black; color: var(--ui-text-color);
text-decoration: none; text-decoration: none;
.arrow-down { .arrow-down {
@ -302,7 +305,7 @@ figure {
right: -1em; right: -1em;
display: none; display: none;
padding: 1em; padding: 1em;
background-color: white; background-color: var(--ui-background-color);
box-shadow: 0 10px 15px -5px var(--shadow-color), // bottom box-shadow: 0 10px 15px -5px var(--shadow-color), // bottom
10px 0 15px -5px var(--shadow-color), // right 10px 0 15px -5px var(--shadow-color), // right
-10px 0 15px -5px var(--shadow-color); // left -10px 0 15px -5px var(--shadow-color); // left
@ -334,17 +337,20 @@ figure {
// Footer // Footer
.site-footer { .site-footer {
padding: 20px 0; padding-top: 20px;
padding-bottom: 20px;
background-color: var(--ui-background-color); background-color: var(--ui-background-color);
font-size: 16px; font-size: 16px;
box-shadow: 0 -10px 15px var(--shadow-color);
.container { > div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
padding-top: 10px;
border-top: 3px solid var(--accent-color);
} }
.site-title { .site-title {
@ -353,6 +359,27 @@ figure {
font-size: 1.5em; font-size: 1.5em;
} }
.ui-controls {
input {
display: none;
}
label {
color: var(--accent-color);
text-decoration: underline;
&:hover {
cursor: pointer;
}
}
input:checked + label {
color: var(--ui-text-color);
text-decoration: none;
font-weight: bold;
&:hover {
cursor: default;
}
}
}
.social-links ul { .social-links ul {
padding: 0; padding: 0;
margin: 0; margin: 0;

40
site/layouts/default.html.ejs
View File

@ -31,21 +31,17 @@
<script> <script>
(() => { (() => {
let theme = localStorage.getItem("theme"); const theme = localStorage.getItem("theme") || "auto";
if (theme !== "light" && theme !== "dark") {
theme = "light";
localStorage.setItem("theme", theme);
}
document.write(`<link rel="stylesheet" href="/css/${theme}.css">`); document.write(`<link rel="stylesheet" href="/css/${theme}.css">`);
})(); })();
</script> </script>
<noscript> <noscript>
<link rel="stylesheet" href="/css/light.css"> <link rel="stylesheet" href="/css/auto.css">
</noscript> </noscript>
</head> </head>
<body itemscope itemtype="https://schema.org/Blog"> <body itemscope itemtype="https://schema.org/Blog">
<header class="site-header"> <header class="site-header container">
<div class="container"> <div>
<div> <div>
<h1 class="site-title"><%- fancyLink("Shadowfacts", "/") %></h1> <h1 class="site-title"><%- fancyLink("Shadowfacts", "/") %></h1>
<p class="site-description">The outper part of a shadow is called the penumbra.</p> <p class="site-description">The outper part of a shadow is called the penumbra.</p>
@ -72,13 +68,18 @@
<%- content %> <%- content %>
</div> </div>
<footer class="site-footer"> <footer class="site-footer container">
<div class="container"> <div>
<div> <div>
<h2 class="site-title">Shadowfacts</h2> <h2 class="site-title">Shadowfacts</h2>
<p class="ui-controls"> <p class="ui-controls">
<label for="dark-theme">Dark Theme: </label> Theme:
<input type="checkbox" name="" id="dark-theme"> <input type="radio" name="theme" id="auto" value="auto">
<label for="auto">auto</label>
<input type="radio" name="theme" id="light" value="light">
<label for="light">light</label>
<input type="radio" name="theme" id="dark" value="dark">
<label for="dark">dark</label>
</p> </p>
</div> </div>
<nav class="social-links"> <nav class="social-links">
@ -94,13 +95,14 @@
<script> <script>
(() => { (() => {
const el = document.getElementById("dark-theme"); const theme = localStorage.getItem("theme") || "auto";
el.checked = localStorage.getItem("theme") === "dark"; document.getElementsByName("theme").forEach((el) => {
el.onclick = function() { el.checked = theme === el.value;
const theme = this.checked ? "dark" : "light"; el.onchange = () => {
localStorage.setItem("theme", theme); localStorage.setItem("theme", el.value);
window.location.reload(); window.location.reload();
}; };
});
})(); })();
</script> </script>
<noscript> <noscript>