diff --git a/assets/css/main.css b/assets/css/main.css index 0728ac3..80e6b32 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -43,6 +43,7 @@ body { padding: .8em; max-width: 800px; align-self: center; + line-height: 150%; } .title { @@ -50,11 +51,16 @@ body { margin-bottom: 1em; } +.navbar { + color: #03163f; + font-family: "Jura Regular"; +} + .nav-link { font-family: "Jura Bold"; text-decoration: underline dotted; text-underline-offset: 3px; - color:#03163f; + color: #03163f; } .posts { @@ -80,12 +86,9 @@ body { font-weight: bolder; } -.blog { - line-height: 150%; -} - h1, -h2, h3 { +h2, +h3 { font-weight: normal; margin: 0; font-family: "Jura Bold"; @@ -93,7 +96,7 @@ h2, h3 { margin-bottom: 3px; } -.blog > h1 { +.blog>h1 { line-height: 1.2em; } @@ -101,7 +104,7 @@ a.footnote-ref { text-decoration: none; } -a > sup { +a>sup { vertical-align: baseline; position: relative; top: -0.4em; @@ -114,7 +117,7 @@ a.footnote-back { text-underline-offset: .1em; } -.footnotes > ol { +.footnotes>ol { font-size: smaller; } @@ -124,7 +127,7 @@ img { } a { - color:#03163f; + color: #03163f; text-decoration: underline dotted; text-underline-offset: 3px; } @@ -136,17 +139,12 @@ a[href^="https://github.com/hannahilea"] { text-underline-offset: 3px; } -[href^="#"]:not(.footnote-back, .footnote-ref){ +[href^="#"]:not(.footnote-back, .footnote-ref) { text-decoration: none; font-weight: bold; font-style: italic; } -.navbar { - color:#03163f; - font-family: "Jura Regular"; -} - .badge { height: 20%; width: auto; @@ -249,35 +247,78 @@ img.home-img { } /* Project pages */ -.projects-navbar { - font-family: "Jura Regular"; - color:#03163f; - padding: 0 0 1em; -} +.p5-project { + height: 100%; + margin: 0; + display: flex; + flex-flow: column; + gap: 0; + overflow: hidden; -.projects-details { - font-family: "OpenSans Light"; - font-size:small; + #project-header { + margin: 1rem; + margin-bottom: .5rem; + } + + #project-body { + flex-grow: 1; + height: 100%; + display: flex; + } + + .project-title { + margin-bottom: .5rem + } + + .navbar { + margin-bottom: .5em; + } + + details { + font-family: "OpenSans Light"; + font-size: smaller; + } + + summary { + font-style: italic; + } + + #gui-container { + position: fixed; + top: 0; + right: 0; + } + + + + /* phones only! */ + @media (max-width: 550px) { + #gui-container { + position: fixed; + bottom: 0; + top: auto; + } + } } /* Blog pages*/ -.blog-navbar { - color:#03163f; - font-family: "Jura Regular"; - margin-bottom: 1.6em; -} - -pre { - background: #eeeff1; - border: 2px solid #ddd; - page-break-inside: avoid; - font-family: monospace; - font-size: 14px; - line-height: 1.6; - max-width: 100%; - overflow: auto; - padding: 1em 1.5em; -} +.blog { + pre { + background: #eeeff1; + border: 2px solid #ddd; + page-break-inside: avoid; + font-family: monospace; + font-size: 14px; + line-height: 1.6; + max-width: 100%; + overflow: auto; + padding: 1em 1.5em; + } + + .navbar { + margin-bottom: 1.6em; + } +} .alert { border: none; diff --git a/blog/__template/index.html.template b/blog/__template/index.html.template index 4936818..2f8624a 100644 --- a/blog/__template/index.html.template +++ b/blog/__template/index.html.template @@ -11,12 +11,11 @@
diff --git a/blog/driven-developments/index.html b/blog/driven-developments/index.html index e91daae..a270a8a 100644 --- a/blog/driven-developments/index.html +++ b/blog/driven-developments/index.html @@ -10,10 +10,10 @@
diff --git a/blog/future-blog-posts/index.html b/blog/future-blog-posts/index.html index 4c77c8e..30f0079 100644 --- a/blog/future-blog-posts/index.html +++ b/blog/future-blog-posts/index.html @@ -10,10 +10,10 @@
…but maybe I will!
To-do list:
While doing a batch at the Recurse Center, I revived my personal website—the very site you are almost certainly looking at Right Now!
A creative coding exercise (prompt: TODO), co-created with TODO - while at the Recurse Center
Usage: When prompted, grant microphone access, then TODO.
A creative coding exercise (prompt: TODO), co-created with TODO + while at the Recurse Center
If you're seeing this message, JavaScript is likely disabled in your browser; you'll need to enable it to + interact with this project.
Built for a web-based musical instrument hackathon while at the Recurse Center. Built on top of the p5 flocking demo.
Usage: Click screen to spawn boids. Make sure your - computer sound - is on. (May not yet work on mobile.)
Warning: If you add a gagillion boids, the page may get laggy or stop playing altogether. I'm pretty - sure this is a Tone.js limitation (well, a "my current usage of Tone.js" limitation, specifically!), and if you - have an idea of how to work around it, please let me know! In the meantime, simply refresh your screen to start - fresh (or un-toggle "wrap world" to let some of your flocks fly away).
Usage: Click screen to spawn boids. Make + sure your + computer sound is on.
If you add a gagillion boids, the page may get laggy or stop playing altogether. I'm pretty + sure this is a Tone.js limitation (well, a "my current usage of Tone.js" limitation, specifically!), and if + you + have an idea of how to work around it, please let me know! In the meantime, simply refresh your screen to + start + fresh (or un-toggle "wrap world" to let some of your flocks fly away).
(Refresh page to stop the test sound...)
If there's something here you'd like to know more about sooner rather than later, reach out and I'll - prioritize it accordingly!
If there's something here you'd like to know more about sooner rather than later, reach out and I'll + prioritize it accordingly!
A creative coding exercise (prompt: Particles, lots of them), co-created with Henderson Reed Hummel - while at the Recurse Center
Usage: When prompted, grant microphone access, then move your mouse around the screen while talking or - making noise.
A creative coding exercise (prompt: Particles, lots of them), co-created with Henderson Reed Hummel + while at the Recurse Center
Usage: When prompted, grant microphone access, then move your mouse (or drag your finger) + around the screen while + talking or making noise.
Adapted from a creative - coding exercise - (prompt: - What a wonderful world) - co-created with David Brooks while at the Recurse Center. - Image via - NASA. UX consult by Alex Ferguson. -
Usage: Click anywhere on the Earth to play/pause the audio. Move the mouse around your screen during - playback. May not work on phone.
Adapted from a creative + coding exercise + (prompt: + What a wonderful world) + co-created with David Brooks while at the Recurse Center. + Image via + NASA. UX consult by Alex Ferguson. +
Usage: Click anywhere on the Earth to play/pause the audio. During playback, move the mouse + around your screen (on mobile: drag your finger).
Created while at the Recurse Center, Yellow Scream (2024) is an homage to Kim Beom's Yellow Scream - (2012): - -
Usage: When prompted, grant microphone access, then yell. - If you are uninterested in yelling (?!?!?!?!), play the above video through your computer speakers.
Created while at the Recurse Center, Yellow Scream (2024) is an homage to + Kim Beom's Yellow Scream + (2012): + +
Usage: When prompted, grant microphone access, then yell. + If you are uninterested in yelling (?!?!?!?!), play the above video through your computer speakers.