Move language switcher to its own row in the footer
Give it flex-basis:100%, same as the store-path row, so it sits below license/RSS/store-path instead of competing for space inline with them.
1ce0eef parent: 78c3f9f modified
blog/assets/css/style.scss +4 -0 | @@ -981,8 +981,12 @@ blockquote.alert { | ||
| 981 | 981 | } |
| 982 | 982 | } |
| 983 | 983 | |
| 984 | + // Own row below everything else (license, RSS, store path), rather than | |
| 985 | + // competing for space inline with them. | |
| 984 | 986 | .lang-switch { |
| 985 | 987 | display: inline-flex; |
| 988 | + justify-content: center; | |
| 989 | + flex-basis: 100%; | |
| 986 | 990 | gap: 0.5rem; |
| 987 | 991 | } |
| 988 | 992 | |
| @@ -981,8 +981,12 @@ blockquote.alert { | |||
| 981 | } | 981 | } |
| 982 | } | 982 | } |
| 983 | 983 | ||
| 984 | + // Own row below everything else (license, RSS, store path), rather than | ||
| 985 | + // competing for space inline with them. | ||
| 984 | .lang-switch { | 986 | .lang-switch { |
| 985 | display: inline-flex; | 987 | display: inline-flex; |
| 988 | + justify-content: center; | ||
| 989 | + flex-basis: 100%; | ||
| 986 | gap: 0.5rem; | 990 | gap: 0.5rem; |
| 987 | } | 991 | } |
| 988 | 992 | ||
modified
blog/layouts/partials/site-foot.html +5 -6 | @@ -11,9 +11,13 @@ | ||
| 11 | 11 | {{ i18n "rssLabel" }} |
| 12 | 12 | </a> |
| 13 | 13 | </span> |
| 14 | + {{ with site.Params.nixstorepath }} | |
| 15 | + <span class="store-path-row"> | |
| 16 | + <code class="store-path" title="This site was built by Nix">{{ . }}</code> | |
| 17 | + </span> | |
| 18 | + {{ end }} | |
| 14 | 19 | {{- $translations := .AllTranslations }} |
| 15 | 20 | {{- if gt (len $translations) 1 }} |
| 16 | - <span class="sep" aria-hidden="true">·</span> | |
| 17 | 21 | <span class="lang-switch"> |
| 18 | 22 | {{- range sort $translations "Language.Weight" }} |
| 19 | 23 | {{- if eq .Lang $.Lang }} |
| @@ -24,9 +28,4 @@ | ||
| 24 | 28 | {{- end }} |
| 25 | 29 | </span> |
| 26 | 30 | {{- end }} |
| 27 | - {{ with site.Params.nixstorepath }} | |
| 28 | - <span class="store-path-row"> | |
| 29 | - <code class="store-path" title="This site was built by Nix">{{ . }}</code> | |
| 30 | - </span> | |
| 31 | - {{ end }} | |
| 32 | 31 | </footer> |
| @@ -11,9 +11,13 @@ | |||
| 11 | {{ i18n "rssLabel" }} | 11 | {{ i18n "rssLabel" }} |
| 12 | </a> | 12 | </a> |
| 13 | </span> | 13 | </span> |
| 14 | + {{ with site.Params.nixstorepath }} | ||
| 15 | + <span class="store-path-row"> | ||
| 16 | + <code class="store-path" title="This site was built by Nix">{{ . }}</code> | ||
| 17 | + </span> | ||
| 18 | + {{ end }} | ||
| 14 | {{- $translations := .AllTranslations }} | 19 | {{- $translations := .AllTranslations }} |
| 15 | {{- if gt (len $translations) 1 }} | 20 | {{- if gt (len $translations) 1 }} |
| 16 | - <span class="sep" aria-hidden="true">·</span> | ||
| 17 | <span class="lang-switch"> | 21 | <span class="lang-switch"> |
| 18 | {{- range sort $translations "Language.Weight" }} | 22 | {{- range sort $translations "Language.Weight" }} |
| 19 | {{- if eq .Lang $.Lang }} | 23 | {{- if eq .Lang $.Lang }} |
| @@ -24,9 +28,4 @@ | |||
| 24 | {{- end }} | 28 | {{- end }} |
| 25 | </span> | 29 | </span> |
| 26 | {{- end }} | 30 | {{- end }} |
| 27 | - {{ with site.Params.nixstorepath }} | ||
| 28 | - <span class="store-path-row"> | ||
| 29 | - <code class="store-path" title="This site was built by Nix">{{ . }}</code> | ||
| 30 | - </span> | ||
| 31 | - {{ end }} | ||
| 32 | </footer> | 31 | </footer> |