From ad8240882740809821050b6616552b0f80d339d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andis=20Spri=C5=86=C4=B7is?= <spr.andis@protonmail.com>
Date: Fri, 28 Jun 2024 12:02:34 +0300
Subject: [PATCH] feat: example site - user <header>, misc. spacing

---
 .../403/_block_layout_nested_children.html    | 10 +++--
 .../404/_block_layout_nested_children.html    | 10 +++--
 .../index/_block_layout_index_children.html   |  4 +-
 site/documents/index/static/styles.css        | 39 +++++++++++++------
 .../_block_layout_nested_children.html        | 17 ++++----
 5 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/site/documents/403/_block_layout_nested_children.html b/site/documents/403/_block_layout_nested_children.html
index 2b09c08..974400c 100644
--- a/site/documents/403/_block_layout_nested_children.html
+++ b/site/documents/403/_block_layout_nested_children.html
@@ -1,5 +1,7 @@
-<article>
-  <h1>Forbidden (error code 403)</h1>
+<section>
+  <header>
+    <h1>Forbidden (error code 403)</h1>
 
-  <p>You do not have a permission to access this path.</p>
-</article>
+    <p>You do not have a permission to access this path.</p>
+  </header>
+</section>
diff --git a/site/documents/404/_block_layout_nested_children.html b/site/documents/404/_block_layout_nested_children.html
index 933f4b7..ed95d10 100644
--- a/site/documents/404/_block_layout_nested_children.html
+++ b/site/documents/404/_block_layout_nested_children.html
@@ -1,5 +1,7 @@
-<article>
-  <h1>Not found (error code 404)</h1>
+<section>
+  <header>
+    <h1>Not found (error code 404)</h1>
 
-  <p>The page is not found.</p>
-</article>
+    <p>The page is not found.</p>
+  </header>
+</section>
diff --git a/site/documents/index/_block_layout_index_children.html b/site/documents/index/_block_layout_index_children.html
index 8e45070..f1a3f82 100644
--- a/site/documents/index/_block_layout_index_children.html
+++ b/site/documents/index/_block_layout_index_children.html
@@ -1,11 +1,11 @@
-<section>
+<header>
   <h1>The index page</h1>
   <p>
     Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur
     mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
     aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia.
   </p>
-</section>
+</header>
 <section>
   <h2 id="heading-nav-documents">Site documents</h2>
   <nav aria-labelledby="heading-nav-documents">
diff --git a/site/documents/index/static/styles.css b/site/documents/index/static/styles.css
index e7c1a8c..a50097a 100644
--- a/site/documents/index/static/styles.css
+++ b/site/documents/index/static/styles.css
@@ -27,7 +27,7 @@
   --color-focus-outline: #00000080;
   --underline-thickness: 0.04em;
   --underline-offset: 0.2125em;
-  --padding-button: 0.26125em 0.5125em;
+  --padding-button: 0.26125em 0.575em;
   --font-size-button: var(--text-size-small);
   --bg-color-text-selection: #00000080;
   --bg-color-tooltip: var(--text-color);
@@ -102,16 +102,12 @@ body {
   font-size: var(--rem-size);
   font-family: var(--font-family);
   margin: 0;
-  padding: calc(2 * var(--grid-gap)) 0.75em calc(4 * var(--grid-gap)) 0.75em;
+  padding: calc(2 * var(--grid-gap)) 0.75em calc(3 * var(--grid-gap)) 0.75em;
   line-height: var(--line-height);
   color: var(--text-color);
   background-color: var(--bg-color);
 }
 
-body > *:first-child {
-  margin-top: 0;
-}
-
 body > *:last-child {
   margin-bottom: 0;
 }
@@ -129,7 +125,7 @@ body > *:last-child {
 
 main {
   margin-top: 0;
-  margin-bottom: calc(2 * var(--grid-gap));
+  margin-bottom: calc(3 * var(--grid-gap));
 }
 
 @media print {
@@ -223,6 +219,11 @@ article {
   grid-row-gap: var(--grid-gap);
 }
 
+section > *:last-child,
+article > *:last-child {
+  margin-bottom: 0;
+}
+
 ul,
 ol {
   display: grid;
@@ -265,6 +266,12 @@ ul.inline-list-spread {
   max-width: var(--paragraph-width);
 }
 
+address {
+  font-style: normal;
+}
+
+address .inline-list-sep,
+address .inline-list-spread,
 nav .inline-list-sep,
 nav .inline-list-spread {
   line-height: var(--line-height-nav-inline);
@@ -279,9 +286,19 @@ hr {
   margin-top: calc(calc(0.5 * var(--grid-gap)) - 0.05em);
 }
 
+header {
+  margin-bottom: var(--grid-gap);
+}
+
+@media print {
+  header {
+    margin-bottom: 0;
+  }
+}
+
 h1 {
-  margin-top: var(--grid-gap);
-  margin-bottom: calc(0.75 * var(--grid-gap));
+  margin-top: calc(2 * var(--grid-gap));
+  margin-bottom: 0;
 }
 
 @media print {
@@ -391,8 +408,8 @@ ul.inline-list-sep li:not(:last-child)::after {
   width: 1em;
   height: var(--line-height-em);
   vertical-align: middle;
-  margin-right: 0.25em;
-  margin-left: 0.25em;
+  margin-right: 0.2125em;
+  margin-left: 0.2125em;
 }
 
 @media print {
diff --git a/site/documents/nested_page/_block_layout_nested_children.html b/site/documents/nested_page/_block_layout_nested_children.html
index 9d88ab3..a573485 100644
--- a/site/documents/nested_page/_block_layout_nested_children.html
+++ b/site/documents/nested_page/_block_layout_nested_children.html
@@ -1,10 +1,13 @@
 <article>
-  <h1>A nested page</h1>
-  <p>
-    Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur
-    mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia <abbr title="example of an abbreviation HTML tag" tabindex="0">abrv</abbr>. Reprehenderit nostrud nostrud ipsum Lorem
-    est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia.
-  </p>
+  <header>
+    <h1>A nested page</h1>
+    <p>
+      Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur
+      mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia <abbr title="example of an abbreviation HTML tag" tabindex="0">abrv</abbr>. Reprehenderit nostrud nostrud ipsum Lorem
+      est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia.
+    </p>
+  </header>
+  <h2>The <code>.nowrap</code> class</h2>
   <p><span class="nowrap">This sentence does not wrap.</span></p>
   <h2>Unordered list</h2>
   <ul>
@@ -73,7 +76,7 @@ <h2>Preformatted text</h2>
   <pre tabindex="0"><code><!-- _pre_preformatted_example.html --></code></pre>
   <nav class="nav-document-actions text-small" aria-label="The document actions">
     <ul class="inline-list-spread">
-      <li class="js-only"><button onClick="window.print()">Save to PDF (Print)</button></li>
+      <li class="js-only"><button onClick="window.print()">Save to PDF or Print</button></li>
       <li><button>Dummy</button></li>
       <li><span><a href="/">Dummy</a></span></li>
     </ul>