From 1bec8a128cdd416e50d149b25e416b1270d362a9 Mon Sep 17 00:00:00 2001 From: Declan Chidlow Date: Wed, 12 Feb 2025 13:15:45 +0800 Subject: [PATCH] Update micros and firehose page --- src/assets/styles/pages/firehose.css | 7 +- src/assets/styles/pages/micro-individual.css | 52 ++++++++++- src/micro_template.ori | 93 +++++++++++++------- src/pages/firehose.ori | 30 ++++--- 4 files changed, 133 insertions(+), 49 deletions(-) diff --git a/src/assets/styles/pages/firehose.css b/src/assets/styles/pages/firehose.css index 56fa1ff7..3c6bf030 100644 --- a/src/assets/styles/pages/firehose.css +++ b/src/assets/styles/pages/firehose.css @@ -41,17 +41,22 @@ article { } svg { - height: 1.25rem; width: 1.25rem; + min-width: 1.25rem; } } .pagination { display: flex; justify-content: space-between; + align-items: center; max-width: 65ch; a { padding: 2rem; } + + @media (max-width: 24rem) { + flex-direction: column; + } } diff --git a/src/assets/styles/pages/micro-individual.css b/src/assets/styles/pages/micro-individual.css index d7369a09..373a5ca9 100644 --- a/src/assets/styles/pages/micro-individual.css +++ b/src/assets/styles/pages/micro-individual.css @@ -1,10 +1,23 @@ +@media (max-width: 45rem) { + #section { + display: none; + } +} + article header { display: flex; + flex-grow: 1; justify-content: space-between; gap: 2rem; padding-bottom: 0.5rem; - margin-bottom: 0.5rem; + margin-bottom: 1rem; border-bottom: 2px solid var(--bright_grey); + max-width: 60ch; + + h1 { + font-size: inherit; + line-height: inherit; + } } .socials { @@ -16,11 +29,42 @@ article header { } svg { - height: 1.25rem; width: 1.25rem; + min-width: 1.25rem; + } + + @media (min-width: 65rem) { + &:is(div) { + display: none; + } + } + + @media (max-width: 65rem) { + &:is(aside) { + display: none; + } } } -.readable-width { - max-width: 60ch; +.micro-content { + display: flex; + flex-direction: row-reverse; + gap: 3rem; + + aside { + flex-direction: column; + font-size: 0.9rem; + position: sticky; + top: 5rem; + height: fit-content; + + a { + display: flex; + gap: 1rem; + } + } + + .readable-width { + max-width: 60ch; + } } diff --git a/src/micro_template.ori b/src/micro_template.ori index c3d25d80..3de54ed3 100644 --- a/src/micro_template.ori +++ b/src/micro_template.ori @@ -6,38 +6,71 @@ Micros
-
- - -
- ${ micro/fedi_link ? ` - - - Fediverse - - - ` : '' } - - ${ micro/bsky_link ? ` - - - Bluesky - - - ` : '' } - - ${ micro/linkedin_link ? ` - - - LinkedIn - - - ` : '' } -
+
+

+ +

+ +
+ ${ micro/fedi_link ? ` + + + Fediverse + + + ` : '' } + + ${ micro/bsky_link ? ` + + + Bluesky + + + ` : '' } + + ${ micro/linkedin_link ? ` + + + LinkedIn + + + ` : '' } +
-
- ${ micro/@text } +
+ + +
+ ${ micro/@text } +
` }) diff --git a/src/pages/firehose.ori b/src/pages/firehose.ori index f65adbf1..12d226dd 100644 --- a/src/pages/firehose.ori +++ b/src/pages/firehose.ori @@ -1,13 +1,13 @@ (paginated_firehose) => main_template.ori({ title: "Firehose", - description: "Every thought and web thing piped directly through at a million miles an hour. Micro posts, articles, etc. This is everything, all in one place, coming 'atcha!", + description: "Every thought and web thing piped directly through at a million miles an hour. Micro posts, articles, photography, etc. This is everything, all in one place, coming 'atcha!", stylesheet: "pages/firehose.css" @text: indent`

Firehose

- ${ paginated_firehose/previousPage ? indent`` : `

This is everything, all in one place, coming 'atcha!

This firehose contains a record of all my micro posts, articles, and other web doings. If you'd like to subscribe to feeds to stay up-to-date with things, then you can do so via my syndication page.

` } + ${ paginated_firehose/previousPage ? indent`` : `

This is everything, all in one place, coming 'atcha!

This firehose contains a record of all my micro posts, articles, photography, and other web doings. If you'd like to subscribe to feeds to stay up-to-date with things, then you can do so via my syndication page.

` } ${ map(paginated_firehose/items, (item, key) => indent` @@ -99,21 +99,23 @@ `)}
`