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

Compare commits

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

No commits in common. "5ba89e0ed2ce3c6c57b1bf5b446be2845ff4077d" and "c26aeb8f990ff0097447dd9756ec00c44b5aead6" have entirely different histories.
5ba89e0ed2 ... c26aeb8f99

6 changed files with 36 additions and 73 deletions
Show Stats Expand all files Collapse all files

11
lib/generate/css.ts
View File

@ -20,19 +20,12 @@ async function generate(theme: string) {
let sass = (await fs.readFile(filename)).toString();
sass = util.render(sass, {}, filename);
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();
const result = await renderSass(sass);
util.write(`css/${theme}.css`, css);
util.write(`css/${theme}.css`, result.css);
}
export default async function css() {
await generate("light");
await generate("dark");
await generate("auto");
require("fs").watch("site/css/", css);
}

5
site/css/auto.scss
View File

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

4
site/css/dark.scss
View File

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

4
site/css/light.scss
View File

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

45
site/css/main.scss
View File

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

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

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