Compare commits
2 Commits
main
...
0af676766a
| Author | SHA1 | Date | |
|---|---|---|---|
|
0af676766a
|
|||
|
61650e9c0f
|
3
.gitignore
vendored
3
.gitignore
vendored
@@ -12,6 +12,3 @@ hugo.linux
|
||||
|
||||
# Temporary lock file while building
|
||||
/.hugo_build.lock
|
||||
|
||||
# JavaScript
|
||||
node_modules/
|
||||
|
||||
23
Makefile
23
Makefile
@@ -1,8 +1,8 @@
|
||||
.PHONY: default update update-inter node-modules format
|
||||
.PHONY: default update update-inter update-photoswipe format
|
||||
|
||||
default: node-modules
|
||||
default:
|
||||
|
||||
update: update-inter format
|
||||
update: update-inter update-photoswipe format
|
||||
|
||||
update-inter:
|
||||
@tmp_zip=$$(mktemp) && \
|
||||
@@ -16,10 +16,19 @@ update-inter:
|
||||
cp -r $$tmp_dir/web/{InterVariable*.woff2,Inter-*.woff2} static/font/inter && \
|
||||
rm -rf $$tmp_zip $$tmp_dir
|
||||
|
||||
node-modules:
|
||||
npm install && \
|
||||
cd ../.. && \
|
||||
ln -s ./themes/caldwell/node_modules node_modules
|
||||
update-photoswipe:
|
||||
@tmp_zip=$$(mktemp) && \
|
||||
tmp_dir=$$(mktemp -d) && \
|
||||
curl -s https://api.github.com/repos/dimsemenov/photoswipe/releases/latest \
|
||||
| jq -r '.zipball_url' \
|
||||
| xargs curl -Ls -o $$tmp_zip && \
|
||||
unzip -q -o $$tmp_zip -d $$tmp_dir && \
|
||||
rm -rf assets/js/photoswipe assets/css/photoswipe && \
|
||||
mkdir -p assets/js/photoswipe assets/css/photoswipe && \
|
||||
cp $$tmp_dir/*PhotoSwipe*/dist/photoswipe-lightbox.esm.js assets/js/photoswipe && \
|
||||
cp $$tmp_dir/*PhotoSwipe*/dist/photoswipe.esm.js assets/js/photoswipe && \
|
||||
cp $$tmp_dir/*PhotoSwipe*/dist/photoswipe.css assets/css/photoswipe && \
|
||||
rm -rf $$tmp_zip $$tmp_dir
|
||||
|
||||
format:
|
||||
nix fmt
|
||||
|
||||
417
assets/css/photoswipe/photoswipe.css
Normal file
417
assets/css/photoswipe/photoswipe.css
Normal file
@@ -0,0 +1,417 @@
|
||||
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
|
||||
|
||||
.pswp {
|
||||
--pswp-bg: #000;
|
||||
--pswp-placeholder-bg: #222;
|
||||
|
||||
--pswp-root-z-index: 100000;
|
||||
|
||||
--pswp-preloader-color: rgba(79, 79, 79, 0.4);
|
||||
--pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
|
||||
|
||||
/* defined via js:
|
||||
--pswp-transition-duration: 333ms; */
|
||||
|
||||
--pswp-icon-color: #fff;
|
||||
--pswp-icon-color-secondary: #4f4f4f;
|
||||
--pswp-icon-stroke-color: #4f4f4f;
|
||||
--pswp-icon-stroke-width: 2px;
|
||||
|
||||
--pswp-error-text-color: var(--pswp-icon-color);
|
||||
}
|
||||
|
||||
/*
|
||||
Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
|
||||
*/
|
||||
|
||||
.pswp {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: var(--pswp-root-z-index);
|
||||
display: none;
|
||||
touch-action: none;
|
||||
outline: 0;
|
||||
opacity: 0.003;
|
||||
contain: layout style size;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* Prevents focus outline on the root element,
|
||||
(it may be focused initially) */
|
||||
.pswp:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.pswp * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pswp img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.pswp--open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp,
|
||||
.pswp__bg {
|
||||
transform: translateZ(0);
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.pswp__bg {
|
||||
opacity: 0.005;
|
||||
background: var(--pswp-bg);
|
||||
}
|
||||
|
||||
.pswp,
|
||||
.pswp__scroll-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp__scroll-wrap,
|
||||
.pswp__bg,
|
||||
.pswp__container,
|
||||
.pswp__item,
|
||||
.pswp__content,
|
||||
.pswp__img,
|
||||
.pswp__zoom-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pswp__img,
|
||||
.pswp__zoom-wrap {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
|
||||
cursor: move;
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* :active to override grabbing cursor */
|
||||
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
|
||||
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
|
||||
.pswp__img {
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
/* Prevent selection and tap highlights */
|
||||
.pswp__container,
|
||||
.pswp__img,
|
||||
.pswp__button,
|
||||
.pswp__counter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pswp__item {
|
||||
/* z-index for fade transition */
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp__hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Allow to click through pswp__content element, but not its children */
|
||||
.pswp__content {
|
||||
pointer-events: none;
|
||||
}
|
||||
.pswp__content > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
PhotoSwipe UI
|
||||
|
||||
*/
|
||||
|
||||
/*
|
||||
Error message appears when image is not loaded
|
||||
(JS option errorMsg controls markup)
|
||||
*/
|
||||
.pswp__error-msg-container {
|
||||
display: grid;
|
||||
}
|
||||
.pswp__error-msg {
|
||||
margin: auto;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
color: var(--pswp-error-text-color);
|
||||
}
|
||||
|
||||
/*
|
||||
class pswp__hide-on-close is applied to elements that
|
||||
should hide (for example fade out) when PhotoSwipe is closed
|
||||
and show (for example fade in) when PhotoSwipe is opened
|
||||
*/
|
||||
.pswp .pswp__hide-on-close {
|
||||
opacity: 0.005;
|
||||
will-change: opacity;
|
||||
transition: opacity var(--pswp-transition-duration)
|
||||
cubic-bezier(0.4, 0, 0.22, 1);
|
||||
z-index: 10; /* always overlap slide content */
|
||||
pointer-events: none; /* hidden elements should not be clickable */
|
||||
}
|
||||
|
||||
/* class pswp--ui-visible is added when opening or closing transition starts */
|
||||
.pswp--ui-visible .pswp__hide-on-close {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* <button> styles, including css reset */
|
||||
.pswp__button {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
opacity: 0.85;
|
||||
-webkit-appearance: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.pswp__button:hover,
|
||||
.pswp__button:active,
|
||||
.pswp__button:focus {
|
||||
transition: none;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__button:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.pswp__icn {
|
||||
fill: var(--pswp-icon-color);
|
||||
color: var(--pswp-icon-color-secondary);
|
||||
}
|
||||
|
||||
.pswp__icn {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 9px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pswp__icn-shadow {
|
||||
stroke: var(--pswp-icon-stroke-color);
|
||||
stroke-width: var(--pswp-icon-stroke-width);
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.pswp__icn:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
div element that matches size of large image,
|
||||
large image loads on top of it,
|
||||
used when msrc is not provided
|
||||
*/
|
||||
div.pswp__img--placeholder,
|
||||
.pswp__img--with-bg {
|
||||
background: var(--pswp-placeholder-bg);
|
||||
}
|
||||
|
||||
.pswp__top-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
z-index: 10;
|
||||
|
||||
/* allow events to pass through top bar itself */
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.pswp__top-bar > * {
|
||||
pointer-events: auto;
|
||||
/* this makes transition significantly more smooth,
|
||||
even though inner elements are not animated */
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Close button
|
||||
|
||||
*/
|
||||
.pswp__button--close {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Arrow buttons
|
||||
|
||||
*/
|
||||
.pswp__button--arrow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 75px;
|
||||
height: 100px;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
.pswp__button--arrow:disabled {
|
||||
display: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.pswp__button--arrow .pswp__icn {
|
||||
top: 50%;
|
||||
margin-top: -30px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.pswp--one-slide .pswp__button--arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* hide arrows on touch screens */
|
||||
.pswp--touch .pswp__button--arrow {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* show arrows only after mouse was used */
|
||||
.pswp--has_mouse .pswp__button--arrow {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--prev {
|
||||
right: auto;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--next {
|
||||
right: 0px;
|
||||
}
|
||||
.pswp__button--arrow--next .pswp__icn {
|
||||
left: auto;
|
||||
right: 14px;
|
||||
/* flip horizontally */
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Zoom button
|
||||
|
||||
*/
|
||||
.pswp__button--zoom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp--zoom-allowed .pswp__button--zoom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* "+" => "-" */
|
||||
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Loading indicator
|
||||
|
||||
*/
|
||||
.pswp__preloader {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.pswp__preloader .pswp__icn {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s linear;
|
||||
animation: pswp-clockwise 600ms linear infinite;
|
||||
}
|
||||
|
||||
.pswp__preloader--active .pswp__icn {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
@keyframes pswp-clockwise {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"1 of 10" counter
|
||||
|
||||
*/
|
||||
.pswp__counter {
|
||||
height: 30px;
|
||||
margin-top: 15px;
|
||||
margin-inline-start: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
color: var(--pswp-icon-color);
|
||||
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.pswp--one-slide .pswp__counter {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
||||
import Masonry from "masonry-layout";
|
||||
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
gallery: ".lightbox",
|
||||
children: ".pswp-image",
|
||||
bgOpacity: 1,
|
||||
showAnimationDuration: 300,
|
||||
hideAnimationDuration: 300,
|
||||
initialZoomLevel: "fit",
|
||||
pswpModule: () => import("photoswipe"),
|
||||
paddingFn: () => {
|
||||
const captionHeight =
|
||||
5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
return {
|
||||
top: captionHeight,
|
||||
bottom: captionHeight,
|
||||
left: 0,
|
||||
right: 0,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
lightbox.on("uiRegister", function () {
|
||||
lightbox.pswp.ui.registerElement({
|
||||
name: "caption",
|
||||
order: 9,
|
||||
isButton: false,
|
||||
appendTo: "root",
|
||||
onInit: (el, _) => {
|
||||
lightbox.pswp.on("change", () => {
|
||||
const element = lightbox.pswp.currSlide.data.element;
|
||||
el.innerHTML =
|
||||
element?.parentElement.querySelector(".pswp-caption-content")
|
||||
?.innerHTML || "";
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
lightbox.init();
|
||||
|
||||
const masonryContainers = document.querySelectorAll(".masonry");
|
||||
masonryContainers.forEach((container) => {
|
||||
new Masonry(container, {
|
||||
itemSelector: ".grid-item",
|
||||
columnWidth: ".grid-sizer",
|
||||
percentPosition: true,
|
||||
});
|
||||
});
|
||||
10
assets/js/photoswipe.js
Normal file
10
assets/js/photoswipe.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import PhotoSwipeLightbox from "js/photoswipe/photoswipe-lightbox.esm.js";
|
||||
|
||||
new PhotoSwipeLightbox({
|
||||
gallery: ".gallery",
|
||||
children: "a",
|
||||
showAnimationDuration: 300,
|
||||
hideAnimationDuration: 300,
|
||||
initialZoomLevel: "fit",
|
||||
pswpModule: () => import("js/photoswipe/photoswipe.esm.js"),
|
||||
}).init();
|
||||
2075
assets/js/photoswipe/photoswipe-lightbox.esm.js
Normal file
2075
assets/js/photoswipe/photoswipe-lightbox.esm.js
Normal file
File diff suppressed because it is too large
Load Diff
7335
assets/js/photoswipe/photoswipe.esm.js
Normal file
7335
assets/js/photoswipe/photoswipe.esm.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,21 +0,0 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,423 +0,0 @@
|
||||
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,71 +1,143 @@
|
||||
// https://www.realtimecolors.com/
|
||||
|
||||
:root {
|
||||
--text: #0d1416;
|
||||
--background: #fdfdfd;
|
||||
--primary: #669ca3;
|
||||
--secondary: #a5abc9;
|
||||
--accent: #8d8cba;
|
||||
--text: #050c0e;
|
||||
--background: #f1f8fa;
|
||||
--primary: #51a9c3;
|
||||
--secondary: #d88fb9;
|
||||
--accent: #ce7f71;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #f0f8fa;
|
||||
--background: #050d0f;
|
||||
--primary: #3c94af;
|
||||
--secondary: #712853;
|
||||
--accent: #8d3e30;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--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;
|
||||
--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;
|
||||
|
||||
--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;
|
||||
--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;
|
||||
|
||||
--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;
|
||||
--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;
|
||||
|
||||
--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;
|
||||
--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;
|
||||
|
||||
--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;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,37 +12,20 @@ a {
|
||||
color: var(--text-600);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--text-800);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
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);
|
||||
@@ -54,43 +37,3 @@ 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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,10 +4,6 @@
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.content.wide {
|
||||
max-width: $width-wide;
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
.content {
|
||||
padding: 1rem;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -13,14 +13,15 @@
|
||||
|
||||
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 {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--text-800);
|
||||
color: var(--text-900);
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
@@ -36,7 +37,6 @@
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
.gallery {
|
||||
margin: -0.75rem;
|
||||
|
||||
.grid-sizer {
|
||||
width: calc(25% - 1.5rem);
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: calc(25% - 1.5rem);
|
||||
margin: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $width-content) {
|
||||
.gallery {
|
||||
margin: -0.5rem;
|
||||
|
||||
.grid-sizer {
|
||||
width: calc(33% - 1rem);
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: calc(33% - 1rem);
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
.gallery {
|
||||
margin: -0.375rem;
|
||||
|
||||
.grid-sizer {
|
||||
width: calc(50% - 0.75rem);
|
||||
margin: 0 0.375rem;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: calc(50% - 0.75rem);
|
||||
margin: 0.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,11 +12,12 @@
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--text-800);
|
||||
color: var(--text-900);
|
||||
}
|
||||
|
||||
.site-title {
|
||||
@@ -58,11 +59,10 @@
|
||||
|
||||
.header-container {
|
||||
.site-title {
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nav {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
|
||||
@@ -82,13 +82,13 @@
|
||||
gap: 2rem;
|
||||
|
||||
li a {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-toggle-label {
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -3,10 +3,25 @@
|
||||
margin: 0 auto;
|
||||
padding: 2rem 2rem 0 2rem;
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
h1 {
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero + .content {
|
||||
@@ -15,6 +30,6 @@
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
.hero {
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
padding: 1rem 1em 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.captioned-image {
|
||||
.image {
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
text-align: center;
|
||||
padding-top: 1rem;
|
||||
color: color-mix(in srgb, var(--text) 70%, var(--background));
|
||||
padding-top: 0.5rem;
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,43 +1,95 @@
|
||||
.list {
|
||||
.post {
|
||||
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;
|
||||
|
||||
> a {
|
||||
color: inherit;
|
||||
> .meta {
|
||||
max-width: $width-content;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
color: var(--text-800);
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin: 4rem 0 4rem 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin: 0.5rem 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.heading-anchor {
|
||||
display: none;
|
||||
> .content {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
.list {
|
||||
main.with-meta {
|
||||
> .meta {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
> .content {
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.posts-list {
|
||||
.post {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin: 2rem 0 2rem 0;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 0.8rem;
|
||||
|
||||
.date {
|
||||
color: var(--text-600);
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: color-mix(in srgb, var(--text) 50%, var(--background));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post:hover .title,
|
||||
.post:hover .summary {
|
||||
color: var(--text-900);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
.posts-list {
|
||||
.post {
|
||||
&:not(:first-child) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,19 +8,12 @@ $width-wide: 75rem;
|
||||
|
||||
@import "heading";
|
||||
@import "image";
|
||||
@import "blockquote";
|
||||
@import "code";
|
||||
@import "table";
|
||||
@import "meta";
|
||||
|
||||
@import "details";
|
||||
@import "list";
|
||||
@import "gallery";
|
||||
|
||||
@import "header";
|
||||
@import "hero";
|
||||
@import "content";
|
||||
@import "postnav";
|
||||
@import "hero";
|
||||
@import "footer";
|
||||
|
||||
@import "photoswipe";
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
@@ -1,37 +1,5 @@
|
||||
@import "photoswipe/dist/photoswipe";
|
||||
|
||||
.pswp {
|
||||
--pswp-bg: var(--background);
|
||||
--pswp-icon-color: var(--text);
|
||||
--pswp-icon-color-secondary: color-mix(
|
||||
in srgb,
|
||||
var(--text) 30%,
|
||||
var(--background)
|
||||
);
|
||||
}
|
||||
|
||||
.pswp-caption-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp__caption {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 1rem 2rem;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
|
||||
.meta {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--text-800);
|
||||
}
|
||||
--pswp-icon-color-secondary: color-mix(in srgb, var(--text) 30%, var(--background));
|
||||
}
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -27,7 +27,6 @@
|
||||
devShells.${system}.default = pkgs.mkShell {
|
||||
packages = with pkgs; [
|
||||
hugo
|
||||
nodejs
|
||||
jq
|
||||
unzip
|
||||
];
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
<h1>404</h1>
|
||||
<p>This is a dead link. Whatever was here, it's gone now.</p>
|
||||
<p>
|
||||
<a href="{{- relURL "" -}}">Let's pretend this never happened</a>.
|
||||
<a href="{{- relURL "" -}}">Let's pretend this never happened</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
{{ $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 */ -}}
|
||||
@@ -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 }}
|
||||
@@ -2,4 +2,3 @@
|
||||
{{ .Text | safeHTML }}
|
||||
<a href="#{{- .Anchor | safeURL -}}" class="heading-anchor">#</a>
|
||||
</h{{ .Level }}>
|
||||
{{- /* chomp trailing newline */ -}}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
{{ $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 */ -}}
|
||||
{{ partial "image.html" (dict
|
||||
"path" .Destination
|
||||
"caption" .Text
|
||||
"alt" .Title
|
||||
)
|
||||
}}
|
||||
|
||||
@@ -5,6 +5,5 @@
|
||||
target="_blank" rel="noopener"
|
||||
{{ end }}
|
||||
>
|
||||
{{- .Text -}}
|
||||
{{ .Text | safeHTML }}
|
||||
</a>
|
||||
{{- /* chomp trailing newline */ -}}
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
<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,14 +1,39 @@
|
||||
<!doctype html>
|
||||
<html lang="{{- .Site.LanguageCode -}}">
|
||||
{{ partial "components/head/index.html" . }}
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<title>
|
||||
{{- if .IsHome -}}
|
||||
{{ .Site.Title }}
|
||||
{{- else -}}
|
||||
{{ .Site.Title }} ·
|
||||
{{ .Title }}
|
||||
{{- end -}}
|
||||
</title>
|
||||
|
||||
{{ with .Site.Params.description }}
|
||||
<meta name="description" content="{{- . -}}" />
|
||||
{{ end }}
|
||||
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
{{ partial "head/bots.html" }}
|
||||
{{ partial "head/rss.html" }}
|
||||
{{ partial "head/opengraph.html" . }}
|
||||
{{ partial "head/twitter.html" . }}
|
||||
{{ partial "head/photoswipe.html" }}
|
||||
{{ partial "head/styles.html" }}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{ partial "components/header.html" . }}
|
||||
{{ partial "header.html" . }}
|
||||
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "components/footer.html" . }}
|
||||
{{ partial "footer.html" . }}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
{{ define "main" }}
|
||||
{{ $details := default true .Params.details }}
|
||||
<main class="{{- if $details -}}with-details{{- end -}}">
|
||||
{{ if $details }}
|
||||
{{ partial "components/list/details.html" . }}
|
||||
{{ end }}
|
||||
<main class="with-meta">
|
||||
<section class="meta">
|
||||
<h1>{{ .Page.Title }}</h1>
|
||||
<p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
|
||||
{{ .Content }}
|
||||
</section>
|
||||
<div class="content">
|
||||
{{ partial "posts/list.html" . }}
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,8 @@
|
||||
{{ define "main" }}
|
||||
<main>
|
||||
{{ partial "components/hero/index.html" . }}
|
||||
{{ partial (printf "posts/%s.html" (.Params.heroType | default "hero")) . }}
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
|
||||
{{ if (default true .Params.comments) }}
|
||||
{{ partial "comments.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ partial "components/postnav/index.html" . }}
|
||||
</main>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
<details class="toc">
|
||||
<summary>Post Contents</summary>
|
||||
{{ .Page.TableOfContents }}
|
||||
</details>
|
||||
{{- /* chomp trailing newline */ -}}
|
||||
@@ -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 */ -}}
|
||||
@@ -1 +0,0 @@
|
||||
<sub>{{ .Get 0 | markdownify }}</sub> {{- /* chomp trailing newline */ -}}
|
||||
@@ -1 +0,0 @@
|
||||
<sup>{{ .Get 0 | markdownify }}</sup> {{- /* chomp trailing newline */ -}}
|
||||
@@ -1,17 +0,0 @@
|
||||
{{ define "main" }}
|
||||
{{ $details := default true .Params.details }}
|
||||
<main class="{{- if $details -}}with-details{{- end -}}">
|
||||
{{ if $details }}
|
||||
{{ partial "components/list/details.html" . }}
|
||||
{{ end }}
|
||||
<div
|
||||
class="{{- if $details -}}
|
||||
content
|
||||
{{- else -}}
|
||||
content wide
|
||||
{{- end -}}"
|
||||
>
|
||||
{{ partial "gallery/list.html" . }}
|
||||
</div>
|
||||
</main>
|
||||
{{ end }}
|
||||
@@ -1,29 +0,0 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<title>
|
||||
{{- if .IsHome -}}
|
||||
{{ .Site.Title }}
|
||||
{{- else -}}
|
||||
{{ .Site.Title }} ·
|
||||
{{ .Title }}
|
||||
{{- end -}}
|
||||
</title>
|
||||
|
||||
{{ with .Site.Params.description }}
|
||||
<meta name="description" content="{{- . -}}" />
|
||||
{{ end }}
|
||||
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
{{ partial "components/head/bots.html" . }}
|
||||
{{ partial "components/head/rss.html" . }}
|
||||
|
||||
{{ partial "components/head/opengraph.html" . }}
|
||||
{{ partial "components/head/twitter.html" . }}
|
||||
|
||||
{{ partial "components/head/js.html" . }}
|
||||
{{ partial "components/head/css.html" . }}
|
||||
</head>
|
||||
@@ -1,9 +0,0 @@
|
||||
{{ $opts := dict "minify" true }}
|
||||
{{ with resources.Get "js/main.js" | js.Build $opts | minify | fingerprint }}
|
||||
<script
|
||||
src="{{ .RelPermalink }}"
|
||||
integrity="{{ .Data.Integrity }}"
|
||||
crossorigin="anonymous"
|
||||
defer
|
||||
></script>
|
||||
{{ end }}
|
||||
@@ -1,8 +0,0 @@
|
||||
{{ with .OutputFormats.Get "RSS" }}
|
||||
<link
|
||||
href="{{- .Permalink -}}"
|
||||
rel="{{- .Rel -}}"
|
||||
type="{{- .MediaType.Type -}}"
|
||||
title="{{- $.Site.Title -}}"
|
||||
/>
|
||||
{{ end }}
|
||||
@@ -1,17 +0,0 @@
|
||||
<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>
|
||||
@@ -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 -}}
|
||||
@@ -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 }}
|
||||
@@ -1,26 +0,0 @@
|
||||
{{- $caption := .caption | default "" -}}
|
||||
{{- $title := .title | default $caption | plainify -}}
|
||||
{{- $alt := .alt | default $title | plainify -}}
|
||||
|
||||
|
||||
<figure class="captioned-image lightbox">
|
||||
<a
|
||||
href="{{- .full.RelPermalink -}}"
|
||||
data-pswp-src="{{- .full.RelPermalink -}}"
|
||||
data-pswp-width="{{- .full.Width -}}"
|
||||
data-pswp-height="{{- .full.Height -}}"
|
||||
class="pswp-image"
|
||||
>
|
||||
<img
|
||||
src="{{- .thumb.RelPermalink -}}"
|
||||
width="{{- .thumb.Width -}}"
|
||||
height="{{- .thumb.Height -}}"
|
||||
loading="lazy"
|
||||
{{ with $title }}title="{{- . -}}"{{ end }}
|
||||
{{ with $alt }}alt="{{- . -}}"{{ end }}
|
||||
/>
|
||||
</a>
|
||||
{{ with $caption }}
|
||||
<figcaption>{{ . | safeHTML }}</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
@@ -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 -}}
|
||||
@@ -1,5 +0,0 @@
|
||||
<section class="details">
|
||||
<h1 class="title">{{ .Page.Title }}</h1>
|
||||
<p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
|
||||
{{ .Content }}
|
||||
</section>
|
||||
@@ -1,22 +0,0 @@
|
||||
<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>
|
||||
@@ -1,26 +0,0 @@
|
||||
{{ $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>
|
||||
@@ -1,41 +0,0 @@
|
||||
<div class="gallery masonry lightbox">
|
||||
<div class="grid-sizer"></div>
|
||||
{{ range sort .Pages "Date" "desc" }}
|
||||
{{ if not .Params.private }}
|
||||
{{ $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="{{- .RelPermalink -}}"
|
||||
data-pswp-src="{{- $data.full.RelPermalink -}}"
|
||||
data-pswp-width="{{- $data.full.Width -}}"
|
||||
data-pswp-height="{{- $data.full.Height -}}"
|
||||
class="pswp-image"
|
||||
>
|
||||
<img
|
||||
src="{{- $data.thumb.RelPermalink -}}"
|
||||
width="{{- $data.thumb.Width -}}"
|
||||
height="{{- $data.thumb.Height -}}"
|
||||
loading="lazy"
|
||||
{{ with $title }}title="{{- . -}}"{{ end }}
|
||||
{{ with $alt }}alt="{{- . -}}"{{ end }}
|
||||
/>
|
||||
</a>
|
||||
<div class="pswp-caption-content">
|
||||
<div>
|
||||
<a href="{{- .RelPermalink -}}">{{ $caption }}</a>
|
||||
{{ partial "components/meta/index.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
17
layouts/partials/head/photoswipe.html
Normal file
17
layouts/partials/head/photoswipe.html
Normal file
@@ -0,0 +1,17 @@
|
||||
{{ with resources.Get "css/photoswipe/photoswipe.css" | minify | fingerprint }}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{- .RelPermalink -}}"
|
||||
integrity="{{- .Data.Integrity -}}"
|
||||
/>
|
||||
{{ end }}
|
||||
|
||||
{{ $opts := dict "minify" true }}
|
||||
{{ with resources.Get "js/photoswipe.js" | js.Build $opts | minify | fingerprint }}
|
||||
<script
|
||||
src="{{ .RelPermalink }}"
|
||||
integrity="{{ .Data.Integrity }}"
|
||||
crossorigin="anonymous"
|
||||
async
|
||||
></script>
|
||||
{{ end }}
|
||||
5
layouts/partials/head/rss.html
Normal file
5
layouts/partials/head/rss.html
Normal file
@@ -0,0 +1,5 @@
|
||||
{{ with .OutputFormats.Get "RSS" }}
|
||||
{{ printf `
|
||||
<link href="%s" rel="%s" type="%s" title="%s" />` .Permalink .Rel .MediaType.Type $.Site.Title | safeHTML
|
||||
}}
|
||||
{{ end }}
|
||||
@@ -1,4 +1,4 @@
|
||||
{{ $opts := dict "targetPath" "css/main.css" "includePaths" (slice "node_modules") }}
|
||||
{{ $opts := dict "targetPath" "css/main.css" }}
|
||||
{{ with resources.Get "sass/main.scss" | css.Sass $opts | minify | fingerprint }}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
29
layouts/partials/image.html
Normal file
29
layouts/partials/image.html
Normal file
@@ -0,0 +1,29 @@
|
||||
{{- $path := .path -}}
|
||||
{{- $caption := .caption -}}
|
||||
{{- $alt := default .caption .alt -}}
|
||||
|
||||
{{- if $path -}}
|
||||
{{- $isRemote := strings.HasPrefix $path "http" -}}
|
||||
{{- $image := cond $isRemote (resources.GetRemote $path) (resources.Get $path) -}}
|
||||
|
||||
{{- if $image -}}
|
||||
<figure class="image gallery">
|
||||
<a
|
||||
href="{{- $image.RelPermalink -}}"
|
||||
data-pswp-width="{{- $image.Width -}}"
|
||||
data-pswp-height="{{- $image.Height -}}"
|
||||
>
|
||||
<img
|
||||
src="{{- $image.RelPermalink -}}"
|
||||
width="{{- $image.Width -}}"
|
||||
height="{{- $image.Height -}}"
|
||||
{{ with $caption }}title="{{- . -}}"{{ end }}
|
||||
{{ with $alt }}alt="{{- . -}}"{{ end }}
|
||||
/>
|
||||
</a>
|
||||
{{ with $caption }}
|
||||
<figcaption>{{ . }}</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
16
layouts/partials/posts/hero.html
Normal file
16
layouts/partials/posts/hero.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<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>
|
||||
{{ with .Params.heroImage }}
|
||||
{{ partial "image.html" (dict
|
||||
"path" .path
|
||||
"alt" .alt
|
||||
"caption" .caption
|
||||
)
|
||||
}}
|
||||
{{ end }}
|
||||
</section>
|
||||
@@ -1,13 +1,15 @@
|
||||
<div class="list">
|
||||
<div class="posts-list">
|
||||
{{ range sort .Pages "Date" "desc" }}
|
||||
{{ if not .Params.private }}
|
||||
<div class="post">
|
||||
<a href="{{- .RelPermalink -}}">
|
||||
<a href="{{- .RelPermalink -}}" class="post">
|
||||
<h1 class="title">{{ .Title }}</h1>
|
||||
<div class="summary">{{ .Summary | plainify }}</div>
|
||||
</a>
|
||||
{{ partial "components/meta/index.html" . }}
|
||||
<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>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
104
package-lock.json
generated
104
package-lock.json
generated
@@ -1,104 +0,0 @@
|
||||
{
|
||||
"name": "caldwell",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "caldwell",
|
||||
"version": "1.0.0",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"dependencies": {
|
||||
"masonry-layout": "^4.2.2",
|
||||
"photoswipe": "^5.4.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/masonry-layout": "^4.2.8"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/jquery": {
|
||||
"version": "3.5.32",
|
||||
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.32.tgz",
|
||||
"integrity": "sha512-b9Xbf4CkMqS02YH8zACqN1xzdxc3cO735Qe5AbSUFmyOiaWAbcpqh9Wna+Uk0vgACvoQHpWDg2rGdHkYPLmCiQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/sizzle": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/masonry-layout": {
|
||||
"version": "4.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/masonry-layout/-/masonry-layout-4.2.8.tgz",
|
||||
"integrity": "sha512-Et2to22C31FG1UFaHRBL6BznMOhrur3Ckr9gvR7fRVmPgxqiwCEKZtV8GpFscHyNAKhZ0QlkwXJRPnJvxZUKQw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/jquery": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/sizzle": {
|
||||
"version": "2.3.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.9.tgz",
|
||||
"integrity": "sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/desandro-matches-selector": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
|
||||
"integrity": "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ev-emitter": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
|
||||
"integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fizzy-ui-utils": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
|
||||
"integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"desandro-matches-selector": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/get-size": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
|
||||
"integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/masonry-layout": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz",
|
||||
"integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"get-size": "^2.0.2",
|
||||
"outlayer": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/outlayer": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
|
||||
"integrity": "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ev-emitter": "^1.0.0",
|
||||
"fizzy-ui-utils": "^2.0.0",
|
||||
"get-size": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/photoswipe": {
|
||||
"version": "5.4.4",
|
||||
"resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.4.tgz",
|
||||
"integrity": "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.12.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
package.json
19
package.json
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "caldwell",
|
||||
"main": "main.js",
|
||||
"dependencies": {
|
||||
"masonry-layout": "^4.2.2",
|
||||
"photoswipe": "^5.4.4"
|
||||
},
|
||||
"version": "1.0.0",
|
||||
"description": "A minimal Hugo theme",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.karaolidis.com/karaolidis/caldwell.git"
|
||||
},
|
||||
"author": "Nikolaos Karaolidis <nick@karaolidis.com>",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"devDependencies": {
|
||||
"@types/masonry-layout": "^4.2.8"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user