1// Browser-safe CSS strings (no Node imports). Imported by both server-side
2// renderers and browser-side WebView code.
3export const baseStyles = `
4:root { --corner-offset: 6px; --code-white-space: pre; --banner-clear-left: 48px; --banner-clear-right: 80px; }
5body { margin: 0; padding: 20px 40px 40px; background-color: #1a1a1a; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.018' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23b)' opacity='0.05'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)' opacity='0.06'/></svg>"); background-size: 500px 500px, 140px 140px; background-blend-mode: overlay, soft-light; color: #fff; font-family: system-ui, sans-serif; }
6a { color: #5b9bd5; }
7.home-link { position: absolute; top: var(--corner-offset); left: var(--corner-offset); text-decoration: none; font-size: 38px; opacity: 0.7; transition: opacity 0.2s; }
8.home-link:hover { opacity: 1; color: #fff; }
9@media (max-width: 600px) { body { padding: 25px 16px 16px; } }
10`
11
12export const markdownStyles = `
13@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/cormorant-garamond-latin-400.woff2) format('woff2'); }
14@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/cormorant-garamond-latin-400i.woff2) format('woff2'); }
15.markdown-content { line-height: 1.6; }
16.blogpost-page .markdown-content { margin-bottom: 40px; }
17.blogpost-dedication .markdown-content { max-width: 800px; margin: 0 auto 40px; }
18.blogpost-dedication .markdown-content p { font-family: 'Cormorant Garamond', serif; font-size: 1.15em; line-height: 1.8; }
19.blogpost-page video, .blogpost-page img { max-width: 700px; }
20.blogpost-seance .transcript-container { margin: 0; }
21.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6 { margin: 1.5em 0 0.5em; border-bottom: 1px solid #333; padding-bottom: 0.3em; }
22.markdown-content > :first-child { margin-top: 0; }
23.markdown-content h1 { font-size: 2em; } .markdown-content h2 { font-size: 1.5em; } .markdown-content h3 { font-size: 1.25em; }
24.markdown-content p { margin: 1em 0; }
25.markdown-content a { color: #5b9bd5; text-decoration: none; }
26.markdown-content a:hover { text-decoration: underline; }
27.markdown-content a code { color: inherit; }
28.markdown-content code { padding: 0.1em 0; border-radius: 3px; font-family: monospace; background: #2a2a2a; color: #5fd7af; }
29.markdown-content pre { padding: 1em; border-radius: 6px; white-space: var(--code-white-space); overflow-x: auto; }
30.markdown-content pre code { background: none; padding: 0; color: inherit; }
31.markdown-content pre .line { display: block; }
32.markdown-content blockquote { border-left: 4px solid #444; margin: 1em 0; padding-left: 1em; color: #aaa; }
33.markdown-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
34.markdown-content th, .markdown-content td { border: 1px solid #444; padding: 0.5em 1em; text-align: left; }
35.markdown-content th { background: #2d2d2d; }
36.markdown-content img { max-width: 100%; border-radius: 6px; }
37.markdown-content ul, .markdown-content ol { padding-left: 2em; }
38.markdown-content hr { border: none; border-top: 1px solid #444; margin: 2em 0; }
39.pete-avatar { height: 1.2em; width: 1.2em; border-radius: 50% !important; object-fit: cover; vertical-align: -0.2em; margin-left: 8px; display: inline-block; }
40.deep-thoughts { height: 1.5em; width: auto; }
41.markdown-content h2:has(.deep-thoughts) { display: flex; align-items: center; flex-wrap: wrap; }
42.markdown-content h2:has(.deep-thoughts) > .media-icon { margin-left: auto; margin-right: 8px; }
43body:has(.be-here-now-figure) { padding-bottom: 0; }
44.be-here-now-figure { display: block; width: 50%; margin: 2em auto 0; padding-bottom: 220px; --bh-skew: 0deg; --bh-dark-end: 60%; --bh-opacity: 0.7; --bh-r: 0; --bh-g: 0; --bh-b: 0; }
45.be-here-now-link { display: block; position: relative; line-height: 0; }
46.be-here-now-img { display: block; width: 100%; border-radius: 6px; position: relative; z-index: 2; animation: beHereNowScroll linear both; animation-timeline: view(); }
47.be-here-now-shadow { position: absolute; top: 100%; left: -3%; right: -3%; height: 220px; z-index: 1; pointer-events: none; transform: skewX(var(--bh-skew)); transform-origin: top center; background: linear-gradient(to bottom, rgba(var(--bh-r),var(--bh-g),var(--bh-b),var(--bh-opacity)) 0%, rgba(var(--bh-r),var(--bh-g),var(--bh-b),var(--bh-opacity)) var(--bh-dark-end), rgba(var(--bh-r),var(--bh-g),var(--bh-b),0) 100%); clip-path: polygon(3% 0%, 97% 0%, 100% 100%, 0% 100%); }
48@keyframes beHereNowScroll { from { transform: translateY(12px); } to { transform: translateY(0); } }
49@media (prefers-reduced-motion: reduce) { .be-here-now-img { animation: none; } }
50body:has(.bottom-image-figure) { padding-bottom: 0; }
51body:has(.bottom-image-figure) .markdown-content { margin-bottom: 0; }
52.bottom-image-figure { margin: 2em calc(50% - 50vw) 0; width: 100vw; }
53.bottom-image-figure img { display: block; width: 100%; max-width: none; height: auto; border-radius: 0; }
54`
55