fix: unify container padding, margins, radius

Author: fkakatie

blocks/cards/cards.css

@@ -3,8 +3,8 @@
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
-  grid-gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
+  grid-gap: 24px;
 }
 
 .cards > ul > li {
@@ -20,10 +20,6 @@
   line-height: 0;
 }
 
-.cards .cards-card-body > *:first-child {
-  margin-top: 0;
-}
-
 .cards > ul > li img {
   width: 100%;
   aspect-ratio: 4 / 3;

blocks/columns/columns.css

@@ -23,7 +23,7 @@
   .columns > div {
     align-items: center;
     flex-direction: unset;
-    gap: 32px;
+    gap: 24px;
   }
 
   .columns > div > div {

blocks/footer/footer.css

@@ -1,14 +1,20 @@
 footer {
-  padding: 2rem;
   background-color: var(--light-color);
   font-size: var(--body-font-size-s);
 }
 
-footer .footer {
-  max-width: 1200px;
+footer .footer > div {
   margin: auto;
+  max-width: 1200px;
+  padding: 40px 24px 24px;
 }
 
 footer .footer p {
   margin: 0;
 }
+
+@media (width >= 900px) {
+  footer .footer > div {
+    padding: 40px 32px 24px;
+  }
+}

blocks/fragment/fragment.css

@@ -1,13 +1 @@
-/* suppress nested section padding */
-.fragment-wrapper > .section {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.fragment-wrapper > .section:first-of-type {
-  padding-top: 0;
-}
-
-.fragment-wrapper > .section:last-of-type {
-  padding-bottom: 0;
-}
+/* stylelint-disable no-empty-source */

blocks/header/header.css

@@ -13,11 +13,11 @@ header nav {
     'hamburger brand tools' var(--nav-height)
     'sections sections sections' 1fr / auto 1fr auto;
   align-items: center;
-  gap: 0 2em;
+  gap: 0 24px;
   margin: auto;
-  max-width: 1264px;
+  max-width: 1248px;
   height: var(--nav-height);
-  padding: 0 1rem;
+  padding: 0 24px;
   font-family: var(--body-font-family);
 }
 
@@ -27,19 +27,16 @@ header nav[aria-expanded='true'] {
     'sections sections' 1fr
     'tools tools' var(--nav-height) / auto 1fr;
   overflow-y: auto;
-  min-height: 100vh;
-}
-
-@media (width >= 600px) {
-  header nav {
-    padding: 0 2rem;
-  }
+  min-height: 100dvh;
 }
 
 @media (width >= 900px) {
   header nav {
     display: flex;
     justify-content: space-between;
+    gap: 0 32px;
+    max-width: 1264px;
+    padding: 0 32px;
   }
 
   header nav[aria-expanded='true'] {
@@ -225,7 +222,7 @@ header nav .nav-sections ul > li > ul > li {
 
   header nav .nav-sections ul {
     display: flex;
-    gap: 2em;
+    gap: 24px;
     margin: 0;
     font-size: var(--body-font-size-xs);
   }
@@ -244,10 +241,10 @@ header nav .nav-sections ul > li > ul > li {
   header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul {
     display: block;
     position: absolute;
-    left: -1em;
+    left: -24px;
     width: 200px;
-    margin-top: 12px;
-    padding: 1em;
+    top: 150%;
+    padding: 16px;
     background-color: var(--light-color);
     white-space: initial;
   }
@@ -256,7 +253,7 @@ header nav .nav-sections ul > li > ul > li {
     content: '';
     position: absolute;
     top: -8px;
-    left: 8px;
+    left: 16px;
     width: 0;
     height: 0;
     border-left: 8px solid transparent;

blocks/hero/hero.css

@@ -1,14 +1,11 @@
-main .hero-container > div {
+.hero-container .hero-wrapper {
   max-width: unset;
-}
-
-main .hero-container {
   padding: 0;
 }
 
 .hero {
   position: relative;
-  padding: 32px;
+  padding: 40px 24px;
   min-height: 300px;
 }
 
@@ -32,3 +29,9 @@ main .hero-container {
   width: 100%;
   height: 100%;
 }
+
+@media (width >= 900px) {
+  .hero {
+    padding: 40px 32px;
+  }
+}

styles/styles.css

@@ -59,8 +59,8 @@
 }
 
 body {
-  font-size: var(--body-font-size-m);
   margin: 0;
+  font-size: var(--body-font-size-m);
   font-family: var(--body-font-family);
   line-height: 1.6;
   color: var(--text-color);
@@ -82,12 +82,12 @@ h3,
 h4,
 h5,
 h6 {
+  margin-top: 0.8em;
+  margin-bottom: 0.25em;
   font-family: var(--heading-font-family);
   font-weight: 600;
   line-height: 1.25;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  scroll-margin: calc(var(--nav-height) + 1em);
+  scroll-margin: 40px;
 }
 
 h1 { font-size: var(--heading-font-size-xxl); }
@@ -103,27 +103,27 @@ ol,
 ul,
 pre,
 blockquote {
-  margin-top: 1em;
-  margin-bottom: 1em;
+  margin-top: 0.8em;
+  margin-bottom: 0.25em;
 }
 
 code,
 pre {
   font-size: var(--body-font-size-s);
 }
 
-code {
-  padding: 0.125em;
+pre {
+  overflow-y: auto;
 }
 
-pre {
-  overflow: scroll;
+main > div {
+  margin: 40px 16px;
 }
 
 main pre {
   background-color: var(--light-color);
-  padding: 1em;
-  border-radius: 0.25em;
+  padding: 16px;
+  border-radius: 8px;
   overflow-x: auto;
   white-space: pre;
 }
@@ -132,6 +132,7 @@ main pre {
 a:any-link {
   color: var(--link-color);
   text-decoration: none;
+  word-break: break-word;
 }
 
 a:hover {
@@ -142,23 +143,25 @@ a:hover {
 /* buttons */
 a.button:any-link,
 button {
+  max-width: 100%;
   font-family: var(--body-font-family);
   display: inline-block;
   box-sizing: border-box;
   text-decoration: none;
   border: 2px solid transparent;
-  padding: 5px 30px;
+  padding: 0.5em 1.2em;
   text-align: center;
   font-style: normal;
   font-weight: 600;
+  line-height: 1.25;
   cursor: pointer;
   color: var(--background-color);
   background-color: var(--link-color);
-  margin: 16px 0;
+  margin: 12px 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-radius: 30px;
+  border-radius: 2.4em;
 }
 
 a.button:hover,
@@ -200,25 +203,30 @@ main img {
 }
 
 /* sections */
-main .section {
-  padding: 64px 16px;
+main > .section {
+  margin: 40px 0;
 }
 
-@media (width >= 600px) {
-  main .section {
-    padding: 64px 32px;
-  }
+main > .section > div {
+  max-width: 1200px;
+  margin: auto;
+  padding: 0 24px;
+}
+
+main > .section:first-of-type {
+  margin-top: 0;
 }
 
 @media (width >= 900px) {
-  .section > div {
-    max-width: 1200px;
-    margin: auto;
+  main > .section > div {
+    padding: 0 32px;
   }
 }
 
 /* section metadata */
 main .section.light,
 main .section.highlight {
   background-color: var(--light-color);
+  margin: 0;
+  padding: 40px 0;
 }