# Scratch Pad
*Quick notes, surfaced content, things to have on hand today*
/*
Minimal Publish / MIT License
Copyright (c) 2020-2024 Steph Ango (@kepano)
Enhanced by Claudian — Feb 2026
*/
/* ===========================
CUSTOM FONT
=========================== */
@font-face {
font-family: 'IA Writer Duospace';
src: url("iA Writer Duospace Font/iAWriterDuospace-Regular.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'IA Writer Duospace';
src: url("iA Writer Duospace Font/iAWriterDuospace-Regular.otf") format("opentype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'IA Writer Duospace';
src: url("iA Writer Duospace Font/iAWriterDuospace-RegularItalic.otf") format("opentype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'IA Writer Duospace';
src: url("iA Writer Duospace Font/iAWriterDuospace-RegularItalic.otf") format("opentype");
font-weight: bold;
font-style: italic;
}
/* ===========================
CUSTOM PROPERTIES
=========================== */
:root {
--site-red: #AF3029;
--site-gold: #DFB431;
--site-teal: #3AA99F;
--site-bg: #100F0F;
--fade-duration: 0.6s;
--hover-speed: 0.3s;
}
/* ===========================
BASE VARIABLES
=========================== */
body {
--font-text-size: 16px;
--font-small: 13px;
--font-smaller: 11px;
--font-smallest: 10px;
--font-inputs: 13px;
--normal-weight: 400;
--bold-weight: 600;
--link-weight: inherit;
--page-title-weight: 500;
--page-title-line-height: 1.1;
--h1: 2.350em;
--h2: 1.7em;
--h3: 1.3em;
--h4: 1em;
--h5: 0.85em;
--h6: 0.85em;
--h1-weight: 600;
--h2-weight: 600;
--h3-weight: 600;
--h4-weight: 500;
--h5-weight: 500;
--h6-weight: 400;
--h1-variant: normal;
--h2-variant: normal;
--h3-variant: normal;
--h4-variant: normal;
--h5-variant: small-caps;
--h6-variant: small-caps;
--h1-style: normal;
--h2-style: normal;
--h3-style: normal;
--h4-style: normal;
--h5-style: normal;
--h6-style: normal;
--cards-min-width: 180px;
--cards-max-width: 1fr;
--cards-mobile-width: 180px;
--cards-image-height: 400px;
--cards-padding: 1.2em;
--cards-image-fit: contain;
--cards-background: transparent;
--cards-border-width: 1px;
--cards-aspect-ratio: auto;
--cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width)));
--image-radius: 8px;
--img-grid-fit: cover;
--img-grid-background: transparent;
--img-grid-gap: 0.5rem;
--img-zoom-background: rgba(0,0,0,0.6);
--img-zoom-max-width: 96%;
--img-zoom-max-height: 90vh;
--img-zoom-in-cursor: zoom-in;
--img-zoom-out-cursor: zoom-out;
--icon-muted: 0.5;
--border-width: 1px;
--folding-offset: 16px;
--nested-padding: 30px;
--list-padding: 2em;
--list-spacing: 0.075em;
}
body, .markdown-preview-view {
font-family: 'IA Writer Duospace', monospace;
}
@media (max-width:400pt) {
body {
--cards-min-width: var(--cards-mobile-width);
--img-grid-gap: 0.25rem;
}
}
/* ===========================
COLOUR SCHEME
=========================== */
.theme-light,
.theme-dark {
--red: #d04255;
--yellow: #e5b567;
--green: #a8c373;
--orange: #e57e43;
--cyan: #73bbb2;
--blue: #6c99bb;
--purple: #9e86c8;
--pink: #b05279;
}
.theme-light {
--bg1: #FFF;
--bg2: #F5F5F5;
--bg3: #E5E5E5;
--ui1: #E6E6E6;
--ui2: #D6D6D6;
--ui3: #C2C2C2;
--tx1: #0F0F0F;
--tx2: #828282;
--tx3: #B5B5B5;
--ax1: #6A8695;
--ax2: #556B77;
--ax3: #889EAA;
--hl1: hsla(201,50%,40%,30%);
}
.theme-dark {
--bg1: #100F0F;
--bg2: #100F0F;
--bg3: #100F0F;
--ui1: #333333;
--ui2: #3B3B3B;
--ui3: #595959;
--tx1: #D1D1D1;
--tx2: #999999;
--tx3: #595959;
--ax1: #889EAA;
--ax2: #ACBBC3;
--ax3: #67808E;
--hl1: hsla(201,70%,40%,30%);
}
.theme-light { --mono100: black; --mono0: white; }
.theme-dark { --mono100: white; --mono0: black; }
.theme-dark, .theme-light {
--h1-color: var(--text-normal);
--h2-color: var(--text-normal);
--h3-color: var(--text-normal);
--h4-color: var(--text-normal);
--h5-color: var(--text-normal);
--h6-color: var(--text-muted);
}
.published-container {
--outline-heading-color-active: var(--tx1);
--sidebar-left-background: var(--bg2);
}
.theme-dark, .theme-light {
--background-primary: var(--bg1);
--background-primary-alt: var(--bg2);
--background-secondary: var(--bg2);
--background-secondary-alt: var(--bg1);
--background-tertiary: var(--bg3);
--background-table-rows: var(--bg2);
--background-modifier-form-field: var(--bg1);
--background-modifier-form-field-highlighted: var(--bg1);
--background-modifier-accent: var(--ax3);
--background-modifier-border: var(--ui1);
--background-modifier-border-hover: var(--ui2);
--background-modifier-border-focus: var(--ui3);
--background-modifier-success: var(--color-green);
--background-divider: var(--ui1);
--interactive-hover: var(--ui1);
--interactive-accent: var(--ax3);
--interactive-accent-hover: var(--ax3);
--quote-opening-modifier: var(--ui2);
--modal-border: var(--ui2);
--icon-color: var(--tx2);
--icon-color-hover: var(--tx2);
--icon-color-active: var(--tx1);
--icon-hex: var(--mono0);
--text-normal: var(--tx1);
--text-bold: var(--tx1);
--text-italic: var(--tx1);
--text-muted: var(--tx2);
--text-faint: var(--tx3);
--text-accent: var(--ax1);
--text-accent-hover: var(--ax2);
--text-on-accent: white;
--text-selection: var(--hl1);
--text-code: var(--tx4);
--text-error: var(--color-red);
--text-blockquote: var(--tx2);
--title-color: var(--tx1);
--title-color-inactive: var(--tx2);
}
.theme-light {
--interactive-normal: var(--bg1);
--interactive-accent-rgb: 220,220,220;
--text-highlight-bg: rgba(255,225,0,0.5);
--text-highlight-bg-active: rgba(0,0,0,0.1);
--background-modifier-error: rgba(255,0,0,0.14);
--background-modifier-error-hover: rgba(255,0,0,0.08);
--shadow-color: rgba(0,0,0,0.1);
--btn-shadow-color: rgba(0,0,0,0.05);
}
.theme-dark {
--interactive-normal: var(--bg3);
--interactive-accent-rgb: 66,66,66;
--text-highlight-bg: rgba(255,177,80,0.3);
--text-highlight-bg-active: rgba(255,255,255,0.1);
--background-modifier-error: rgba(255,20,20,0.12);
--background-modifier-error-hover: rgba(255,20,20,0.18);
--background-modifier-box-shadow: rgba(0,0,0,0.3);
--shadow-color: rgba(0,0,0,0.3);
--btn-shadow-color: rgba(0,0,0,0.2);
}
/* ===========================
LAYOUT HELPERS (from Minimal)
=========================== */
/* Hide the site-wide "nick young" header */
.site-body-left-column-site-name,
.site-header-text {
display: none !important;
}
.alt-title .page-header,
.hide-title .page-header {
display: none;
}
.hide-title.markdown-preview-view div:nth-child(4) h1 {
margin-top: .25em;
font-variant: var(--page-title-variant);
letter-spacing: -.015em;
line-height: var(--page-title-line-height);
font-size: var(--page-title-size);
color: var(--page-title-color);
font-weight: var(--page-title-weight);
font-style: var(--page-title-style);
font-family: var(--page-title-font);
border: none;
}
.h1-borders h1 {
border-bottom: 1px solid var(--ui1);
padding-bottom: .5em;
}
/* ===========================
FONT — Force weight 400 everywhere
=========================== */
body, .markdown-preview-view,
.markdown-preview-view h1, h1,
.markdown-preview-view h2, h2,
.markdown-preview-view h3, h3,
.markdown-preview-view h4, h4,
.markdown-preview-view h5, h5,
.markdown-preview-view h6, h6 {
font-family: 'IA Writer Duospace', monospace !important;
font-weight: 400 !important;
font-synthesis: none !important;
}
/* ===========================
HEADINGS — Colours & Typography
Harmonised with vault spacing.css
=========================== */
.markdown-preview-view h1, h1 {
font-size: 2.350em !important;
color: var(--site-red) !important;
letter-spacing: 0.08em;
margin-top: 2.5em;
}
.markdown-preview-view h2, h2 {
font-size: 1.7em !important;
color: var(--site-gold) !important;
letter-spacing: 0.04em;
margin-top: 2em;
}
.markdown-preview-view h2 a {
font-family: 'IA Writer Duospace', monospace !important;
font-weight: 400 !important;
font-synthesis: none !important;
}
.markdown-preview-view h3, h3 {
font-size: 1.3em !important;
color: var(--site-teal) !important;
letter-spacing: 0.01em;
margin-top: 1.6em;
}
.published-container .page-header {
color: var(--site-red) !important;
font-family: 'IA Writer Duospace', monospace !important;
}
/* ===========================
BODY TEXT — Line-height & Paragraph Spacing
Harmonised with vault spacing.css
=========================== */
.markdown-preview-view {
line-height: 1.5;
}
.markdown-preview-view p {
margin-bottom: 1.2em;
}
/* ===========================
BLOCKQUOTES — Teal accent
Harmonised with vault spacing.css
=========================== */
.markdown-preview-view blockquote {
border-left: 2px solid var(--site-teal);
border-left-color: var(--site-teal);
padding-left: 1.2em;
font-size: 0.95em;
opacity: 0.9;
}
/* ===========================
✦ GLOW-UP 1: Gradient Page Title
=========================== */
.published-container .page-header .page-header-title {
background: linear-gradient(135deg, var(--site-red) 0%, var(--site-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===========================
✦ GLOW-UP 2: Animated Link Underlines
=========================== */
.markdown-preview-view a:not(.nav-item a):not(.site-nav a):not(.site-footer a) {
text-decoration: none;
position: relative;
transition: color var(--hover-speed) ease;
}
.markdown-preview-view a:not(.nav-item a):not(.site-nav a):not(.site-footer a)::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
width: 0;
height: 1px;
background: linear-gradient(90deg, var(--site-red), var(--site-gold));
transition: width var(--hover-speed) ease, left var(--hover-speed) ease;
}
.markdown-preview-view a:not(.nav-item a):not(.site-nav a):not(.site-footer a):hover::after {
width: 100%;
left: 0;
}
/* ===========================
✦ GLOW-UP 3: Publication Cards
=========================== */
/* Each publication block: h2 + coauthor + journal/publisher + hr */
.markdown-preview-view h2 {
margin-top: 2.5em;
margin-bottom: 0.3em;
border-bottom: none;
padding: 0.8em 0 0.2em 0;
border-radius: 0;
background: transparent;
transition: transform var(--hover-speed) ease, border-color var(--hover-speed) ease;
letter-spacing: 0.04em;
border-left: 2px solid transparent;
padding-left: 0.5em;
}
/* The coauthor line right after h2 — grey, small-caps */
h2 + p,
h2 + p a {
margin-top: 0;
font-style: italic;
font-variant: small-caps;
color: rgba(255, 255, 255, 0.5) !important;
padding: 0;
background: transparent;
text-decoration: none;
}
/* Journal / Publisher spans — teal, small-caps */
.journal, .publisher,
.journal a, .publisher a {
color: #3BA99F !important;
display: inline-block;
margin-top: 0.3em;
margin-bottom: 0.4em;
padding: 0;
background: transparent;
font-size: 0.9em;
font-variant: small-caps;
letter-spacing: 0.03em;
text-decoration: none;
}
.publisher {
display: block;
margin-top: 0;
}
/* Card hover: lift + gold left accent */
.markdown-preview-view h2:hover {
transform: translateY(-2px);
border-left-color: var(--site-gold);
}
/* Gradient dividers between publications */
hr {
border: none;
height: 1px;
background: linear-gradient(
to right,
transparent,
rgba(223, 180, 49, 0.3),
rgba(58, 169, 159, 0.3),
transparent
);
margin: 1.5em 0 2em 0;
}
/* Intro paragraph on publications page */
#publications + p {
border-left: 2px solid var(--site-teal);
padding-left: 1em;
margin-bottom: 2.5em;
line-height: 1.6;
opacity: 0.85;
}
#publications + p::first-letter {
font-size: 2.4em;
float: left;
line-height: 1;
margin-right: 0.1em;
margin-top: 0.05em;
color: var(--site-red);
}
/* "in progress" section — scoped to .wip wrapper */
.wip {
border-left: 2px solid rgba(58, 169, 159, 0.35);
padding-left: 1em;
margin-top: 3em;
padding-top: 1.5em;
border-top: 1px solid rgba(58, 169, 159, 0.2);
}
.wip h1 {
font-size: 1.4em !important;
color: #5ABFB5 !important;
letter-spacing: 0.08em;
text-transform: lowercase;
margin-top: 0;
}
.wip h2 {
color: #4a6563 !important;
font-family: 'IA Writer Duospace', monospace !important;
font-weight: 400 !important;
font-synthesis: none !important;
}
/* ===========================
✦ GLOW-UP 4: Fade-In Animation
=========================== */
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Page content fades in */
.markdown-preview-view {
animation: fadeSlideIn var(--fade-duration) ease-out;
}
/* Staggered fade for publication entries — fallback */
.markdown-preview-view h2:nth-of-type(1) { animation: fadeSlideIn 0.5s ease-out 0.1s both; }
.markdown-preview-view h2:nth-of-type(2) { animation: fadeSlideIn 0.5s ease-out 0.2s both; }
.markdown-preview-view h2:nth-of-type(3) { animation: fadeSlideIn 0.5s ease-out 0.3s both; }
.markdown-preview-view h2:nth-of-type(4) { animation: fadeSlideIn 0.5s ease-out 0.4s both; }
.markdown-preview-view h2:nth-of-type(5) { animation: fadeSlideIn 0.5s ease-out 0.5s both; }
.markdown-preview-view h2:nth-of-type(6) { animation: fadeSlideIn 0.5s ease-out 0.6s both; }
.markdown-preview-view h2:nth-of-type(7) { animation: fadeSlideIn 0.5s ease-out 0.7s both; }
.markdown-preview-view h2:nth-of-type(8) { animation: fadeSlideIn 0.5s ease-out 0.8s both; }
/* Scroll-driven reveal — progressive enhancement (Chrome/Edge 115+) */
@supports (animation-timeline: view()) {
.markdown-preview-view h2:nth-of-type(n) {
animation: fadeSlideIn 0.4s ease-out both;
animation-timeline: view();
animation-range: entry 0% entry 25%;
}
}
/* ===========================
SUBTLE BACKGROUND DEPTH
=========================== */
/* Background stays flat #100F0F to match SVG fills */
/* ===========================
✦ FILM GRAIN OVERLAY
Ultra-subtle noise — film-like, almost subliminal
=========================== */
.published-container::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 9999;
opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
/* ===========================
HOMEPAGE NAVIGATION
=========================== */
/* ===========================
✦ HOMEPAGE NAME
=========================== */
/* Hide Publish's auto-generated page title on homepage */
.home-page .page-header {
display: none !important;
}
.home-name {
text-align: center;
font-size: 2.2em;
letter-spacing: 0.25em;
color: var(--tx2);
padding-top: 18vh;
margin-bottom: 0;
animation: fadeSlideIn 0.6s ease-out both;
}
.home-nav {
display: flex;
justify-content: center;
flex-wrap: nowrap;
gap: 50px;
margin: 50px auto 60px;
text-align: center;
}
/* div.nav-item is the flex child; the <a> inside fills it */
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
width: 170px;
}
.nav-item a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--site-gold);
cursor: pointer;
}
.nav-item a img {
width: 150px;
height: 150px;
margin-bottom: 20px;
transition: transform 0.4s ease, filter 0.4s ease;
}
.nav-item a:hover img {
transform: scale(1.05);
filter: drop-shadow(0 0 8px rgba(223, 180, 49, 0.3));
}
.nav-item a span {
font-size: 1.5em;
color: var(--site-gold);
padding-bottom: 3px;
position: relative;
transition: color var(--hover-speed) ease;
}
/* Expanding underline under the label text */
.nav-item a span::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background: var(--site-red);
transition: width var(--hover-speed) ease, left var(--hover-speed) ease;
}
.nav-item a:hover span {
color: var(--site-red);
}
.nav-item a:hover span::after {
width: 100%;
left: 0;
}
/* Homepage fade-in stagger */
.home-nav .nav-item:nth-child(1) { animation: fadeSlideIn 0.5s ease-out 0.15s both; }
.home-nav .nav-item:nth-child(2) { animation: fadeSlideIn 0.5s ease-out 0.3s both; }
.home-nav .nav-item:nth-child(3) { animation: fadeSlideIn 0.5s ease-out 0.45s both; }
/* ===========================
✦ SITE NAVIGATION (inner pages)
=========================== */
.site-nav {
text-align: center;
font-size: 0.85em;
letter-spacing: 0.06em;
margin-bottom: 3em;
animation: fadeSlideIn 0.4s ease-out both;
}
.site-nav a {
color: var(--tx3);
text-decoration: none;
transition: color var(--hover-speed) ease;
}
.site-nav a:hover {
color: var(--site-gold);
}
.site-nav a.current {
color: var(--tx1);
}
/* ===========================
✦ SITE FOOTER
=========================== */
.site-footer {
text-align: center;
font-size: 0.75em;
letter-spacing: 0.06em;
margin-top: 6em;
padding-top: 2em;
padding-bottom: 2em;
border-top: 1px solid rgba(223, 180, 49, 0.12);
}
.site-footer a {
color: var(--tx3);
text-decoration: none;
transition: color var(--hover-speed) ease;
}
.site-footer a:hover {
color: var(--site-gold);
}
/* ===========================
✦ MICRO-INTERACTIONS
=========================== */
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Text selection — teal highlight */
::selection {
background: rgba(58, 169, 159, 0.3);
}
/* Link hover colour shift — teal links warm toward gold */
.markdown-preview-view a:not(.nav-item a):not(h2 a):hover {
color: var(--site-gold) !important;
}
/* Publication title links — shift toward red on hover */
.markdown-preview-view h2 a:hover {
color: var(--site-red) !important;
}
/* ===========================
✦ ABOUT PAGE — Red accent
=========================== */
.about-page .markdown-preview-view a {
color: var(--site-red) !important;
}
.about-page .markdown-preview-view a:hover {
color: var(--site-gold) !important;
}
/* ===========================
RESPONSIVE
=========================== */
@media (max-width: 768px) {
.home-name {
padding-top: 12vh;
font-size: 1.6em;
}
.home-nav {
flex-wrap: wrap;
flex-direction: column;
align-items: center;
gap: 40px;
margin-top: 40px;
}
.nav-item {
width: 100%;
}
.nav-item img {
height: 120px;
width: 120px;
}
}
---
# What's Happening
*Active threads and today's activity — updated by /harvest*
## Active
## Sessions
## Actions
---