Implement new paper-based theme

This commit is contained in:
thepaperpilot 2024-06-16 23:30:48 -05:00
parent 45f5bd035b
commit b18e47a2ef
7 changed files with 507 additions and 52 deletions

2
Garden

@ -1 +1 @@
Subproject commit 840cdebe12edfa65a259811f2624ac72e3953406
Subproject commit 49fc0dbf27573e378d7295b87936e324cb82b17b

View file

@ -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="<a href='https://code.incremental.social/thepaperpilot/pages/commit/%H' title='%ad'><time class='dt-published' datetime='%ad'>%ar</time></a>" site/${context.page}`)).stdout;
const lastCommit = (await exec(`git log -n 1 --diff-filter=M --format="<a href='https://code.incremental.social/thepaperpilot/pages/commit/%H' title='%ad'><time class='dt-updated' datetime='%ad'>%ar</time></a>" site/${context.page}`)).stdout;
const header = code.slice(0, pageStart < 0 ? 0 : pageStart + 5).replace('<h1 ', '<article class="h-entry"><h1 class="p-name" ');
return header + `<p>${wc} words, ~${Math.round(wc / 183)} minute read. Planted ${firstCommit}.${lastCommit ? ` Last tended to ${lastCommit}.` : ''}</p><hr/><div class="e-content">` + code.slice(pageStart + 5).replace('</main>', '</div></article></main>');
code = header + `<p>${wc} words, ~${Math.round(wc / 183)} minute read. Planted ${firstCommit}.${lastCommit ? ` Last tended to ${lastCommit}.` : ''}</p><hr/><div class="e-content">` + code.slice(pageStart + 5).replace('</main>', '</div></article></main>');
code = code.replaceAll(/<img[^<>]*<\/img>|<img[^<>]*>(?!<\/img)/g, text => `<div class="img-container">${text}</div>`);
}
return code;
},

View file

@ -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;
}

View file

@ -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
<iframe width="560" height="315" src="https://www.youtube.com/embed/00qwzmMrtok" title="" frameBorder="0" allowFullScreen />
[The web has lost its soul](https://www.youtube.com/watch?v=00qwzmMrtok)
<iframe width="560" height="315" src="https://www.youtube.com/embed/rTSEr0cRJY8" title="" frameBorder="0" allowFullScreen />
[You should check out the indie web](https://www.youtube.com/watch?v=rTSEr0cRJY8)

View file

@ -21,5 +21,7 @@ This is not Wikipedia. My thoughts are biased and argumentative, but to the best
Written in [Logseq](/garden/logseq/index.md) and rendered with [Vitepress](/garden/vitepress/index.md)
I want to utilize the strategies described in [Andy's working notes](https://notes.andymatuschak.org/About_these_notes?stackedNotes=zPKTSiU725W9WQCqoVPBcxm) to help improve my digital garden
Suggested pages:
- [The Small Web](/garden/the-small-web/index.md)

View file

@ -1,28 +1,6 @@
---
title: The Paper Pilot
layout: home
sidebar: true
hero:
name: The Paper Pilot
tagline: I'm Anthony, or The Paper Pilot, and I make fun games and tools!
actions:
- theme: brand
text: My Projects
link: /projects/
- theme: alt
text: My Resume
link: https://resume.incremental.social/thepaperpilot/thepaperpilot
features:
- icon: 🧑‍💻
title: Profectus
details: A game engine that grows with you
link: https://moddingtree.com
- icon: 👤
title: Incremental Social
details: A kind social media site for the incremental games community
link: https://incremental.social
- icon: 🎮
title: My Games
details: Most of my games are playable on Itch
link: https://thepaperpilot.itch.io
title: Hello!
prev: false
next: false
---
I'm Anthony, or The Paper Pilot, and I make fun games and tools!

67
site/public/button.svg Normal file
View file

@ -0,0 +1,67 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="31.774345mm"
height="16.231627mm"
viewBox="0 0 112.58626 57.513637"
id="svg6626"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="button.svg">
<defs
id="defs6628" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="5.6"
inkscape:cx="67.240825"
inkscape:cy="25.93048"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata6631">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-7.6331e-7,-994.84816)">
<path
style="fill:none;stroke:#ddd;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 15.473887,996.80148 c 5.572695,-0.10841 11.15435,-0.0543 16.714039,0.0906 5.00588,0.097 12.756552,0.87502 19.148382,0.62208 4.280136,0.48559 8.602875,-0.3113 12.911003,0.28777 6.163273,-0.0723 12.310277,-1.00298 18.496194,-0.66376 5.809548,0.33404 10.05299,0.46817 17.518635,0.33084 7.40211,-0.5156 10.78398,0.10152 10.26306,7.29349 -0.30215,6.1264 -0.16697,11.363 -0.17477,16.0423 0.0347,8.6483 1.36124,24.9985 -0.56672,27.6141 -2.95146,3.7906 -9.953646,1.0759 -14.305775,1.16 -3.987162,-0.1435 -9.602158,1.1027 -13.522882,0.042 -4.88004,-0.6726 -8.213389,0.6597 -13.114383,0.3055 -4.963838,0 -9.786599,-0.8446 -14.568998,0.3116 -5.884763,0.7772 -13.383599,0.6445 -19.199969,-0.5102 -5.841812,-0.9029 -9.964291,-0.064 -15.840154,-0.1277 -4.77834,-0.049 -15.0361127,1.7577 -16.6046758,-0.035 -1.74810147,-1.8496 -0.3843824,-11.7811 -0.4378816,-15.6446 -0.3742554,-9.2274 -0.5360118,-15.6032 0.1290928,-24.8231 0.086012,-1.6135 -1.1338399,-8.4214 0.014457,-10.2105 2.4145353,-3.57088 9.2572886,-1.58703 13.1413456,-2.08502 z"
id="path242"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3 KiB