mirror of
https://github.com/by-jp/www.byjp.me.git
synced 2025-08-09 01:35:56 +01:00
More vibrant homepage
The code here is a bit of a mess; but GARDEN! 🌿🐉
This commit is contained in:
JP Hastings-Spital
parent
64cba4a44a
commit
0e2470cc25
8 changed files with 193 additions and 38 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
11
config.toml
11
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]
|
||||
|
|
|
|||
|
|
@ -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..` |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Neologisms
|
||||
title: Glorious Neologisms
|
||||
date: "2024-03-03T08:57:01Z"
|
||||
bookmarkOf: https://maggieappleton.com/neologisms
|
||||
references:
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -1,19 +1,65 @@
|
|||
<div class="about-me" data-pagefind-body>
|
||||
<div class="h-card vcard no-emoji">
|
||||
<a href="https://byjp.me" rel="me" class="u-uid u-url"><img class="profile u-photo" src="profile-512.jpg" alt="A photo of me smiling, with short brown hair, a beard and glasses." width="48" height="48"/></a>
|
||||
<span class="p-note">Hello! I'm <em class="p-name fn always-accented"><span class="p-nickname">JP</span> <span class="p-family-name">Hastings-Spital</span></em>, a <span class="p-category category">maker</span>, <span class="p-category category">software engineer</span>, <span class="p-category category">swing dancer</span>, and all-round <span class="p-category category">miriscient chap</span> living in <span class="adr p-adr h-adr"><span class="p-locality locality">London</span>, <span class="p-country-name country-name">UK</span></span>. <span class="h-card no-emoji">I'm <span clas="p-job-title">principal engineer</a> at <a href="https://deliveroo.engineering/" target="_blank" class="p-org u-url" rel="noopener">Deliveroo</a></span>.</span>
|
||||
<span class="p-note">Hello! I'm <em class="p-name fn always-accented"><span class="p-nickname">JP</span> <span class="p-family-name">Hastings-Spital</span></em>, a <span class="p-category category">maker</span>, <span class="p-category category">software engineer</span>, <span class="p-category category">swing dancer</span>, and all-round <span class="p-category category">miriscient chap</span> living in <span class="adr p-adr h-adr"><span class="p-locality locality">London</span>, <span class="p-country-name country-name">UK</span></span>. <span class="h-card no-emoji">Until recently I was <span clas="p-job-title">principal engineer</a> at <span class="p-org" rel="noopener">Deliveroo</span></span>, I'm now enjoying a career break until after my wedding in July.</span>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
I <a href="/posts">post</a> about things I've created or care about,
|
||||
share <a href="/photos">photos</a> of what I'm up to,
|
||||
keep a <a href="/memex">memex</a> of interesting things I discover,
|
||||
and link to <a href="/calendar">events</a> I may go to.
|
||||
Read about my life <a href="/now">now</a>, or a recent article like
|
||||
{{ $posts := where .Site.RegularPages "Section" "posts" }}
|
||||
{{ range $posts | first 2 }}
|
||||
<a href="{{.Permalink}}">{{ .Title }}</a>,
|
||||
{{ end }}
|
||||
and {{ with index $posts 2 }}<a href="{{.Permalink}}">{{ .Title }}</a>{{ end }}.</p>
|
||||
<p>{{ range $posts | first 3 }}{{.Params.emoji}} {{ end }}</p>
|
||||
<hr class="mini" />
|
||||
|
||||
<div class="previews">
|
||||
<p class="intro">
|
||||
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.
|
||||
</p>
|
||||
<ol class="recent-posts">
|
||||
{{- $posts := where .Site.RegularPages "Section" "in" (slice "posts" "bookmarks" "memex") -}}
|
||||
{{- range $posts.ByDate.Reverse | first 6 -}}
|
||||
{{- $typeEmoji := index .Site.Params.defaultEmoji .Type -}}
|
||||
<li data-type-emoji="{{ $typeEmoji }}" data-my-emoji="{{ with .Params.emoji }}{{ . }}{{ else }}{{ $typeEmoji }}{{ end }}">
|
||||
<a href="{{.Permalink}}">
|
||||
{{- with .Title -}}{{ . }}{{ else }}{{ .Type | singularize | title }}{{ end -}}
|
||||
</a>
|
||||
<div class="summary">
|
||||
<div>
|
||||
<span class="always-accented">{{- partial "post-type.html" . }}</span>
|
||||
{{ $typeEmoji }}
|
||||
<date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Date }}" title="Posted on {{ dateFormat "Monday Jan 2 2006 at 03:04 MST" .Date }}" data-pagefind-sort="date">
|
||||
{{ partial "year-relative-date.html" .Date }}</date>
|
||||
</div>
|
||||
|
||||
{{- index (split .Summary "\n") 0 | htmlUnescape -}}
|
||||
</div>
|
||||
</li>
|
||||
{{- end -}}
|
||||
</ol>
|
||||
|
||||
<hr class="mini" />
|
||||
|
||||
<div class="passing">
|
||||
{{- $picPage := index (where .Site.RegularPages "Section" "eq" "photos") 0 -}}
|
||||
{{- with $picPage -}}
|
||||
<div class="photo">
|
||||
<div class="context">Photo 📸 <a href="{{ .RelPermalink }}"><date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Date }}" title="Posted on {{ dateFormat "Monday Jan 2 2006 at 03:04 MST" .Date }}" data-pagefind-sort="date">{{ partial "year-relative-date.html" .Date }}</date></a></div>
|
||||
<figure>
|
||||
|
||||
{{- $src := index $picPage.Params.Media 0 -}}
|
||||
<img src="{{ path.Join .RelPermalink $src.url }}" {{ with $src.alt }}alt="{{ . }}" {{ end }} />
|
||||
<figcaption>
|
||||
{{- index (split .Summary "\n") 0 | htmlUnescape }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
{{- $notePage := index (where .Site.RegularPages "Section" "eq" "notes") 0 -}}
|
||||
{{- with $notePage -}}
|
||||
<div class="note">
|
||||
<div class="context">Note 💬 <a href="{{ .RelPermalink }}"><date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Date }}" title="Posted on {{ dateFormat "Monday Jan 2 2006 at 03:04 MST" .Date }}" data-pagefind-sort="date">
|
||||
{{ partial "year-relative-date.html" .Date }}</date></a>
|
||||
</div>
|
||||
|
||||
{{ .Content}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
22
layouts/partials/post-type.html
Normal file
22
layouts/partials/post-type.html
Normal file
|
|
@ -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 -}}
|
||||
Loading…
Reference in a new issue