up style

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
 

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 */
+h1 {
-* {
+  color: #221d30;
-  box-sizing: border-box;
+  font-size: 2.5rem;
-}
+  text-decoration: underline;
-*::before, *::after {
-  box-sizing: border-box;
 }
 
-body {
+h2 {
-  -webkit-font-smoothing: antialiased;
+  font-size: 2rem;
-  font-family: Helvetica, Arial, sans-serif;
+  text-decoration: underline;
-  padding-bottom: 20vh;
+}
-  padding-bottom: 2rem;
+
+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;
 }
-
+.body-wrap .site-header {
-.content {
+  display: none;
-  min-height: 15rem;
-}
-
-.after-article {
-  border-top: 1px solid #dedede;
-  padding: 1rem;
 }
 
 .site-footer {
@@ -275,8 +244,14 @@ li a {
   color: #dedede;
 }
 
-.body-wrap .site-header {
+article {
-  display: none;
+  width: 75ch;
+  max-width: calc(100vw - 6rem);
+}
+
+.after-article {
+  border-top: 1px solid #dedede;
+  padding: 1rem;
 }
 
 .article-navigation {

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"}
+{"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"}

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;

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-size: $font-size-base;
-  font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
+  font-family: $font-family-base;
 }
 
 body {
   text-align: left;
-  font-size: 1.5rem;
+  font-size: $font-size-body;
-  line-height: 1.5em;
+  line-height: $line-height-base;
-  color: #000;
+  color: $color-text;
-  background: #fff;
+  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;
+  font-family: $font-family-heading;
-  margin-top: 1em;
+  margin-top: $spacing-sm;
-  margin-bottom: 2rem;
+  margin-bottom: $spacing-lg;
-  color: #333;
+  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 */
+h1 {
-
+  color: $color-heading-h1;
-* {
+  font-size: $font-size-h1;
-  box-sizing: border-box;
+  text-decoration: underline;
-
-  &::before,
-  &::after {
-    box-sizing: border-box;
-  }
 }
 
-body {
+h2 {
-  -webkit-font-smoothing: antialiased;
+  font-size: $font-size-h2;
-  font-family: Helvetica, Arial, sans-serif;
+  text-decoration: underline;
-  padding-bottom: 20vh;
+}
-  padding-bottom: 2rem;
+
+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-top: $spacing-sm;
-    margin-bottom: 1rem;
+    margin-bottom: $spacing-sm;
-    max-width: 100%;
+    max-width: 100vw;
   }
 }
 
@@ -90,45 +142,40 @@ pre,
 // ancres
 a {
   display: inline-block;
-
+  border-radius: $border-radius-md;
-  border-radius: 1rem;
+  color: $color-link;
-  color: rgb(0, 123, 255);
   text-decoration: none;
-  padding: 1rem;
+  padding: $spacing-sm;
 
   main &:hover {
-    background: #303030;
+    background: $color-link-hover-bg;
-    color: rgb(0, 123, 255);
+    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-right: $spacing-sm;
-    margin-bottom: 1rem;
+    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 $spacing-sm #ccc;
-    box-shadow: 0 0 1rem #ccc;
+    transition: $transition-hover;
-    transition: 0.25s all ease-in;
   }
 }
 
@@ -142,35 +189,8 @@ select {
 p {
   overflow-wrap: break-word;
   text-wrap: pretty;
-  margin-top: 1.5rem;
+  margin-top: $spacing-md;
-  margin-bottom: 1rem;
+  margin-bottom: $spacing-sm;
-}
-
-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,
@@ -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;
+    width: $spacing-lg;
-    height: 2rem;
+    height: $spacing-lg;
-    margin-right: 1rem;
+    margin-right: $spacing-sm;
   }
 
   a {
-    margin: 0 1rem;
+    margin: 0 $spacing-sm;
     text-decoration: underline;
   }
 }
 
 #recherche {
-
+  margin-top: $spacing-md;
-  margin-top: 1.5rem;
+  margin-bottom: $spacing-md;
-  margin-bottom: 1.5rem;
   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;
+  margin: $spacing-sm;
-  color: #fff;
+  color: $color-background;
-  text-shadow: 0 0 1rem #555;
+  text-shadow: 0 0 $spacing-sm #555;
 }
 
 #page {
-  background: #f4f4f4;
+  background: $color-page-bg;
 }
 
 .body-wrap {
-  background: #fff;
+  background: $color-background;
-  padding: 5% 6%;
+  padding: $padding-container;
   margin-bottom: 5%;
-  margin-top: 1rem;
+  margin-top: $spacing-sm;
-  border-radius: 1rem;
+  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-top: $spacing-lg;
-  margin-bottom: 2rem;
+  margin-bottom: $spacing-lg;
 
   a {
-    padding-right: 2rem;
+    padding-right: $spacing-lg;
   }
 }
 
 .article-tags {
-  margin-top: 1rem;
+  margin-top: $spacing-sm;
-  margin-bottom: 1rem;
+  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;
+  border-left: 3px solid $color-blockquote-border;
-  padding-left: 2rem;
+  padding-left: $spacing-lg;
-  padding-top: 1.5rem;
+  padding-top: $spacing-md;
-  padding-bottom: 1.5rem;
+  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;
   }
 }