Ensure correct margins in cards

This commit is contained in:
Florine W. Dekker 2022-11-20 16:28:39 +01:00
parent bf4aa0289b
commit 858e577422
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
2 changed files with 59 additions and 34 deletions

View File

@ -25,19 +25,41 @@ h6 {
/* pico.css: Reduce `article` margins */
article {
--block-spacing-vertical: 0;
margin-bottom: 3rem;
margin: calc(var(--block-spacing-vertical) / 2) 0;
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;
}

View File

@ -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>
<p>Here is some text you may want to read.</p>
<article>
<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>
<p>Here is some text you may want to read.</p>
<fieldset>
<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>
<p>Here is some text you may want to read.</p>
<label for="test-password">Password</label>
<input id="test-password" type="password" name="password" />
<small data-for="login-password" data-hint></small>
</fieldset>
<h6>Test</h6>
<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>
<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>
<fieldset>
<button id="login-button">Log in</button>
</fieldset>
</form>
</article>
</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>