From 76008e80bff9ade294ec93520ae29ab24976fbd7 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Sun, 9 Mar 2025 17:00:59 +0100 Subject: [PATCH] up style --- ...elques-concepts-autour-d'openstreetmap.org | 2 +- templates/styles/style_general.css | 97 +++--- templates/styles/style_general.css.map | 2 +- templates/styles_src/_variables.scss | 42 +++ templates/styles_src/style_general.scss | 296 +++++++++--------- 5 files changed, 232 insertions(+), 207 deletions(-) create mode 100644 templates/styles_src/_variables.scss diff --git a/sources/cipherbliss_blog/lang_fr/20250224120052__quelques-concepts-autour-d'openstreetmap.org b/sources/cipherbliss_blog/lang_fr/20250224120052__quelques-concepts-autour-d'openstreetmap.org index fffd8588..acf4ac62 100644 --- a/sources/cipherbliss_blog/lang_fr/20250224120052__quelques-concepts-autour-d'openstreetmap.org +++ b/sources/cipherbliss_blog/lang_fr/20250224120052__quelques-concepts-autour-d'openstreetmap.org @@ -116,7 +116,7 @@ Il y a deux choses à distinguer ici: - L'évènement annuel State Of The Map France [[https://wiki.openstreetmap.org/wiki/State_of_the_Map_France][State of the Map France - OpenStreetMap Wiki]] - En attendant des rencontres, vous pouvez échanger sur le forum qui est une mine d'or pour voir le fonctionnement de la gouvernance, les outils, les erreurs courantes, trouver des gens près de chez vous, les thématiques qui pourraient vous intéresser, comment réutiliser les données, comment trouver tous défibrilateurs, ou les panneaux biche. + En attendant des rencontres, vous pouvez échanger sur le forum qui est une mine d'or pour voir le fonctionnement de la gouvernance, les outils, les erreurs courantes, trouver des gens près de chez vous, les thématiques qui pourraient vous intéresser, comment réutiliser les données, comment trouver tous défibrillateurs, ou les panneaux biche. https://forum.openstreetmap.fr diff --git a/templates/styles/style_general.css b/templates/styles/style_general.css index 0f800b53..f32156db 100644 --- a/templates/styles/style_general.css +++ b/templates/styles/style_general.css @@ -5,6 +5,9 @@ margin: 0; padding: 0; } +*::before, *::after { + box-sizing: border-box; +} html { font-size: 1rem; @@ -17,6 +20,8 @@ body { line-height: 1.5em; color: #000; background: #fff; + -webkit-font-smoothing: antialiased; + padding-bottom: 2rem; } nav, @@ -34,10 +39,13 @@ h4, h5, h6 { font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif; - margin-top: 1em; + margin-top: 1rem; margin-bottom: 2rem; color: #333; text-decoration: none !important; + overflow-wrap: break-word; + text-wrap: balance; + line-height: 1.3em; } hr + h1 { @@ -48,24 +56,25 @@ h1:first-letter { text-transform: uppercase; } -/* 1. Use a more-intuitive box-sizing model */ -* { - box-sizing: border-box; -} -*::before, *::after { - box-sizing: border-box; +h1 { + color: #221d30; + font-size: 2.5rem; + text-decoration: underline; } -body { - -webkit-font-smoothing: antialiased; - font-family: Helvetica, Arial, sans-serif; - padding-bottom: 20vh; - padding-bottom: 2rem; +h2 { + font-size: 2rem; + text-decoration: underline; +} + +h3 { + font-size: 1.5rem; + text-decoration: underline; } -/* Improve media defaults */ .content { font-size: 1.2rem; + min-height: 15rem; } .content img, .content picture, @@ -76,7 +85,7 @@ body { display: block; margin-top: 1rem; margin-bottom: 1rem; - max-width: 100%; + max-width: 100vw; } pre, @@ -99,7 +108,7 @@ main a:hover h2 { color: rgb(0, 123, 255); } .nav a, .page__index a { - padding: 0.55rem 2rem; + padding: 0.5rem 2rem; display: block; margin-right: 1rem; margin-bottom: 1rem; @@ -131,59 +140,25 @@ p { margin-bottom: 1rem; } -h1 { - color: #221d30; - font-size: 2.5rem; - text-decoration: underline; -} - -h2 { - font-size: 2rem; - text-decoration: underline; -} - -h3 { - font-size: 1.5rem; - text-decoration: underline; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - overflow-wrap: break-word; - text-wrap: balance; - line-height: 1.3em; -} - #root, #__next { isolation: isolate; } -input, -button, -textarea, -select { - font: inherit; -} - ul { padding-left: 4ch; padding-right: 4ch; } li { - margin-bottom: 1em; + margin-bottom: 1rem; } #tags_page li { display: inline; } li a { display: inline-block; - margin-right: 1em; + margin-right: 1rem; } #title-block-header { @@ -258,14 +233,8 @@ li a { border-radius: 1rem; margin-top: 7rem; } - -.content { - min-height: 15rem; -} - -.after-article { - border-top: 1px solid #dedede; - padding: 1rem; +.body-wrap .site-header { + display: none; } .site-footer { @@ -275,8 +244,14 @@ li a { color: #dedede; } -.body-wrap .site-header { - display: none; +article { + width: 75ch; + max-width: calc(100vw - 6rem); +} + +.after-article { + border-top: 1px solid #dedede; + padding: 1rem; } .article-navigation { diff --git a/templates/styles/style_general.css.map b/templates/styles/style_general.css.map index 68d2c2f7..b22c988e 100644 --- a/templates/styles/style_general.css.map +++ b/templates/styles/style_general.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../styles_src/style_general.scss"],"names":[],"mappings":";AAAA;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAEA;EACE;;AAEA;EAEE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;;;AAIF;EACE;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EAGE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAKJ;EACE;;AAEA;EAEE;EACA;;;AAIJ;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;EACA;;;AAKJ;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EAEE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAIA;EACE;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;;AAMF;AAAA;EACE;;AAGF;AAAA;EACE;EACA;;AAGA;AAAA;EACE;EACA;;;AAMN;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;IACE","file":"style_general.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../styles_src/style_general.scss"],"names":[],"mappings":";AAAA;AA6CA;EACE;EACA;EACA;;AAEA;EAEE;;;AAIJ;EACE,WAvCe;EAwCf,aApBiB;;;AAuBnB;EACE;EACA,WA5Ce;EA6Cf,aAxCiB;EAyCjB,OA9DW;EA+DX,YA9DiB;EA+DjB;EACA,gBArCW;;;AAwCb;AAAA;AAAA;AAAA;EAIE,WA1DoB;EA2DpB;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aA9CoB;EA+CpB,YAzDW;EA0DX,eAxDW;EAyDX,OAnFc;EAoFd;EACA;EACA;EACA,aAnEoB;;;AAsEtB;EACE,YAhEW;;;AAmEb;EACE;;;AAGF;EACE,OAlGiB;EAmGjB,WApFa;EAqFb;;;AAGF;EACE,WAxFa;EAyFb;;;AAGF;EACE,WA5Fa;EA6Fb;;;AAGF;EACE,WApGkB;EAqGlB;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE,OAhHY;EAiHZ;EACA,YArGS;EAsGT,eAtGS;EAuGT;;;AAIJ;AAAA;EAEE;;;AAIF;EACE;EACA,eA7GiB;EA8GjB,OA1IW;EA2IX;EACA,SAtHW;;AAwHX;EACE,YAzIkB;EA0IlB,OAhJS;;AAkJT;EACE,OAnJO;;AAuJX;EAEE;EACA;EACA,cArIS;EAsIT,eAtIS;;AAyIX;EACE;EACA;;;AAIJ;EACE,YAlIe;;AAoIf;EACE;EACA,YAvIe;;;AA2InB;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA,YAjKW;EAkKX,eAnKW;;;AAsKb;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;EACE,eAjLW;;AAmLX;EACE;;AAGF;EACE;EACA,cAzLS;;;AA8Lb;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAKF;EACE,OA7MS;EA8MT,QA9MS;EA+MT,cAjNS;;AAoNX;EACE;EACA;;;AAIJ;EACE,YA1NW;EA2NX,eA3NW;EA4NX;;AAEA;EACE;EACA,SAlOS;EAmOT;EACA,eA9Ne;;;AAkOnB;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA,SA/OS;;;AAmPb;EACE;EACA,SArPW;EAsPX;EACA;;;AAGF;AAAA;EAEE,QA5PW;EA6PX,OAtRiB;EAuRjB;;;AAGF;EACE,YArRc;;;AAwRhB;EACE,YA/RiB;EAgSjB,SAnQkB;EAoQlB;EACA,YAzQW;EA0QX,eApQiB;EAqQjB;;AAEA;EACE;;;AAIJ;EACE;EACA,SAlRW;EAmRX,YA1SgB;EA2ShB,OA1SkB;;;AA6SpB;EACE,OAvSc;EAwSd;;;AAGF;EACE;EACA,SAhSW;;;AAmSb;EACE,YAlSW;EAmSX,eAnSW;;AAqSX;EACE,eAtSS;;;AA0Sb;EACE,YA7SW;EA8SX,eA9SW;;AAgTX;EACE;EACA,SAnTS;;;AA0TX;AAAA;EACE;;AAGF;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA,SApUO;;;AAyUb;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA,cA9UW;EA+UX,aAhVW;EAiVX,gBAjVW;;;AAoVb;EACE;;;AAIA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA,cArWS;;;AAyWb;EACE;IACE;;EAGF;IACE,SA/WS","file":"style_general.css"} \ No newline at end of file diff --git a/templates/styles_src/_variables.scss b/templates/styles_src/_variables.scss new file mode 100644 index 00000000..f158f2d2 --- /dev/null +++ b/templates/styles_src/_variables.scss @@ -0,0 +1,42 @@ +// Variables de couleurs +$color-text: #000; +$color-background: #fff; +$color-heading: #333; +$color-heading-h1: #221d30; +$color-link: rgb(0, 123, 255); +$color-footer-bg: #aaa; +$color-footer-text: #dedede; +$color-page-bg: #f4f4f4; +$color-border: #dedede; +$color-blockquote-border: grey; +$color-link-hover-bg: #303030; + +// Variables de taille +$article-width: 75ch; +$container-max-width: 70ch; +$font-size-base: 1rem; +$font-size-body: 1.5rem; +$font-size-content: 1.2rem; +$font-size-h1: 2.5rem; +$font-size-h2: 2rem; +$font-size-h3: 1.5rem; +$line-height-base: 1.5em; +$line-height-heading: 1.3em; + +// Variables d'espacement +$spacing-xs: 0.5rem; +$spacing-sm: 1rem; +$spacing-md: 1.5rem; +$spacing-lg: 2rem; +$spacing-xl: 5rem; +$padding-container: 5% 6%; +$border-radius-sm: 0.5rem; +$border-radius-md: 1rem; + +// Variables de police +$font-family-base: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif; +$font-family-heading: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif; + +// Variables de transition +$transition-hover: 0.25s all ease-in; +$transition-out: 0.25s box-shadow ease-out; \ No newline at end of file diff --git a/templates/styles_src/style_general.scss b/templates/styles_src/style_general.scss index 871cbd8b..b3dac5dd 100644 --- a/templates/styles_src/style_general.scss +++ b/templates/styles_src/style_general.scss @@ -1,28 +1,79 @@ /*style général scss*/ + +// Variables de couleurs +$color-text: #000; +$color-background: #fff; +$color-heading: #333; +$color-heading-h1: #221d30; +$color-link: rgb(0, 123, 255); +$color-footer-bg: #aaa; +$color-footer-text: #dedede; +$color-page-bg: #f4f4f4; +$color-border: #dedede; +$color-blockquote-border: grey; +$color-link-hover-bg: #303030; + +// Variables de taille +$article-width: 75ch; +$container-max-width: 70ch; +$font-size-base: 1rem; +$font-size-body: 1.5rem; +$font-size-content: 1.2rem; +$font-size-h1: 2.5rem; +$font-size-h2: 2rem; +$font-size-h3: 1.5rem; +$line-height-base: 1.5em; +$line-height-heading: 1.3em; + +// Variables d'espacement +$spacing-xs: 0.5rem; +$spacing-sm: 1rem; +$spacing-md: 1.5rem; +$spacing-lg: 2rem; +$spacing-xl: 5rem; +$padding-container: 5% 6%; +$border-radius-sm: 0.5rem; +$border-radius-md: 1rem; + +// Variables de police +$font-family-base: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif; +$font-family-heading: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif; + +// Variables de transition +$transition-hover: 0.25s all ease-in; +$transition-out: 0.25s box-shadow ease-out; + * { box-sizing: border-box; margin: 0; padding: 0; + + &::before, + &::after { + box-sizing: border-box; + } } html { - font-size: 1rem; - font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif; + font-size: $font-size-base; + font-family: $font-family-base; } body { text-align: left; - font-size: 1.5rem; - line-height: 1.5em; - color: #000; - background: #fff; + font-size: $font-size-body; + line-height: $line-height-base; + color: $color-text; + background: $color-background; + -webkit-font-smoothing: antialiased; + padding-bottom: $spacing-lg; } nav, .navbar, .container, .body-wrap { - max-width: 70ch; + max-width: $container-max-width; margin: 0 auto; } @@ -32,53 +83,54 @@ h3, h4, h5, h6 { - font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif; - margin-top: 1em; - margin-bottom: 2rem; - color: #333; + font-family: $font-family-heading; + margin-top: $spacing-sm; + margin-bottom: $spacing-lg; + color: $color-heading; text-decoration: none !important; + overflow-wrap: break-word; + text-wrap: balance; + line-height: $line-height-heading; } hr+h1 { - margin-top: 5rem; + margin-top: $spacing-xl; } h1:first-letter { text-transform: uppercase; } -/* 1. Use a more-intuitive box-sizing model */ - -* { - box-sizing: border-box; - - &::before, - &::after { - box-sizing: border-box; - } +h1 { + color: $color-heading-h1; + font-size: $font-size-h1; + text-decoration: underline; } -body { - -webkit-font-smoothing: antialiased; - font-family: Helvetica, Arial, sans-serif; - padding-bottom: 20vh; - padding-bottom: 2rem; +h2 { + font-size: $font-size-h2; + text-decoration: underline; +} + +h3 { + font-size: $font-size-h3; + text-decoration: underline; } -/* Improve media defaults */ .content { - font-size: 1.2rem; + font-size: $font-size-content; + min-height: 15rem; img, picture, video, canvas, svg { - width: 75ch; + width: $article-width; display: block; - margin-top: 1rem; - margin-bottom: 1rem; - max-width: 100%; + margin-top: $spacing-sm; + margin-bottom: $spacing-sm; + max-width: 100vw; } } @@ -90,45 +142,40 @@ pre, // ancres a { display: inline-block; - - border-radius: 1rem; - color: rgb(0, 123, 255); + border-radius: $border-radius-md; + color: $color-link; text-decoration: none; - padding: 1rem; + padding: $spacing-sm; main &:hover { - background: #303030; - color: rgb(0, 123, 255); + background: $color-link-hover-bg; + color: $color-link; h2 { - color: rgb(0, 123, 255); + color: $color-link; } - } .nav &, - .page__index & { - padding: 0.55rem 2rem; + padding: $spacing-xs $spacing-lg; display: block; - margin-right: 1rem; - margin-bottom: 1rem; + margin-right: $spacing-sm; + margin-bottom: $spacing-sm; } .site-footer & { - margin: 0 1rem; + margin: 0 $spacing-sm; text-decoration: underline; } - } a img { - transition: 0.25s box-shadow ease-out; + transition: $transition-out; &:hover { - - box-shadow: 0 0 1rem #ccc; - transition: 0.25s all ease-in; + box-shadow: 0 0 $spacing-sm #ccc; + transition: $transition-hover; } } @@ -142,35 +189,8 @@ select { p { overflow-wrap: break-word; text-wrap: pretty; - margin-top: 1.5rem; - margin-bottom: 1rem; -} - -h1 { - color: #221d30; - font-size: 2.5rem; - text-decoration: underline; -} - -h2 { - font-size: 2rem; - text-decoration: underline; -} - -h3 { - font-size: 1.5rem; - text-decoration: underline; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - overflow-wrap: break-word; - text-wrap: balance; - line-height: 1.3em; + margin-top: $spacing-md; + margin-bottom: $spacing-sm; } #root, @@ -178,20 +198,13 @@ h6 { isolation: isolate; } -input, -button, -textarea, -select { - font: inherit; -} - ul { padding-left: 4ch; padding-right: 4ch; } li { - margin-bottom: 1em; + margin-bottom: $spacing-sm; #tags_page & { display: inline; @@ -199,7 +212,7 @@ li { a { display: inline-block; - margin-right: 1em; + margin-right: $spacing-sm; } } @@ -221,28 +234,27 @@ li { .navbar-menu { img { - width: 2rem; - height: 2rem; - margin-right: 1rem; + width: $spacing-lg; + height: $spacing-lg; + margin-right: $spacing-sm; } a { - margin: 0 1rem; + margin: 0 $spacing-sm; text-decoration: underline; } } #recherche { - - margin-top: 1.5rem; - margin-bottom: 1.5rem; + margin-top: $spacing-md; + margin-bottom: $spacing-md; float: right; input { background: transparent; - padding: 0.5rem; + padding: $spacing-xs; border: solid 1px #555; - border-radius: 0.5rem; + border-radius: $border-radius-sm; } } @@ -252,82 +264,80 @@ li { .site-icon { width: 9rem; height: auto; - margin: 1rem auto; + margin: $spacing-sm auto; position: static; - padding: 1rem; + padding: $spacing-sm; } } .header-image { text-align: center; - padding: 1rem; + padding: $spacing-sm; background-position: center; background-size: cover; } .blog-title, .blog-subtitle { - margin: 1rem; - color: #fff; - text-shadow: 0 0 1rem #555; + margin: $spacing-sm; + color: $color-background; + text-shadow: 0 0 $spacing-sm #555; } #page { - background: #f4f4f4; + background: $color-page-bg; } .body-wrap { - background: #fff; - padding: 5% 6%; + background: $color-background; + padding: $padding-container; margin-bottom: 5%; - margin-top: 1rem; - border-radius: 1rem; + margin-top: $spacing-sm; + border-radius: $border-radius-md; margin-top: 7rem; -} -.content { - min-height: 15rem; - -} - -.after-article { - border-top: 1px solid #dedede; - padding: 1rem; -} - - -.site-footer { - min-height: 20vh; - padding: 2rem; - background: #aaa; - color: #dedede; -} - -.body-wrap { .site-header { display: none; } } +.site-footer { + min-height: 20vh; + padding: $spacing-lg; + background: $color-footer-bg; + color: $color-footer-text; +} + +article { + width: $article-width; + max-width: calc(100vw - 6rem); +} + +.after-article { + border-top: 1px solid $color-border; + padding: $spacing-sm; +} + .article-navigation { - margin-top: 2rem; - margin-bottom: 2rem; + margin-top: $spacing-lg; + margin-bottom: $spacing-lg; a { - padding-right: 2rem; + padding-right: $spacing-lg; } } .article-tags { - margin-top: 1rem; - margin-bottom: 1rem; + margin-top: $spacing-sm; + margin-bottom: $spacing-sm; a { margin-right: 1ch; - padding: 0.5rem; + padding: $spacing-xs; } } + .article-tags, .tags { ul { @@ -338,15 +348,13 @@ li { margin-right: 2ch; display: inline-block; - a { margin-right: 1ch; - padding: 0.5rem; + padding: $spacing-xs; } } } - blockquote, q { -webkit-hyphens: none; @@ -354,10 +362,10 @@ q { -ms-hyphens: none; hyphens: none; quotes: none; - border-left: 3px solid grey; - padding-left: 2rem; - padding-top: 1.5rem; - padding-bottom: 1.5rem; + border-left: 3px solid $color-blockquote-border; + padding-left: $spacing-lg; + padding-top: $spacing-md; + padding-bottom: $spacing-md; } .article-main-content { @@ -376,16 +384,16 @@ q { img { max-width: 3rem; height: 3rem; - margin-right: 1rem; + margin-right: $spacing-sm; } } -@media (max-width: 75ch) { +@media (max-width: $article-width) { body { padding: 0; } main { - padding: 1rem; + padding: $spacing-sm; } } \ No newline at end of file