Compare commits
3 Commits
c26aeb8f99
...
5ba89e0ed2
| Author | SHA1 | Date |
|---|---|---|
 Shadowfacts
|
5ba89e0ed2
|
|
|
Shadowfacts
|
45c4395729
|
|
|
Shadowfacts
|
59e7fe74ec
|
|
|
@ -20,12 +20,19 @@ async function generate(theme: string) {
|
|||
|
||||
let sass = (await fs.readFile(filename)).toString();
|
||||
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() {
|
||||
await generate("light");
|
||||
await generate("dark");
|
||||
await generate("auto");
|
||||
|
||||
require("fs").watch("site/css/", css);
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<%- include("light.scss"); %>
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
<%- include("dark.scss"); %>
|
||||
}
|
||||
|
|
@ -21,5 +21,3 @@
|
|||
--atom-hue-6: #d19a66;
|
||||
--atom-hue-6-2: #e6c07b;
|
||||
}
|
||||
|
||||
<%- include("main.scss") %>
|
||||
|
|
@ -21,5 +21,3 @@
|
|||
--atom-hue-6: #986801;
|
||||
--atom-hue-6-2: #c18401;
|
||||
}
|
||||
|
||||
<%- include("main.scss") %>
|
||||
|
|
@ -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(--secondary-ui-text-color), var(--shadow-color));
|
||||
background-image: linear-gradient(to right, var(--accent-color), var(--shadow-color));
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
@ -236,17 +236,20 @@ figure {
|
|||
|
||||
// Header
|
||||
.site-header {
|
||||
padding: 20px 0;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
background-color: var(--ui-background-color);
|
||||
font-size: 16px;
|
||||
box-shadow: 0 10px 15px var(--shadow-color);
|
||||
|
||||
.container {
|
||||
> div {
|
||||
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 {
|
||||
|
|
@ -278,7 +281,7 @@ figure {
|
|||
}
|
||||
|
||||
a.dropdown-link {
|
||||
color: black;
|
||||
color: var(--ui-text-color);
|
||||
text-decoration: none;
|
||||
|
||||
.arrow-down {
|
||||
|
|
@ -302,7 +305,7 @@ figure {
|
|||
right: -1em;
|
||||
display: none;
|
||||
padding: 1em;
|
||||
background-color: white;
|
||||
background-color: var(--ui-background-color);
|
||||
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
|
||||
|
|
@ -334,17 +337,20 @@ figure {
|
|||
|
||||
// Footer
|
||||
.site-footer {
|
||||
padding: 20px 0;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
background-color: var(--ui-background-color);
|
||||
font-size: 16px;
|
||||
box-shadow: 0 -10px 15px var(--shadow-color);
|
||||
|
||||
.container {
|
||||
> div {
|
||||
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 {
|
||||
|
|
@ -353,6 +359,27 @@ 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;
|
||||
|
|
|
|||
|
|
@ -31,21 +31,17 @@
|
|||
|
||||
<script>
|
||||
(() => {
|
||||
let theme = localStorage.getItem("theme");
|
||||
if (theme !== "light" && theme !== "dark") {
|
||||
theme = "light";
|
||||
localStorage.setItem("theme", theme);
|
||||
}
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
document.write(`<link rel="stylesheet" href="/css/${theme}.css">`);
|
||||
})();
|
||||
</script>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="/css/light.css">
|
||||
<link rel="stylesheet" href="/css/auto.css">
|
||||
</noscript>
|
||||
</head>
|
||||
<body itemscope itemtype="https://schema.org/Blog">
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<header class="site-header container">
|
||||
<div>
|
||||
<div>
|
||||
<h1 class="site-title"><%- fancyLink("Shadowfacts", "/") %></h1>
|
||||
<p class="site-description">The outper part of a shadow is called the penumbra.</p>
|
||||
|
|
@ -72,13 +68,18 @@
|
|||
<%- content %>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<footer class="site-footer container">
|
||||
<div>
|
||||
<div>
|
||||
<h2 class="site-title">Shadowfacts</h2>
|
||||
<p class="ui-controls">
|
||||
<label for="dark-theme">Dark Theme: </label>
|
||||
<input type="checkbox" name="" id="dark-theme">
|
||||
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>
|
||||
</div>
|
||||
<nav class="social-links">
|
||||
|
|
@ -94,13 +95,14 @@
|
|||
|
||||
<script>
|
||||
(() => {
|
||||
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);
|
||||
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();
|
||||
};
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<noscript>
|
||||
|
|
|
|||
Loading…
Reference in New Issue