Ensure correct margins in cards

src/main/css/snippets/overrides.css

@@ -25,19 +25,41 @@ h6 {
 
 /* pico.css: Reduce `article` margins */
 article {
-    --block-spacing-vertical: 0;
+    margin: calc(var(--block-spacing-vertical) / 2) 0;
-    margin-bottom: 3rem;
+
+    padding-top: calc(var(--block-spacing-vertical) / 2);
+    padding-bottom: calc(var(--block-spacing-vertical) / 2);
+}
+
+article > header,
+article > footer {
+    padding-top: calc(var(--block-spacing-vertical) / 2);
+    padding-bottom: calc(var(--block-spacing-vertical) / 2);
 }
 
 article > header {
-    padding: 2rem;
+    margin-top: calc(var(--block-spacing-vertical) / -2);
+    margin-bottom: calc(var(--block-spacing-vertical) / 2);
 }
 
-article > header hgroup {
+article > footer {
+    margin-bottom: calc(var(--block-spacing-vertical) / -2);
+    margin-top: calc(var(--block-spacing-vertical) / 2);
+}
+
+article > header > hgroup,
+article > header > h1,
+article > header > h2,
+article > header > h3,
+article > header > h4,
+article > header > h5,
+article > header > h6,
+article > footer > hgroup,
+article > footer > h1,
+article > footer > h2,
+article > footer > h3,
+article > footer > h4,
+article > footer > h5,
+article > footer > h6 {
     margin-bottom: 0;
 }
-
-article > .article-contents {
-    margin-top: 1rem;
-    margin-bottom: 3rem;
-}

src/test/index.html

@@ -53,35 +53,35 @@
             <p>These are some more contents.</p>
             <p>These are the page contents.</p>
 
-            <h2>Test</h2>
-            <p>Here is some text you may want to read.</p>
 
-            <h3>Test</h3>
+            <article>
-            <p>Here is some text you may want to read.</p>
+                <header>
+                    <hgroup>
+                        <h2>Log in</h2>
+                        <h3>Already have an account? Welcome back!</h3>
+                    </hgroup>
+                </header>
+                <form id="login-form" novalidate>
+                    <article class="form-validation-info">
+                        <output>Congrats!</output>
+                        <button type="button" class="close-button">&times;</button>
+                    </article>
 
-            <h4>Test</h4>
+                    <fieldset>
-            <p>Here is some text you may want to read.</p>
+                        <label for="test-email">Email</label>
+                        <input id="test-email" type="email" name="email" autocomplete="on" />
+                        <small data-for="test-email" data-hint></small>
 
-            <h5>Test</h5>
+                        <label for="test-password">Password</label>
-            <p>Here is some text you may want to read.</p>
+                        <input id="test-password" type="password" name="password" />
+                        <small data-for="login-password" data-hint></small>
+                    </fieldset>
 
-            <h6>Test</h6>
+                    <fieldset>
-            <p>Here is some text you may want to read.</p>
+                        <button id="login-button">Log in</button>
-
+                    </fieldset>
-            <h2>Test</h2>
+                </form>
-            <p>Here is some text you may want to read.</p>
+            </article>
-
-            <h2>Test</h2>
-            <p>Here is some text you may want to read.</p>
-
-            <h2>Test</h2>
-            <p>Here is some text you may want to read.</p>
-
-            <h2>Test</h2>
-            <p>Here is some text you may want to read.</p>
-
-            <h2>Test</h2>
-            <p>Here is some text you may want to read.</p>
         </section>
         <footer id="footer"></footer>
     </div>
@@ -92,10 +92,13 @@
 <script src="../../dist/storage.js"></script>
 
 <script>
+    const {$} = window.fwdekker;
+
     const storage = new window.fwdekker.storage.MemoryStorage();
     storage.setNumber("test-key", 11);
 
     console.log("Expected: 11. Actual: " + storage.getNumber("test-key", 0) + ".");
+    console.log($("#footer"));
 </script>
 </body>
 </html>