Compare commits
18 Commits
d9dcea0e41
...
main
Author | SHA1 | Date | |
---|---|---|---|
d313bdcc32
|
|||
19ce16fabb
|
|||
62882e5943
|
|||
c50910bcec
|
|||
e56e1e8e51
|
|||
3938d190d5
|
|||
e7d8ece65d
|
|||
d9a3c4b4a1
|
|||
8834c6dc21
|
|||
6353c33ae2
|
|||
08b8041c43
|
|||
9905066046
|
|||
4e37655a16
|
|||
de272212ca
|
|||
8fac4841d4
|
|||
c52639e38f
|
|||
57208ea1c8
|
|||
53705dcd34
|
@@ -4,6 +4,7 @@ import Masonry from "masonry-layout";
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
gallery: ".lightbox",
|
||||
children: ".pswp-image",
|
||||
bgOpacity: 1,
|
||||
showAnimationDuration: 300,
|
||||
hideAnimationDuration: 300,
|
||||
initialZoomLevel: "fit",
|
||||
|
21
assets/sass/blockquote.scss
Normal file
21
assets/sass/blockquote.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
blockquote {
|
||||
border-left: 0.15rem solid
|
||||
color-mix(in srgb, var(--text) 30%, var(--background));
|
||||
|
||||
.alert-heading {
|
||||
font-weight: bold;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.alert-emoji {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.5rem 0 0.5rem 0;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
423
assets/sass/code.scss
Normal file
423
assets/sass/code.scss
Normal file
@@ -0,0 +1,423 @@
|
||||
pre {
|
||||
color: var(--text);
|
||||
background-color: var(--background-50);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* PreWrapper */
|
||||
.chroma {
|
||||
.line.prompt::before {
|
||||
content: "$ ";
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.err {
|
||||
color: var(--accent-600);
|
||||
}
|
||||
|
||||
/* LineLink */
|
||||
.lnlinks {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* LineTableTD */
|
||||
.lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* LineTable */
|
||||
.lntable {
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* LineHighlight */
|
||||
.hl {
|
||||
background-color: var(--background-100);
|
||||
}
|
||||
|
||||
/* LineNumbersTable */
|
||||
.lnt {
|
||||
white-space: pre;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
}
|
||||
|
||||
/* LineNumbers */
|
||||
.ln {
|
||||
white-space: pre;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background-50));
|
||||
}
|
||||
|
||||
/* Line */
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Keyword */
|
||||
.k {
|
||||
color: var(--secondary-700);
|
||||
}
|
||||
|
||||
/* KeywordConstant */
|
||||
.kc {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* KeywordDeclaration */
|
||||
.kd {
|
||||
color: var(--secondary-700);
|
||||
}
|
||||
|
||||
/* KeywordNamespace */
|
||||
.kn {
|
||||
color: var(--secondary-700);
|
||||
}
|
||||
|
||||
/* KeywordPseudo */
|
||||
.kp {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* KeywordReserved */
|
||||
.kr {
|
||||
color: var(--secondary-700);
|
||||
}
|
||||
|
||||
/* KeywordType */
|
||||
.kt {
|
||||
color: var(--secondary-700);
|
||||
}
|
||||
|
||||
/* Name */
|
||||
.nc {
|
||||
color: var(--accent-700);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* NameConstant */
|
||||
.no {
|
||||
color: var(--primary-600);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* NameDecorator */
|
||||
.nd {
|
||||
color: var(--secondary-800);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* NameEntity */
|
||||
.ni {
|
||||
color: var(--accent-700);
|
||||
}
|
||||
|
||||
/* NameException */
|
||||
.ne {
|
||||
color: var(--accent-700);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* NameLabel */
|
||||
.nl {
|
||||
color: var(--primary-600);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* NameNamespace */
|
||||
.nn {
|
||||
color: var(--secondary-700);
|
||||
}
|
||||
|
||||
/* NameProperty */
|
||||
.py {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* NameTag */
|
||||
.nt {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* NameVariable */
|
||||
.nv {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* NameVariableClass */
|
||||
.vc {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* NameVariableGlobal */
|
||||
.vg {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* NameVariableInstance */
|
||||
.vi {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* NameVariableMagic */
|
||||
.vm {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* NameFunction */
|
||||
.nf {
|
||||
color: var(--secondary-800);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* NameFunctionMagic */
|
||||
.fm {
|
||||
color: var(--secondary-800);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Literal */
|
||||
.l {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralDate */
|
||||
.ld {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* LiteralString */
|
||||
.s {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralStringAffix */
|
||||
.sa {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* LiteralStringBacktick */
|
||||
.sb {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralStringChar */
|
||||
.sc {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralStringDelimiter */
|
||||
.dl {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* LiteralStringDoc */
|
||||
.sd {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralStringDouble */
|
||||
.s2 {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralStringEscape */
|
||||
.se {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* LiteralStringHeredoc */
|
||||
.sh {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* LiteralStringInterpol */
|
||||
.si {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralStringOther */
|
||||
.sx {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralStringRegex */
|
||||
.sr {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* LiteralStringSingle */
|
||||
.s1 {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralStringSymbol */
|
||||
.ss {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralNumber */
|
||||
.m {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralNumberBin */
|
||||
.mb {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralNumberFloat */
|
||||
.mf {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralNumberHex */
|
||||
.mh {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralNumberInteger */
|
||||
.mi {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralNumberIntegerLong */
|
||||
.il {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* LiteralNumberOct */
|
||||
.mo {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
/* Operator */
|
||||
.o {
|
||||
color: var(--secondary-700);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* OperatorWord */
|
||||
.ow {
|
||||
color: var(--secondary-700);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Comment */
|
||||
.c {
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background-50));
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CommentHashbang */
|
||||
.ch {
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background-50));
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CommentMultiline */
|
||||
.cm {
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background-50));
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CommentSingle */
|
||||
.c1 {
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background-50));
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CommentSpecial */
|
||||
.cs {
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background-50));
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CommentPreproc */
|
||||
.cp {
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background-50));
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CommentPreprocFile */
|
||||
.cpf {
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background-50));
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* GenericDeleted */
|
||||
.gd {
|
||||
color: var(--accent-900);
|
||||
background-color: var(--accent-300);
|
||||
}
|
||||
|
||||
/* GenericEmph */
|
||||
.ge {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* GenericError */
|
||||
.gr {
|
||||
color: var(--accent-600);
|
||||
}
|
||||
|
||||
/* GenericHeading */
|
||||
.gh {
|
||||
color: var(--primary-600);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* GenericInserted */
|
||||
.gi {
|
||||
color: var(--primary-800);
|
||||
background-color: var(--primary-200);
|
||||
}
|
||||
|
||||
/* GenericOutput */
|
||||
.go {
|
||||
color: color-mix(in srgb, var(--text) 70%, var(--background-50));
|
||||
}
|
||||
|
||||
/* GenericPrompt */
|
||||
.gp {
|
||||
color: color-mix(in srgb, var(--text) 70%, var(--background-50));
|
||||
}
|
||||
|
||||
/* GenericStrong */
|
||||
.gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* GenericSubheading */
|
||||
.gu {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
/* GenericTraceback */
|
||||
.gt {
|
||||
color: var(--secondary-700);
|
||||
}
|
||||
|
||||
/* GenericUnderline */
|
||||
.gl {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
@@ -1,143 +1,71 @@
|
||||
:root {
|
||||
--text: #050c0e;
|
||||
--background: #f1f8fa;
|
||||
--primary: #51a9c3;
|
||||
--secondary: #d88fb9;
|
||||
--accent: #ce7f71;
|
||||
}
|
||||
// https://www.realtimecolors.com/
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #f0f8fa;
|
||||
--background: #050d0f;
|
||||
--primary: #3c94af;
|
||||
--secondary: #712853;
|
||||
--accent: #8d3e30;
|
||||
}
|
||||
:root {
|
||||
--text: #0d1416;
|
||||
--background: #fdfdfd;
|
||||
--primary: #669ca3;
|
||||
--secondary: #a5abc9;
|
||||
--accent: #8d8cba;
|
||||
}
|
||||
|
||||
:root {
|
||||
--text-50: #ecf6f8;
|
||||
--text-100: #daecf1;
|
||||
--text-200: #b4dae4;
|
||||
--text-300: #8fc7d6;
|
||||
--text-400: #69b4c9;
|
||||
--text-500: #44a1bb;
|
||||
--text-600: #368196;
|
||||
--text-700: #296170;
|
||||
--text-800: #1b414b;
|
||||
--text-900: #0e2025;
|
||||
--text-950: #071013;
|
||||
--text-50: #eff4f6;
|
||||
--text-100: #dfe9ec;
|
||||
--text-200: #bfd4d9;
|
||||
--text-300: #9fbec6;
|
||||
--text-400: #7ea8b4;
|
||||
--text-500: #5e92a1;
|
||||
--text-600: #4b7581;
|
||||
--text-700: #395860;
|
||||
--text-800: #263b40;
|
||||
--text-900: #131d20;
|
||||
--text-950: #090f10;
|
||||
|
||||
--background-50: #ecf6f8;
|
||||
--background-100: #daecf1;
|
||||
--background-200: #b4dae4;
|
||||
--background-300: #8fc7d6;
|
||||
--background-400: #69b4c9;
|
||||
--background-500: #44a1bb;
|
||||
--background-600: #368196;
|
||||
--background-700: #296170;
|
||||
--background-800: #1b414b;
|
||||
--background-900: #0e2025;
|
||||
--background-950: #071013;
|
||||
--background-50: #f0f5f5;
|
||||
--background-100: #e0ebeb;
|
||||
--background-200: #c2d6d6;
|
||||
--background-300: #a3c2c2;
|
||||
--background-400: #85adad;
|
||||
--background-500: #669999;
|
||||
--background-600: #527a7a;
|
||||
--background-700: #3d5c5c;
|
||||
--background-800: #293d3d;
|
||||
--background-900: #141f1f;
|
||||
--background-950: #0a0f0f;
|
||||
|
||||
--primary-50: #ecf6f8;
|
||||
--primary-100: #d9ecf2;
|
||||
--primary-200: #b3d9e5;
|
||||
--primary-300: #8dc6d8;
|
||||
--primary-400: #67b4cb;
|
||||
--primary-500: #41a1be;
|
||||
--primary-600: #348198;
|
||||
--primary-700: #276072;
|
||||
--primary-800: #1a404c;
|
||||
--primary-900: #0d2026;
|
||||
--primary-950: #071013;
|
||||
--primary-50: #eff5f5;
|
||||
--primary-100: #dfeaec;
|
||||
--primary-200: #bfd6d9;
|
||||
--primary-300: #9fc1c6;
|
||||
--primary-400: #80adb3;
|
||||
--primary-500: #60989f;
|
||||
--primary-600: #4d7a80;
|
||||
--primary-700: #395b60;
|
||||
--primary-800: #263d40;
|
||||
--primary-900: #131e20;
|
||||
--primary-950: #0a0f10;
|
||||
|
||||
--secondary-50: #f8ecf3;
|
||||
--secondary-100: #f2d9e8;
|
||||
--secondary-200: #e4b4d0;
|
||||
--secondary-300: #d78eb9;
|
||||
--secondary-400: #ca68a1;
|
||||
--secondary-500: #bd428a;
|
||||
--secondary-600: #97356e;
|
||||
--secondary-700: #712853;
|
||||
--secondary-800: #4b1b37;
|
||||
--secondary-900: #260d1c;
|
||||
--secondary-950: #13070e;
|
||||
--secondary-50: #eff0f5;
|
||||
--secondary-100: #dfe1ec;
|
||||
--secondary-200: #bfc4d9;
|
||||
--secondary-300: #9fa6c6;
|
||||
--secondary-400: #8088b3;
|
||||
--secondary-500: #606a9f;
|
||||
--secondary-600: #4d5580;
|
||||
--secondary-700: #394060;
|
||||
--secondary-800: #262b40;
|
||||
--secondary-900: #131520;
|
||||
--secondary-950: #0a0b10;
|
||||
|
||||
--accent-50: #f8eeec;
|
||||
--accent-100: #f2ddd9;
|
||||
--accent-200: #e5bbb3;
|
||||
--accent-300: #d8988d;
|
||||
--accent-400: #cb7667;
|
||||
--accent-500: #be5441;
|
||||
--accent-600: #984334;
|
||||
--accent-700: #723227;
|
||||
--accent-800: #4c221a;
|
||||
--accent-900: #26110d;
|
||||
--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;
|
||||
}
|
||||
--accent-50: #efeff5;
|
||||
--accent-100: #dfdfec;
|
||||
--accent-200: #c0bfd9;
|
||||
--accent-300: #a09fc6;
|
||||
--accent-400: #8080b3;
|
||||
--accent-500: #61609f;
|
||||
--accent-600: #4d4d80;
|
||||
--accent-700: #3a3960;
|
||||
--accent-800: #272640;
|
||||
--accent-900: #131320;
|
||||
--accent-950: #0a0a10;
|
||||
}
|
||||
|
@@ -13,7 +13,7 @@ a {
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--text-700);
|
||||
color: var(--text-800);
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -22,14 +22,27 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0 1rem 0;
|
||||
border: none;
|
||||
height: 0.15rem;
|
||||
background-color: color-mix(in srgb, var(--text) 30%, var(--background));
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1rem 0 1rem 0;
|
||||
padding: 0.5rem 1rem 0.5rem 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0.5rem;
|
||||
min-height: calc(100vh - 1rem);
|
||||
@@ -41,3 +54,43 @@ body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1.5rem 0 1.5rem 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.5rem 0 0.5rem 0;
|
||||
}
|
||||
|
||||
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
Normal file
55
assets/sass/details.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
@@ -13,7 +13,7 @@
|
||||
|
||||
font-size: 0.85rem;
|
||||
|
||||
color: color-mix(in srgb, var(--text) 30%, var(--background));
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background));
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
@@ -36,6 +36,7 @@
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
@@ -3,25 +3,10 @@
|
||||
margin: 0 auto;
|
||||
padding: 2rem 2rem 0 2rem;
|
||||
|
||||
h1 {
|
||||
.title {
|
||||
margin: 0;
|
||||
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 {
|
||||
@@ -30,6 +15,6 @@
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
.hero {
|
||||
padding: 1rem 1em 0 1rem;
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
}
|
||||
}
|
||||
|
@@ -10,7 +10,7 @@ img {
|
||||
|
||||
figcaption {
|
||||
text-align: center;
|
||||
padding-top: 0.5rem;
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background));
|
||||
padding-top: 1rem;
|
||||
color: color-mix(in srgb, var(--text) 70%, var(--background));
|
||||
}
|
||||
}
|
||||
|
@@ -1,94 +1,43 @@
|
||||
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 {
|
||||
.post {
|
||||
display: block;
|
||||
|
||||
> a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
color: var(--text-800);
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 4rem;
|
||||
margin: 4rem 0 4rem 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 0.8rem;
|
||||
|
||||
.date {
|
||||
color: var(--text-600);
|
||||
.summary {
|
||||
margin: 0.5rem 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background));
|
||||
.heading-anchor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post:hover .title,
|
||||
.post:hover .summary {
|
||||
color: var(--text-800);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
.list {
|
||||
.post {
|
||||
&:not(:first-child) {
|
||||
margin-top: 2rem;
|
||||
margin: 2rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -8,13 +8,19 @@ $width-wide: 75rem;
|
||||
|
||||
@import "heading";
|
||||
@import "image";
|
||||
@import "blockquote";
|
||||
@import "code";
|
||||
@import "table";
|
||||
@import "meta";
|
||||
|
||||
@import "details";
|
||||
@import "list";
|
||||
@import "gallery";
|
||||
|
||||
@import "header";
|
||||
@import "content";
|
||||
@import "hero";
|
||||
@import "content";
|
||||
@import "postnav";
|
||||
@import "footer";
|
||||
|
||||
@import "photoswipe";
|
||||
|
20
assets/sass/meta.scss
Normal file
20
assets/sass/meta.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
.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));
|
||||
}
|
||||
}
|
@@ -18,13 +18,13 @@
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
height: auto;
|
||||
padding: 1rem 2rem;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
|
||||
.meta {
|
||||
font-size: 0.7rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
|
59
assets/sass/postnav.scss
Normal file
59
assets/sass/postnav.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
.postnav {
|
||||
max-width: $width-content;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
|
||||
a {
|
||||
flex: 50%;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--text-800);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.5rem 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title {
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.next {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.previous .caption::before {
|
||||
content: "‹ ";
|
||||
}
|
||||
|
||||
.next .caption::after {
|
||||
content: " ›";
|
||||
}
|
||||
}
|
||||
|
||||
.content + .postnav {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
.postnav {
|
||||
padding: 1rem;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
}
|
30
assets/sass/table.scss
Normal file
30
assets/sass/table.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead th {
|
||||
border-bottom: 0.1rem solid
|
||||
color-mix(in srgb, var(--text) 20%, var(--background));
|
||||
}
|
||||
|
||||
tr + tr td {
|
||||
border-top: 0.1rem solid
|
||||
color-mix(in srgb, var(--text) 10%, var(--background));
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem;
|
||||
border-right: 0.1rem solid
|
||||
color-mix(in srgb, var(--text) 10%, var(--background));
|
||||
}
|
||||
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
26
layouts/_default/_markup/render-blockquote.html
Normal file
26
layouts/_default/_markup/render-blockquote.html
Normal file
@@ -0,0 +1,26 @@
|
||||
{{ $emoji := dict
|
||||
"caution" ":exclamation:"
|
||||
"warning" ":warning:"
|
||||
"important" ":information_source:"
|
||||
"tip" ":bulb:"
|
||||
}}
|
||||
{{- if eq .Type "alert" -}}
|
||||
<blockquote class="alert alert-{{ .AlertType }}">
|
||||
<p class="alert-heading">
|
||||
<span class="alert-emoji">
|
||||
{{- transform.Emojify (index $emoji .AlertType) -}}
|
||||
</span>
|
||||
{{ if .AlertTitle }}
|
||||
{{- .AlertTitle -}}
|
||||
{{ else }}
|
||||
{{- .AlertType | title -}}
|
||||
{{ end }}
|
||||
</p>
|
||||
{{- .Text -}}
|
||||
</blockquote>
|
||||
{{- else -}}
|
||||
<blockquote>
|
||||
{{- .Text -}}
|
||||
</blockquote>
|
||||
{{- end -}}
|
||||
{{- /* chomp trailing newline */ -}}
|
4
layouts/_default/_markup/render-codeblock-bash.html
Normal file
4
layouts/_default/_markup/render-codeblock-bash.html
Normal file
@@ -0,0 +1,4 @@
|
||||
{{ $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 }}
|
@@ -2,3 +2,4 @@
|
||||
{{ .Text | safeHTML }}
|
||||
<a href="#{{- .Anchor | safeURL -}}" class="heading-anchor">#</a>
|
||||
</h{{ .Level }}>
|
||||
{{- /* chomp trailing newline */ -}}
|
||||
|
@@ -1,6 +1,3 @@
|
||||
{{ partial "components/image/index.html" (dict
|
||||
"src" .Destination
|
||||
"caption" .Text
|
||||
"alt" .Title
|
||||
)
|
||||
}}
|
||||
{{ $data := partial "components/image/process.html" (dict "page" .Page "src" .Destination) }}
|
||||
{{ partial "components/image/index.html" (merge $data (dict "caption" .Text "title" .Title)) }}
|
||||
{{- /* chomp trailing newline */ -}}
|
||||
|
@@ -5,5 +5,6 @@
|
||||
target="_blank" rel="noopener"
|
||||
{{ end }}
|
||||
>
|
||||
{{ .Text | safeHTML }}
|
||||
{{- .Text -}}
|
||||
</a>
|
||||
{{- /* chomp trailing newline */ -}}
|
||||
|
41
layouts/_default/_markup/render-table.html
Normal file
41
layouts/_default/_markup/render-table.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<div class="table-wrapper">
|
||||
<table
|
||||
{{- range $k, $v := .Attributes }}
|
||||
{{- if $v }}
|
||||
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
>
|
||||
<thead>
|
||||
{{- range .THead }}
|
||||
<tr>
|
||||
{{- range . }}
|
||||
<th
|
||||
{{- with .Alignment }}
|
||||
{{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
|
||||
{{- end -}}
|
||||
>
|
||||
{{- .Text -}}
|
||||
</th>
|
||||
{{- end }}
|
||||
</tr>
|
||||
{{- end }}
|
||||
</thead>
|
||||
<tbody>
|
||||
{{- range .TBody }}
|
||||
<tr>
|
||||
{{- range . }}
|
||||
<td
|
||||
{{- with .Alignment }}
|
||||
{{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
|
||||
{{- end -}}
|
||||
>
|
||||
{{- .Text -}}
|
||||
</td>
|
||||
{{- end }}
|
||||
</tr>
|
||||
{{- end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{- /* chomp trailing newline */ -}}
|
@@ -1,8 +1,8 @@
|
||||
{{ define "main" }}
|
||||
{{ $withMeta := default true .Params.withMeta }}
|
||||
<main class="{{- if $withMeta -}}with-meta{{- end -}}">
|
||||
{{ if $withMeta }}
|
||||
{{ partial "components/list/meta.html" . }}
|
||||
{{ $details := default true .Params.details }}
|
||||
<main class="{{- if $details -}}with-details{{- end -}}">
|
||||
{{ if $details }}
|
||||
{{ partial "components/list/details.html" . }}
|
||||
{{ end }}
|
||||
<div class="content">
|
||||
{{ partial "posts/list.html" . }}
|
||||
|
@@ -1,8 +1,13 @@
|
||||
{{ define "main" }}
|
||||
<main>
|
||||
{{ partial "components/hero/default.html" . }}
|
||||
{{ partial "components/hero/index.html" . }}
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
|
||||
{{ if (default true .Params.comments) }}
|
||||
{{ partial "comments.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ partial "components/postnav/index.html" . }}
|
||||
</main>
|
||||
{{ end }}
|
||||
|
5
layouts/_shortcodes/contents.html
Normal file
5
layouts/_shortcodes/contents.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<details class="toc">
|
||||
<summary>Post Contents</summary>
|
||||
{{ .Page.TableOfContents }}
|
||||
</details>
|
||||
{{- /* chomp trailing newline */ -}}
|
25
layouts/_shortcodes/exif-image.html
Normal file
25
layouts/_shortcodes/exif-image.html
Normal file
@@ -0,0 +1,25 @@
|
||||
{{ $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 */ -}}
|
1
layouts/_shortcodes/sub.html
Normal file
1
layouts/_shortcodes/sub.html
Normal file
@@ -0,0 +1 @@
|
||||
<sub>{{ .Get 0 | markdownify }}</sub> {{- /* chomp trailing newline */ -}}
|
1
layouts/_shortcodes/sup.html
Normal file
1
layouts/_shortcodes/sup.html
Normal file
@@ -0,0 +1 @@
|
||||
<sup>{{ .Get 0 | markdownify }}</sup> {{- /* chomp trailing newline */ -}}
|
@@ -1,10 +1,16 @@
|
||||
{{ define "main" }}
|
||||
{{ $withMeta := default true .Params.withMeta }}
|
||||
<main class="{{- if $withMeta -}}with-meta{{- end -}}">
|
||||
{{ if $withMeta }}
|
||||
{{ partial "components/list/meta.html" . }}
|
||||
{{ $details := default true .Params.details }}
|
||||
<main class="{{- if $details -}}with-details{{- end -}}">
|
||||
{{ if $details }}
|
||||
{{ partial "components/list/details.html" . }}
|
||||
{{ end }}
|
||||
<div class="{{- if $withMeta -}}content{{- else -}}content wide{{- end -}}">
|
||||
<div
|
||||
class="{{- if $details -}}
|
||||
content
|
||||
{{- else -}}
|
||||
content wide
|
||||
{{- end -}}"
|
||||
>
|
||||
{{ partial "gallery/list.html" . }}
|
||||
</div>
|
||||
</main>
|
||||
|
0
layouts/partials/comments.html
Normal file
0
layouts/partials/comments.html
Normal file
@@ -1,9 +0,0 @@
|
||||
<section class="hero">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="meta">
|
||||
<span class="date">{{ .Date | time.Format ":date_medium" }}</span>
|
||||
·
|
||||
<span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
|
||||
</div>
|
||||
{{ partial "components/image/index.html" .Params.hero }}
|
||||
</section>
|
17
layouts/partials/components/hero/index.html
Normal file
17
layouts/partials/components/hero/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<section class="hero">
|
||||
<h1 class="title">{{ .Title }}</h1>
|
||||
{{ partial "components/meta/index.html" . }}
|
||||
|
||||
{{ $hero := partial "components/hero/process.html" .Params.hero }}
|
||||
{{ if $hero.src }}
|
||||
{{ $data := partial "components/image/process.html" (dict "page" .Page "src" $hero.src) }}
|
||||
|
||||
{{ $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>
|
17
layouts/partials/components/hero/process.html
Normal file
17
layouts/partials/components/hero/process.html
Normal file
@@ -0,0 +1,17 @@
|
||||
{{- $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
Normal file
22
layouts/partials/components/image/exif.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{{ $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 }}
|
@@ -1,24 +1,26 @@
|
||||
{{ $imageData := partial "components/image/reflect.html" . }}
|
||||
{{- with $imageData.image -}}
|
||||
<figure class="captioned-image lightbox">
|
||||
{{- $caption := .caption | default "" -}}
|
||||
{{- $title := .title | default $caption | plainify -}}
|
||||
{{- $alt := .alt | default $title | plainify -}}
|
||||
|
||||
|
||||
<figure class="captioned-image lightbox">
|
||||
<a
|
||||
href="{{- .RelPermalink -}}"
|
||||
data-pswp-src="{{- .RelPermalink -}}"
|
||||
data-pswp-width="{{- .Width -}}"
|
||||
data-pswp-height="{{- .Height -}}"
|
||||
href="{{- .full.RelPermalink -}}"
|
||||
data-pswp-src="{{- .full.RelPermalink -}}"
|
||||
data-pswp-width="{{- .full.Width -}}"
|
||||
data-pswp-height="{{- .full.Height -}}"
|
||||
class="pswp-image"
|
||||
>
|
||||
<img
|
||||
src="{{- .RelPermalink -}}"
|
||||
width="{{- .Width -}}"
|
||||
height="{{- .Height -}}"
|
||||
src="{{- .thumb.RelPermalink -}}"
|
||||
width="{{- .thumb.Width -}}"
|
||||
height="{{- .thumb.Height -}}"
|
||||
loading="lazy"
|
||||
{{ with $imageData.title }}title="{{- . -}}"{{ end }}
|
||||
{{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
|
||||
{{ with $title }}title="{{- . -}}"{{ end }}
|
||||
{{ with $alt }}alt="{{- . -}}"{{ end }}
|
||||
/>
|
||||
</a>
|
||||
{{ with $imageData.caption }}
|
||||
<figcaption>{{ . }}</figcaption>
|
||||
{{ with $caption }}
|
||||
<figcaption>{{ . | safeHTML }}</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
{{- end -}}
|
||||
</figure>
|
||||
|
27
layouts/partials/components/image/process.html
Normal file
27
layouts/partials/components/image/process.html
Normal file
@@ -0,0 +1,27 @@
|
||||
{{- $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 -}}
|
@@ -1,31 +0,0 @@
|
||||
{{- $input := . -}}
|
||||
|
||||
{{- $src := $input -}}
|
||||
{{- $caption := "" -}}
|
||||
{{- $title := "" -}}
|
||||
{{- $alt := "" -}}
|
||||
|
||||
{{- if reflect.IsMap $input -}}
|
||||
{{- $src = $input.src | default "" -}}
|
||||
{{- $caption = $input.caption | default "" -}}
|
||||
{{- $title = $input.title | default $caption | default "" -}}
|
||||
{{- $alt = $input.alt | default $title | default "" -}}
|
||||
{{- end -}}
|
||||
|
||||
{{ $result := dict "image" nil "caption" $caption "title" $title "alt" $alt }}
|
||||
|
||||
{{- if $src -}}
|
||||
{{- $isRemote := strings.HasPrefix $src "http" -}}
|
||||
{{- $image := "" -}}
|
||||
|
||||
{{- if $isRemote -}}
|
||||
{{- $remote := resources.GetRemote $src -}}
|
||||
{{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
|
||||
{{- else -}}
|
||||
{{- $image = resources.Get $src -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $result = (dict "image" $image "caption" $caption "title" $title "alt" $alt) -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- return $result -}}
|
@@ -1,5 +1,5 @@
|
||||
<section class="meta">
|
||||
<h1>{{ .Page.Title }}</h1>
|
||||
<section class="details">
|
||||
<h1 class="title">{{ .Page.Title }}</h1>
|
||||
<p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
|
||||
{{ .Content }}
|
||||
</section>
|
22
layouts/partials/components/meta/index.html
Normal file
22
layouts/partials/components/meta/index.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="meta">
|
||||
<span class="date">{{ .Date | time.Format ":date_medium" }}</span>
|
||||
|
||||
{{ if eq .Kind "page" }}
|
||||
{{ range .Params.tags }}
|
||||
·
|
||||
<a href="/tags/{{ . | urlize }}" class="tag">{{ . }}</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if ge .ReadingTime 1 }}
|
||||
·
|
||||
<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>
|
26
layouts/partials/components/postnav/index.html
Normal file
26
layouts/partials/components/postnav/index.html
Normal file
@@ -0,0 +1,26 @@
|
||||
{{ $pages := .CurrentSection.Pages.ByDate.Reverse }}
|
||||
|
||||
|
||||
<div class="postnav">
|
||||
{{ with $pages.Prev . }}
|
||||
{{ if eq .Kind "page" }}
|
||||
<a href="{{ .RelPermalink }}">
|
||||
<div class="previous">
|
||||
<p class="caption">Previous Post</p>
|
||||
<p class="title">{{ .Title }}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $pages.Next . }}
|
||||
{{ if eq .Kind "page" }}
|
||||
<a href="{{ .RelPermalink }}">
|
||||
<div class="next">
|
||||
<p class="caption">Next Post</p>
|
||||
<p class="title">{{ .Title }}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
@@ -2,34 +2,36 @@
|
||||
<div class="grid-sizer"></div>
|
||||
{{ range sort .Pages "Date" "desc" }}
|
||||
{{ if not .Params.private }}
|
||||
{{ $page := . }}
|
||||
{{ $imageData := partial "components/image/reflect.html" .Params.hero }}
|
||||
{{ with $imageData.image }}
|
||||
{{ $hero := partial "components/hero/process.html" .Params.hero }}
|
||||
{{ if $hero.src }}
|
||||
{{ $data := partial "components/image/process.html" (dict "page" . "src" $hero.src) }}
|
||||
|
||||
{{- $caption := .Title -}}
|
||||
{{- $title := $hero.title | default $caption | plainify -}}
|
||||
{{- $alt := $hero.alt | default $title | plainify -}}
|
||||
|
||||
|
||||
<div class="image grid-item">
|
||||
<a
|
||||
href="{{- $page.RelPermalink -}}"
|
||||
data-pswp-src="{{- .RelPermalink -}}"
|
||||
data-pswp-width="{{- .Width -}}"
|
||||
data-pswp-height="{{- .Height -}}"
|
||||
href="{{- .RelPermalink -}}"
|
||||
data-pswp-src="{{- $data.full.RelPermalink -}}"
|
||||
data-pswp-width="{{- $data.full.Width -}}"
|
||||
data-pswp-height="{{- $data.full.Height -}}"
|
||||
class="pswp-image"
|
||||
>
|
||||
<img
|
||||
src="{{- .RelPermalink -}}"
|
||||
width="{{- .Width -}}"
|
||||
height="{{- .Height -}}"
|
||||
src="{{- $data.thumb.RelPermalink -}}"
|
||||
width="{{- $data.thumb.Width -}}"
|
||||
height="{{- $data.thumb.Height -}}"
|
||||
loading="lazy"
|
||||
{{ with $imageData.title }}title="{{- . -}}"{{ end }}
|
||||
{{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
|
||||
{{ with $title }}title="{{- . -}}"{{ end }}
|
||||
{{ with $alt }}alt="{{- . -}}"{{ end }}
|
||||
/>
|
||||
</a>
|
||||
<div class="pswp-caption-content">
|
||||
<div>
|
||||
{{ upper $page.Title }}
|
||||
<div class="meta">
|
||||
{{ $page.Date | time.Format ":date_medium" }}
|
||||
·
|
||||
<a href="{{- $page.RelPermalink -}}">View Post</a>
|
||||
</div>
|
||||
<a href="{{- .RelPermalink -}}">{{ $caption }}</a>
|
||||
{{ partial "components/meta/index.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@@ -1,15 +1,13 @@
|
||||
<div class="list">
|
||||
{{ range sort .Pages "Date" "desc" }}
|
||||
{{ if not .Params.private }}
|
||||
<a href="{{- .RelPermalink -}}" class="post">
|
||||
<div class="post">
|
||||
<a href="{{- .RelPermalink -}}">
|
||||
<h1 class="title">{{ .Title }}</h1>
|
||||
<div class="summary">{{ .Summary }}</div>
|
||||
<div class="meta">
|
||||
<span class="date">{{ .Date | time.Format ":date_medium" }}</span>
|
||||
·
|
||||
<span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
|
||||
</div>
|
||||
<div class="summary">{{ .Summary | plainify }}</div>
|
||||
</a>
|
||||
{{ partial "components/meta/index.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user