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

fix: image border-radius

Browse source
This commit is contained in:
Devin Haska 2025-01-24 12:59:29 -08:00
parent 5af5ed46a1
commit 636a0f04ea
3 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/css/blocks/media-display.css
View file

@ -1,10 +1,13 @@
.media-image { .media-image {
--aspect-ratio: 0.8; --aspect-ratio: 0.8;
border: 1px solid var(--color-shadow);
border-radius: var(--spacing-0\.5);
overflow: hidden;
source, source,
img { img {
aspect-ratio: var(--aspect-ratio); aspect-ratio: var(--aspect-ratio);
border: 1px solid var(--color-shadow);
height: auto; height: auto;
object-fit: cover; object-fit: cover;
} }

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

@ -140,6 +140,8 @@ picture {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-inline: 0; margin-inline: 0;
border-radius: var(--spacing-0\.5);
overflow: hidden;
} }
figure figcaption { figure figcaption {
@ -152,7 +154,6 @@ figure figcaption {
picture source, picture source,
picture img { picture img {
border-radius: var(--spacing-0\.5);
height: auto; height: auto;
} }

4
src/css/utilities/image.css
View file

@ -1,7 +1,11 @@
.image-shrink { .image-shrink {
max-width: 50%; max-width: 50%;
border-radius: var(--spacing-0\.5);
overflow: hidden;
} }
.image-tiny { .image-tiny {
max-width: 25%; max-width: 25%;
border-radius: var(--spacing-0\.5);
overflow: hidden;
} }