Implement fingerprinting site and page resources
This will keep browsers from caching files that have changed. I've also added SRI information to the <script> and <link> elements for browsers to verify resources. Squashed commit of the following: commitf3fcb16388Author: Eryn Wells <eryn@erynwells.me> Date: Tue Nov 8 17:47:42 2022 -0800 Remove static/styles/root.css commit53a30624a0Author: Eryn Wells <eryn@erynwells.me> Date: Tue Nov 8 17:47:26 2022 -0800 Add back the basic table styles that got ditched when root.css was moved to assets/styles commit294fa8343bAuthor: Eryn Wells <eryn@erynwells.me> Date: Tue Nov 8 17:45:38 2022 -0800 Get all the fingerprinting done! - Add partials in the resources folder for each of the major resources of my site - Consolidate .css and .js files via resources.Concat where possible commitd0b223fa33Author: Eryn Wells <eryn@erynwells.me> Date: Mon Nov 7 08:36:39 2022 -0800 All the template updates for fingerprinting commit1751abadacAuthor: Eryn Wells <eryn@erynwells.me> Date: Mon Nov 7 08:36:27 2022 -0800 Add secure_asset.html template commit94ea8068c9Author: Eryn Wells <eryn@erynwells.me> Date: Mon Nov 7 08:35:48 2022 -0800 Move a bunch of scripts and CSS to assets so they can be processed with Hugo Pipes Use Pipes to fingerprint and add SLI information to <script> and <link> tags.
This commit is contained in:
parent
f8174ab27c
commit
9601e1e283
24 changed files with 106327 additions and 55 deletions
2
static/scripts/highlight.min.js
vendored
2
static/scripts/highlight.min.js
vendored
File diff suppressed because one or more lines are too long
3
static/scripts/p5-1.4.1.min.js
vendored
3
static/scripts/p5-1.4.1.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,63 +0,0 @@
|
|||
import rr from "./railroad.js";
|
||||
|
||||
class RailroadDiagramManager {
|
||||
constructor() {
|
||||
this.figures = new Map();
|
||||
this.isCurrentlyNarrow = undefined;
|
||||
|
||||
this.diagramBreakpoint = window.matchMedia("(max-width: 450px)");
|
||||
this.diagramBreakpoint.addEventListener("change", () => {
|
||||
this.updateVisiblity();
|
||||
});
|
||||
}
|
||||
|
||||
add(svg) {
|
||||
const parent = svg.parentElement;
|
||||
if (!this.figures.has(parent)) {
|
||||
this.figures.set(parent, []);
|
||||
}
|
||||
|
||||
this.figures.get(parent).push(svg);
|
||||
|
||||
parent.removeChild(svg);
|
||||
}
|
||||
|
||||
updateVisiblity() {
|
||||
const isNarrow = this.diagramBreakpoint.matches;
|
||||
|
||||
if (isNarrow === this.isCurrentlyNarrow) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isCurrentlyNarrow = isNarrow;
|
||||
|
||||
for (let [figure, svgs] of this.figures.entries()) {
|
||||
for (let svg of svgs) {
|
||||
const svgHasNarrowClass = svg.classList.contains("narrow");
|
||||
if (isNarrow && svgHasNarrowClass)
|
||||
figure.appendChild(svg);
|
||||
else if (!isNarrow && !svgHasNarrowClass)
|
||||
figure.appendChild(svg);
|
||||
else if (svg.parentElement === figure)
|
||||
figure.removeChild(svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let railroadDiagramManager = new RailroadDiagramManager();
|
||||
|
||||
export function railroadDiagram(builder, elementID, isNarrow) {
|
||||
const diagram = builder(rr);
|
||||
const svg = diagram.addTo(document.getElementById(elementID));
|
||||
|
||||
if (isNarrow) {
|
||||
svg.classList.add("narrow");
|
||||
}
|
||||
|
||||
railroadDiagramManager.add(svg);
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
railroadDiagramManager.updateVisiblity();
|
||||
});
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,25 +0,0 @@
|
|||
/* site.js
|
||||
* Eryn Wells <eryn@erynwells.me>
|
||||
*/
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
const siteHeader = document.querySelector("header.site");
|
||||
if (!siteHeader) {
|
||||
return;
|
||||
}
|
||||
siteHeader.classList.add("visible");
|
||||
|
||||
siteHeader.addEventListener("animationend", () => {
|
||||
console.log("Animation ended");
|
||||
siteHeader.classList.add("sticky");
|
||||
}, false);
|
||||
|
||||
try {
|
||||
const documentReferrer = new URL(document.referrer);
|
||||
if (documentReferrer.pathname === "/") {
|
||||
siteHeader.classList.add("animated");
|
||||
} else {
|
||||
siteHeader.classList.add("sticky");
|
||||
}
|
||||
} catch { }
|
||||
});
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
function getInlineSketchWidth() {
|
||||
return getComputedStyle(document.documentElement).getPropertyValue("--body-width");
|
||||
}
|
||||
|
||||
function convertRemToPx(rem) {
|
||||
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
/* development.css
|
||||
* Some styles for development UI.
|
||||
* Eryn Wells <eryn@erynwells.me>
|
||||
*/
|
||||
|
||||
details:has(.photo-params.debug) {
|
||||
margin-block-end: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
.draft {
|
||||
color: red;
|
||||
display: inline-block;
|
||||
font-family: 'SF Pro', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.draft:before {
|
||||
content: "[";
|
||||
}
|
||||
|
||||
.draft:after {
|
||||
content: "]";
|
||||
}
|
||||
|
||||
#debug-page-info {
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--separator-color);
|
||||
border-radius: 6px;
|
||||
box-shadow: 4px 5px 5px var(--box-shadow-color);
|
||||
font-size: 1.75rem;
|
||||
padding: 0.5rem;
|
||||
position: fixed;
|
||||
left: 2rem;
|
||||
bottom: 2rem;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#debug-page-info > details {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
#debug-page-info > summary {
|
||||
font-family: var(--font-family-heading);
|
||||
}
|
||||
|
||||
#debug-page-info > details > table {
|
||||
border-collapse: collapse;
|
||||
display: block;
|
||||
margin-block-start: 0.5em;
|
||||
margin-inline-start: 1em;
|
||||
}
|
||||
|
||||
#debug-page-info > details > table > tbody > tr > td {
|
||||
border: 1px solid rgb(var(--dk-gray));
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
#debug-page-info > details > table > tbody > tr:nth-child(even) {
|
||||
background-color: var(--separator-color);
|
||||
}
|
||||
|
||||
.photo-params.debug {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
:root {
|
||||
--highlight-background-color: rgb(var(--super-lt-gray));
|
||||
--highlight-foreground-color: var(--foreground-body-color);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
}
|
||||
}
|
||||
|
||||
.chroma {
|
||||
line-height: var(--body-line-height);
|
||||
}
|
||||
|
||||
.bg {
|
||||
color: var(--highlight-foreground-color);
|
||||
background-color: var(--highlight-background-color);
|
||||
}
|
||||
|
||||
.chroma {
|
||||
color: var(--highlight-foreground-color);
|
||||
background-color: var(--highlight-background-color);
|
||||
}
|
||||
|
||||
/* Other */ .chroma .x { }
|
||||
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
||||
/* CodeLine */ .chroma .cl { }
|
||||
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
||||
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
|
||||
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* Keyword */ .chroma .k { color: #00a8c8 }
|
||||
/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #f92672 }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
|
||||
/* KeywordReserved */ .chroma .kr { color: #00a8c8 }
|
||||
/* KeywordType */ .chroma .kt { color: #00a8c8 }
|
||||
/* Name */ .chroma .n { color: #111111 }
|
||||
/* NameAttribute */ .chroma .na { color: #75af00 }
|
||||
/* NameBuiltin */ .chroma .nb { color: #111111 }
|
||||
/* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
|
||||
/* NameClass */ .chroma .nc { color: #75af00 }
|
||||
/* NameConstant */ .chroma .no { color: #00a8c8 }
|
||||
/* NameDecorator */ .chroma .nd { color: #75af00 }
|
||||
/* NameEntity */ .chroma .ni { color: #111111 }
|
||||
/* NameException */ .chroma .ne { color: #75af00 }
|
||||
/* NameFunction */ .chroma .nf { color: #75af00 }
|
||||
/* NameFunctionMagic */ .chroma .fm { color: #111111 }
|
||||
/* NameLabel */ .chroma .nl { color: #111111 }
|
||||
/* NameNamespace */ .chroma .nn { color: #111111 }
|
||||
/* NameOther */ .chroma .nx { color: #75af00 }
|
||||
/* NameProperty */ .chroma .py { color: #111111 }
|
||||
/* NameTag */ .chroma .nt { color: #f92672 }
|
||||
/* NameVariable */ .chroma .nv { color: #111111 }
|
||||
/* NameVariableClass */ .chroma .vc { color: #111111 }
|
||||
/* NameVariableGlobal */ .chroma .vg { color: #111111 }
|
||||
/* NameVariableInstance */ .chroma .vi { color: #111111 }
|
||||
/* NameVariableMagic */ .chroma .vm { color: #111111 }
|
||||
/* Literal */ .chroma .l { color: #ae81ff }
|
||||
/* LiteralDate */ .chroma .ld { color: #d88200 }
|
||||
/* LiteralString */ .chroma .s { color: #d88200 }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #d88200 }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #d88200 }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #d88200 }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #d88200 }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #d88200 }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #8045ff }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #d88200 }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #d88200 }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #d88200 }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #d88200 }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #d88200 }
|
||||
/* LiteralNumber */ .chroma .m { color: #ae81ff }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
|
||||
/* Operator */ .chroma .o { color: #f92672 }
|
||||
/* OperatorWord */ .chroma .ow { color: #f92672 }
|
||||
/* Punctuation */ .chroma .p { color: #111111 }
|
||||
/* Comment */ .chroma .c { color: #75715e }
|
||||
/* CommentHashbang */ .chroma .ch { color: #75715e }
|
||||
/* CommentMultiline */ .chroma .cm { color: #75715e }
|
||||
/* CommentSingle */ .chroma .c1 { color: #75715e }
|
||||
/* CommentSpecial */ .chroma .cs { color: #75715e }
|
||||
/* CommentPreproc */ .chroma .cp { color: #75715e }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
|
||||
/* Generic */ .chroma .g { }
|
||||
/* GenericDeleted */ .chroma .gd { }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||
/* GenericError */ .chroma .gr { }
|
||||
/* GenericHeading */ .chroma .gh { }
|
||||
/* GenericInserted */ .chroma .gi { }
|
||||
/* GenericOutput */ .chroma .go { }
|
||||
/* GenericPrompt */ .chroma .gp { }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { }
|
||||
/* GenericTraceback */ .chroma .gt { }
|
||||
/* GenericUnderline */ .chroma .gl { }
|
||||
/* TextWhitespace */ .chroma .w { }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* Background */ .bg { color: #f8f8f2; background-color: #272822 }
|
||||
/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #272822; }
|
||||
/* Other */ .chroma .x { }
|
||||
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
||||
/* CodeLine */ .chroma .cl { }
|
||||
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
||||
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
|
||||
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* Keyword */ .chroma .k { color: #66d9ef }
|
||||
/* KeywordConstant */ .chroma .kc { color: #66d9ef }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #f92672 }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
|
||||
/* KeywordReserved */ .chroma .kr { color: #66d9ef }
|
||||
/* KeywordType */ .chroma .kt { color: #66d9ef }
|
||||
/* Name */ .chroma .n { }
|
||||
/* NameAttribute */ .chroma .na { color: #a6e22e }
|
||||
/* NameBuiltin */ .chroma .nb { color: inherit; }
|
||||
/* NameBuiltinPseudo */ .chroma .bp { }
|
||||
/* NameClass */ .chroma .nc { color: #a6e22e }
|
||||
/* NameConstant */ .chroma .no { color: #66d9ef }
|
||||
/* NameDecorator */ .chroma .nd { color: #a6e22e }
|
||||
/* NameEntity */ .chroma .ni { }
|
||||
/* NameException */ .chroma .ne { color: #a6e22e }
|
||||
/* NameFunction */ .chroma .nf { color: #a6e22e }
|
||||
/* NameFunctionMagic */ .chroma .fm { }
|
||||
/* NameLabel */ .chroma .nl { }
|
||||
/* NameNamespace */ .chroma .nn { }
|
||||
/* NameOther */ .chroma .nx { color: #a6e22e }
|
||||
/* NameProperty */ .chroma .py { }
|
||||
/* NameTag */ .chroma .nt { color: #f92672 }
|
||||
/* NameVariable */ .chroma .nv { color: inherit; }
|
||||
/* NameVariableClass */ .chroma .vc { }
|
||||
/* NameVariableGlobal */ .chroma .vg { }
|
||||
/* NameVariableInstance */ .chroma .vi { }
|
||||
/* NameVariableMagic */ .chroma .vm { }
|
||||
/* Literal */ .chroma .l { color: #ae81ff }
|
||||
/* LiteralDate */ .chroma .ld { color: #e6db74 }
|
||||
/* LiteralString */ .chroma .s { color: #e6db74 }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
|
||||
/* LiteralNumber */ .chroma .m { color: #ae81ff }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
|
||||
/* Operator */ .chroma .o { color: #f92672 }
|
||||
/* OperatorWord */ .chroma .ow { color: #f92672 }
|
||||
/* Punctuation */ .chroma .p { color: inherit; }
|
||||
/* Comment */ .chroma .c { color: #75715e }
|
||||
/* CommentHashbang */ .chroma .ch { color: #75715e }
|
||||
/* CommentMultiline */ .chroma .cm { color: #75715e }
|
||||
/* CommentSingle */ .chroma .c1 { color: #75715e }
|
||||
/* CommentSpecial */ .chroma .cs { color: #75715e }
|
||||
/* CommentPreproc */ .chroma .cp { color: #75715e }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
|
||||
/* Generic */ .chroma .g { }
|
||||
/* GenericDeleted */ .chroma .gd { color: #f92672 }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||
/* GenericError */ .chroma .gr { }
|
||||
/* GenericHeading */ .chroma .gh { }
|
||||
/* GenericInserted */ .chroma .gi { color: #a6e22e }
|
||||
/* GenericOutput */ .chroma .go { }
|
||||
/* GenericPrompt */ .chroma .gp { }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { color: #75715e }
|
||||
/* GenericTraceback */ .chroma .gt { }
|
||||
/* GenericUnderline */ .chroma .gl { }
|
||||
/* TextWhitespace */ .chroma .w { }
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
:root {
|
||||
--rect-fill: rgba(var(--mid-blue), 0.1);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--rect-fill: rgb(var(--mid-blue), 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
svg.railroad-diagram path {
|
||||
stroke-width: 2;
|
||||
stroke: var(--html-color);
|
||||
fill: none;
|
||||
}
|
||||
|
||||
svg.railroad-diagram text {
|
||||
font-family: var(--font-family-monospace);
|
||||
text-anchor: middle;
|
||||
white-space: pre;
|
||||
fill: var(--html-color);
|
||||
}
|
||||
|
||||
svg.railroad-diagram text.diagram-text {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
svg.railroad-diagram text.diagram-arrow {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
svg.railroad-diagram text.label {
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
svg.railroad-diagram text.comment {
|
||||
font: italic 12px var(--font-family-monospace);
|
||||
}
|
||||
|
||||
svg.railroad-diagram g.non-terminal text {
|
||||
/*font-style: italic;*/
|
||||
}
|
||||
|
||||
svg.railroad-diagram rect {
|
||||
stroke-width: 2;
|
||||
stroke: var(--html-color);
|
||||
fill: var(--rect-fill);
|
||||
}
|
||||
|
||||
svg.railroad-diagram rect.group-box {
|
||||
stroke: gray;
|
||||
stroke-dasharray: 10 5;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
svg.railroad-diagram path.diagram-text {
|
||||
stroke-width: 2;
|
||||
stroke: var(--html-color);
|
||||
fill: var(--html-background-color);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
|
||||
fill: var(--rect-fill);
|
||||
}
|
||||
|
|
@ -1,611 +0,0 @@
|
|||
@layer reset, root, template, page;
|
||||
|
||||
:root {
|
||||
--black: 0, 0, 0;
|
||||
--sub-dk-gray: 16, 16, 16;
|
||||
--dk-gray: 32, 32, 32;
|
||||
--super-dk-gray: 80, 80, 80;
|
||||
--mid-gray: 128, 128, 128;
|
||||
--sub-lt-gray: 175, 175, 175;
|
||||
--lt-gray: 223, 223, 223;
|
||||
--super-lt-gray: 240, 240, 240;
|
||||
--white: 255, 255, 255;
|
||||
|
||||
--lt-blue: 69, 212, 243;
|
||||
--mid-blue: 26, 169, 239;
|
||||
--dk-blue: 63, 46, 231;
|
||||
--purple: 161, 49, 232;
|
||||
--lilac: 187, 121, 245;
|
||||
|
||||
--site-nav-link-color: rgb(var(--mid-blue));
|
||||
|
||||
--separator-color: rgb(var(--lt-gray));
|
||||
--header-border-color: var(--separator-color);
|
||||
--footer-border-color: var(--separator-color);
|
||||
|
||||
--box-shadow-color: rgba(var(--lt-gray), 0.8);
|
||||
--header-box-shadow-color: var(--box-shadow-color);
|
||||
|
||||
--font-family-body: Verdana, Helvetica, sans-serif;
|
||||
--font-family-monospace: "Courier New", Courier, monospace;
|
||||
--font-family-heading: Museo_Slab, Tahoma, sans-serif;
|
||||
--font-family-site-heading: Museo_Slab, Tahoma, sans-serif;
|
||||
--font-size-min: 6px;
|
||||
--font-size-max: 8px;
|
||||
|
||||
--body-font-size: 2rem;
|
||||
--body-item-spacing: 1em;
|
||||
--body-line-height: 1.5;
|
||||
--body-header-line-height: 1.1;
|
||||
--body-code-background-color: rgb(var(--super-lt-gray));
|
||||
|
||||
--heading-color: rgb(var(--black));
|
||||
--header-series-arrow-foreground-color: rgb(var(--sub-dk-gray));
|
||||
|
||||
--html-background-color: rgb(var(--white));
|
||||
--html-color: rgba(var(--black), 0.8);
|
||||
|
||||
--platter-background-color: rgba(var(--white), var(--platter-background-opacity));
|
||||
--platter-background-opacity: 0.6;
|
||||
--platter-backdrop-filter: blur(10px);
|
||||
|
||||
--content-width: 80rem;
|
||||
|
||||
--tag-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-background-color: rgb(var(--super-lt-gray));
|
||||
--tag-spacer-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-background-color: rgb(var(--sub-lt-gray));
|
||||
|
||||
--transition-duration: 0.7s;
|
||||
|
||||
--social-menu-padding: 1rem;
|
||||
--menu-icon-size: 20px;
|
||||
--twitter-icon: url(/icons/twitter.svg);
|
||||
--github-icon: url(/icons/github.svg);
|
||||
--instagram-icon: url(/icons/instagram.svg);
|
||||
--feed-icon: url(/icons/rss.svg);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--separator-color: rgb(var(--dk-gray));
|
||||
--box-shadow-color: rgba(var(--dk-gray), 0.8);
|
||||
--body-code-background-color: rgb(var(--dk-gray));
|
||||
|
||||
--heading-color: rgb(var(--white));
|
||||
--header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
|
||||
|
||||
--html-background-color: rgb(var(--black));
|
||||
--html-color: rgba(var(--white), 0.8);
|
||||
|
||||
--platter-background-color: rgba(var(--black), var(--platter-background-opacity));
|
||||
--platter-backdrop-filter: brightness(0.66) blur(10px);
|
||||
|
||||
--tag-foreground-color: rgb(var(--sub-lt-gray));
|
||||
--tag-background-color: rgb(var(--dk-gray));
|
||||
--tag-spacer-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-background-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-foreground-color: rgb(var(--mid-gray));
|
||||
|
||||
--twitter-icon: url(/icons/twitter-dark.svg);
|
||||
--github-icon: url(/icons/github-dark.svg);
|
||||
--instagram-icon: url(/icons/instagram-dark.svg);
|
||||
--feed-icon: url(/icons/rss-dark.svg);
|
||||
}
|
||||
}
|
||||
|
||||
@layer reset {
|
||||
body, button, h1, h2, h3, h4, h5, h6, input, ol, ul, p, pre, textarea {
|
||||
padding: 0; margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(var(--mid-blue));
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.12em;
|
||||
}
|
||||
a:visited { color: none; }
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 4px solid var(--separator-color);
|
||||
padding-inline-start: 2rem;
|
||||
margin-inline-start: 2rem;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: var(--body-font-size);
|
||||
line-height: var(--body-line-height);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--body-code-background-color);
|
||||
border-radius: 0.25rem;
|
||||
font-family: var(--font-family-monospace);
|
||||
display: inline-block;
|
||||
padding-inline: 0.6rem;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 75%;
|
||||
line-height: var(--body-line-height);
|
||||
margin-block-start: 0.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure {
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-block: 0 var(--body-item-spacing);
|
||||
margin-inline: 0;
|
||||
overflow: hidden;
|
||||
max-width: var(--content-width);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure.bordered {
|
||||
padding: 0.5rem;
|
||||
border: 2px solid #eee;
|
||||
}
|
||||
|
||||
figure a,
|
||||
figure a:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
border-radius: 6px;
|
||||
height: auto;
|
||||
max-width: var(--content-width);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figure .youtube {
|
||||
border-radius: 6px;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
max-width: var(--content-width);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer.site {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.6rem;
|
||||
margin-block: var(--body-item-spacing);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer.site > ul {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
footer.site > .slogans > li {
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
|
||||
footer.site > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer.site p + p {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
footer.site .slogans span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
h1 { font-size: 1.6em; }
|
||||
h2 { font-size: 1.5em; }
|
||||
h3 { font-size: 1.4em; }
|
||||
h4 { font-size: 1.3em; }
|
||||
h5 { font-size: 1.3em; }
|
||||
h6 { font-size: var(--body-font-size); }
|
||||
h5, h6 { font-family: var(--font-family-body); }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--heading-color);
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 600;
|
||||
margin-block: 3.5rem 1rem;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: var(--body-header-line-height);
|
||||
}
|
||||
|
||||
h1.site {
|
||||
color: rgb(var(--mid-blue));
|
||||
font-size: 2.5em;
|
||||
}
|
||||
@supports (background-clip: text) {
|
||||
h1.site {
|
||||
background:
|
||||
radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
|
||||
radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
|
||||
radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%),
|
||||
radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
|
||||
radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
|
||||
radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
h1.site > a { color: inherit; }
|
||||
h1.site > a:hover { text-decoration: none; }
|
||||
|
||||
header.site {
|
||||
display: flex;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
}
|
||||
header.site.visible { visibility: visible; }
|
||||
header.site.sticky { position: sticky; }
|
||||
header.site.animated {
|
||||
animation: site-header-slide-in var(--transition-duration) ease-out;
|
||||
}
|
||||
@keyframes site-header-slide-in {
|
||||
from {
|
||||
top: -200px;
|
||||
}
|
||||
to {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
header.site > .grid > h1 {
|
||||
font-family: var(--font-family-site-heading);
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
order: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
header.site > .grid {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 0.5em;
|
||||
margin: 0 auto;
|
||||
max-width: var(--content-width);
|
||||
padding: 1.5rem 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.site > .grid > nav:first-of-type {
|
||||
justify-content: start;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
header.site > .grid > nav:last-of-type {
|
||||
justify-content: end;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 516px) {
|
||||
header.site > .platter {
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
header.site > .grid {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 435px) {
|
||||
header.site > .grid > nav:first-of-type {
|
||||
order: 5;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--html-background-color);
|
||||
color: var(--html-color);
|
||||
font-family: var(--font-family-body);
|
||||
font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img.circular {
|
||||
shape-outside: circle(50%);
|
||||
-webkit-clip-path: circle(50%);
|
||||
clip-path: circle(50%);
|
||||
}
|
||||
|
||||
main {
|
||||
box-sizing: border-box;
|
||||
max-width: var(--content-width);
|
||||
margin: var(--body-item-spacing) auto;
|
||||
padding-inline: var(--body-item-spacing);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main > header {
|
||||
margin-bottom: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
main > :first-child { margin-block-start: 0; }
|
||||
main > :last-child { margin-block-end: 0; }
|
||||
|
||||
header.site > .grid > nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: max(1.5rem, 80%);
|
||||
justify-content: start;
|
||||
letter-spacing: 0.12em;
|
||||
list-style: none;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
header.site > .grid > nav > li {
|
||||
color: var(--site-nav-link-color);
|
||||
display: block;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
header.site > .grid > nav > .active { font-weight: bold; }
|
||||
|
||||
nav.bulleted > li:first-child::before {
|
||||
color: var(--html-color);
|
||||
content: "";
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
nav.bulleted > li::before {
|
||||
color: var(--heading-color);
|
||||
content: "•";
|
||||
font-size: 60%;
|
||||
font-weight: normal;
|
||||
opacity: 80%;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
letter-spacing: 0.025em;
|
||||
line-height: var(--body-line-height);
|
||||
margin-block-end: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ul,
|
||||
ol ol {
|
||||
margin-inline-start: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
header > span.series {
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: 1px;
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
|
||||
header > span.series::before {
|
||||
color: var(--header-series-arrow-foreground-color);
|
||||
content: "↳";
|
||||
margin-inline-end: 0.25em;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@supports (display: subgrid) {
|
||||
.post-list {
|
||||
align-items: baseline;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
grid-template-columns:
|
||||
minmax(150px, max-content) minmax(20px, max-content) 3px auto;
|
||||
grid-template-areas: "month day line title";
|
||||
}
|
||||
}
|
||||
|
||||
.post-list li {
|
||||
align-items: baseline;
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
padding: 0.1em;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 4rem;
|
||||
}
|
||||
|
||||
.post-title h1 {
|
||||
flex-grow: 1;
|
||||
font-size: 1.8em;
|
||||
margin-block: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.post-title > .post-date {
|
||||
color: var(--light-dim);
|
||||
display: inline-block;
|
||||
font-size: 1.75rem;
|
||||
inline-size: min-content;
|
||||
letter-spacing: 1px;
|
||||
margin-block-start: 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.p5-sketch {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: block;
|
||||
letter-spacing: 2px;
|
||||
margin-left: auto;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.social > li > a {
|
||||
background-image: var(--url);
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--menu-icon-size);
|
||||
display: block;
|
||||
height: var(--menu-icon-size);
|
||||
width: var(--menu-icon-size);
|
||||
}
|
||||
|
||||
.social > li > a > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
color: var(--dark);
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
footer > .tags {
|
||||
display: flex;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
footer > .tags > li {
|
||||
background-color: var(--tag-background-color);
|
||||
color: var(--tag-foreground-color);
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
font-size: 75%;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
footer > .tags > li:hover {
|
||||
background-color: var(--tag-hover-background-color);
|
||||
}
|
||||
|
||||
footer > .tags > li > a {
|
||||
color: inherit;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0.6rem 1rem;
|
||||
}
|
||||
|
||||
footer > .tags > li > a:hover {
|
||||
color: var(--tag-hover-foreground-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer > .tags > li + li { margin-inline-start: 1rem; }
|
||||
footer > .tags > li.chevron + li { margin-inline-start: 0 }
|
||||
|
||||
footer > .tags > .chevron {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: var(--tag-spacer-foreground-color);
|
||||
background-color: inherit;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-start: 1px;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
footer > .tags > .chevron:hover {
|
||||
color: var(--tag-spacer-foreground-color);
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid var(--separator-color);
|
||||
border-collapse: collapse;
|
||||
margin-block-end: var(--body-item-spacing);
|
||||
margin-inline: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid var(--separator-color);
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.youtube iframe {
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-bottom: -3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/** SYNTAX HIGHLIGHTING **/
|
||||
|
||||
.highlight code {
|
||||
background-color: inherit;
|
||||
margin-block: 0.5em;
|
||||
}
|
||||
|
||||
.highlight .line {
|
||||
display: grid;
|
||||
grid-template-columns: max-content auto;
|
||||
}
|
||||
|
||||
.highlight .ln a {
|
||||
-webkit-user-select: none;
|
||||
-moz-use-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.highlight .cl {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/** HELPER CLASSES **/
|
||||
|
||||
.centered { text-align: center; }
|
||||
.float-right { float: right; }
|
||||
|
||||
.nobreak { white-space: nowrap; }
|
||||
.noselect {
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
-moz-use-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.platter {
|
||||
-webkit-backdrop-filter: var(--platter-backdrop-filter);
|
||||
backdrop-filter: var(--platter-backdrop-filter);
|
||||
background-color: var(--platter-background-color);
|
||||
border: 1px solid var(--header-border-color);
|
||||
border-radius: 12px;
|
||||
box-shadow: 3px 4px 4px var(--header-box-shadow-color);
|
||||
}
|
||||
|
||||
.visible { visibility: visible; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue