fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 21:02:09 +00:00
Code Issues Projects Releases Wiki Activity

Declare supported color schemes in <head>

Browse source 
State that both dark and light color schemes are supported in the
document <head> to inform browsers before CSS is loaded and parsed.

Also added a bunch of comments.
This commit is contained in:
Rohan Kumar 2020-12-18 18:33:46 -08:00
parent 5e77a0d7f3
commit 68a0528db2
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
1 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
themes/etch-custom/layouts/partials/head.html
View file

@ -8,12 +8,13 @@
{{ printf `<link rel="icon" sizes="192x192" href="%s" type="image/png">` $icon_192.RelPermalink | safeHTML }} {{ printf `<link rel="icon" sizes="192x192" href="%s" type="image/png">` $icon_192.RelPermalink | safeHTML }}
{{ $favicon := resources.Get "/favicon.png" | resources.Fingerprint "md5" -}} {{ $favicon := resources.Get "/favicon.png" | resources.Fingerprint "md5" -}}
{{ printf `<link rel="icon" sizes="32x32" href="%s" type="image/png">` $favicon.RelPermalink | safeHTML -}} {{ printf `<link rel="icon" sizes="32x32" href="%s" type="image/png">` $favicon.RelPermalink | safeHTML -}}
<!--apple-touch-icon and mask-icon used to be appple-specific, but now <!-- apple-touch-icon and mask-icon used to be apple-specific, but
they're pseudo-standards relied upon by other vendors too. See now they're pseudo-standards relied upon by other vendors too:
https://html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes--> https://html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes -->
{{ printf `<link rel="apple-touch-icon" href="%s">` $icon_192.RelPermalink | safeHTML }} {{ printf `<link rel="apple-touch-icon" href="%s">` $icon_192.RelPermalink | safeHTML }}
{{ $mask_icon := resources.Get "/mask_apple.svg" | resources.Fingerprint "md5" -}} {{ $mask_icon := resources.Get "/mask_apple.svg" | resources.Fingerprint "md5" -}}
{{ printf `<link rel="mask-icon" href="%s" color="black">` $mask_icon.RelPermalink | safeHTML }} {{ printf `<link rel="mask-icon" href="%s" color="black">` $mask_icon.RelPermalink | safeHTML }}
<!-- webmanifest defines even more icons. This is getting ridiculous -->
{{ $webmanifest := resources.Get "/manifest.webmanifest" | resources.Fingerprint "md5" -}} {{ $webmanifest := resources.Get "/manifest.webmanifest" | resources.Fingerprint "md5" -}}
{{ printf `<link rel="manifest" href="%s">` $webmanifest.RelPermalink | safeHTML }} {{ printf `<link rel="manifest" href="%s">` $webmanifest.RelPermalink | safeHTML }}
<link rel="alternate" type="application/rss+xml" href="{{ .Site.BaseURL }}posts/index.xml" title="{{ $.Site.Title }}"> <link rel="alternate" type="application/rss+xml" href="{{ .Site.BaseURL }}posts/index.xml" title="{{ $.Site.Title }}">
@ -28,8 +29,14 @@
{{ if not (eq $dark "off") -}} {{ if not (eq $dark "off") -}}
{{ $resources = $resources | append (resources.Get "css/dark.css" | resources.ExecuteAsTemplate "dark.css" .) -}} {{ $resources = $resources | append (resources.Get "css/dark.css" | resources.ExecuteAsTemplate "dark.css" .) -}}
{{ end -}} {{ end -}}
<!-- Tell the browser we support dark mode. If the user doesn't
specify a preference, prefer light mode; users who override
browser default stylesheets will be able to use their preferred
palette that way. -->
<meta name="color-scheme" content="light dark">
{{ $css := $resources | resources.Concat "css/style.css" | minify | resources.Fingerprint "sha384" -}} {{ $css := $resources | resources.Concat "css/style.css" | minify | resources.Fingerprint "sha384" -}}
{{ printf `<link rel="stylesheet" href="%s" integrity="%s">` $css.RelPermalink $css.Data.Integrity | safeHTML }} {{ printf `<link rel="stylesheet" href="%s" integrity="%s">` $css.RelPermalink $css.Data.Integrity | safeHTML }}
<!-- only load syntax-highlighting CSS if this page needs it -->
{{ if .Params.highlight -}} {{ if .Params.highlight -}}
{{ $css_syntax := resources.Get "/css/syntax.css" | minify | resources.Fingerprint "sha384" }} {{ $css_syntax := resources.Get "/css/syntax.css" | minify | resources.Fingerprint "sha384" }}
{{- printf `<link rel="stylesheet" href="%s" integrity="%s">` $css_syntax.RelPermalink $css_syntax.Data.Integrity | safeHTML }} {{- printf `<link rel="stylesheet" href="%s" integrity="%s">` $css_syntax.RelPermalink $css_syntax.Data.Integrity | safeHTML }}
@ -39,8 +46,8 @@
{{- else -}} {{- else -}}
<title>{{ .Title }} - Seirdy</title> <title>{{ .Title }} - Seirdy</title>
{{- end -}} {{- end -}}
<!-- opengraph stuff; used in the Fediverse, Signal link previews, some <!-- open graph stuff; used in the Fediverse, Signal link previews,
RSS readers, and a certain large social media company --> some RSS readers, and a certain large social media company -->
<meta property="og:title" content="{{ .Title }}"> <meta property="og:title" content="{{ .Title }}">
<meta property="og:site_name" content="{{ $.Site.Title }}"> <meta property="og:site_name" content="{{ $.Site.Title }}">
{{- if (eq "page" .Kind) }} {{- if (eq "page" .Kind) }}
@ -48,6 +55,7 @@
{{- else }} {{- else }}
<meta property="og:type" content="website"> <meta property="og:type" content="website">
{{- end }} {{- end }}
<!-- ANOTHER meta image?! When will it end? -->
{{ $og_image := resources.Get "/open_graph.png" | resources.Fingerprint "md5" -}} {{ $og_image := resources.Get "/open_graph.png" | resources.Fingerprint "md5" -}}
{{ printf `<meta property="og:image" content="%s">` $og_image.Permalink | safeHTML }} {{ printf `<meta property="og:image" content="%s">` $og_image.Permalink | safeHTML }}
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">