feat: example site - user <header>, misc. spacing

andis-sprinkis · Jun 28, 2024 · ad82408 · ad82408
1 parent f317d20
commit ad82408
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>