wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: style fixes

Browse source
This commit is contained in:
Devin Haska 2024-03-01 16:55:34 -08:00
parent b5fd748a55
commit 5088871634
2 changed files with 17 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/css/global/global-styles.css
View file

@ -92,6 +92,7 @@ blockquote {
margin-inline-end: 0; margin-inline-end: 0;
padding: var(--spacing-1); padding: var(--spacing-1);
background-color: var(--color-surface); background-color: var(--color-surface);
border-radius: var(--spacing-0\.5);
} }
blockquote > * + * { blockquote > * + * {
@ -152,6 +153,18 @@ picture img {
border-radius: 1rem; border-radius: 1rem;
} }
aside {
background-color: var(--color-surface);
padding: var(--spacing-1);
border-radius: var(--spacing-0\.5);
margin-inline: calc(-1 * var(--spacing-1));
}
mark {
background-color: var(--color-border);
color: var(--color-text);
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
html:focus-within { html:focus-within {
scroll-behavior: auto; scroll-behavior: auto;

5
src/styleguide.html
View file

@ -63,10 +63,13 @@ title: Styleguide
</aside> </aside>
<hr /> <hr />
<figure> <figure>
<img src="/assets/images/logo.svg" /> <img src="/assets/images/logo.svg" alt="" />
<figcaption>A fig caption.</figcaption> <figcaption>A fig caption.</figcaption>
</figure> </figure>
<hr /> <hr />
<p>
This text contains usage of a <mark>mark element, and here it is</mark>.
</p>
<div style="background-color: var(--color-surface); <div style="background-color: var(--color-surface);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
padding: 1rem">A card-type component.</div> padding: 1rem">A card-type component.</div>