Homepage design update.

This commit is contained in:
voussoir 2023-08-14 18:38:46 -07:00
parent ad14a07485
commit c0fcab7afe
5 changed files with 520 additions and 169 deletions

85
voussoir.net/cv/video.svg Normal file
View file

@ -0,0 +1,85 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
version="1.1"
id="svg1521"
xml:space="preserve"
width="640"
height="640"
viewBox="0 0 640 640"
sodipodi:docname="video.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
inkscape:export-xdpi="29.4"
inkscape:export-ydpi="29.4"><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1019"
id="namedview8"
showgrid="false"
inkscape:pagecheckerboard="true"
inkscape:zoom="0.80322911"
inkscape:cx="468.52147"
inkscape:cy="260.33681"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg1521"
inkscape:snap-smooth-nodes="true"
inkscape:snap-object-midpoints="true" /><metadata
id="metadata1527"><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 /></cc:Work></rdf:RDF></metadata><defs
id="defs1525" /><circle
r="35.5"
cy="121.12435"
cx="320"
id="circle5643"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.00157475;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" /><circle
style="opacity:1;fill:#000000;fill-opacity:0.50697672;stroke:none;stroke-width:1.00157475;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="circle5657"
cx="460.62631"
cy="179.37367"
r="35.5" /><circle
r="35.5"
cy="320"
cx="518.87567"
id="circle5659"
style="opacity:1;fill:#000000;fill-opacity:0.50697672;stroke:none;stroke-width:1.00157475;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" /><circle
style="opacity:1;fill:#000000;fill-opacity:0.50697672;stroke:none;stroke-width:1.00157475;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="circle5661"
cx="460.62631"
cy="460.62631"
r="35.5" /><circle
r="35.5"
cy="518.87567"
cx="320"
id="circle5663"
style="opacity:1;fill:#000000;fill-opacity:0.50697672;stroke:none;stroke-width:1.00157475;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" /><circle
style="opacity:1;fill:#000000;fill-opacity:0.50697672;stroke:none;stroke-width:1.00157475;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="circle5665"
cx="179.37367"
cy="460.62631"
r="35.5" /><circle
r="35.5"
cy="320"
cx="121.12435"
id="circle5667"
style="opacity:1;fill:#000000;fill-opacity:0.50697672;stroke:none;stroke-width:1.00157475;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" /><circle
style="opacity:1;fill:#000000;fill-opacity:0.50697672;stroke:none;stroke-width:1.00157475;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="circle5669"
cx="179.37367"
cy="179.37367"
r="35.5" /></svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View file

@ -55,7 +55,6 @@ body.start_eating_that_trashcan
h2
{
font-size: 3em;
border-bottom: 2px solid var(--color_text_highlight);
color: var(--color_text_highlight);
}
@ -189,18 +188,20 @@ code { font-family: monospace; }
animation-iteration-count: 1;
}
.width_limited
{
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.cvitem
{
width: 100%;
padding: 16px;
border-radius: 16px;
display: grid;
grid-column-gap: 16px;
margin-top: 16px;
margin-bottom: 16px;
background-color: #1a1a1a;
box-shadow: #000 0px 0px 40px -10px;
}
.cvitem:nth-of-type(odd)
{
}
.cvitem:nth-of-type(even)
{
@ -210,16 +211,6 @@ code { font-family: monospace; }
background-position-x: -30px;
background-position-y: -30px;
}
.cvitem:nth-of-type(odd) > div
{
display: grid;
grid-column-gap: 16px;
}
.cvitem:nth-of-type(even) > div
{
display: grid;
grid-column-gap: 16px;
}
.cvitem_logo
{
grid-area: logo;
@ -277,24 +268,34 @@ body.start_eating_that_trashcan .cvitem_details
--wide: 1;
}
body
{
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
#headline { line-height: 3.25em; }
#headline_l1 { font-size: 5.0em; }
#headline_splash { font-size: 1.5em; }
.cvitem:nth-of-type(odd) > div
.cvitem:nth-of-type(odd)
{
/*transform: translate(-96px, 0);*/
grid-template:
"logo title" auto
"logo details" 1fr
/ 1fr 3fr;
/ 192px 3fr;
}
.cvitem:nth-of-type(even) > div
.cvitem:nth-of-type(even)
{
/*transform: translate(96px, 0);*/
grid-template:
"title logo" auto
"details logo" 1fr
/ 3fr 1fr;
/ 3fr 192px;
}
}
@ -305,18 +306,24 @@ body.start_eating_that_trashcan .cvitem_details
--narrow: 1;
}
body
{
width: 100%;
max-width: 100%;
}
#headline { line-height: 2.25em; }
#headline_l1 { font-size: 3em; }
#headline_splash { font-size: 1.5em; }
.cvitem:nth-of-type(odd) > div
.cvitem:nth-of-type(odd)
{
grid-template:
"logo title" auto
"details details" 1fr
/ 1fr 3fr;
}
.cvitem:nth-of-type(even) > div
.cvitem:nth-of-type(even)
{
grid-template:
"title logo" auto
@ -380,25 +387,43 @@ body.start_eating_that_trashcan .cvitem_details
right: 64px;
bottom: 64px;
}
@keyframes buffer_rotate
{
from
{
transform: rotate(0deg);
}
to
{
transform: rotate(360deg);
}
}
#buffer_rotate
{
animation-name: buffer_rotate;
animation-duration: 1s;
animation-timing-function: steps(8, start);
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<section id="headline">
<div class="tilt_holder width_limited">
<div class="tilt_holder">
<h1 id="headline_l1">voussoir.net</h1>
</div>
<div class="tilt_holder width_limited">
<div class="tilt_holder">
<div id="headline_splash"><noscript>somewhat new and hardly improved</noscript></div>
</div>
<button id="headline_fullscreen_button" onclick="return fullscreen_toggle();"></button>
</section>
<section id="cv">
<h2 class="width_limited" id="software">Software</h2>
<h2 id="software">Software</h2>
<div class="cvitem">
<div class="width_limited">
<div class="cvitem">
<h3 class="cvitem_title" id="trkpt">trkpt</h3>
<div class="cvitem_details">
<p>trkpt is a 24/7 GPS recorder that shows me where I've been.</p>
@ -407,10 +432,8 @@ body.start_eating_that_trashcan .cvitem_details
</div>
<img class="cvitem_logo" style='background-color: transparent !important' src="./cv/trkpt.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<div class="cvitem">
<h3 class="cvitem_title" id="bringrss">BringRSS</h3>
<div class="cvitem_details">
<p>BringRSS is an RSS client and newsreader with a web interface, made with Flask and SQLite3. RSS is a great way to keep up with your favorite forums, bloggers, podcasts, and newspapers since all the new posts come straight to you in a single place. BringRSS can send news objects to your own Python scripts, allowing for powerful automation like podcast downloading, email notifications, and other more niche features that would be outside the scope of the BringRSS application itself.</p>
@ -419,10 +442,8 @@ body.start_eating_that_trashcan .cvitem_details
</div>
<img class="cvitem_logo" src="./cv/bringrss.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<div class="cvitem">
<h3 class="cvitem_title" id="ycdl">YCDL</h3>
<div class="cvitem_details">
<p>YoutubeChannelDownloader was born out of a dissatisfaction with YouTube's own interface for keeping track of which videos I have already watched, as well as a desire to integrate with youtube-dl. YCDL makes it easy for me to watch through a channel's catalog of videos, picking which ones I'd like to download while ignoring the others. Plus, as it creates an offline database, it will retain metadata about videos even after they are removed or deleted from the original YouTube channel.</p>
@ -430,10 +451,8 @@ body.start_eating_that_trashcan .cvitem_details
</div>
<img class="cvitem_logo" src="./cv/ycdl.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<div class="cvitem">
<h3 class="cvitem_title" id="etiquette">Etiquette</h3>
<div class="cvitem_details">
<p>Etiquette is a tag-based file organization system with a web interface, built with Flask and SQLite3. Tag-based systems solve problems that a traditional folder hierarchy can't: <em>which folder should a file go in if it equally belongs in both?</em> and <em>how do I make my files searchable without littering the filenames themselves with keywords?</em></p>
@ -443,10 +462,8 @@ body.start_eating_that_trashcan .cvitem_details
</div>
<img class="cvitem_logo" src="./cv/etiquette.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<div class="cvitem">
<h3 class="cvitem_title" id="timesearch">Timesearch</h3>
<div class="cvitem_details">
<p>Timesearch is a package of tools for archiving data from reddit.com. Subreddits, user posts, comments, CSS files, and community wiki files can be downloaded and easily updated.</p>
@ -454,10 +471,8 @@ body.start_eating_that_trashcan .cvitem_details
<p><a href="https://github.com/voussoir/timesearch">https://github.com/voussoir/timesearch</a></p></div>
<img class="cvitem_logo" src="./cv/timesearch.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<div class="cvitem">
<h3 class="cvitem_title" id="voussoirkit">voussoirkit</h3>
<div class="cvitem_details">
<p>The voussoirkit library contains code that I have found useful to include in my other projects. Everything from <code>bytestring</code> that converts integer numbers of bytes into "3.145 MiB" strings, to <code>pathclass</code> and <code>spinal</code> which provide object-oriented file and directory operations and copy routines. Some modules like <code>winglob</code> boost cross-compatibility by smoothing over differences between Windows and Unix. This way I can easily deploy new features and bug fixes to all my programs.</p>
@ -465,10 +480,8 @@ body.start_eating_that_trashcan .cvitem_details
</div>
<img class="cvitem_logo" src="./cv/voussoirkit.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<div class="cvitem">
<h3 class="cvitem_title" id="hnarchive">HN Archive</h3>
<div class="cvitem_details">
<p>hnarchive is a tool that downloads all submissions and comments on <a href="https://news.ycombinator.com">Hacker News</a>. HN is a forum that is mostly focused on technology and entrepreneurship. Although I am not entirely sure if all participants are <a href="https://voussoir.net/writing/cyborgs_on_hn">human</a>, it is a knowledgebase of considerable quality and in my opinion worth preserving.</p>
@ -476,10 +489,8 @@ body.start_eating_that_trashcan .cvitem_details
</div>
<img class="cvitem_logo" src="./cv/hnarchive.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<div class="cvitem">
<h3 class="cvitem_title" id="epubfile">Epubfile & Sigilplugins</h3>
<div class="cvitem_details">
<p>I use the wonderful program Sigil to edit epub files. Sigil has a python plugin system for which I have written a few modules. But, since the plugins can only operate on one book at a time while it is open in Sigil, I needed something a little different to edit epub files en masse.</p>
@ -489,10 +500,8 @@ body.start_eating_that_trashcan .cvitem_details
</div>
<img class="cvitem_logo" src="./cv/epub.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<div class="cvitem">
<h3 class="cvitem_title" id="redditbots">Reddit bots</h3>
<div class="cvitem_details">
<p>This repository is in archive status now and is rarely updated. From 2014 to 2016 I learned Python, SQL, and HTTP by writing bots for reddit and contributing to PRAW, the Python Reddit API Wrapper. I took requests on <a href="https://old.reddit.com/r/RequestABot">/r/RequestABot</a> and produced dozens of easily modifiable bots. The tasks ranged from "allow users to only make one post per day" to "allow moderators to write a post now and schedule it to appear later". With almost 400 stars now it is my most successful repository, though the code quality is not up to the same standards I have today.</p>
@ -500,105 +509,18 @@ body.start_eating_that_trashcan .cvitem_details
</div>
<img class="cvitem_logo" src="./cv/subredditbirthdays.png"/>
</div>
</div>
<h2 class="width_limited" id="techinterests">Tech interests</h2>
<div class="cvitem">
<div class="width_limited">
<h3 class="cvitem_title" id="python">Python</h3>
<div class="cvitem_details">
<p>Python has been my language of choice since I began learning it in 2014. In addition to the projects already mentioned here, I have an entire <a href="https://github.com/voussoir/cmd">repository</a> dedicated to scripts / utilities that I use from the command line, and I have an even greater number of unpublished scripts for personal or bespoke use. I do file management, HTTP, image processing, task automation, and more.</p>
</div>
<img class="cvitem_logo" src="./cv/python.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<h3 class="cvitem_title" id="htmlcssjs">HTML/CSS/JS</h3>
<div class="cvitem_details">
<blockquote><i>If you want to view paradise<br/>Simply press F12 and view it</i></blockquote>
<p>This page, like the those in Etiquette and YCDL, was written entirely by hand and without the use of any jQuery, Angular, React, etc. HTML5, CSS3, and especially CSS Grid, have brought many quality of life features to the native experience. With some concessions, and the fact that I don't need to target non-modern browsers, I feel that my grasp of the core systems is better than that of someone who relies on a framework from day one.</p>
</div>
<img class="cvitem_logo" src="./cv/html5.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<h3 class="cvitem_title" id="sqlite">SQLite</h3>
<div class="cvitem_details">
<p>Some people tease SQLite for not being as big and featureful as something like MySQL, but I for one think it's one of the greatest gifts to the database ecosystem. <a href="/writing/sqlite_what_a_hunk">I love it</a>. Thanks to its fast and easy deployment plus cross-platform compatibility, sqlite databases tend to be the best choice for storing structured data. SQLite3 has been my go-to database since 2014 and hasn't failed me yet. Absolutely a staple for my projects listed here.</p>
</div>
<img class="cvitem_logo" src="./cv/sqlite.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<h3 class="cvitem_title" id="http">HTTP API Design & Use</h3>
<div class="cvitem_details">
<p>During my development of Etiquette, I have continuously aimed to make the API as accessible and automateable as possible. Getting a peek behind the scenes is as easy as adding <code>.json</code> to the URL. I owe much of my early learning to my work with the reddit API, and since then I've regularly automated web interactions and scraped web data with Python and <code>requests</code>. For sites without an actual API to speak of, I'm pretty good at reverse engineering from the Network panel and javascript source. Try me.</p>
</div>
<img class="cvitem_logo" src="./cv/api.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<h3 class="cvitem_title" id="graphics">Graphics</h3>
<div class="cvitem_details">
<p>By now you've noticed that this page is overflowing with beautiful artwork... some of which is even mine! I enjoy using the free vector editor <a href="https://inkscape.org/">Inkscape</a> to create logos and icons for my projects, with the occasional program to <a href="https://github.com/voussoir/else/tree/master/Minecraft3DVector">auto-generate</a> vector files.</p>
<p>During my time working at the Cal Poly Pomona Learning Resource Center, I became very familiar with Google Slides to create attractive and innovative ways of sharing study tips with students.</p>
</div>
<img class="cvitem_logo" src="./cv/inkscape.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<h3 class="cvitem_title" id="digitalmedia">Digital media & FFmpeg</h3>
<div class="cvitem_details">
<p>I use FFmpeg practically on a daily basis to manage, convert, and analyze my media files. Although my educational background is in software development, my dream job would be something in digital media preservation, film & book scanning, archival, metadata management, etc. If you've got something going on in that field, let me know!</p>
</div>
<img class="cvitem_logo" src="./cv/ffmpeg.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<h3 class="cvitem_title" id="openstreetmap">OpenStreetMap</h3>
<div class="cvitem_details">
<p>I contribute to OpenStreetMap, and you should too! I use <a href="https://f-droid.org/en/packages/net.osmand.plus/">OsmAnd</a> instead of Google Maps. I record GPX tracks with <a href="https://f-droid.org/en/packages/org.y20k.trackbook/">Trackbook</a>, edit at home with <a href="https://josm.openstreetmap.de/">JOSM</a>, and edit on the go with <a href="https://f-droid.org/en/packages/de.blau.android/">Vespucci</a> and <a href="https://f-droid.org/en/packages/de.westnordost.streetcomplete/">StreetComplete</a>.</p>
</div>
<img class="cvitem_logo" src="./cv/osm.png"/>
</div>
</div>
<h2 class="width_limited" id="otherinterests">Other interests</h2>
<div class="cvitem">
<div class="width_limited">
<h3 class="cvitem_title" lang="ko" id="korean">한국어</h3>
<div class="cvitem_details">
<p lang="ko">2018년 10월부터 한국어를 공부하고 있습니다. 한국 영화들이 많이 재미 있어서 만약 한 아시아 언어를 배우면 한국어를 배우겠다고 결정했습니다. 진행이 조금 느리지만 일정합니다. 매일매일 Anki를 하고 한국 전래동화 읽습니다. 몇 년 이내 한국을 방문하면 좋겠습니다.</p>
</div>
<img class="cvitem_logo" src="./cv/korean.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<h2 id="otherinterests">Other work</h2>
<div class="cvitem">
<h3 class="cvitem_title" id="writing">Writing</h3>
<div class="cvitem_details">
<p>I recently decided to start writing from time to time. My thoughts are mostly about technology in culture, learning, and other <i>choses sérieuses</i>. I disable spellcheck because I'm a <a href="https://www.youtube.com/watch?v=7ov1DDjHt8c" title="Epic Rap Battle! - Rhett &amp; Link">stellar speller</a>.</p>
<p>My thoughts are mostly about technology in culture, learning, and other <i>choses sérieuses</i>. I disable spellcheck because I'm a <a href="https://www.youtube.com/watch?v=7ov1DDjHt8c" title="Epic Rap Battle! - Rhett &amp; Link">stellar speller</a>.</p>
<p><a href="https://voussoir.net/writing">https://voussoir.net/writing</a></p>
</div>
<img class="cvitem_logo" src="./cv/writing.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<div class="cvitem">
<h3 class="cvitem_title" id="photography">Photography</h3>
<div class="cvitem_details">
<p>To be administered by intravitreal injection.</p>
@ -606,25 +528,27 @@ body.start_eating_that_trashcan .cvitem_details
</div>
<img class="cvitem_logo" style='background-color: transparent !important' src="./cv/photography.jpg"/>
</div>
</div>
<h2 class="width_limited" id="contact">Contact</h2>
<div class="cvitem">
<div class="width_limited">
<h3 class="cvitem_title" id="meansoftransmission">Means of transmission</h3>
<div class="cvitem">
<h3 class="cvitem_title" id="video">Video</h3>
<div class="cvitem_details">
<p>If you'd like to get in touch, please email <code>contact@voussoir.net</code>. If you'd like to chat in real time, consider:</p>
<ul>
<li>Matrix, my id is <a href="https://matrix.to/#/@voussoir:matrix.org"><code>@voussoir:matrix.org</code></a> and my public room is <a href="https://matrix.to/#/!aOtSMPrYrQuRgWJwFd:matrix.org"><code>#voussoircontact:matrix.org</code></a>.</li>
</ul>
<p>Please email me first so we can coordinate.</p>
<p>If I wanted to put it into words, I would have written it down.</p>
<p><a href="https://voussoir.net/video">https://voussoir.net/video</a></p>
<p>Also available on <a href="http://www.youtube.com/channel/UCpwYWdXmYgNV75Ak2-l0BQw">youtube</a></p>
</div>
<img id="buffer_rotate" class="cvitem_logo" src="./cv/video.png"/>
</div>
<h2 id="contact">Modes of transmission</h2>
<div class="cvitem">
<h3 class="cvitem_title" id="meansoftransmission">Contact by email</h3>
<div class="cvitem_details">
<p>If you'd like to get in touch, please email <code>contact@voussoir.net</code>.</p>
</div>
<img class="cvitem_logo" src="./cv/contact.png"/>
</div>
</div>
<div class="cvitem">
<div class="width_limited">
<div class="cvitem">
<h3 class="cvitem_title" id="gitmirrors">Git mirrors</h3>
<div class="cvitem_details">
<p>Eggs. Baskets.</p>
@ -634,25 +558,18 @@ body.start_eating_that_trashcan .cvitem_details
</div>
<img class="cvitem_logo" src="./cv/gits.png"/>
</div>
</div>
</section>
<div id="greatjob" class="width_limited">
<div id="greatjob">
<p>It looks like you're using an ad blocker. Great job!</p>
</div>
<img id="sunglasses" src="./cv/sunglasses.svg" title="Put on these glasses or start eating that trash can" onclick="return start_eating_that_trashcan();"/>
<footer class="width_limited">
<h2 class="width_limited" id="thefooter">The footer</h2>
<footer>
<h2 id="thefooter">The footer</h2>
<p class="image_credit"><a href="https://commons.wikimedia.org/wiki/File:Epub_logo_color.svg">EPUB logo</a></p>
<p class="image_credit"><a href="https://www.python.org/community/logos/">Python logo</a> under the PSF Trademark Usage Policy</p>
<p class="image_credit"><a href="https://www.w3.org/html/logo/">HTML5 logo</a> under CC-BY-3.0</p>
<p class="image_credit"><a href="https://commons.wikimedia.org/wiki/File:SQLite370.svg">SQLite logo</a> in the public domain</p>
<p class="image_credit"><a href="https://inkscape.org/about/branding/">Inkscape logo</a> under CC-BY-SA 3.0</p>
<p class="image_credit"><a href="https://trac.ffmpeg.org/wiki/SubmitALogo">FFmpeg logo</a></p>
<p class="image_credit"><a href="https://git-scm.com/downloads/logos">Git logo</a></p>
<p class="image_credit"><a href="https://wiki.openstreetmap.org/wiki/Logos#Official_logos">OpenStreetMap logo</a></p>
<p class="image_credit"><a href="https://www.ycombinator.com/press/">YCombinator logo</a></p>
<p class="image_credit">Derivative artwork based on <a href="https://www.redditinc.com/brand">Reddit's</a> classic Snoo mascot</p>
<center><span class="eternalseptember_clock" data-eternalseptember-strftime="%A, %B %d"></span>, <a href="/eternalseptember">1993</a></center>
@ -862,7 +779,6 @@ const SPLASHES = [
"error: low on mayonnaise", // Worst Computer Ever https://youtu.be/HFXsMfcExi4
"est arrivé près de chez vous", // C'est arrivé près de chez vous / Man Bites Dog (1992)
"even ezekial thinks that my mind is gone", // Weird Al Yankovic, Amish Paradise https://youtu.be/lOfZLb33uCg
"everywhere you go, there you are",
"evi: 11.1.89 22:30h", // Der siebente Kontinent / The Seventh Continent (1989)
"exists in three dimensions",
"exists just below the surface",
@ -960,6 +876,7 @@ const SPLASHES = [
"if you build it, they will come", // Field of Dreams (1989)
"if you don't watch yourself, who will?",
"if you see something, say something",
"if you want to view paradise, simply press f12 and view it",
"ignorance is bliss",
"impulse 101", // https://developer.valvesoftware.com/wiki/Impulse
"in this moment, i am euphoric", // aalewis https://knowyourmeme.com/memes/in-this-moment-i-am-euphoric
@ -1304,6 +1221,7 @@ const SPLASHES = [
"when the air becomes uraneous we will all go simultaneous", // Tom Lehrer, We Will All Go Together When We Go
"when the devil is too busy and death's a bit too much", // Voltaire, When You're Evil https://youtu.be/tWYCS6k1IOA
"where depression's just status quo", // Little Shop of Horrors, Skid Row https://youtu.be/z0kSBiu1IGk
"wherever you go, there you are",
"whether you're a boy or a girl or a super computer", // Kero Kero Bonito, Sick Beat (2013)
"who is but the form following the function of what", // V for Vendetta (2005)
"why build one when you can have two at twice the price?", // Contact (1997)

View file

@ -150,6 +150,7 @@ def write_directory_index(directory):
items.sort(key=lambda item: item.published, reverse=sort_reverse)
page = jinja2.Template('''
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

301
voussoir.net/video/dark.css Normal file
View file

@ -0,0 +1,301 @@
:root
{
--color_bodybg: #272822;
--color_codebg: rgba(255, 255, 255, 0.05);
--color_codeborder: rgba(255, 255, 255, 0.2);
--color_h1bg: #284142;
--color_htmlbg: #1b1c18;
--color_blockquotebg: rgba(0, 0, 0, 0.2);
--color_blockquoteedge: rgba(255, 255, 255, 0.2);
--color_inlinecodebg: rgba(255, 255, 255, 0.1);
--color_link: #ae81ff;
--color_maintext: #ddd;
}
*, *:before, *:after
{
box-sizing: inherit;
}
html
{
box-sizing: border-box;
background-color: var(--color_htmlbg);
color: var(--color_maintext);
font-family: Verdana, sans-serif;
font-size: 10pt;
}
body
{
margin: 0;
display: grid;
grid-auto-flow: row;
grid-auto-rows: auto;
grid-row-gap: 32px;
padding-top: 32px;
padding-bottom: 32px;
}
article
{
min-width: 10em;
max-width: 70em;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
padding: 16px;
background-color: var(--color_bodybg);
display: grid;
grid-auto-flow: row;
grid-auto-rows: auto;
grid-row-gap: 8px;
}
@media not print
{
article
{
box-shadow: #000 0px 0px 40px -10px;
}
}
@media screen and (min-width: 600px)
{
article
{
width: 90%;
}
}
@media screen and (max-width: 600px)
{
article
{
width: 100%;
}
body > article:first-of-type
{
margin-top: 0;
}
body > article:last-of-type
{
margin-bottom: 0;
}
}
h1, h2, h3, h4, h5
{
padding: 8px;
}
h2, h3, h4, h5
{
border-bottom: 1px solid var(--color_maintext);
/*background-color: var(--color_h1bg);*/
}
h1 {font-size: 2.5em;} h1 * {font-size: inherit;}
h2 {font-size: 2.0em;} h2 * {font-size: inherit;}
h3 {font-size: 1.5em;} h3 * {font-size: inherit;}
h4 {font-size: 1.2em;} h4 * {font-size: inherit;}
h5 {font-size: 1.0em;} h5 * {font-size: inherit;}
.header_anchor_link {display: none; font-size: 1.0em; text-decoration: none}
h1:hover > .header_anchor_link {display: initial;}
h2:hover > .header_anchor_link {display: initial;}
h3:hover > .header_anchor_link {display: initial;}
h4:hover > .header_anchor_link {display: initial;}
h5:hover > .header_anchor_link {display: initial;}
a
{
color: var(--color_link);
cursor: pointer;
}
article *
{
max-width: 100%;
word-wrap: break-word;
}
#table_of_contents
{
border: 1px solid var(--color_blockquoteedge);
padding-top: 8px;
padding-bottom: 8px;
border-radius: 8px;
}
article > *
{
margin:0
}
article > audio
{
width: 100%;
}
p > img,
p > a > img
{
display: block;
margin: auto;
max-height: 700px;
}
blockquote
{
background-color: var(--color_blockquotebg);
margin-inline-start: 0;
margin-inline-end: 0;
border-left: 4px solid var(--color_blockquoteedge);
padding: 8px;
padding-inline-start: 20px;
padding-inline-end: 20px;
}
table
{
border-collapse: collapse;
font-size: 1em;
}
table, table th, table td
{
border: 1px solid var(--color_maintext);
}
table th, table td
{
padding: 4px;
}
ol ol, ul ul, ol ul, ul ol
{
padding-inline-start: 20px;
}
*:not(pre) > code
{
background-color: var(--color_inlinecodebg);
border-radius: 4px;
line-height: 1.5;
padding-left: 4px;
padding-right: 4px;
}
pre
{
padding: 8px;
border: 1px solid var(--color_codeborder);
background-color: var(--color_codebg);
overflow-x: auto;
}
code,
pre,
.highlight *
{
font-family: monospace;
}
.article_list
{
list-style: none;
padding-inline-start: 0;
}
.article_list > li
{
margin: 0.5em 0;
}
/*
Thank you richleland for pre-building this Monokai style.
https://github.com/richleland/pygments-css
*/
:root
{
--color_monokai_bg: #272822;
--color_monokai_purple: #ae81ff;
--color_monokai_green: #a6e22e;
--color_monokai_pink: #f92672;
--color_monokai_white: #f8f8f2;
--color_monokai_orange: #fd971f;
--color_monokai_yellow: #e6db74;
--color_monokai_blue: #66d9ef;
}
.highlight .hll { background-color: #49483e }
.highlight { background-color: var(--color_monokai_bg); color: var(--color_monokai_white) }
.highlight .c { color: #75715e } /* Comment */
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.highlight .k { color: var(--color_monokai_pink) } /* Keyword */
.highlight .l { color: var(--color_monokai_purple) } /* Literal */
.highlight .n { color: var(--color_monokai_white) } /* Name */
.highlight .o { color: var(--color_monokai_pink) } /* Operator */
.highlight .p { color: var(--color_monokai_white) } /* Punctuation */
.highlight .ch { color: #75715e } /* Comment.Hashbang */
.highlight .cm { color: #75715e } /* Comment.Multiline */
.highlight .cp { color: #75715e } /* Comment.Preproc */
.highlight .cpf { color: #75715e } /* Comment.PreprocFile */
.highlight .c1 { color: #75715e } /* Comment.Single */
.highlight .cs { color: #75715e } /* Comment.Special */
.highlight .gd { color: var(--color_monokai_pink) } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gi { color: var(--color_monokai_green) } /* Generic.Inserted */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #75715e } /* Generic.Subheading */
.highlight .kc { color: var(--color_monokai_purple) } /* Keyword.Constant */
.highlight .kd { color: var(--color_monokai_blue) } /* Keyword.Declaration */
.highlight .kn { color: var(--color_monokai_pink) } /* Keyword.Namespace */
.highlight .kp { color: var(--color_monokai_blue) } /* Keyword.Pseudo */
.highlight .kr { color: var(--color_monokai_blue) } /* Keyword.Reserved */
.highlight .kt { color: var(--color_monokai_blue) } /* Keyword.Type */
.highlight .ld { color: var(--color_monokai_yellow) } /* Literal.Date */
.highlight .m { color: var(--color_monokai_purple) } /* Literal.Number */
.highlight .s { color: var(--color_monokai_yellow) } /* Literal.String */
.highlight .na { color: var(--color_monokai_white) } /* Name.Attribute */
.highlight .narg {color: var(--color_monokai_orange) } /* Custom Name.Argument */
.highlight .nb { color: var(--color_monokai_blue) } /* Name.Builtin */
.highlight .nc { color: var(--color_monokai_white) } /* Name.Class */
.highlight .no { color: var(--color_monokai_blue) } /* Name.Constant */
.highlight .nd { color: var(--color_monokai_green) } /* Name.Decorator */
.highlight .ni { color: var(--color_monokai_white) } /* Name.Entity */
.highlight .ne { color: var(--color_monokai_blue) } /* Name.Exception */
.highlight .nf { color: var(--color_monokai_green) } /* Name.Function */
.highlight .nl { color: var(--color_monokai_white) } /* Name.Label */
.highlight .nn { color: var(--color_monokai_white) } /* Name.Namespace */
.highlight .nx { color: var(--color_monokai_green) } /* Name.Other */
.highlight .py { color: var(--color_monokai_white) } /* Name.Property */
.highlight .nt { color: var(--color_monokai_pink) } /* Name.Tag */
.highlight .nv { color: var(--color_monokai_white) } /* Name.Variable */
.highlight .ow { color: var(--color_monokai_pink) } /* Operator.Word */
.highlight .w { color: var(--color_monokai_white) } /* Text.Whitespace */
.highlight .mb { color: var(--color_monokai_purple) } /* Literal.Number.Bin */
.highlight .mf { color: var(--color_monokai_purple) } /* Literal.Number.Float */
.highlight .mh { color: var(--color_monokai_purple) } /* Literal.Number.Hex */
.highlight .mi { color: var(--color_monokai_purple) } /* Literal.Number.Integer */
.highlight .mo { color: var(--color_monokai_purple) } /* Literal.Number.Oct */
.highlight .sa { color: var(--color_monokai_white) } /* Literal.String.Affix */
.highlight .sb { color: var(--color_monokai_yellow) } /* Literal.String.Backtick */
.highlight .sc { color: var(--color_monokai_yellow) } /* Literal.String.Char */
.highlight .dl { color: var(--color_monokai_yellow) } /* Literal.String.Delimiter */
.highlight .sd { color: var(--color_monokai_yellow) } /* Literal.String.Doc */
.highlight .s2 { color: var(--color_monokai_yellow) } /* Literal.String.Double */
.highlight .se { color: var(--color_monokai_purple) } /* Literal.String.Escape */
.highlight .sh { color: var(--color_monokai_yellow) } /* Literal.String.Heredoc */
.highlight .si { color: var(--color_monokai_yellow) } /* Literal.String.Interpol */
.highlight .sx { color: var(--color_monokai_yellow) } /* Literal.String.Other */
.highlight .sr { color: var(--color_monokai_yellow) } /* Literal.String.Regex */
.highlight .s1 { color: var(--color_monokai_yellow) } /* Literal.String.Single */
.highlight .ss { color: var(--color_monokai_yellow) } /* Literal.String.Symbol */
.highlight .bp { color: var(--color_monokai_white) } /* Name.Builtin.Pseudo */
.highlight .fm { color: var(--color_monokai_blue) } /* Name.Function.Magic */
.highlight .vc { color: var(--color_monokai_white) } /* Name.Variable.Class */
.highlight .vg { color: var(--color_monokai_white) } /* Name.Variable.Global */
.highlight .vi { color: var(--color_monokai_white) } /* Name.Variable.Instance */
.highlight .vm { color: var(--color_monokai_white) } /* Name.Variable.Magic */
.highlight .il { color: var(--color_monokai_purple) } /* Literal.Number.Integer.Long */

View file

@ -0,0 +1,46 @@
<html>
<head>
<meta charest="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link rel="stylesheet" href="dark.css">
</head>
<body>
<article>
<h1>YTSPPOVVLOG #49: Street Photography in Suburbia, California</h1>
<p><time datetime="2023-07-31">2023-07-31</time></p>
<video src="https://files.voussoir.net/video/2023-07-31 - ytsppovvlog/ytsppovvlog.mkv" controls preload="none" poster="https://files.voussoir.net/video/2023-07-31 - ytsppovvlog/ytsppovvlog.png"></video>
<p>8m19s. MKV, H264, FLAC. 640 MiB</p>
</article>
<article>
<h1>men telling women to stay here</h1>
<p><time datetime="2022-10-25">2022-10-25</time></p>
<video src="https://files.voussoir.net/video/2022-10-25 - men telling women to stay here/2022-10-25 - men telling women to stay here.mkv" controls preload="none" poster="https://files.voussoir.net/video/2022-10-25 - men telling women to stay here/men telling women to stay here.png"></video>
<p>29m44s. MKV, H264, FLAC. 3,840 MiB</p>
</article>
<article>
<h1>2<sup>2n</sup> - 1 = 3k</h1>
<p><time datetime="2018-08-08">2018-08-08</time></p>
<video src="https://files.voussoir.net/video/2018-08-08 - 2e2nm1m3/2018-08-08 - 2e2nm1m3.mp4" controls preload="none" poster="https://files.voussoir.net/video/2018-08-08 - 2e2nm1m3/2e2nm1m3.png"></video>
<p>5m04s. MKV, H264, AAC. 40 MiB</p>
<p>Footnote: Rewatching this video now, I regret the phrasing used in the introduction, "I didn't really follow along". It sounds arrogant although I meant it in the opposite way: this friend was earning their masters in math and knew way more about proofs than I could keep up with. I was too eager to show off my own solution and did not give enough credit to hers. This sours the introduction for me but I think the rest of it is still good.</p>
</article>
<article>
<h1>Kurt Says Bullet Part 2</h1>
<p><time datetime="2016-04-04">2016-04-04</time></p>
<video src="https://files.voussoir.net/video/2016-04-04 - bullet 2/2016-04-04 - Bullet2 Star Guard (voussoir).mp4" controls preload="none" poster="https://files.voussoir.net/video/2016-04-04 - bullet 2/bullet2.png"></video>
<p>0m50s. MP4, H264, AAC. 8 MiB</p>
</article>
<article>
<h1>Kurt Says Bullet Part 1</h1>
<p><time datetime="2014-08-02">2014-08-02</time></p>
<video src="https://files.voussoir.net/video/2014-08-22 - bullet 1/2014-08-22 - Bullet1 Lovely Planet (voussoir).mp4" controls preload="none" poster="https://files.voussoir.net/video/2014-08-22 - bullet 1/bullet1.png"></video>
<p>0m48s. MP4, H264, AAC. 11 MiB</p>
</article>
</body>
</html>