karaolidis/caldwell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: karaolidis:main
Branches Tags
karaolidis:main
..
compare: karaolidis:4e2c24ad59bb8cd10ad812b6483a593195e1b998
Branches Tags
karaolidis:main

2 Commits
main ... 4e2c24ad59

Author SHA1 Message Date
Nikolaos Karaolidis
4e2c24ad59 Fix layout bugs 
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
 2025-09-11 17:43:07 +00:00
Nikolaos Karaolidis
903227b07c Add image processing 
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
 2025-09-11 17:42:53 +00:00
33 changed files with 766 additions and 837 deletions
Expand all files Collapse all files

1
assets/js/main.js
View File

@@ -4,7 +4,6 @@ import Masonry from "masonry-layout";
const lightbox = new PhotoSwipeLightbox({ const lightbox = new PhotoSwipeLightbox({
gallery: ".lightbox", gallery: ".lightbox",
children: ".pswp-image", children: ".pswp-image",
bgOpacity: 1,
showAnimationDuration: 300, showAnimationDuration: 300,
hideAnimationDuration: 300, hideAnimationDuration: 300,
initialZoomLevel: "fit", initialZoomLevel: "fit",

2
assets/sass/blockquote.scss
View File

@@ -12,7 +12,7 @@ blockquote {
} }
p { p {
margin: 0.5rem 0 0.5rem 0; margin: 0 0 0.5rem 0;
} }
p:last-child { p:last-child {

824
assets/sass/code.scss
View File

@@ -1,4 +1,5 @@
pre { /* PreWrapper */
.chroma {
color: var(--text); color: var(--text);
background-color: var(--background-50); background-color: var(--background-50);
padding: 1rem; padding: 1rem;
@@ -6,418 +7,411 @@ pre {
overflow-x: auto; overflow-x: auto;
} }
/* PreWrapper */ /* Error */
.chroma { .chroma .err {
.line.prompt::before { color: var(--accent-500);
content: "$ "; }
}
/* LineLink */
/* Error */ .chroma .lnlinks {
.err { outline: none;
color: var(--accent-600); text-decoration: none;
} color: inherit;
}
/* LineLink */
.lnlinks { /* LineTableTD */
outline: none; .chroma .lntd {
text-decoration: none; vertical-align: top;
color: inherit; padding: 0;
} margin: 0;
border: 0;
/* LineTableTD */ }
.lntd {
vertical-align: top; /* LineTable */
padding: 0; .chroma .lntable {
margin: 0; border-spacing: 0;
border: 0; padding: 0;
} margin: 0;
border: 0;
/* LineTable */ }
.lntable {
border-spacing: 0; /* LineHighlight */
padding: 0; .chroma .hl {
margin: 0; background-color: var(--background-200);
border: 0; }
}
/* LineNumbersTable */
/* LineHighlight */ .chroma .lnt {
.hl { white-space: pre;
background-color: var(--background-100); -webkit-user-select: none;
} user-select: none;
margin-right: 0.4em;
/* LineNumbersTable */ padding: 0 0.4em 0 0.4em;
.lnt { }
white-space: pre;
-webkit-user-select: none; /* LineNumbers */
user-select: none; .chroma .ln {
margin-right: 0.4em; white-space: pre;
padding: 0 0.4em 0 0.4em; -webkit-user-select: none;
} user-select: none;
margin-right: 0.4em;
/* LineNumbers */ padding: 0 0.4em 0 0.4em;
.ln { color: color-mix(in srgb, var(--text) 50%, var(--background-50));
white-space: pre; }
-webkit-user-select: none;
user-select: none; /* Line */
margin-right: 0.4em; .chroma .line {
padding: 0 0.4em 0 0.4em; display: flex;
color: color-mix(in srgb, var(--text) 50%, var(--background-50)); }
}
/* Keyword */
/* Line */ .chroma .k {
.line { color: var(--secondary-600);
display: flex; }
}
/* KeywordConstant */
/* Keyword */ .chroma .kc {
.k { color: var(--primary-500);
color: var(--secondary-700); }
}
/* KeywordDeclaration */
/* KeywordConstant */ .chroma .kd {
.kc { color: var(--secondary-600);
color: var(--primary-600); }
}
/* KeywordNamespace */
/* KeywordDeclaration */ .chroma .kn {
.kd { color: var(--secondary-600);
color: var(--secondary-700); }
}
/* KeywordPseudo */
/* KeywordNamespace */ .chroma .kp {
.kn { color: var(--primary-500);
color: var(--secondary-700); }
}
/* KeywordReserved */
/* KeywordPseudo */ .chroma .kr {
.kp { color: var(--secondary-600);
color: var(--primary-600); }
}
/* KeywordType */
/* KeywordReserved */ .chroma .kt {
.kr { color: var(--secondary-600);
color: var(--secondary-700); }
}
/* Name */
/* KeywordType */ .chroma .nc {
.kt { color: var(--accent-600);
color: var(--secondary-700); font-weight: bold;
} }
/* Name */ /* NameConstant */
.nc { .chroma .no {
color: var(--accent-700); color: var(--primary-500);
font-weight: bold; font-weight: bold;
} }
/* NameConstant */ /* NameDecorator */
.no { .chroma .nd {
color: var(--primary-600); color: var(--secondary-700);
font-weight: bold; font-weight: bold;
} }
/* NameDecorator */ /* NameEntity */
.nd { .chroma .ni {
color: var(--secondary-800); color: var(--accent-600);
font-weight: bold; }
}
/* NameException */
/* NameEntity */ .chroma .ne {
.ni { color: var(--accent-600);
color: var(--accent-700); font-weight: bold;
} }
/* NameException */ /* NameLabel */
.ne { .chroma .nl {
color: var(--accent-700); color: var(--primary-500);
font-weight: bold; font-weight: bold;
} }
/* NameLabel */ /* NameNamespace */
.nl { .chroma .nn {
color: var(--primary-600); color: var(--secondary-600);
font-weight: bold; }
}
/* NameProperty */
/* NameNamespace */ .chroma .py {
.nn { color: var(--primary-500);
color: var(--secondary-700); }
}
/* NameTag */
/* NameProperty */ .chroma .nt {
.py { color: var(--primary-600);
color: var(--primary-600); }
}
/* NameVariable */
/* NameTag */ .chroma .nv {
.nt { color: var(--primary-500);
color: var(--primary-700); }
}
/* NameVariableClass */
/* NameVariable */ .chroma .vc {
.nv { color: var(--primary-500);
color: var(--primary-600); }
}
/* NameVariableGlobal */
/* NameVariableClass */ .chroma .vg {
.vc { color: var(--primary-500);
color: var(--primary-600); }
}
/* NameVariableInstance */
/* NameVariableGlobal */ .chroma .vi {
.vg { color: var(--primary-500);
color: var(--primary-600); }
}
/* NameVariableMagic */
/* NameVariableInstance */ .chroma .vm {
.vi { color: var(--primary-500);
color: var(--primary-600); }
}
/* NameFunction */
/* NameVariableMagic */ .chroma .nf {
.vm { color: var(--secondary-700);
color: var(--primary-600); font-weight: bold;
} }
/* NameFunction */ /* NameFunctionMagic */
.nf { .chroma .fm {
color: var(--secondary-800); color: var(--secondary-700);
font-weight: bold; font-weight: bold;
} }
/* NameFunctionMagic */ /* Literal */
.fm { .chroma .l {
color: var(--secondary-800); color: var(--primary-600);
font-weight: bold; }
}
/* LiteralDate */
/* Literal */ .chroma .ld {
.l { color: var(--primary-500);
color: var(--primary-700); }
}
/* LiteralString */
/* LiteralDate */ .chroma .s {
.ld { color: var(--primary-600);
color: var(--primary-600); }
}
/* LiteralStringAffix */
/* LiteralString */ .chroma .sa {
.s { color: var(--primary-500);
color: var(--primary-700); }
}
/* LiteralStringBacktick */
/* LiteralStringAffix */ .chroma .sb {
.sa { color: var(--primary-600);
color: var(--primary-600); }
}
/* LiteralStringChar */
/* LiteralStringBacktick */ .chroma .sc {
.sb { color: var(--primary-600);
color: var(--primary-700); }
}
/* LiteralStringDelimiter */
/* LiteralStringChar */ .chroma .dl {
.sc { color: var(--primary-500);
color: var(--primary-700); }
}
/* LiteralStringDoc */
/* LiteralStringDelimiter */ .chroma .sd {
.dl { color: var(--primary-600);
color: var(--primary-600); }
}
/* LiteralStringDouble */
/* LiteralStringDoc */ .chroma .s2 {
.sd { color: var(--primary-600);
color: var(--primary-700); }
}
/* LiteralStringEscape */
/* LiteralStringDouble */ .chroma .se {
.s2 { color: var(--primary-500);
color: var(--primary-700); }
}
/* LiteralStringHeredoc */
/* LiteralStringEscape */ .chroma .sh {
.se { color: var(--primary-500);
color: var(--primary-600); }
}
/* LiteralStringInterpol */
/* LiteralStringHeredoc */ .chroma .si {
.sh { color: var(--primary-600);
color: var(--primary-600); }
}
/* LiteralStringOther */
/* LiteralStringInterpol */ .chroma .sx {
.si { color: var(--primary-600);
color: var(--primary-700); }
}
/* LiteralStringRegex */
/* LiteralStringOther */ .chroma .sr {
.sx { color: var(--primary-500);
color: var(--primary-700); }
}
/* LiteralStringSingle */
/* LiteralStringRegex */ .chroma .s1 {
.sr { color: var(--primary-600);
color: var(--primary-600); }
}
/* LiteralStringSymbol */
/* LiteralStringSingle */ .chroma .ss {
.s1 { color: var(--primary-600);
color: var(--primary-700); }
}
/* LiteralNumber */
/* LiteralStringSymbol */ .chroma .m {
.ss { color: var(--primary-600);
color: var(--primary-700); }
}
/* LiteralNumberBin */
/* LiteralNumber */ .chroma .mb {
.m { color: var(--primary-600);
color: var(--primary-700); }
}
/* LiteralNumberFloat */
/* LiteralNumberBin */ .chroma .mf {
.mb { color: var(--primary-600);
color: var(--primary-700); }
}
/* LiteralNumberHex */
/* LiteralNumberFloat */ .chroma .mh {
.mf { color: var(--primary-600);
color: var(--primary-700); }
}
/* LiteralNumberInteger */
/* LiteralNumberHex */ .chroma .mi {
.mh { color: var(--primary-600);
color: var(--primary-700); }
}
/* LiteralNumberIntegerLong */
/* LiteralNumberInteger */ .chroma .il {
.mi { color: var(--primary-600);
color: var(--primary-700); }
}
/* LiteralNumberOct */
/* LiteralNumberIntegerLong */ .chroma .mo {
.il { color: var(--primary-600);
color: var(--primary-700); }
}
/* Operator */
/* LiteralNumberOct */ .chroma .o {
.mo { color: var(--secondary-600);
color: var(--primary-700); font-weight: bold;
} }
/* Operator */ /* OperatorWord */
.o { .chroma .ow {
color: var(--secondary-700); color: var(--secondary-600);
font-weight: bold; font-weight: bold;
} }
/* OperatorWord */ /* Comment */
.ow { .chroma .c {
color: var(--secondary-700); color: color-mix(in srgb, var(--text) 50%, var(--background-50));
font-weight: bold; font-style: italic;
} }
/* Comment */ /* CommentHashbang */
.c { .chroma .ch {
color: color-mix(in srgb, var(--text) 50%, var(--background-50)); color: color-mix(in srgb, var(--text) 50%, var(--background-50));
font-style: italic; font-style: italic;
} }
/* CommentHashbang */ /* CommentMultiline */
.ch { .chroma .cm {
color: color-mix(in srgb, var(--text) 50%, var(--background-50)); color: color-mix(in srgb, var(--text) 50%, var(--background-50));
font-style: italic; font-style: italic;
} }
/* CommentMultiline */ /* CommentSingle */
.cm { .chroma .c1 {
color: color-mix(in srgb, var(--text) 50%, var(--background-50)); color: color-mix(in srgb, var(--text) 50%, var(--background-50));
font-style: italic; font-style: italic;
} }
/* CommentSingle */ /* CommentSpecial */
.c1 { .chroma .cs {
color: color-mix(in srgb, var(--text) 50%, var(--background-50)); color: color-mix(in srgb, var(--text) 50%, var(--background-50));
font-style: italic; font-weight: bold;
} font-style: italic;
}
/* CommentSpecial */
.cs { /* CommentPreproc */
color: color-mix(in srgb, var(--text) 50%, var(--background-50)); .chroma .cp {
font-weight: bold; color: color-mix(in srgb, var(--text) 50%, var(--background-50));
font-style: italic; font-weight: bold;
} font-style: italic;
}
/* CommentPreproc */
.cp { /* CommentPreprocFile */
color: color-mix(in srgb, var(--text) 50%, var(--background-50)); .chroma .cpf {
font-weight: bold; color: color-mix(in srgb, var(--text) 50%, var(--background-50));
font-style: italic; font-weight: bold;
} font-style: italic;
}
/* CommentPreprocFile */
.cpf { /* GenericDeleted */
color: color-mix(in srgb, var(--text) 50%, var(--background-50)); .chroma .gd {
font-weight: bold; color: var(--accent-900);
font-style: italic; background-color: var(--accent-300);
} }
/* GenericDeleted */ /* GenericEmph */
.gd { .chroma .ge {
color: var(--accent-900); font-style: italic;
background-color: var(--accent-300); }
}
/* GenericError */
/* GenericEmph */ .chroma .gr {
.ge { color: var(--accent-500);
font-style: italic; }
}
/* GenericHeading */
/* GenericError */ .chroma .gh {
.gr { color: var(--primary-500);
color: var(--accent-600); font-weight: bold;
} }
/* GenericHeading */ /* GenericInserted */
.gh { .chroma .gi {
color: var(--primary-600); color: var(--primary-800);
font-weight: bold; background-color: var(--primary-200);
} }
/* GenericInserted */ /* GenericOutput */
.gi { .chroma .go {
color: var(--primary-800); color: color-mix(in srgb, var(--text) 70%, var(--background-50));
background-color: var(--primary-200); }
}
/* GenericPrompt */
/* GenericOutput */ .chroma .gp {
.go { color: color-mix(in srgb, var(--text) 70%, var(--background-50));
color: color-mix(in srgb, var(--text) 70%, var(--background-50)); }
}
/* GenericStrong */
/* GenericPrompt */ .chroma .gs {
.gp { font-weight: bold;
color: color-mix(in srgb, var(--text) 70%, var(--background-50)); }
}
/* GenericSubheading */
/* GenericStrong */ .chroma .gu {
.gs { color: var(--primary-500);
font-weight: bold; }
}
/* GenericTraceback */
/* GenericSubheading */ .chroma .gt {
.gu { color: var(--secondary-600);
color: var(--primary-600); }
}
/* GenericUnderline */
/* GenericTraceback */ .chroma .gl {
.gt { text-decoration: underline;
color: var(--secondary-700);
}
/* GenericUnderline */
.gl {
text-decoration: underline;
}
} }

196
assets/sass/colors.scss
View File

@@ -1,71 +1,143 @@
// https://www.realtimecolors.com/
:root { :root {
--text: #0d1416; --text: #050c0e;
--background: #fdfdfd; --background: #f1f8fa;
--primary: #669ca3; --primary: #51a9c3;
--secondary: #a5abc9; --secondary: #d88fb9;
--accent: #8d8cba; --accent: #ce7f71;
}
@media (prefers-color-scheme: dark) {
:root {
--text: #f0f8fa;
--background: #050d0f;
--primary: #3c94af;
--secondary: #712853;
--accent: #8d3e30;
}
} }
:root { :root {
--text-50: #eff4f6; --text-50: #ecf6f8;
--text-100: #dfe9ec; --text-100: #daecf1;
--text-200: #bfd4d9; --text-200: #b4dae4;
--text-300: #9fbec6; --text-300: #8fc7d6;
--text-400: #7ea8b4; --text-400: #69b4c9;
--text-500: #5e92a1; --text-500: #44a1bb;
--text-600: #4b7581; --text-600: #368196;
--text-700: #395860; --text-700: #296170;
--text-800: #263b40; --text-800: #1b414b;
--text-900: #131d20; --text-900: #0e2025;
--text-950: #090f10; --text-950: #071013;
--background-50: #f0f5f5; --background-50: #ecf6f8;
--background-100: #e0ebeb; --background-100: #daecf1;
--background-200: #c2d6d6; --background-200: #b4dae4;
--background-300: #a3c2c2; --background-300: #8fc7d6;
--background-400: #85adad; --background-400: #69b4c9;
--background-500: #669999; --background-500: #44a1bb;
--background-600: #527a7a; --background-600: #368196;
--background-700: #3d5c5c; --background-700: #296170;
--background-800: #293d3d; --background-800: #1b414b;
--background-900: #141f1f; --background-900: #0e2025;
--background-950: #0a0f0f; --background-950: #071013;
--primary-50: #eff5f5; --primary-50: #ecf6f8;
--primary-100: #dfeaec; --primary-100: #d9ecf2;
--primary-200: #bfd6d9; --primary-200: #b3d9e5;
--primary-300: #9fc1c6; --primary-300: #8dc6d8;
--primary-400: #80adb3; --primary-400: #67b4cb;
--primary-500: #60989f; --primary-500: #41a1be;
--primary-600: #4d7a80; --primary-600: #348198;
--primary-700: #395b60; --primary-700: #276072;
--primary-800: #263d40; --primary-800: #1a404c;
--primary-900: #131e20; --primary-900: #0d2026;
--primary-950: #0a0f10; --primary-950: #071013;
--secondary-50: #eff0f5; --secondary-50: #f8ecf3;
--secondary-100: #dfe1ec; --secondary-100: #f2d9e8;
--secondary-200: #bfc4d9; --secondary-200: #e4b4d0;
--secondary-300: #9fa6c6; --secondary-300: #d78eb9;
--secondary-400: #8088b3; --secondary-400: #ca68a1;
--secondary-500: #606a9f; --secondary-500: #bd428a;
--secondary-600: #4d5580; --secondary-600: #97356e;
--secondary-700: #394060; --secondary-700: #712853;
--secondary-800: #262b40; --secondary-800: #4b1b37;
--secondary-900: #131520; --secondary-900: #260d1c;
--secondary-950: #0a0b10; --secondary-950: #13070e;
--accent-50: #efeff5; --accent-50: #f8eeec;
--accent-100: #dfdfec; --accent-100: #f2ddd9;
--accent-200: #c0bfd9; --accent-200: #e5bbb3;
--accent-300: #a09fc6; --accent-300: #d8988d;
--accent-400: #8080b3; --accent-400: #cb7667;
--accent-500: #61609f; --accent-500: #be5441;
--accent-600: #4d4d80; --accent-600: #984334;
--accent-700: #3a3960; --accent-700: #723227;
--accent-800: #272640; --accent-800: #4c221a;
--accent-900: #131320; --accent-900: #26110d;
--accent-950: #0a0a10; --accent-950: #130807;
}
@media (prefers-color-scheme: dark) {
:root {
--text-50: #061113;
--text-100: #0d2126;
--text-200: #19424d;
--text-300: #266373;
--text-400: #338599;
--text-500: #40a6bf;
--text-600: #66b8cc;
--text-700: #8cc9d9;
--text-800: #b3dbe6;
--text-900: #d9edf2;
--text-950: #ecf6f9;
--background-50: #061113;
--background-100: #0d2126;
--background-200: #19424d;
--background-300: #266373;
--background-400: #338599;
--background-500: #40a6bf;
--background-600: #66b8cc;
--background-700: #8cc9d9;
--background-800: #b3dbe6;
--background-900: #d9edf2;
--background-950: #ecf6f9;
--primary-50: #071013;
--primary-100: #0d2026;
--primary-200: #1a404c;
--primary-300: #276072;
--primary-400: #348198;
--primary-500: #41a1be;
--primary-600: #67b4cb;
--primary-700: #8dc6d8;
--primary-800: #b3d9e5;
--primary-900: #d9ecf2;
--primary-950: #ecf6f8;
--secondary-50: #13070e;
--secondary-100: #260d1c;
--secondary-200: #4b1b37;
--secondary-300: #712853;
--secondary-400: #97356e;
--secondary-500: #bd428a;
--secondary-600: #ca68a1;
--secondary-700: #d78eb9;
--secondary-800: #e4b4d0;
--secondary-900: #f2d9e8;
--secondary-950: #f8ecf3;
--accent-50: #130807;
--accent-100: #26110d;
--accent-200: #4c221a;
--accent-300: #723227;
--accent-400: #984334;
--accent-500: #be5441;
--accent-600: #cb7667;
--accent-700: #d8988d;
--accent-800: #e5bbb3;
--accent-900: #f2ddd9;
--accent-950: #f8eeec;
}
} }

36
assets/sass/common.scss
View File

@@ -59,38 +59,6 @@ p {
margin: 1.5rem 0 1.5rem 0; margin: 1.5rem 0 1.5rem 0;
} }
li { li:not(:last-child) {
margin: 0.5rem 0 0.5rem 0; margin-bottom: 0.5rem;
}
details {
background-color: var(--background-50);
padding: 1rem 1.5rem 1rem 1.5rem;
border-radius: 0.5rem;
p {
margin: 0.5rem 0 0.5rem 0;
}
summary {
margin: 0.5rem;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
summary::before {
content: "";
border-width: 0.4rem;
border-style: solid;
border-color: transparent transparent transparent var(--text);
transition: transform 0.3s ease;
transform-origin: 25% 50%;
}
&[open] summary::before {
transform: rotate(90deg);
}
} }

55
assets/sass/details.scss
View File

@@ -1,55 +0,0 @@
main.with-details {
max-width: $width-wide;
margin: 0 auto;
padding: 2rem;
> .content {
width: 100%;
padding: 0;
}
$width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
display: grid;
grid-template-columns: $width-sidebar $width-content $width-sidebar;
column-gap: 2rem;
.title {
font-size: 1.75rem;
margin: 0;
}
.length {
color: color-mix(in srgb, var(--text) 70%, var(--background));
margin: 0.5rem 0 0.5rem 0;
font-size: 0.8rem;
}
}
@media (max-width: $width-wide) {
main.with-details {
display: block;
padding: 0;
> .details {
max-width: $width-content;
margin: 0 auto;
padding: 2rem;
}
> .content {
padding: 2rem;
}
}
}
@media (max-width: $width-mobile) {
main.with-details {
> .details {
padding: 1rem;
}
> .content {
padding: 0 1rem 1rem 1rem;
}
}
}

3
assets/sass/footer.scss
View File

@@ -13,7 +13,7 @@
font-size: 0.85rem; font-size: 0.85rem;
color: color-mix(in srgb, var(--text) 50%, var(--background)); color: color-mix(in srgb, var(--text) 30%, var(--background));
a { a {
color: inherit; color: inherit;
@@ -36,7 +36,6 @@
list-style: none; list-style: none;
li { li {
margin: 0;
font-size: 0.85rem; font-size: 0.85rem;
} }
} }

18
assets/sass/hero.scss
View File

@@ -7,6 +7,22 @@
margin: 0; margin: 0;
font-size: 2.5rem; font-size: 2.5rem;
} }
.meta {
font-size: 0.8rem;
.date {
color: var(--text-600);
}
.duration {
color: color-mix(in srgb, var(--text) 50%, var(--background));
}
}
.captioned-image {
padding-top: 1.5rem;
}
} }
.hero + .content { .hero + .content {
@@ -15,6 +31,6 @@
@media (max-width: $width-mobile) { @media (max-width: $width-mobile) {
.hero { .hero {
padding: 1rem 1rem 0 1rem; padding: 1rem;
} }
} }

4
assets/sass/image.scss
View File

@@ -10,7 +10,7 @@ img {
figcaption { figcaption {
text-align: center; text-align: center;
padding-top: 1rem; padding-top: 0.5rem;
color: color-mix(in srgb, var(--text) 70%, var(--background)); color: color-mix(in srgb, var(--text) 50%, var(--background));
} }
} }

87
assets/sass/list.scss
View File

@@ -1,17 +1,64 @@
main.with-meta {
max-width: $width-wide;
margin: 0 auto;
padding: 2rem;
> .content {
padding: 0;
}
$width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
display: grid;
grid-template-columns: $width-sidebar $width-content $width-sidebar;
column-gap: 2rem;
h1 {
font-size: 1.75rem;
}
.length {
color: color-mix(in srgb, var(--text) 50%, var(--background));
margin: 0.25rem 0;
font-size: 0.8rem;
}
}
@media (max-width: $width-wide) {
main.with-meta {
display: block;
padding: 0;
> .meta {
max-width: $width-content;
margin: 0 auto;
padding: 2rem;
}
> .content {
padding: 2rem;
}
}
}
@media (max-width: $width-mobile) {
main.with-meta {
> .meta {
padding: 1rem;
}
> .content {
padding: 0 1rem 1rem 1rem;
}
}
}
.list { .list {
.post { .post {
display: block; display: block;
color: inherit;
> a {
color: inherit;
}
> a:hover {
color: var(--text-800);
}
&:not(:first-child) { &:not(:first-child) {
margin: 4rem 0 4rem 0; margin-top: 4rem;
} }
.title { .title {
@@ -20,20 +67,38 @@
} }
.summary { .summary {
margin: 0.5rem 0 0.5rem 0; margin-top: 0.5rem;
}
.meta {
margin-top: 1rem;
font-size: 0.8rem;
.date {
color: var(--text-600);
}
.duration {
color: color-mix(in srgb, var(--text) 50%, var(--background));
}
} }
.heading-anchor { .heading-anchor {
display: none; display: none;
} }
} }
.post:hover .title,
.post:hover .summary {
color: var(--text-800);
}
} }
@media (max-width: $width-mobile) { @media (max-width: $width-mobile) {
.list { .list {
.post { .post {
&:not(:first-child) { &:not(:first-child) {
margin: 2rem 0 2rem 0; margin-top: 2rem;
} }
.title { .title {

2
assets/sass/main.scss
View File

@@ -11,9 +11,7 @@ $width-wide: 75rem;
@import "blockquote"; @import "blockquote";
@import "code"; @import "code";
@import "table"; @import "table";
@import "meta";
@import "details";
@import "list"; @import "list";
@import "gallery"; @import "gallery";

20
assets/sass/meta.scss
View File

@@ -1,20 +0,0 @@
.meta {
margin: 1rem 0 1rem 0;
font-size: 0.8rem;
.date {
color: var(--text);
}
.tag {
color: var(--primary-600);
}
.tag:hover {
color: var(--primary-800);
}
.duration {
color: color-mix(in srgb, var(--text) 70%, var(--background));
}
}

4
assets/sass/photoswipe.scss
View File

@@ -18,13 +18,13 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: auto; height: 5rem;
padding: 1rem 2rem; padding: 1rem 2rem;
text-align: center; text-align: center;
line-height: 1.5rem; line-height: 1.5rem;
.meta { .meta {
margin: 0; font-size: 0.7rem;
} }
a { a {

4
layouts/_default/_markup/render-codeblock-bash.html
View File

@@ -1,4 +0,0 @@
{{ $result := transform.HighlightCodeBlock . }}
{{ $pattern := `(?s)<span class="line"([^>]*)>(\s*<span[^>]*>)?\$ (.*?)(</span>\s*)</span>` }}
{{ $processed := replaceRE $pattern `<span class="line prompt"$1>$2$3$4</span>` $result.Wrapped }}
{{ $processed | safeHTML }}

8
layouts/_default/_markup/render-image.html
View File

@@ -1,3 +1,7 @@
{{ $data := partial "components/image/process.html" (dict "page" .Page "src" .Destination) }} {{ partial "components/image/index.html" (dict "page" .Page "image" (dict
{{ partial "components/image/index.html" (merge $data (dict "caption" .Text "title" .Title)) }} "src" .Destination
"caption" .Text
"alt" .Title
))
}}
{{- /* chomp trailing newline */ -}} {{- /* chomp trailing newline */ -}}

8
layouts/_default/list.html
View File

@@ -1,8 +1,8 @@
{{ define "main" }} {{ define "main" }}
{{ $details := default true .Params.details }} {{ $withMeta := default true .Params.withMeta }}
<main class="{{- if $details -}}with-details{{- end -}}"> <main class="{{- if $withMeta -}}with-meta{{- end -}}">
{{ if $details }} {{ if $withMeta }}
{{ partial "components/list/details.html" . }} {{ partial "components/list/meta.html" . }}
{{ end }} {{ end }}
<div class="content"> <div class="content">
{{ partial "posts/list.html" . }} {{ partial "posts/list.html" . }}

4
layouts/_default/single.html
View File

@@ -3,10 +3,6 @@
{{ partial "components/hero/index.html" . }} {{ partial "components/hero/index.html" . }}
<div class="content"> <div class="content">
{{ .Content }} {{ .Content }}
{{ if (default true .Params.comments) }}
{{ partial "comments.html" . }}
{{ end }}
</div> </div>
{{ partial "components/postnav/index.html" . }} {{ partial "components/postnav/index.html" . }}
</main> </main>

5
layouts/_shortcodes/contents.html
View File

@@ -1,5 +0,0 @@
<details class="toc">
<summary>Post Contents</summary>
{{ .Page.TableOfContents }}
</details>
{{- /* chomp trailing newline */ -}}

25
layouts/_shortcodes/exif-image.html
View File

@@ -1,25 +0,0 @@
{{ $src := "" }}
{{ if .IsNamedParams }}
{{ $src = .Get "src" }}
{{ else }}
{{ $src = .Get 0 }}
{{ end }}
{{ $title := "" }}
{{ if .IsNamedParams }}
{{ $title = .Get "title" }}
{{ else }}
{{ $title = .Get 1 }}
{{ end }}
{{ $alt := "" }}
{{ if .IsNamedParams }}
{{ $alt = .Get "alt" }}
{{ else }}
{{ $alt = .Get 1 }}
{{ end }}
{{ $data := partial "components/image/process.html" (dict "page" .Page "src" $src) }}
{{ $caption := partial "components/image/exif.html" $data.original }}
{{ partial "components/image/index.html" (merge $data (dict "caption" $caption "title" $title "alt" $alt)) }}
{{- /* chomp trailing newline */ -}}

3
layouts/_shortcodes/sub.html
View File

@@ -1 +1,2 @@
<sub>{{ .Get 0 | markdownify }}</sub> {{- /* chomp trailing newline */ -}} <sub>{{ .Get 0 | markdownify }}</sub>
{{- /* chomp trailing newline */ -}}

3
layouts/_shortcodes/sup.html
View File

@@ -1 +1,2 @@
<sup>{{ .Get 0 | markdownify }}</sup> {{- /* chomp trailing newline */ -}} <sup>{{ .Get 0 | markdownify }}</sup>
{{- /* chomp trailing newline */ -}}

16
layouts/gallery/list.html
View File

@@ -1,16 +1,10 @@
{{ define "main" }} {{ define "main" }}
{{ $details := default true .Params.details }} {{ $withMeta := default true .Params.withMeta }}
<main class="{{- if $details -}}with-details{{- end -}}"> <main class="{{- if $withMeta -}}with-meta{{- end -}}">
{{ if $details }} {{ if $withMeta }}
{{ partial "components/list/details.html" . }} {{ partial "components/list/meta.html" . }}
{{ end }} {{ end }}
<div <div class="{{- if $withMeta -}}content{{- else -}}content wide{{- end -}}">
class="{{- if $details -}}
content
{{- else -}}
content wide
{{- end -}}"
>
{{ partial "gallery/list.html" . }} {{ partial "gallery/list.html" . }}
</div> </div>
</main> </main>

0
layouts/partials/comments.html
View File

20
layouts/partials/components/hero/index.html
View File

@@ -1,17 +1,9 @@
<section class="hero"> <section class="hero">
<h1 class="title">{{ .Title }}</h1> <h1 class="title">{{ .Title }}</h1>
{{ partial "components/meta/index.html" . }} <div class="meta">
<span class="date">{{ .Date | time.Format ":date_medium" }}</span>
{{ $hero := partial "components/hero/process.html" .Params.hero }} &middot;
{{ if $hero.src }} <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
{{ $data := partial "components/image/process.html" (dict "page" .Page "src" $hero.src) }} </div>
{{ partial "components/image/index.html" (dict "page" .Page "image" .Params.hero) }}
{{ $final := merge $data $hero }}
{{ if $hero.exif }}
{{ $caption := partial "components/image/exif.html" $data.original }}
{{ $final = merge $final (dict "caption" $caption) }}
{{ end }}
{{ partial "components/image/index.html" $final }}
{{ end }}
</section> </section>

17
layouts/partials/components/hero/process.html
View File

@@ -1,17 +0,0 @@
{{- $src := "" -}}
{{- $caption := "" -}}
{{- $title := "" -}}
{{- $alt := "" -}}
{{- $exif := false -}}
{{- if reflect.IsMap . -}}
{{- $src = .src -}}
{{- $caption = .caption -}}
{{- $title = .title -}}
{{- $alt = .alt -}}
{{- $exif = .exif | default false -}}
{{- else -}}
{{- $src = . -}}
{{- end -}}
{{- return dict "src" $src "caption" $caption "title" $title "alt" $alt "exif" $exif -}}

22
layouts/partials/components/image/exif.html
View File

@@ -1,22 +0,0 @@
{{ $exif := .Exif.Tags }}
{{ $make := $exif.Make }}
{{ $model := $exif.Model }}
{{ $lensMake := $exif.LensMake }}
{{ $lensModel := $exif.LensModel }}
{{ $lens := "" }}
{{ if ne $make $lensMake }}
{{ $lens = printf "%s %s" $lensMake $lensModel }}
{{ else }}
{{ $lens = $lensModel }}
{{ end }}
{{ $focal := printf "%.1f" (float $exif.FocalLength) }}
{{ $focal35 := printf "%.1f" (float $exif.FocalLengthIn35mmFormat) }}
{{ $shutter := printf "%d" $exif.ExposureTime }}
{{ $aperture := printf "%d" $exif.FNumber }}
{{ $iso := printf "%d" $exif.ISO }}
{{ return printf "%s %s, %s @ %s mm (%s mm), %s s, f/%s, ISO %s" $make $model $lens $focal $focal35 $shutter $aperture $iso }}

80
layouts/partials/components/image/index.html
View File

@@ -1,26 +1,58 @@
{{- $caption := .caption | default "" -}} {{- $page := .page -}}
{{- $title := .title | default $caption | plainify -}} {{- $image := .image -}}
{{- $alt := .alt | default $title | plainify -}}
{{- $src := $image -}}
{{- $caption := "" -}}
{{- $title := "" -}}
{{- $alt := "" -}}
<figure class="captioned-image lightbox"> {{- if reflect.IsMap $image -}}
<a {{- $src = $image.src | default "" -}}
href="{{- .full.RelPermalink -}}" {{- $caption = $image.caption | default "" -}}
data-pswp-src="{{- .full.RelPermalink -}}" {{- $title = $image.title | default $caption | default "" -}}
data-pswp-width="{{- .full.Width -}}" {{- $alt = $image.alt | default $title | default "" -}}
data-pswp-height="{{- .full.Height -}}" {{- end -}}
class="pswp-image"
> {{- if $src -}}
<img {{- $isRemote := strings.HasPrefix $src "http" -}}
src="{{- .thumb.RelPermalink -}}"
width="{{- .thumb.Width -}}" {{- if $isRemote -}}
height="{{- .thumb.Height -}}" {{- $remote := resources.GetRemote $src -}}
loading="lazy" {{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
{{ with $title }}title="{{- . -}}"{{ end }} {{- else -}}
{{ with $alt }}alt="{{- . -}}"{{ end }} {{- $image = ($page.Resources.Get $src) | default (resources.Get $src) -}}
/> {{- end -}}
</a> {{- end -}}
{{ with $caption }}
<figcaption>{{ . | safeHTML }}</figcaption> {{- with $image -}}
{{ end }} {{ $full := . | images.Filter (images.Process "webp q90") }}
</figure>
{{ $thumb := . }}
{{- if gt .Width 2000 -}}
{{- $thumb = . | images.Filter (images.Process "resize 2000x webp q75") -}}
{{- else -}}
{{- $thumb = . | images.Filter (images.Process "webp q75") -}}
{{- end -}}
<figure class="captioned-image lightbox">
<a
href="{{- .RelPermalink -}}"
data-pswp-src="{{- .RelPermalink -}}"
data-pswp-width="{{- .Width -}}"
data-pswp-height="{{- .Height -}}"
class="pswp-image"
>
<img
src="{{- $thumb.RelPermalink -}}"
width="{{- .Width -}}"
height="{{- .Height -}}"
loading="lazy"
{{ with $title }}title="{{- . -}}"{{ end }}
{{ with $alt }}alt="{{- . -}}"{{ end }}
/>
</a>
{{ with $caption }}
<figcaption>{{ . | safeHTML }}</figcaption>
{{ end }}
</figure>
{{- end -}}

27
layouts/partials/components/image/process.html
View File

@@ -1,27 +0,0 @@
{{- $page := .page -}}
{{- $src := .src -}}
{{- $original := "" -}}
{{- $isRemote := strings.HasPrefix $src "http" -}}
{{- if $isRemote -}}
{{- $remote := resources.GetRemote $src -}}
{{- $original = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
{{- else -}}
{{- $original = ($page.Resources.Get $src) | default (resources.Get $src) -}}
{{- end -}}
{{- $rotate := images.AutoOrient -}}
{{- $processFull := images.Process "webp q90" -}}
{{- $full := $original | images.Filter (slice $rotate $processFull) -}}
{{- $processThumb := "" -}}
{{- if gt $original.Width 2000 -}}
{{- $processThumb = images.Process "resize 2000x webp q75" -}}
{{- else -}}
{{- $processThumb = images.Process "webp q75" -}}
{{- end -}}
{{- $thumb := $original | images.Filter (slice $rotate $processThumb) -}}
{{- return dict "original" $original "full" $full "thumb" $thumb -}}

4
layouts/partials/components/list/details.html → layouts/partials/components/list/meta.html
View File

@@ -1,5 +1,5 @@
<section class="details"> <section class="meta">
<h1 class="title">{{ .Page.Title }}</h1> <h1>{{ .Page.Title }}</h1>
<p class="length">A {{ .Kind }} with {{ len .Pages }} items</p> <p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
{{ .Content }} {{ .Content }}
</section> </section>

22
layouts/partials/components/meta/index.html
View File

@@ -1,22 +0,0 @@
<div class="meta">
<span class="date">{{ .Date | time.Format ":date_medium" }}</span>
{{ if eq .Kind "page" }}
{{ range .Params.tags }}
&middot;
<a href="/tags/{{ . | urlize }}" class="tag">{{ . }}</a>
{{ end }}
{{ if ge .ReadingTime 1 }}
&middot;
<span class="duration">
{{ printf "%d min. read" .ReadingTime }}
</span>
{{ end }}
{{ else }}
{{ $count := len .Pages }}
<span class="duration">
{{ printf "%d %s" $count (cond (eq $count 1) "item" "items") }}
</span>
{{ end }}
</div>

29
layouts/partials/components/postnav/index.html
View File

@@ -1,26 +1,21 @@
{{ $pages := .CurrentSection.Pages.ByDate.Reverse }} {{ $pages := .CurrentSection.Pages.ByDate.Reverse }}
<div class="postnav"> <div class="postnav">
{{ with $pages.Prev . }} {{ with $pages.Prev . }}
{{ if eq .Kind "page" }} <a href="{{ .RelPermalink }}">
<a href="{{ .RelPermalink }}"> <div class="previous">
<div class="previous"> <p class="caption">Previous Post</p>
<p class="caption">Previous Post</p> <p class="title">{{ .Title }}</p>
<p class="title">{{ .Title }}</p> </div>
</div> </a>
</a>
{{ end }}
{{ end }} {{ end }}
{{ with $pages.Next . }} {{ with $pages.Next . }}
{{ if eq .Kind "page" }} <a href="{{ .RelPermalink }}">
<a href="{{ .RelPermalink }}"> <div class="next">
<div class="next"> <p class="caption">Next Post</p>
<p class="caption">Next Post</p> <p class="title">{{ .Title }}</p>
<p class="title">{{ .Title }}</p> </div>
</div> </a>
</a>
{{ end }}
{{ end }} {{ end }}
</div> </div>

38
layouts/partials/gallery/list.html
View File

@@ -2,36 +2,34 @@
<div class="grid-sizer"></div> <div class="grid-sizer"></div>
{{ range sort .Pages "Date" "desc" }} {{ range sort .Pages "Date" "desc" }}
{{ if not .Params.private }} {{ if not .Params.private }}
{{ $hero := partial "components/hero/process.html" .Params.hero }} {{ $page := . }}
{{ if $hero.src }} {{ $imageData := partial "components/image/reflect.html" .Params.hero }}
{{ $data := partial "components/image/process.html" (dict "page" . "src" $hero.src) }} {{ with $imageData.image }}
{{- $caption := .Title -}}
{{- $title := $hero.title | default $caption | plainify -}}
{{- $alt := $hero.alt | default $title | plainify -}}
<div class="image grid-item"> <div class="image grid-item">
<a <a
href="{{- .RelPermalink -}}" href="{{- $page.RelPermalink -}}"
data-pswp-src="{{- $data.full.RelPermalink -}}" data-pswp-src="{{- .RelPermalink -}}"
data-pswp-width="{{- $data.full.Width -}}" data-pswp-width="{{- .Width -}}"
data-pswp-height="{{- $data.full.Height -}}" data-pswp-height="{{- .Height -}}"
class="pswp-image" class="pswp-image"
> >
<img <img
src="{{- $data.thumb.RelPermalink -}}" src="{{- .RelPermalink -}}"
width="{{- $data.thumb.Width -}}" width="{{- .Width -}}"
height="{{- $data.thumb.Height -}}" height="{{- .Height -}}"
loading="lazy" loading="lazy"
{{ with $title }}title="{{- . -}}"{{ end }} {{ with $imageData.title }}title="{{- . -}}"{{ end }}
{{ with $alt }}alt="{{- . -}}"{{ end }} {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
/> />
</a> </a>
<div class="pswp-caption-content"> <div class="pswp-caption-content">
<div> <div>
<a href="{{- .RelPermalink -}}">{{ $caption }}</a> {{ upper $page.Title }}
{{ partial "components/meta/index.html" . }} <div class="meta">
{{ $page.Date | time.Format ":date_medium" }}
&middot;
<a href="{{- $page.RelPermalink -}}">View Post</a>
</div>
</div> </div>
</div> </div>
</div> </div>

16
layouts/partials/posts/list.html
View File

@@ -1,13 +1,15 @@
<div class="list"> <div class="list">
{{ range sort .Pages "Date" "desc" }} {{ range sort .Pages "Date" "desc" }}
{{ if not .Params.private }} {{ if not .Params.private }}
<div class="post"> <a href="{{- .RelPermalink -}}" class="post">
<a href="{{- .RelPermalink -}}"> <h1 class="title">{{ .Title }}</h1>
<h1 class="title">{{ .Title }}</h1> <div class="summary">{{ .Summary | plainify }}</div>
<div class="summary">{{ .Summary | plainify }}</div> <div class="meta">
</a> <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
{{ partial "components/meta/index.html" . }} &middot;
</div> <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
</div>
</a>
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>