Ensure correct margins in cards
This commit is contained in:
parent
bf4aa0289b
commit
858e577422
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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">×</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>
|
||||
|
|
Loading…
Reference in New Issue