From b18e47a2eff9b8710f5538734b0863be16425aa5 Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Sun, 16 Jun 2024 23:30:48 -0500 Subject: [PATCH] Implement new paper-based theme --- Garden | 2 +- site/.vitepress/config.ts | 6 +- site/.vitepress/theme/custom.css | 442 +++++++++++++++++++++++- site/garden/the-small-web/index.md | 10 +- site/garden/this-knowledge-hub/index.md | 2 + site/index.md | 30 +- site/public/button.svg | 67 ++++ 7 files changed, 507 insertions(+), 52 deletions(-) create mode 100644 site/public/button.svg diff --git a/Garden b/Garden index 840cdebe..49fc0dbf 160000 --- a/Garden +++ b/Garden @@ -1 +1 @@ -Subproject commit 840cdebe12edfa65a259811f2624ac72e3953406 +Subproject commit 49fc0dbf27573e378d7295b87936e324cb82b17b diff --git a/site/.vitepress/config.ts b/site/.vitepress/config.ts index c3908cc6..41c28cc4 100644 --- a/site/.vitepress/config.ts +++ b/site/.vitepress/config.ts @@ -21,6 +21,7 @@ module.exports = { title: 'The Paper Pilot', description: 'The Paper Pilot\'s Digital Garden', mpa: true, + appearance: false, vite: { ssr: { noExternal: [ @@ -34,7 +35,7 @@ module.exports = { }, head: [ ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }], - ['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto+Mono:ital,wght@0,400;0,600;1,400&display=block' }], + ['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Itim&family=Roboto+Mono:ital,wght@0,400;0,600;1,400&display=block' }], ['link', { rel: 'manifest', href: '/site.webmanifest' }], ['link', { rel: 'alternate', type: "text/mf2+html", href: '/changelog' }], ['link', { rel: 'alternate', type: "application/rss+xml", title: 'Changelog', href: '/changelog/rss' }], @@ -51,7 +52,8 @@ module.exports = { const firstCommit = (await exec(`git log -n 1 --diff-filter=A --format="" site/${context.page}`)).stdout; const lastCommit = (await exec(`git log -n 1 --diff-filter=M --format="" site/${context.page}`)).stdout; const header = code.slice(0, pageStart < 0 ? 0 : pageStart + 5).replace('

${wc} words, ~${Math.round(wc / 183)} minute read. Planted ${firstCommit}.${lastCommit ? ` Last tended to ${lastCommit}.` : ''}

` + code.slice(pageStart + 5).replace('', '
'); + code = header + `

${wc} words, ~${Math.round(wc / 183)} minute read. Planted ${firstCommit}.${lastCommit ? ` Last tended to ${lastCommit}.` : ''}

` + code.slice(pageStart + 5).replace('', '
'); + code = code.replaceAll(/]*<\/img>|]*>(?!<\/img)/g, text => `
${text}
`); } return code; }, diff --git a/site/.vitepress/theme/custom.css b/site/.vitepress/theme/custom.css index ca371ba7..a4fffe0f 100644 --- a/site/.vitepress/theme/custom.css +++ b/site/.vitepress/theme/custom.css @@ -1,35 +1,68 @@ +html { + overflow-x: hidden; +} + :root { - --vp-font-family-base: Inter; + --vp-c-bg: #3B4252; + --vp-c-bg-elv: #434C5E; + --vp-font-family-base: Itim; --vp-font-family-mono: Roboto Mono; + --vp-layout-max-width: 1080px; + --vp-nav-height: 48px; + --vp-z-index-nav: 0; } -@font-face { - font-family: Inter; - font-display: block; +footer { + color: var(--vp-c-default-1); } -.main .name .clip { - font-family: Pacifico; +footer a[href^=http]:after { + color: var(--vp-c-border) !important; } .title { justify-content: center; + border: none !important; + position: unset !important; + padding: 0 !important; + width: unset !important; } .title span { - font-family: Pacifico; font-size: x-large; } .search { - flex-grow: 1; padding-left: 0; - display: block; + display: flex; + flex-grow: 0 !important; + padding-left: unset !important; } .DocSearch-Button { margin: auto; width: unset; + border: none !important; +} + +.DocSearch-Button-Placeholder { + margin-top: unset !important; + padding: unset !important; + font-size: unset !important; + font-weight: unset !important; + color: unset !important; + margin-right: 8px; +} + +.VPNavBarMenu { + align-items: flex-end; +} + +.VPNavBarMenuLink { + line-height: unset !important; + font-size: unset !important; + font-weight: unset !important; + color: unset !important; } ul > li > ul { @@ -37,25 +70,396 @@ ul > li > ul { } ul > li > ul::before { - position: absolute; - content: ""; - width: 2px; - height: 100%; - background: var(--vp-c-text-1); - opacity: 0.3; - left: -16px; + position: absolute; + content: ""; + width: 2px; + background: var(--vp-c-text-1); + opacity: 0.3; + left: -16px; + top: 8px; + bottom: 8px; } +.aside { + display: none !important; +} + +.img-container { + padding: 15px; + position: relative; + height: 11lh; + width: fit-content; +} + +.img-container img { + clip-path: polygon(18px 0%, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0% 18px); + height: 100%; + object-fit: contain; + background: white; +} + +.img-container:after, +.img-container:before { + content: ""; + display: block; + position: absolute; + border: 50px solid transparent; + transform: rotate(135deg); +} + +.img-container:after { + bottom: -60px; + right: -65px; + box-shadow: 0px 7px 6px -9px black; +} + +.img-container:before { + top: -60px; + left: -65px; + box-shadow: 0px -7px 6px -9px black; +} + +.VPDoc { + padding: 0 32px !important; +} + +.vp-doc a { + color: unset; + text-decoration: unset; + font-weight: unset; + text-underline-offset: unset; + margin: 0 -0.4em; + padding: 0.1em 0.4em; + border-radius: 0.8em 0.3em; + background: transparent; + background-image: linear-gradient( + to right, + rgba(255, 225, 0, 0.05), + rgba(255, 225, 0, 0.35) 4%, + rgba(255, 225, 0, 0.15) + ); + -webkit-box-decoration-break: clone; + box-decoration-break: clone; +} + +.vp-doc a:hover { + color: unset; + background-image: linear-gradient( + to right, + rgba(255, 225, 0, 0.1), + rgba(255, 225, 0, 0.7) 4%, + rgba(255, 225, 0, 0.3) + ); +} +.vp-doc a[href^="http"]:after { + content: ""; + display: inline-block; + margin-top: -1px; + margin-left: 4px; + width: 11px; + height: 11px; + background: currentColor; + color: var(--vp-c-text-3); + flex-shrink: 0; + --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E"); + -webkit-mask-image: var(--icon); + mask-image: var(--icon); +} + +.VPNav { + left: 32px !important; + right: 32px !important; + width: unset !important; + position: absolute !important; +} + +.wrapper { + padding: 0 64px !important; +} + +@media (min-width: 960px) { + .wrapper { + padding: 0 16px !important; + } +} + +.VPNavBar { + background-color: unset !important; +} + +.VPNav .container { + align-items: flex-end; +} + +.VPNav .content { + padding: 0 !important; +} + +.VPNav .content-body { + height: unset !important; + align-items: flex-end !important; +} + +.title { + height: unset !important; +} + +.VPNav a, .DocSearch-Button, .VPNav button { + height: 36px !important; + border-radius: 10px 10px 0 0; + padding: 8px !important; + padding-bottom: 16px !important; + margin-bottom: -8px !important; +} + +.VPNav a:hover, .DocSearch-Button:hover, .VPNav button:hover { + margin-bottom: unset !important; +} + +a.title { + background-color: #00ffff; +} + +.DocSearch-Button { + background-color: #ffff00 !important; +} + +.VPNav .link[href="https://moddingtree.com"] { + background-color: #00ff00; +} + +.VPNav .link[href="https://incremental.social"] { + background: #ff00ff; +} + +.VPNav button { + background: #ff0000; +} + +.VPNav [href="https://code.incremental.social/thepaperpilot"] { + background: #ff7700; +} + +.VPNav [href="https://matrix.to/#/@thepaperpilot:incremental.social"] { + background: #3c9a3c; +} + +.VPNav [href="https://incremental.social/u/thepaperpilot"] { + background: #a75aff; +} + +.VPNav .divider { + display: none !important; +} + +.VPSocialLinks { + align-items: flex-end; +} + +.VPSocialLinks::before { + display: none; +} + +.VPNavBarExtra { + margin: 0 !important; +} + +.VPContent { + padding-top: 0 !important; + margin-top: var(--vp-nav-height) !important; + padding-right: calc((100vw - var(--vp-layout-max-width)) / 2) !important; + padding-left: calc((100vw - var(--vp-layout-max-width)) / 2) !important; + z-index: 1; +} + +@media (min-width: 960px) { + .VPNav { + right: calc(max(0px, (100vw - var(--vp-layout-max-width)) / 2) + 32px) !important; + left: calc(max(-15px, (100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)) + 32px) !important; + } + + .VPContent { + padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)) !important; + } +} + +.vp-doc .header-anchor { + margin-left: calc(-1em - 23px); + top: 24px; +} .VPSidebar { opacity: 1 !important; + transition: .5s ease-out !important; + box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2) !important; +} + +.VPLocalNav { + position: fixed !important; + border-bottom: none !important; + background-color: unset !important; + pointer-events: none; +} + +.VPLocalNav > .container > * { + pointer-events: all; +} + +.VPLocalNav .menu { + background: #7afcff; + padding: 4px 8px 4px 30px; + box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2); +} + +.VPLocalNav button:not(.menu) { + background: #ff7eb9; + padding: 4px 30px 4px 8px; + box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2); +} + +.VPLocalNavOutlineDropdown { + padding-right: 0 !important; +} + +.curtain { + display: none; +} + +@media (max-width: 959px) { + .VPSidebar { + margin-left: -1000px !important; + padding: 30px !important; + padding-left: calc(1000px + 30px) !important; + box-sizing: content-box; + background: linear-gradient(to bottom, var(--vp-sidebar-bg-color) 29px, var(--vp-c-divider) 1px); + background-size: 100% 30px; + line-height: 30px; + } +} + +@media (min-width: 960px) { + .VPSidebar { + transform: rotate(1.4deg) !important; + top: calc(var(--vp-nav-height) + 2em) !important; + bottom: unset !important; + --vp-sidebar-width: 300px !important; + background: #feff9c !important; + padding: 30px !important; + width: var(--vp-sidebar-width) !important; + margin-left: max(-15px, calc((100% - (var(--vp-layout-max-width) - 60px)) / 2)) !important; + } +} + +.VPContent .container { + background: linear-gradient(to bottom, var(--vp-sidebar-bg-color) 29px, var(--vp-c-divider) 1px); + background-size: 100% 30px; + line-height: 30px; + box-shadow: 0 0 10px 1px #0003 !important; +} + +.content { + padding: 0 32px !important; +} + +.content-container { + border-left: double 7px var(--vp-c-divider); + padding-left: 8px; + padding-bottom: 30px; + max-width: unset !important; +} + +article { + padding-top: 30px; +} + +.VPDoc h1, .VPDoc h2, .VPDoc h3, .VPDoc h4, .VPDoc h5, .VPDoc h6 { + margin: 0 !important; + padding: 0 !important; + line-height: 30px !important; +} + +.VPDoc h1 + p { + margin-top: 0 !important; +} + +.VPDoc h2, .VPDoc h3, .VPDoc h4, .VPDoc h5, .VPDoc h6 { + margin-top: -3px !important; + padding-top: 23px !important; + border-top-style: solid !important; + border-top-width: 10px !important; + border-image: url(/button.svg) 10 10 10 10 stretch stretch !important; +} + +ul { + margin: 0 !important; +} + +li + li { + margin: 0 !important; +} + +.VPDoc p { + padding: 0 !important; + margin: 30px 0 !important; + line-height: 30px !important; +} + +blockquote { + margin: 30px 0 !important; +} + +blockquote:first-child, +blockquote:first-child p { + margin-top: 0 !important; +} + +.VPDoc :has(+ hr), .VPDoc :has(+ h2), .VPDoc :has(+ h3), .VPDoc :has(+ h4), .VPDoc :has(+ h5), .VPDoc :has(+ h6), .VPDoc :has(+ ul) { + margin-bottom: 0 !important; +} + +hr { + margin-top: -3px !important; + margin-bottom: -7px !important; + border-top-style: solid !important; + border-top-width: 10px !important; + border-image: url(/button.svg) 10 10 10 10 stretch stretch !important; + height: 0px !important; +} + +.text { + line-height: 30px !important; + padding: 0 !important; + margin: 0 !important; +} + +.group { + padding-top: 0 !important; +} + +.group + .group { + /* Adapted from https://github.com/chr15m/DoodleCSS */ + border-top-style: solid !important; + border-top-width: 10px !important; + border-image: url(/button.svg) 10 10 10 10 stretch stretch !important; + padding-top: 23px !important; + margin-top: -3px !important; +} + +.VPSidebarItem { + padding-bottom: 0 !important; +} + +.e-content > :last-child { + margin-bottom: 0 !important; } /* Required due to no JS */ -button[aria-haspopup="true"]:focus + .menu { +button[aria-haspopup="true"]:focus + .menu, +.menu:has(:focus) { opacity: 1 !important; visibility: visible !important; } -.VPLocalNav:has(button[aria-expanded="false"]:focus) + .VPSidebar { - transform: unset !important; +.VPLocalNav:has(button[aria-expanded="false"]:focus) + .VPSidebar, +.VPSidebar:has(:focus) { + transform: rotate(1.4deg) !important; } diff --git a/site/garden/the-small-web/index.md b/site/garden/the-small-web/index.md index 484a8dac..a205f633 100644 --- a/site/garden/the-small-web/index.md +++ b/site/garden/the-small-web/index.md @@ -22,8 +22,10 @@ The small web as a whole is [Freeform](/garden/freeform/index.md) - These can form [Webrings](/garden/webrings/index.md) ## Browsing the small web -- Follow [Webrings](/garden/webrings/index.md) or other links from known small websites -- [Marginalia](https://search.marginalia.nu) is a search engine for non-commercial content with a "random" button and filters for the small web explicitly (amongst other useful filters!) + +Follow [Webrings](/garden/webrings/index.md) or other links from known small websites + +[Marginalia](https://search.marginalia.nu) is a search engine for non-commercial content with a "random" button and filters for the small web explicitly (amongst other useful filters!) ## Building personal websites @@ -76,6 +78,6 @@ Hosting can be expensive, but static websites are cheap ## Recommended videos about the small web -