From e8203032fc15622085c12100d887b15a1a756326 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Wed, 20 Sep 2023 22:24:14 -0700 Subject: add language globe menu icon, use language name in menu --- COPY-TO-ROOT-SASS/abridge.scss | 1 + config.toml | 14 ++++----- content/archive/_index.fr.md | 2 +- content/archive/_index.md | 2 +- sass/_functions.scss | 1 + sass/abridge.scss | 62 ++++++++++++++++++++------------------ templates/base.html | 67 +++++++++++++++++++++++------------------- 7 files changed, 81 insertions(+), 68 deletions(-) diff --git a/COPY-TO-ROOT-SASS/abridge.scss b/COPY-TO-ROOT-SASS/abridge.scss index b3cb77d..959094f 100644 --- a/COPY-TO-ROOT-SASS/abridge.scss +++ b/COPY-TO-ROOT-SASS/abridge.scss @@ -53,6 +53,7 @@ //$icon-angr: true,//pagination, goto next page //$icon-angrr: true,//pagination, goto last page //$icon-angu: true,//back to top button, appears after scrolling down. + //$icon-world: true,//language select menu //$icon-copy: true,//copy to clipboard, for code blocks. //$icon-ffolder: false, diff --git a/config.toml b/config.toml index 8ff9621..0fd4aa0 100644 --- a/config.toml +++ b/config.toml @@ -52,7 +52,7 @@ taxonomies = [ ] [languages.fr.translations] -flag = "🇫🇷" +flag = "Français" date_locale = "fr_FR" Search = "Recherche" Recent_Posts = "Articles Récents" @@ -79,7 +79,7 @@ Series_parts = "Série de $NUMBER_OF_PARTS parties" copyright_override = '© $CURRENT_YEAR $SITE_TITLE • Le contenu du site Web est sous licence CC BY 4.0.' #[languages.es.translations] -#flag = "🇪🇸" +#flag = "Español" [extra] ############################################################################### @@ -89,9 +89,9 @@ copyright_override = '© $CURRENT_YEAR $SITE_TITLE • Le contenu du site Web es ############################################################################### date_locale = "en_US" language_code = "en-US" -flag.en = "🇬🇧" -flag.fr = "🇫🇷" -#flag.es = "🇪🇸" +flag.en = "English" +flag.fr = "Français" +#flag.es = "Español" ############################################################################### @@ -136,7 +136,7 @@ footer_credit = true ### Uncomment one of the below lines, or neither, depending on which type of logo you want to use: #logo = { file="logo.svg", width="32", height="32", alt="Abridge", text="bridge" } #textlogo = 'Abridge' -textlogo = 'bridge' +textlogo = 'bridge' sitedesc = false # enables or disables the display of the site description below the logo. headhr = false # show or hide horizontal rule below header @@ -253,7 +253,7 @@ webmanifest = "manifest.min.json" # Required for PWAs ### The options below other than pwa=true, only come into play when the npm/node script is ran. ############################################################################### -pwa = true # true to load the service worker +pwa = false # true to load the service worker pwa_VER = '3.11.0' # Service Worker cache version. (increment if you need to force a new cache) ### 3600=1hour, 28800=8hours, 86400=1day, 604800=1week, 1209600=2weeks diff --git a/content/archive/_index.fr.md b/content/archive/_index.fr.md index 6234b9b..85198a5 100644 --- a/content/archive/_index.fr.md +++ b/content/archive/_index.fr.md @@ -2,5 +2,5 @@ template = "archive.html" [extra] -sec = "blog" +sec = "" +++ diff --git a/content/archive/_index.md b/content/archive/_index.md index 6234b9b..85198a5 100644 --- a/content/archive/_index.md +++ b/content/archive/_index.md @@ -2,5 +2,5 @@ template = "archive.html" [extra] -sec = "blog" +sec = "" +++ diff --git a/sass/_functions.scss b/sass/_functions.scss index dd6880a..4bfb230 100644 --- a/sass/_functions.scss +++ b/sass/_functions.scss @@ -125,6 +125,7 @@ angr: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m8 4 8 8-8 8'/%3E%3C/svg%3E", angrr: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m4 4 8 8-8 8m9-16 8 8-8 8'/%3E%3C/svg%3E", angu: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m4 16 8-8 8 8'/%3E%3C/svg%3E", + world: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M1 12a11 11 90 0 0 22 0 11 11 90 0 0-22 0m1-4h20M2 16h20M11 1a21 21 90 0 0 0 22m2-22a21 21 90 0 1 0 22'/%3E%3C/svg%3E", copy: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M11 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM7 9H3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E", copy-yes: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E", copy-err: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M1 12a1 1 0 0 0 22 0 1 1 0 0 0-22 0m11-7v9m0 5v-2'/%3E%3C/svg%3E", diff --git a/sass/abridge.scss b/sass/abridge.scss index b66b0ba..a4190b2 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -71,6 +71,7 @@ $icon-angl: true !default;//pagination, goto previous page $icon-angr: true !default;//pagination, goto next page $icon-angrr: true !default;//pagination, goto last page $icon-angu: true !default;//back to top button, appears after scrolling down. +$icon-world: true !default;//language select menu $icon-copy: true !default;//copy to clipboard, for code blocks. $icon-ffolder: false !default; @@ -460,7 +461,7 @@ $syntax: true !default;//syntax highlighting for code blocks font-size: 1.125rem; } header h1 { - margin-top: 0; + margin: 0; } a { color: var(--a1); @@ -474,7 +475,7 @@ $syntax: true !default;//syntax highlighting for code blocks a:visited { color: var(--a4); } - h1 a, h2 a, main nav a, header span > a { + h1 a, h2 a, main nav a, header li > a { color: var(--f2); text-decoration: none; font-weight: var(--fh); @@ -549,7 +550,7 @@ $syntax: true !default;//syntax highlighting for code blocks color: var(--f1); font-style: normal; font-weight: var(--fw); - //font-size: var(--fs);//TODO: This caused the lists to be a different size than the rest of the page, it was quite jarring + font-size: var(--fs); } // Lists @@ -673,11 +674,8 @@ $syntax: true !default;//syntax highlighting for code blocks flex-wrap: wrap; justify-content: space-between; align-items: center; - //margin: 0 auto; - h1 { - margin: 0;//right margin - } - span { + ul { + margin: 0; display: flex; flex-wrap: wrap; justify-content: center; @@ -688,9 +686,6 @@ $syntax: true !default;//syntax highlighting for code blocks header > nav > div:nth-child(2) {//puts logo on left and menu/search on right margin-left: auto; justify-content: center; - a, i, .dropdown { - margin: 0 var(--s2) 0 0;//right margin - } } // mobile first layout. header nav { @@ -704,29 +699,38 @@ $syntax: true !default;//syntax highlighting for code blocks align-items: center; justify-content: center;//center pagination horizontally display: flex; + li { + display: inline-block; + margin: 0 var(--s2) 0 0;//right margin + } } //dropdown menu used for lang, etc. .dropdown { display: inline-block; position: relative; - z-index: 99; + z-index: 1; font-weight: var(--fh); - font-size: 1.4rem; + font-size: var(--fs); } .dropdown-content { display: none; position: absolute; - z-index: 99; + cursor: pointer; + text-align: center; + right: -1rem; + z-index: 1; font-weight: var(--fh); - font-size: 1.4rem; + font-size: var(--fs); + background: var(--c2); + a,span { + margin: 0 var(--s1); + display: block; + text-decoration: none; + } } .dropdown:hover .dropdown-content { display: block; - z-index: 99; - a { - text-decoration: none; - } } article nav {//prev/next page title div:last-child { @@ -1170,15 +1174,14 @@ $syntax: true !default;//syntax highlighting for code blocks } } @if $blocks { + .sticky { + position: sticky; + top: var(--s2); + } .block { max-width: 30rem; margin: var(--s2) auto; } - .sblock { - width: 15rem; - max-width: 15rem; - margin-left: var(--s1); - } .blockdiv { border-radius: var(--br); border-top: 5px solid var(--a1); @@ -1197,11 +1200,13 @@ $syntax: true !default;//syntax highlighting for code blocks margin: 0; } } - .sticky { - position: sticky; - top: var(--s2); - } .sblock { + ol,ul { + font-size: 1em; + } + width: 15rem; + max-width: 15rem; + margin-left: var(--s1); display: none;//hide in mobile view } @if map-get($breakpoints, "md") { @@ -1276,6 +1281,7 @@ $syntax: true !default;//syntax highlighting for code blocks @if $icon-angr {.angr { -webkit-mask: functions.icon(angr, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle right @if $icon-angrr {.angrr { -webkit-mask: functions.icon(angrr, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle right right @if $icon-angu {.angu { -webkit-mask: functions.icon(angu, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle up + @if $icon-world {.world { -webkit-mask: functions.icon(world, "%23000", 2, "none", $ic) ; background: var(--f2) }}//language select menu @if $icon-copy {//copy icons for code blocks .copy { -webkit-mask: functions.icon(copy, "%23000", 2, "none", $ic) ; background: var(--f2) } .copy.yes { -webkit-mask: functions.icon(copy-yes, "%23000", 2, "none", $ic) ; background: var(--cg) } diff --git a/templates/base.html b/templates/base.html index b3dfec8..b1172a9 100644 --- a/templates/base.html +++ b/templates/base.html @@ -27,12 +27,14 @@ {%- if config.extra.sitedesc %} -- cgit v1.3.1