Ajuste l’espacement des sections

themes/default/assets/css/base.css

@@ -4,12 +4,10 @@ body {
     font-size: 1rem;
     min-height: 100vh;
     height: auto;
-    background: var(--body-bg-color) linear-gradient(
+    background: var(--body-bg-color) linear-gradient(to bottom,
-        to bottom,
             var(--body-bg-color2) 0%,
             var(--body-bg-color3) 50%,
-        var(--body-bg-color) 100%
+            var(--body-bg-color) 100%);
-    );
     background-size: 100% 100%;
     position: relative;
     display: flex;
@@ -34,6 +32,63 @@ main {
     flex-grow: 1;
 }
 
+main>section:not(#hero) {
+    display: flex;
+    flex-direction: column;
+}
+
+main>section:not(#hero)>h2 {
+    margin: 0 0 1rem 0;
+    font-size: 1.6rem;
+    letter-spacing: 0.02em;
+}
+
+main>section:not(#hero)>h2 a {
+    color: inherit;
+    text-decoration: none;
+}
+
+main>section:not(#hero)>h2 a:hover,
+main>section:not(#hero)>h2 a:focus {
+    color: var(--accent-blue);
+}
+
+main>section:not(#hero)>nav[aria-label] {
+    margin: 0;
+}
+
+main>section:not(#hero)>nav[aria-label] ol {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-size: 0.95rem;
+    color: var(--text-muted2);
+}
+
+main>section:not(#hero)>nav[aria-label] ol li {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+main>section:not(#hero)>nav[aria-label] ol li+li::before {
+    content: "/";
+    color: var(--text-muted2);
+}
+
+main>section:not(#hero)>nav[aria-label] a {
+    color: inherit;
+    text-decoration: none;
+}
+
+main>section:not(#hero)>nav[aria-label] a:hover,
+main>section:not(#hero)>nav[aria-label] a:focus {
+    color: var(--accent-blue);
+}
+
 .external-link::after {
     content: " ↗";
     font-size: 0.85em;
@@ -42,3 +97,22 @@ main {
     vertical-align: baseline;
     text-decoration: none;
 }
+
+hr {
+    all: unset;
+    display: block;
+    width: 100%;
+    max-width: 30em;
+    height: 1rem;
+    margin: auto;
+    position: relative;
+    background: radial-gradient(ellipse at center -20px,
+            var(--accent-blue-glow),
+            var(--transparent) 80%);
+}
+
+.hr-mirror {
+    background: radial-gradient(ellipse at center calc(100% + 20px),
+            var(--accent-blue-glow),
+            var(--transparent) 80%);
+}