site-catium

git clone git://bebou.netlib.re/site-catium
Log | Files | Refs | README |

commit 8f072c39c38ce744c6b3d931b285102638b760ac
parent bf09a5539ff81aedfacfc166939508e027f7ce21
Auterice: timotheegoguely <timothee@goguely.com>
Date:   Sat, 26 Oct 2024 17:40:44 +0200

Amélioration et simplification des styles du menu et du wrapper

Diffstat:
M
contents/style.css
 | 
99
+++++++++++++++++++++++++++++++++++++++++--------------------------------------

1 file changed, 52 insertions(+), 47 deletions(-)
diff --git a/contents/style.css b/contents/style.css
@@ -1,6 +1,7 @@
 /*
-Cette CSS a été écrite initialement pae Derek Salmon (Pikselkraft) pour Katzele
+Cette CSS a été écrite initialement par Derek Salmon (Pikselkraft) pour Katzele
 Puis adaptée par Guillaume Porte en 2024 pour Estrades
+Et améliorée par Timothée Goguely à l’automne 2024
 
 - https://www.pikselkraft.com/
 - http://katzele.netlib.re/
@@ -10,34 +11,39 @@ Puis adaptée par Guillaume Porte en 2024 pour Estrades
 
 :root { 
 
-    /* Fonts */
-    --font-system: Helvetica, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-     /* 
-        @TODO font base 18px
-        ** Typo scale base 16px
-        * Ratio = Quinte (1.5)
-    */
-    --ratio: 1.5;
-    --space-xs:   calc(var(--space-base) / var(--ratio)); /* 7.111px */
-    --space-sm:   calc(var(--space-base) / 1.5);          /* 10.667px */
-    --space-base: 1.2rem;                                   /* 16px */
-    --space-lg:   calc(var(--space-base) * var(--ratio)); /* 24px */
-    --space-xl:   calc(var(--space-lg)   * var(--ratio)); /* 36px */
-    --space-2xl:  calc(var(--space-xl)   * var(--ratio)); /* 54px */
-    --space-3xl:  calc(var(--space-2xl)  * var(--ratio)); /* 81px */
-    --space-4xl:  calc(var(--space-3xl)  * var(--ratio)); /* 121.5px */
-
-    /* COLORS */
-    --black: #2f383e;
-    --white: #fefffe;
-    --grey: #444444;
-    --lightgrey: #999999;
-    --verylightgrey: #fefefe;
-    --green: #68715E;
-    --yellow: #fffeee;
-    --blue: #2F7598;
-    --red: #cc0000;
+  /* Fonts */
+  --font-system: Helvetica, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+  /* 
+    @TODO font base 18px
+    ** Typo scale base 16px
+    * Ratio = Quinte (1.5)
+  */
+  --ratio: 1.5;
+  --space-xs:   calc(var(--space-base) / var(--ratio)); /* 7.111px */
+  --space-sm:   calc(var(--space-base) / 1.5);          /* 10.667px */
+  --space-base: 1.2rem;                                   /* 16px */
+  --space-lg:   calc(var(--space-base) * var(--ratio)); /* 24px */
+  --space-xl:   calc(var(--space-lg)   * var(--ratio)); /* 36px */
+  --space-2xl:  calc(var(--space-xl)   * var(--ratio)); /* 54px */
+  --space-3xl:  calc(var(--space-2xl)  * var(--ratio)); /* 81px */
+  --space-4xl:  calc(var(--space-3xl)  * var(--ratio)); /* 121.5px */
+
+  /* COLORS */
+  --black: #2f383e;
+  --white: #fefffe;
+  --grey: #444444;
+  --lightgrey: #999999;
+  --verylightgrey: #fefefe;
+  --green: #68715E;
+  --yellow: #fffeee;
+  --blue: #2F7598;
+  --red: #cc0000;
+
+  /* LAYOUT */
+  --gutter: min(1.5rem, 5vw);
+  --wrapper-max-width: 50rem; /* 800px */
+
 }
 
 html, body {
@@ -48,13 +54,13 @@ html, body {
 
 html {
   -webkit-font-smoothing: antialiased; 
-  --moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
   font-size: 100%; /* 16 pixels par défaut en moyenne */
 }
 
 :target {
-  scroll-margin-top: 83px; /* permet aux ancres de ne pas se retrouvées sous le header fixed */
+  scroll-margin-top: 100px; /* permet aux ancres de ne pas se retrouvées sous le header fixed */
 }
 
 body {
@@ -65,12 +71,15 @@ body {
   background-color: var(--verylightgrey);
 }
 
-body, .container { padding: 1rem 2rem }
+body,
+.container { 
+  padding: 0 5vw
+}
 
 #wrapper {
   min-height: 100%;
   width: 100%;
-  max-width: 800px;
+  max-width: var(--wrapper-max-width);
   position: relative;
   margin: auto;
 }
@@ -108,13 +117,11 @@ h1, .h1-like {
 h2, .h2-like {
   font-size: var(--space-xl, 2.25rem);
   line-height: 1.54;
-  letter-spacing: 0.13px;
 }
 
 h3, .h3-like {
   font-size: var(--space-lg, 1.5rem);
   line-height: 1.3333;
-  letter-spacing: 0.1px;
 }
 
 /*Selection*/
@@ -136,16 +143,11 @@ tbody tr:nth-child(even), th {
 /*HEADER*/
 
 header { 
-  position:fixed;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
-  height: 50px;
-  padding: 1rem 0;
-  width: 800px;
-  margin: 0 auto;
-  border-bottom: 1px solid var(--lightgrey);
   background-color: var(--verylightgrey);
 }
 
@@ -167,16 +169,19 @@ header {
 }
 
 nav#menu {
-  display: inline-block;
-  position: fixed;
-  top: 28px;
-  margin-left: var(--space-lg)
+  display: block;
+  max-width: var(--wrapper-max-width);
+  margin: 0 auto;
+  padding: 1rem var(--gutter);
+  border-bottom: 1px solid var(--lightgrey);
 }
 
 nav#menu ul { 
   padding: 0;
   margin: 0;
-  list-style: none; 
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 nav#menu ul li{
@@ -227,7 +232,7 @@ blockquote {
 
 pre {
   padding: 1rem 2rem;
-  width: max-content;
+  width: fit-content;
   max-width: 100%;
   tab-size: 2;
   white-space: pre-wrap;