Something went wrong. Try again.
learn and share notes on atproto (wip) 🦉 malfestio.stormlightlabs.org
readability solid axum atproto srs
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327@import "tailwindcss";@plugin "@tailwindcss/forms";@plugin "@egoist/tailwindcss-icons";
@font-face { font-family: "Mattern"; src: url("/fonts/Mattern-Regular.otf") format("opentype"), url("/fonts/Mattern-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap;}
@theme { --font-display: "Mattern", serif; --font-body: "Figtree Variable", sans-serif;
/* Editor Fonts */ --font-code-neon: "Monaspace Neon", monospace; --font-code-argon: "Monaspace Argon", monospace; --font-code-krypton: "Monaspace Krypton", monospace; --font-code-radon: "Monaspace Radon", monospace; --font-code-xenon: "Monaspace Xenon", monospace; --font-code-jetbrains: "JetBrains Mono Variable", monospace; --font-code-google: "Google Sans Code", monospace; --font-code: var(--font-code-jetbrains);
/* Spacing Tokens - 16px grid */ /* FIXME: These conflict with, and break existing usage of classes like max-w-4xl --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-base: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; --spacing-4xl: 96px; */
/* Elevation Layers */ --layer-00: #161616; --layer-01: #1e1e1e; --layer-02: #262626; --layer-03: #2c2c2c; --layer-04: #323232;
/* Elevation Shadows - Subtle depth */ --shadow-01: 0 1px 2px rgba(0, 0, 0, 0.1); --shadow-02: 0 2px 4px rgba(0, 0, 0, 0.15); --shadow-03: 0 4px 8px rgba(0, 0, 0, 0.2); --shadow-04: 0 8px 16px rgba(0, 0, 0, 0.25);
/* Motion Tokens */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 350ms; --duration-slower: 500ms;
--easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
--density-multiplier: 1;}
* { @apply font-body;}
h1,h2,h3,h4,h5,h6 { @apply font-display;}
.grid-pattern { background-size: 32px 32px; background-image: linear-gradient( to right, rgba(85, 85, 85, 0.3) 1px, transparent 1px ), linear-gradient(to bottom, rgba(85, 85, 85, 0.3) 1px, transparent 1px);}
/* Elevation Utilities - Carbon-inspired layering */.surface-00 { background-color: var(--layer-00);}
.surface-01 { background-color: var(--layer-01); box-shadow: var(--shadow-01);}
.surface-02 { background-color: var(--layer-02); box-shadow: var(--shadow-02);}
.surface-03 { background-color: var(--layer-03); box-shadow: var(--shadow-03);}
.surface-04 { background-color: var(--layer-04); box-shadow: var(--shadow-04);}
/* Density Utilities - Applied to container elements */.density-compact { --density-multiplier: 0.75;}
.density-comfortable { --density-multiplier: 1;}
.density-spacious { --density-multiplier: 1.25;}
.transition-standard { transition-duration: var(--duration-normal); transition-timing-function: var(--easing-standard);}
.transition-fast { transition-duration: var(--duration-fast); transition-timing-function: var(--easing-standard);}
.transition-slow { transition-duration: var(--duration-slow); transition-timing-function: var(--easing-decelerate);}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; }}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; }}
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); }}
.animate-pulse { animation: pulse 2s ease-in-out infinite;}
.animate-shimmer { background: linear-gradient( 90deg, var(--layer-01) 0%, var(--layer-02) 50%, var(--layer-01) 100% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite;}
.animate-breathe { animation: breathe 3s ease-in-out infinite;}
.press-effect:active { transform: scale(0.97); transition: transform var(--duration-instant) var(--easing-sharp);}
button { @apply cursor-pointer disabled:cursor-not-allowed disabled:opacity-50;}
/* Textcomplete dropdown styling */.textcomplete-dropdown { background-color: var(--layer-02); border: 1px solid var(--layer-03); border-radius: 0.5rem; box-shadow: var(--shadow-04); overflow: hidden; z-index: 50;}
.textcomplete-dropdown .textcomplete-item { padding: 0.5rem 0.75rem; cursor: pointer; color: #e2e8f0;}
.textcomplete-dropdown .textcomplete-item:hover,.textcomplete-dropdown .textcomplete-item.active { background-color: var(--layer-03);}
/* Wikilink styling in rendered content */.wikilink { color: #60a5fa; text-decoration: underline; text-decoration-color: rgba(96, 165, 250, 0.3); transition: color var(--duration-fast) var(--easing-standard);}
.wikilink:hover { color: #93c5fd; text-decoration-color: rgba(147, 197, 253, 0.5);}
.wikilink-broken { color: #fbbf24; text-decoration: line-through;}
/* Prose styling for rendered markdown */.prose h1 { @apply text-3xl font-bold mb-4 mt-8 text-white;}
.prose h2 { @apply text-2xl font-semibold mb-3 mt-6 text-white;}
.prose h3 { @apply text-xl font-semibold mb-2 mt-4 text-white;}
.prose h4 { @apply text-lg font-semibold mb-2 mt-3 text-white;}
.prose h5 { @apply text-base font-semibold mb-1 mt-2 text-white;}
.prose h6 { @apply text-sm font-semibold mb-1 mt-2 text-slate-300;}
.prose p { @apply mb-4 leading-relaxed text-slate-300;}
.prose a:not(.wikilink) { @apply text-blue-400 hover:text-blue-300 underline;}
.prose code:not(pre code) { @apply bg-slate-700 px-1.5 py-0.5 rounded text-sm text-emerald-400;}
.prose pre { @apply bg-slate-800 rounded-lg p-4 overflow-x-auto my-4;}
.prose blockquote { @apply border-l-4 border-blue-500 pl-4 italic text-slate-400 my-4;}
.prose ul { @apply list-disc list-inside mb-4 space-y-1 text-slate-300;}
.prose ol { @apply list-decimal list-inside mb-4 space-y-1 text-slate-300;}
.prose li { @apply leading-relaxed;}
.prose hr { @apply border-slate-600 my-6;}
.prose strong { @apply font-semibold text-white;}
.prose em { @apply italic text-slate-200;}
/* Shiki editor highlight container styling */.shiki-editor-highlight { @apply w-full h-full;}
.shiki-editor-highlight pre { @apply bg-transparent m-0 p-0;}
.shiki-editor-highlight code { @apply bg-transparent;}
/* Shiki content in preview mode */.shiki-content pre { @apply bg-slate-800 rounded-lg p-4 overflow-x-auto my-4;}