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 90% rename from static/css/itix.css rename to assets/css/itix.css index e0c879e..694f1af 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: #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 */ @@ -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,32 +73,13 @@ src: url('/fonts/SourceSansPro-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; -} -@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; + /* + * Core Web Vitals / Cumulative Layout Shift. + * + * Avoid showing invisible text while custom fonts load. + */ + font-display: swap; } /* @@ -260,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) */ @@ -281,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; @@ -290,7 +318,6 @@ pre:hover { * i18n */ .tiny-flag { - height: 0.9rem; vertical-align: middle; margin-left: 5px; margin-right: 5px; @@ -352,6 +379,7 @@ pre:hover { vertical-align: sub; margin-right: 3px; margin-left: 5px; + max-height: 1rem; } .post-metadata time { @@ -387,7 +415,6 @@ article p { article header { padding-bottom: 30px; - font-weight: 600; font-style: normal; line-height: 1.5em; @@ -612,7 +639,8 @@ article header h4 { } .actions .material-icons { - font-size: 2em; + height: 2rem; + width: auto; } /* @@ -740,10 +768,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; } @@ -769,7 +798,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 { diff --git a/i18n/en.yaml b/i18n/en.yaml index 225c4c4..12f0cff 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 @@ -34,3 +34,7 @@ translation: Speaking - id: type_page 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 7788d5a..62c5cfd 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 @@ -34,3 +34,7 @@ translation: Conférence - id: type_page translation: Divers +- id: show_menu + translation: Afficher le menu +- id: file + translation: 'Fichier "%s"' diff --git a/layouts/partials/article-headline.html b/layouts/partials/article-headline.html index 1397a6c..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 fcb9c48..d3cc882 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -2,10 +2,42 @@ {{.Title}} -{{ if .IsHome -}} - -{{- else -}} - + +{{ $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 }} +{{- with .Site.Params.description }} + +{{- else }} + +{{- end }} +{{- else }} +{{- with .Params.description }} + +{{- else }} + +{{- end }} {{- end }} @@ -30,10 +62,6 @@ {{ template "_internal/opengraph.html" . }} {{ template "_internal/twitter_cards.html" . }} - - - - {{ if eq .Type "search" }} - - + +
+ + +
{{- .Site.Title -}}
@@ -43,12 +46,12 @@ {{- if .IsTranslated -}} {{- 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/layouts/partials/post-metadata.html b/layouts/partials/post-metadata.html index 8f6fbba..332e2ef 100644 --- a/layouts/partials/post-metadata.html +++ b/layouts/partials/post-metadata.html @@ -12,8 +12,7 @@ {{- 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" . -}}
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 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