diff --git a/voussoir.net/index.html b/voussoir.net/index.html index 196bace..0ecfef8 100644 --- a/voussoir.net/index.html +++ b/voussoir.net/index.html @@ -1,4 +1,4 @@ - + voussoir.net @@ -11,31 +11,35 @@ { --color_text_primary: #ccc; --color_text_highlight: #efcc2b; + --color_inlinecodebg: rgba(255, 255, 255, 0.15); } * { - font-family: sans-serif; + font-family: Verdana, sans-serif; color: var(--color_text_primary); word-break: break-word; } -*, *:before, *:after +html { - box-sizing: inherit; + box-sizing: border-box; } -html { box-sizing: border-box; } +*, *:before, *:after { box-sizing: inherit; } body { background-color: #0e0e0d; margin: 0; + display: grid; + grid-auto-rows: max-content; + grid-row-gap: 8px; } h2 { - font-size: 3.5em; + font-size: 3em; border-bottom: 2px solid var(--color_text_highlight); color: var(--color_text_highlight); } @@ -44,32 +48,98 @@ h3 { font-size: 2.5em; } code { font-family: monospace; } +*:not(pre) > code +{ + background-color: var(--color_inlinecodebg); + border-radius: 4px; + line-height: 1.5; + padding-left: 4px; + padding-right: 4px; +} + #headline { - line-height: 3.25em; - margin-top: 25px; - margin-bottom: 75px; + height: 250px; + display: flex; + flex-direction: column; + justify-content: center; } #headline * { color: var(--color_text_highlight); font-family: serif; margin-bottom: 0px; + margin-top: 0px; } -#headline_l1 { font-size: 5.0em; } -#headline_l2 { font-size: 3.5em; } -#headline_l3 { font-size: 1.5em; } - #headline .tilt_holder { display: grid; justify-content: center; } -#headline .tilt_holder > * +#headline_l1, +#headline_splash { display: inline-block; - transform: rotate(-15deg); font-style: italic; + transform: rotate(-15deg); + text-align: center; +} +#headline_splash +{ + animation-name: splash_pulsate; + animation-duration: 0.5s; + animation-iteration-count: infinite; + /* Helps prevent line wrap changing height on narrow screens */ + height: 2em; +} + +@keyframes splash_pulsate +{ + 0% { transform: rotate(-15deg) scale(1.00); } + 50% { transform: rotate(-15deg) scale(0.98); } + 100% { transform: rotate(-15deg) scale(1.00); } +} + +@keyframes shrink_out +{ + from + { + opacity: 1; + transform: scale(1) rotate(-15deg); + } + to + { + opacity: 0; + transform: scale(0.75) rotate(-15deg); + } +} +@keyframes grow_in +{ + from + { + opacity: 0; + transform: scale(0.75) rotate(-15deg); + } + to + { + opacity: 1; + transform: scale(1) rotate(-15deg); + } +} + +#headline_splash.shrink_out +{ + animation-name: shrink_out; + animation-duration: 0.25s; + animation-fill-mode: forwards; + animation-iteration-count: 1; +} +#headline_splash.grow_in +{ + animation-name: grow_in; + animation-duration: 0.25s; + animation-fill-mode: forwards; + animation-iteration-count: 1; } .width_limited @@ -85,7 +155,6 @@ code { font-family: monospace; } width: 100%; padding: 16px; } - .cvitem:nth-of-type(even) { background-color: #1a1a1a; @@ -94,27 +163,16 @@ code { font-family: monospace; } background-position-x: -30px; background-position-y: -30px; } - .cvitem:nth-of-type(odd) > div { display: grid; grid-column-gap: 16px; - grid-template: - "logo title" auto - "logo details" 1fr - / 1fr 3fr; } - .cvitem:nth-of-type(even) > div { display: grid; grid-column-gap: 16px; - grid-template: - "title logo" auto - "details logo" 1fr - / 3fr 1fr; } - .cvitem_logo { grid-area: logo; @@ -126,7 +184,6 @@ code { font-family: monospace; } background-color: var(--color_text_primary); border-radius: 100%; } - .cvitem_title { grid-area: title; @@ -135,18 +192,56 @@ code { font-family: monospace; } margin-top: 0; margin-bottom: 0; } - .cvitem_details { grid-area: details; } +#greatjob +{ + background-color: rgba(255, 255, 255, 0.1); + border: 2px solid rgba(255, 255, 255, 0.2); + padding: 8px; +} + +@media screen and (min-width: 500px) +{ + :root + { + --wide: 1; + } + + #headline { line-height: 3.25em; } + #headline_l1 { font-size: 5.0em; } + #headline_splash { font-size: 1.5em; } + + .cvitem:nth-of-type(odd) > div + { + grid-template: + "logo title" auto + "logo details" 1fr + / 1fr 3fr; + } + + .cvitem:nth-of-type(even) > div + { + grid-template: + "title logo" auto + "details logo" 1fr + / 3fr 1fr; + } +} + @media screen and (max-width: 500px) { + :root + { + --narrow: 1; + } + #headline { line-height: 2.25em; } #headline_l1 { font-size: 3em; } - #headline_l2 { font-size: 2.5em; } - #headline_l3 { font-size: 1em; } + #headline_splash { font-size: 1.5em; } .cvitem:nth-of-type(odd) > div { @@ -168,39 +263,27 @@ code { font-family: monospace; } min-width: 30px; } } - -#greatjob -{ - background-color: rgba(255, 255, 255, 0.1); - border: 2px solid rgba(255, 255, 255, 0.2); - padding: 8px; -} -
-

Ethan Dalool

+

voussoir.net

-
does Python
-
-
-
(and a dozen different disciplines)
+
mostly new and partially improved
- - +

Projects

Etiquette

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: which folder should a file go in if it equally belongs in both? and how do I make my files searchable without littering the filenames themselves with keywords?

-

Etiquette is unique because the tags themselves are hierarchical. By tagging one of your vacation photos with the family.parents.dad tag, it will automatically appear in searches for family.parents and family as well. A traditional folder system, here called albums, is available to bundle files that always belong together without creating a bespoke tag to represent that bundle. Regardless, the files on disk are never modified.

+

Etiquette is unique because the tags themselves are hierarchical. By tagging one of your vacation photos with the family.parents.dad tag, it will automatically appear in searches for family.parents and family as well. A traditional folder system, here called albums, is available to bundle files that always belong together without creating a bespoke tag to represent that bundle. Regardless, the files on disk are never modified.

https://github.com/voussoir/etiquette

@@ -226,16 +309,18 @@ code { font-family: monospace; }
+

YCDL

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.

-

https://github.com/voussoir/ycdl +

https://github.com/voussoir/ycdl

+

Epubfile & Sigilplugins

@@ -260,10 +345,7 @@ code { font-family: monospace; }
- -

Tech interests

-

Python

@@ -289,7 +371,7 @@ code { font-family: monospace; }

SQLite

-

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. 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.

+

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. I love it. 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.

@@ -326,10 +408,7 @@ code { font-family: monospace; }
- - -

Other interests

- +

Other interests

한국어

@@ -350,18 +429,15 @@ code { font-family: monospace; }
- -

Contact

-

Means of transmission

-

If you'd like to get in touch, please email contact@voussoir.net. If you'd like to chat in real time, consider:

+

If you'd like to get in touch, please email contact@voussoir.net. If you'd like to chat in real time, consider:

Please email me first so we can coordinate.

@@ -381,8 +457,7 @@ code { font-family: monospace; }
- -

+

It looks like you're using an ad blocker. Great job!

@@ -401,5 +476,326 @@ code { font-family: monospace; }
, 1993
+ + diff --git a/voussoir.net/writing/dark.css b/voussoir.net/writing/dark.css index eb3d84b..f941003 100644 --- a/voussoir.net/writing/dark.css +++ b/voussoir.net/writing/dark.css @@ -132,7 +132,7 @@ ol ol, ul ul, ol ul, ul ol *:not(pre) > code { background-color: var(--color_inlinecodebg); - border-radius: 3px; + border-radius: 4px; line-height: 1.5; padding-left: 4px; padding-right: 4px;