rickub
Sign in Get started
mykiwi/mykiwi.blogpublic⑂ Fork 0
⑂ 78c3f9f
Branches
main View all branches → View all tags →
Commits
⬇ Clone ▾
git clone https://git.rickub.com/mykiwi/mykiwi.blog.git
git clone ssh://git@rickub.com/mykiwi/mykiwi.blog.git

Host key fingerprint (ed25519): SHA256:iycHnxEyq0Q7uyVpB7JlznP0G7JrTPXLYRcAU5CSLhc — verify it before your first connect.

Add blurhash placeholder for the colophon avatar

Decoded to a 16x16 PNG and shown as a CSS background on the avatar
<img> while the real photo loads, avoiding a JS decoder dependency.
Romain Gautier committed 2026-09-18T19:58:40+02:00 Browse files
78c3f9f parent: b9bda7a
modified blog/assets/css/style.scss +2 -0
@@ -1040,6 +1040,8 @@ blockquote.alert {
10401040 margin-bottom: 0.85rem;
10411041 filter: grayscale(0.35);
10421042 transition: filter 0.3s ease;
1043+ background-size: cover;
1044+ background-position: center;
10431045
10441046 &:hover {
10451047 filter: grayscale(0);
@@ -1040,6 +1040,8 @@ blockquote.alert {
1040 margin-bottom: 0.85rem;1040 margin-bottom: 0.85rem;
1041 filter: grayscale(0.35);1041 filter: grayscale(0.35);
1042 transition: filter 0.3s ease;1042 transition: filter 0.3s ease;
1043+ background-size: cover;
1044+ background-position: center;
1043 1045
1044 &:hover {1046 &:hover {
1045 filter: grayscale(0);1047 filter: grayscale(0);
added blog/assets/images/avatar-blurhash.png +0 -0
new file mode 100644
Binary files /dev/null and b/blog/assets/images/avatar-blurhash.png differ
new file mode 100644
Binary files /dev/null and b/blog/assets/images/avatar-blurhash.png differBinary files /dev/null and b/blog/assets/images/avatar-blurhash.png differ
modified blog/layouts/partials/colophon.html +10 -0
@@ -8,12 +8,22 @@
88 <aside class="colophon" id="about">
99 {{- with .avatar }}
1010 {{- with resources.Get . }}
11+ {{- /*
12+ avatar-blurhash.png is a 16x16 decode of the avatar's blurhash
13+ (oZL;Z^4m?wng-PoL~XNbOsShRjNGXTxt={xtM{xZo$t8%1a$IVRk%Nxut6W;IoWBj]V[V@RjR+s.),
14+ shown via CSS while the real photo loads -
15+ regenerate it from a new avatar with a blurhash encoder/decoder if
16+ the avatar ever changes.
17+ */}}
1118 <img
1219 class="colophon__avatar"
1320 src="{{ .RelPermalink }}"
1421 width="{{ .Width }}"
1522 height="{{ .Height }}"
1623 alt="{{ $profile.avatarAlt | default site.Title }}"
24+ {{- with resources.Get "images/avatar-blurhash.png" }}
25+ style="background-image:url('{{ .RelPermalink }}')"
26+ {{- end }}
1727 >
1828 {{- end }}
1929 {{- end }}
@@ -8,12 +8,22 @@
8 <aside class="colophon" id="about">8 <aside class="colophon" id="about">
9 {{- with .avatar }}9 {{- with .avatar }}
10 {{- with resources.Get . }}10 {{- with resources.Get . }}
11+ {{- /*
12+ avatar-blurhash.png is a 16x16 decode of the avatar's blurhash
13+ (oZL;Z^4m?wng-PoL~XNbOsShRjNGXTxt={xtM{xZo$t8%1a$IVRk%Nxut6W;IoWBj]V[V@RjR+s.),
14+ shown via CSS while the real photo loads -
15+ regenerate it from a new avatar with a blurhash encoder/decoder if
16+ the avatar ever changes.
17+ */}}
11 <img18 <img
12 class="colophon__avatar"19 class="colophon__avatar"
13 src="{{ .RelPermalink }}"20 src="{{ .RelPermalink }}"
14 width="{{ .Width }}"21 width="{{ .Width }}"
15 height="{{ .Height }}"22 height="{{ .Height }}"
16 alt="{{ $profile.avatarAlt | default site.Title }}"23 alt="{{ $profile.avatarAlt | default site.Title }}"
24+ {{- with resources.Get "images/avatar-blurhash.png" }}
25+ style="background-image:url('{{ .RelPermalink }}')"
26+ {{- end }}
17 >27 >
18 {{- end }}28 {{- end }}
19 {{- end }}29 {{- end }}