From b44dbf83c122f737f2a21359c469af6e792388ee Mon Sep 17 00:00:00 2001 From: Nicolas MASSE Date: Thu, 14 Jan 2021 23:00:30 +0100 Subject: [PATCH 01/10] Core Web Vitals: improve page loading time and accessibility --- assets/css/.gitignore | 1 + {static => assets}/css/itix.css | 30 +++++++++++++++++++++----- layouts/partials/article-headline.html | 2 +- layouts/partials/head.html | 28 ++++++++++++++++++++---- layouts/partials/menu.html | 4 ++-- 5 files changed, 53 insertions(+), 12 deletions(-) create mode 100644 assets/css/.gitignore rename {static => assets}/css/itix.css (95%) diff --git a/assets/css/.gitignore b/assets/css/.gitignore new file mode 100644 index 0000000..c94d1fd --- /dev/null +++ b/assets/css/.gitignore @@ -0,0 +1 @@ +chroma.css \ No newline at end of file diff --git a/static/css/itix.css b/assets/css/itix.css similarity index 95% rename from static/css/itix.css rename to assets/css/itix.css index e0c879e..4548401 100644 --- a/static/css/itix.css +++ b/assets/css/itix.css @@ -1,8 +1,8 @@ :root { /* - * Theme colors + * Theme colors */ - --main-color: #1976d2; + --main-color: #1975d2; /* Adjusted to ensure a 4.5:1 contrast ratio for accessibility */ --main-background-color: #fcfcfc; --alternate-text-color: #145ca4; --main-text-color: #092949; /* 50% darker than main-color */ @@ -29,9 +29,9 @@ /* * Fonts */ - --default-font-list: "Source Serif Pro"; + --default-font-list: "Source Serif Pro", serif; --mono-font-list: "JetBrains Mono", monospace; - --sans-preferred-font-list: "Source Sans Pro"; + --sans-preferred-font-list: "Source Sans Pro", sans-serif; } @@ -45,6 +45,13 @@ url('/fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; + + /* + * Core Web Vitals / Cumulative Layout Shift. + * + * Avoid showing invisible text while custom fonts load. + */ + font-display: swap; } @font-face{ @@ -52,6 +59,13 @@ src: url('/fonts/SourceSerifPro-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; + + /* + * Core Web Vitals / Cumulative Layout Shift. + * + * Avoid showing invisible text while custom fonts load. + */ + font-display: swap; } @font-face{ @@ -59,6 +73,13 @@ src: url('/fonts/SourceSansPro-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; + + /* + * Core Web Vitals / Cumulative Layout Shift. + * + * Avoid showing invisible text while custom fonts load. + */ + font-display: swap; } @font-face { @@ -290,7 +311,6 @@ pre:hover { * i18n */ .tiny-flag { - height: 0.9rem; vertical-align: middle; margin-left: 5px; margin-right: 5px; diff --git a/layouts/partials/article-headline.html b/layouts/partials/article-headline.html index 1397a6c..75d8afc 100644 --- a/layouts/partials/article-headline.html +++ b/layouts/partials/article-headline.html @@ -3,7 +3,7 @@

{{ .current.Title }} {{- partial "lang-detection.html" .current -}} {{ if .current.Scratch.Get "en_article_in_fr_site" }} - en flag + en flag {{ end }}

{{- partial "post-metadata.html" . -}} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index fcb9c48..d9992d0 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -2,6 +2,30 @@ {{.Title}} + +{{ $chroma := resources.Get "css/chroma.css" }} +{{ $itix := resources.Get "css/itix.css" }} +{{ $css := slice $chroma $itix | resources.Concat "css/itix.css" | resources.Minify | resources.Fingerprint "sha512" }} + + + + + + + + + + + + + {{ if .IsHome -}} {{- else -}} @@ -30,10 +54,6 @@ {{ template "_internal/opengraph.html" . }} {{ template "_internal/twitter_cards.html" . }} - - - - {{ if eq .Type "search" }} {{- range .AllTranslations }} - {{ .Lang }} flag + {{ .Lang }} flag {{- end -}} {{- else -}} {{- range site.Sites }} - {{ .Language.Lang }} flag + {{ .Language.Lang }} flag {{- end -}} {{- end }} From 1fefdd07f96b3ab6580fbbb9eb7cea73352d2470 Mon Sep 17 00:00:00 2001 From: Nicolas MASSE Date: Fri, 15 Jan 2021 09:03:00 +0100 Subject: [PATCH 02/10] Improve Web Vitals: SEO and Accessibility --- assets/css/itix.css | 2 +- i18n/en.yaml | 2 ++ i18n/fr.yaml | 2 ++ layouts/partials/head.html | 20 ++++++++++++++++---- layouts/partials/menu.html | 6 ++++-- 5 files changed, 25 insertions(+), 7 deletions(-) diff --git a/assets/css/itix.css b/assets/css/itix.css index 4548401..5119d78 100644 --- a/assets/css/itix.css +++ b/assets/css/itix.css @@ -2,7 +2,7 @@ /* * Theme colors */ - --main-color: #1975d2; /* Adjusted to ensure a 4.5:1 contrast ratio for accessibility */ + --main-color: #1870c9; /* Adjusted to ensure a 4.5:1 contrast ratio for accessibility */ --main-background-color: #fcfcfc; --alternate-text-color: #145ca4; --main-text-color: #092949; /* 50% darker than main-color */ diff --git a/i18n/en.yaml b/i18n/en.yaml index 225c4c4..304acf5 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -34,3 +34,5 @@ translation: Speaking - id: type_page translation: Misc. +- id: show_menu + translation: Show the menu diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 7788d5a..686e7bf 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -34,3 +34,5 @@ translation: Conférence - id: type_page translation: Divers +- id: show_menu + translation: Afficher le menu diff --git a/layouts/partials/head.html b/layouts/partials/head.html index d9992d0..64474bd 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -26,10 +26,22 @@ -{{ if .IsHome -}} - -{{- else -}} - + +{{- if .IsHome }} +{{- with .Site.Params.description }} + +{{- else }} + +{{- end }} +{{- else }} +{{- with .Params.description }} + +{{- else }} + +{{- end }} {{- end }} diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index ffdb318..ec6f2f4 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -4,8 +4,10 @@ -- A fake / hidden checkbox is used as click reciever, -- so you can use the :checked selector on it. --> - - + + + +
From 7b32086d5afa1162e350ae0777920028f14d9098 Mon Sep 17 00:00:00 2001 From: Nicolas MASSE Date: Fri, 15 Jan 2021 09:59:36 +0100 Subject: [PATCH 03/10] Core Web Vitals: inline svg --- layouts/partials/article-headline.html | 2 +- layouts/partials/head.html | 2 -- {static => layouts/partials}/icons/en.svg | 4 ++-- layouts/partials/icons/fr.svg | 6 ++++++ layouts/partials/menu.html | 4 ++-- static/icons/fr.svg | 2 -- 6 files changed, 11 insertions(+), 9 deletions(-) rename {static => layouts/partials}/icons/en.svg (87%) create mode 100644 layouts/partials/icons/fr.svg delete mode 100644 static/icons/fr.svg diff --git a/layouts/partials/article-headline.html b/layouts/partials/article-headline.html index 75d8afc..84dda21 100644 --- a/layouts/partials/article-headline.html +++ b/layouts/partials/article-headline.html @@ -3,7 +3,7 @@

{{ .current.Title }} {{- partial "lang-detection.html" .current -}} {{ if .current.Scratch.Get "en_article_in_fr_site" }} - en flag +{{- partial "icons/en.svg" . -}} {{ end }}

{{- partial "post-metadata.html" . -}} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 64474bd..ed7b058 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -23,8 +23,6 @@ - - {{- range .AllTranslations }} - {{ .Lang }} flag + {{- partial (printf "icons/%s.svg" .Lang) . -}} {{- end -}} {{- else -}} {{- range site.Sites }} - {{ .Language.Lang }} flag + {{- partial (printf "icons/%s.svg" .Language.Lang) . -}} {{- end -}} {{- end }} diff --git a/static/icons/fr.svg b/static/icons/fr.svg deleted file mode 100644 index b50bd7e..0000000 --- a/static/icons/fr.svg +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file From f9e81e23a81a392432e20b1662546c7dee670603 Mon Sep 17 00:00:00 2001 From: Nicolas MASSE Date: Fri, 15 Jan 2021 10:46:08 +0100 Subject: [PATCH 04/10] Core Web Vitals: get rid of material font and replace it with inline svg --- assets/css/itix.css | 30 ++----------------- layouts/partials/head.html | 2 -- layouts/partials/icons/label.svg | 5 ++++ layouts/partials/icons/link.svg | 5 ++++ layouts/partials/icons/schedule.svg | 6 ++++ layouts/partials/icons/search.svg | 5 ++++ layouts/partials/icons/vertical_align_top.svg | 5 ++++ layouts/partials/post-metadata.html | 8 ++--- layouts/partials/toolbar.html | 4 +-- 9 files changed, 34 insertions(+), 36 deletions(-) create mode 100644 layouts/partials/icons/label.svg create mode 100644 layouts/partials/icons/link.svg create mode 100644 layouts/partials/icons/schedule.svg create mode 100644 layouts/partials/icons/search.svg create mode 100644 layouts/partials/icons/vertical_align_top.svg diff --git a/assets/css/itix.css b/assets/css/itix.css index 5119d78..9ade51b 100644 --- a/assets/css/itix.css +++ b/assets/css/itix.css @@ -82,32 +82,6 @@ font-display: swap; } -@font-face { - font-family: 'Material Icons'; - font-style: normal; - font-weight: 400; - src: url('/fonts/material-icons.woff2') format('woff2'), - url('/fonts/material-icons.ttf') format('truetype'); -} - -/* - * The Google "Material Icons" font is used to render the tag icons, the - * "back to top" link, etc. - */ -.material-icons { - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - -moz-font-feature-settings: 'liga'; - -moz-osx-font-smoothing: grayscale; -} - /* * General settings */ @@ -372,6 +346,7 @@ pre:hover { vertical-align: sub; margin-right: 3px; margin-left: 5px; + max-height: 1rem; } .post-metadata time { @@ -632,7 +607,8 @@ article header h4 { } .actions .material-icons { - font-size: 2em; + height: 2rem; + width: auto; } /* diff --git a/layouts/partials/head.html b/layouts/partials/head.html index ed7b058..d3cc882 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -21,8 +21,6 @@ - - {{- if or (not $.parent.Data.topic) (ne . $.parent.Data.Term) }} - {{ . }} -   + {{- partial "icons/link.svg" . -}}{{ . }} {{- end -}} {{- end }} @@ -23,8 +22,7 @@ {{- if or (not $.parent.Data.opensource) (ne . $.parent.Data.Term) }} - {{ . }} -   + {{- partial "icons/label.svg" . -}}{{ . }} {{- end -}} {{- end }} @@ -35,7 +33,7 @@ --> {{- if eq .current.Type "blog" }} - + {{- partial "icons/schedule.svg" . -}} {{- $minutes := .current.ReadingTime -}} {{- if gt $minutes 0 -}} {{- i18n "minutes" $minutes -}} diff --git a/layouts/partials/toolbar.html b/layouts/partials/toolbar.html index 701b824..a6312a1 100644 --- a/layouts/partials/toolbar.html +++ b/layouts/partials/toolbar.html @@ -9,10 +9,10 @@ {{- end }}
- + {{- partial "icons/vertical_align_top.svg" . -}} - + {{- partial "icons/search.svg" . -}}
From e523cfd705484426ed123a056959c613a9397f31 Mon Sep 17 00:00:00 2001 From: Nicolas MASSE Date: Fri, 15 Jan 2021 10:46:28 +0100 Subject: [PATCH 05/10] add nbsp --- i18n/en.yaml | 4 ++-- i18n/fr.yaml | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/i18n/en.yaml b/i18n/en.yaml index 304acf5..4d76a29 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -10,8 +10,8 @@ translation: Top of the page - id: minutes translation: - one: '{{ .Count }} minute' - other: '{{ .Count }} minutes' + one: '{{ .Count }} minute' + other: '{{ .Count }} minutes' - id: continue_reading translation: Continue reading - id: articles_related_to diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 686e7bf..6f1c31d 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -10,8 +10,8 @@ translation: Retour en haut de la page - id: minutes translation: - one: '{{ .Count }} minute' - other: '{{ .Count }} minutes' + one: '{{ .Count }} minute' + other: '{{ .Count }} minutes' - id: continue_reading translation: Continuer la lecture - id: articles_related_to From ff420ae6a25aa7ef5aef5f183acbfe806c2aac51 Mon Sep 17 00:00:00 2001 From: Nicolas MASSE Date: Fri, 15 Jan 2021 10:47:22 +0100 Subject: [PATCH 06/10] fix metadata style --- assets/css/itix.css | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/css/itix.css b/assets/css/itix.css index 9ade51b..9c6ddd3 100644 --- a/assets/css/itix.css +++ b/assets/css/itix.css @@ -382,7 +382,6 @@ article p { article header { padding-bottom: 30px; - font-weight: 600; font-style: normal; line-height: 1.5em; From 39293022e29733dfe11dbf47ca526e6213c09704 Mon Sep 17 00:00:00 2001 From: Nicolas MASSE Date: Fri, 15 Jan 2021 10:54:44 +0100 Subject: [PATCH 07/10] fix broken menu --- layouts/partials/menu.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index bd5239a..3e7c269 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -5,14 +5,15 @@ -- so you can use the :checked selector on it. --> - -
+ + +
{{- .Site.Title -}}
From 8b4695154b81a87df2db0845a98218fbc6d3b46a Mon Sep 17 00:00:00 2001 From: Nicolas MASSE Date: Fri, 15 Jan 2021 11:13:24 +0100 Subject: [PATCH 08/10] remove flickering upon page load on mobile --- assets/css/itix.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/assets/css/itix.css b/assets/css/itix.css index 9c6ddd3..045bf7d 100644 --- a/assets/css/itix.css +++ b/assets/css/itix.css @@ -735,10 +735,11 @@ mjx-container { .menu .menu-content { width: 300px; + left: -300px; height: 100vh; background-color: var(--main-background-color); position: fixed; - transform: translate(-300px, 0); + transform: none; transition: transform 0.2s linear; } @@ -764,7 +765,7 @@ mjx-container { * the overlay that hides the article content. */ .menu input.hamburger-menu:checked ~ .menu-content { - transform: none; + transform: translate(300px, 0); } .menu input.hamburger-menu:checked ~ .menu-overlay { From 2901afeb78a1192765529aba7f97a458c06fd9d9 Mon Sep 17 00:00:00 2001 From: Nicolas MASSE Date: Fri, 15 Jan 2021 11:51:06 +0100 Subject: [PATCH 09/10] hide scrollbars to avoid reflow --- assets/css/itix.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/assets/css/itix.css b/assets/css/itix.css index 045bf7d..7575ad8 100644 --- a/assets/css/itix.css +++ b/assets/css/itix.css @@ -255,6 +255,15 @@ pre { /* Do not wrap lines of code */ overflow-x: hidden; + + /* Hide scrollbar for IE, Edge and Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +pre::-webkit-scrollbar { + display: none; } /* Inline code (single backticks in markdown) */ From 24e4510884e26c05849319c7774356d26a0d0837 Mon Sep 17 00:00:00 2001 From: Nicolas MASSE Date: Mon, 8 Feb 2021 14:19:36 +0100 Subject: [PATCH 10/10] highlighted file support --- assets/css/itix.css | 24 ++++++++++++++++++++++++ i18n/en.yaml | 2 ++ i18n/fr.yaml | 2 ++ layouts/shortcodes/highlightFile.html | 7 +++++++ 4 files changed, 35 insertions(+) create mode 100644 layouts/shortcodes/highlightFile.html diff --git a/assets/css/itix.css b/assets/css/itix.css index 7575ad8..694f1af 100644 --- a/assets/css/itix.css +++ b/assets/css/itix.css @@ -285,6 +285,30 @@ pre code { padding: 0; } +/* + * Highlighted file has a wrapping div. Some properties are redefined for it + * and reset to their default value for its children. + */ +.highlightedFile { + background: var(--codeblock-background-color); + border-radius: 5px; +} + +.highlightedFile .filename { + border-bottom: 2px solid var(--hover-menu-border-color); + font-family: var(--sans-preferred-font-list) !important; + font-size: larger; + padding: 12px 15px; +} + +.highlightedFile pre { + background: inherit; + border-radius: inherit; + padding: 12px 15px; + margin: 0; +} + + pre:hover { /* Show the horizontal scroll bar when hovering code (if needed) */ overflow-x: auto; diff --git a/i18n/en.yaml b/i18n/en.yaml index 4d76a29..12f0cff 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -36,3 +36,5 @@ translation: Misc. - id: show_menu translation: Show the menu +- id: file + translation: 'File "%s"' diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 6f1c31d..62c5cfd 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -36,3 +36,5 @@ translation: Divers - id: show_menu translation: Afficher le menu +- id: file + translation: 'Fichier "%s"' diff --git a/layouts/shortcodes/highlightFile.html b/layouts/shortcodes/highlightFile.html new file mode 100644 index 0000000..80c7e10 --- /dev/null +++ b/layouts/shortcodes/highlightFile.html @@ -0,0 +1,7 @@ + +
+{{- with .Get 0 -}} +
{{ printf (i18n "file") . | safeHTML }}
+{{- end -}} +{{- highlight (trim .Inner "\n") (.Get 1) (.Get 2) -}} +
\ No newline at end of file