From 0e2470cc25f8a0e5ccb944491d9b636708bf5ada Mon Sep 17 00:00:00 2001 From: JP Hastings-Spital Date: Sun, 17 Mar 2024 21:29:45 +0000 Subject: [PATCH] More vibrant homepage MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The code here is a bit of a mess; but GARDEN! 🌿🐉 --- assets/scss/_main.scss | 104 ++++++++++++++++-- assets/scss/_single.scss | 10 -- config.toml | 11 +- .../accent-marks-in-english/index.md | 6 +- content/bookmarks/neologisms.md | 2 +- .../events/barb-jungr-feeling-good/index.md | 4 + layouts/partials/about-me.html | 72 +++++++++--- layouts/partials/post-type.html | 22 ++++ 8 files changed, 193 insertions(+), 38 deletions(-) create mode 100644 layouts/partials/post-type.html diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss index 03f2cd0e..5658a839 100644 --- a/assets/scss/_main.scss +++ b/assets/scss/_main.scss @@ -485,10 +485,6 @@ ol ol { text-align: center; } -.homepage .content { - align-items: center; -} - .content { display: flex; flex-direction: column; @@ -517,12 +513,10 @@ hr { background: $light-border-color; } - [data-theme=dark] & { - background: $dark-border-color; - } - - [data-theme=light] & { - background: $light-border-color; + &.mini { + width: 3em; + margin-top: 1.5em; + margin-bottom: 1.5em; } } @@ -848,3 +842,93 @@ mark { background-color: $dark-background } } + +.homepage { + .content { + align-items: center; + } + + .previews { + position: relative; + } + + .recent-posts { + position: relative; + text-align: left; + padding: 0 50% 0 0; + margin: 1em 1.5em; + list-style: none; + + + li { + + &::before{ + position: absolute; + left: -1.5em; + text-align: right; + width: 1em; + content: attr(data-type-emoji); + } + + &:hover::before { + content: attr(data-my-emoji); + } + } + + & .summary { + position: absolute; + text-align: right; + right: 0; + width: 50%; + height: 100%; + top: 0; + display: none; + + color: $light-color-dim; + background-color: $light-background; + + @media (prefers-color-scheme: dark) { + background-color: $dark-background; + color: $dark-color-dim; + } + } + + li:hover .summary { + display: block; + } + } + + .intro { + position: absolute; + top: 0; + right: 0; + width: 50%; + margin: 0 1.5em 0 0; + padding: 0 0 0 1.5em; + text-align: right; + text-wrap: balance; + color: $light-color-dim; + @media (prefers-color-scheme: dark) { + color: $dark-color-dim; + } + } + + .passing { + display: flex; + flex-direction: row; + justify-content: space-between; + + & > * { + max-width: 50%; + } + + figure { + margin: 1em 0; + } + } + + .context { + font-size: 0.8rem; + opacity: 0.6; + } +} \ No newline at end of file diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss index 66e9d392..b7689a56 100644 --- a/assets/scss/_single.scss +++ b/assets/scss/_single.scss @@ -178,16 +178,6 @@ background: $light-background; color: $light-color-secondary; } - - [data-theme=dark] & { - background: $dark-background; - color: $dark-color-secondary; - } - - [data-theme=light] & { - background: $light-background; - color: $light-color-secondary; - } } hr { diff --git a/config.toml b/config.toml index 85aec495..bb1f50f1 100644 --- a/config.toml +++ b/config.toml @@ -30,7 +30,6 @@ date = ["date", "publishDate", "lastmod", ":git"] series = 'series' tag = 'tags' - [params] dateform = "Jan 2, 2006" dateformShort = "Jan 2" @@ -53,6 +52,16 @@ date = ["date", "publishDate", "lastmod", ":git"] mask = "#252627" msapplication = "#252627" theme = "#252627" + + [params.defaultEmoji] + posts = "📔" + bookmarks = "🔖" + notes = "💬" + photos = "📸" + calendar = "🗓️" + curiosities = "🤩" + memex = "🧠" + review = "📝" [languages] [languages.en] diff --git a/content/bookmarks/accent-marks-in-english/index.md b/content/bookmarks/accent-marks-in-english/index.md index 94406ebb..5cefb644 100644 --- a/content/bookmarks/accent-marks-in-english/index.md +++ b/content/bookmarks/accent-marks-in-english/index.md @@ -1,7 +1,7 @@ --- date: 2024-03-15T12:34:31.711Z publishDate: 2024-03-15T12:34:31.711Z -title: Accėnt marks in E̱nglish +title: Accėnt mārks in E̱nglish audio: index.mp3 bookmarkOf: https://www.youtube.com/watch?v=0Fok5AQ2WRo references: @@ -20,9 +20,9 @@ I really enjoyed watching this! I k̆now these accėnts are u̇nlikely to take > (If you’re listening this with a screenreader I apologise, this article plays with ways of writing, which will definitely screw with text to speech engines. Use the link at the top to listen to me reading it instead!) -The diäcritical ma̱rks Rob suggests āre: +The diäcritical mārks Rob suggests āre: -| Exāmple u̱sage | Mark | Meaning | JP’s shortcut[^1] | +| Exāmple u̱sage | Mārk | Meaning | JP’s shortcut[^1] | | --- | --- | --- | --- | | k̆now | Brēve | Silent letters | double tilde after: `k~~` | | accėnt | Overdot | Vowels pronounced with schwa: “uh” | double period after: `e..` | diff --git a/content/bookmarks/neologisms.md b/content/bookmarks/neologisms.md index e149e8be..a9ffb61e 100644 --- a/content/bookmarks/neologisms.md +++ b/content/bookmarks/neologisms.md @@ -1,5 +1,5 @@ --- -title: Neologisms +title: Glorious Neologisms date: "2024-03-03T08:57:01Z" bookmarkOf: https://maggieappleton.com/neologisms references: diff --git a/content/posts/reviews/events/barb-jungr-feeling-good/index.md b/content/posts/reviews/events/barb-jungr-feeling-good/index.md index 361f695c..a35c43ba 100644 --- a/content/posts/reviews/events/barb-jungr-feeling-good/index.md +++ b/content/posts/reviews/events/barb-jungr-feeling-good/index.md @@ -9,6 +9,10 @@ location: name: The Guy's Chapel latitude: 51.50448455718357 longitude: -0.0881963644105807 +references: + reply: + url: /calendar/one-off/2024-03/barb-jungr-feeling-good/ + type: event --- What a lovely event! Barb's singing was rich and exciting, with Jenny's delightful and expressive piano accompaniment was all the more impressive when we learned it was almost entirely improvised. diff --git a/layouts/partials/about-me.html b/layouts/partials/about-me.html index a33f2cb5..745364e8 100644 --- a/layouts/partials/about-me.html +++ b/layouts/partials/about-me.html @@ -1,19 +1,65 @@
A photo of me smiling, with short brown hair, a beard and glasses. - Hello! I'm JP Hastings-Spital, a maker, software engineer, swing dancer, and all-round miriscient chap living in London, UK. I'm principal engineer at Deliveroo. + Hello! I'm JP Hastings-Spital, a maker, software engineer, swing dancer, and all-round miriscient chap living in London, UK. Until recently I was principal engineer at Deliveroo, I'm now enjoying a career break until after my wedding in July.
-

- I post about things I've created or care about, - share photos of what I'm up to, - keep a memex of interesting things I discover, - and link to events I may go to. - Read about my life now, or a recent article like - {{ $posts := where .Site.RegularPages "Section" "posts" }} - {{ range $posts | first 2 }} - {{ .Title }}, - {{ end }} - and {{ with index $posts 2 }}{{ .Title }}{{ end }}.

-

{{ range $posts | first 3 }}{{.Params.emoji}} {{ end }}

+
+ +
+

+ This site is a much loved wild garden; things aren't perfectly orgnaised, there are lots of nooks and crannies to explore. Follow your nose and see where you end up. +

+
    + {{- $posts := where .Site.RegularPages "Section" "in" (slice "posts" "bookmarks" "memex") -}} + {{- range $posts.ByDate.Reverse | first 6 -}} + {{- $typeEmoji := index .Site.Params.defaultEmoji .Type -}} +
  1. + + {{- with .Title -}}{{ . }}{{ else }}{{ .Type | singularize | title }}{{ end -}} + +
    +
    + {{- partial "post-type.html" . }} + {{ $typeEmoji }} + + {{ partial "year-relative-date.html" .Date }} +
    + + {{- index (split .Summary "\n") 0 | htmlUnescape -}} +
    +
    2. + {{- end -}} +
+ +
+ +
+ {{- $picPage := index (where .Site.RegularPages "Section" "eq" "photos") 0 -}} + {{- with $picPage -}} +
+
Photo 📸 {{ partial "year-relative-date.html" .Date }}
+
+ + {{- $src := index $picPage.Params.Media 0 -}} + +
+ {{- index (split .Summary "\n") 0 | htmlUnescape }} +
+
+
+ {{- end -}} + + {{- $notePage := index (where .Site.RegularPages "Section" "eq" "notes") 0 -}} + {{- with $notePage -}} +
+
Note 💬 + {{ partial "year-relative-date.html" .Date }} +
+ + {{ .Content}} +
+ {{- end -}} +
+
diff --git a/layouts/partials/post-type.html b/layouts/partials/post-type.html new file mode 100644 index 00000000..044688da --- /dev/null +++ b/layouts/partials/post-type.html @@ -0,0 +1,22 @@ +{{ $typeStr := .Type | singularize }} + +{{- $url := "" -}} +{{- if .Params.bookmarkOf -}} + {{- $url = .Params.bookmarkOf -}} +{{- else if .Params.inReplyTo -}} + {{- $url = .Params.inReplyTo -}} +{{- end -}} + +{{- $reference := dict -}} +{{- range .Params.references -}} + {{- if eq .url $url -}} + {{- $reference = . -}} + {{- end }} +{{- end -}} + +{{- if $reference.type -}} + {{- $targetType := partial "partials/article-type.html" (default "article" $reference.type) -}} + {{- (printf "%s %s" $targetType $typeStr) | strings.FirstUpper -}} +{{- else -}} + {{- $typeStr | strings.FirstUpper -}} +{{- end -}}