chore: image shortcode

This commit is contained in:
Cory Dransfeldt 2024-02-21 07:10:46 -08:00
parent f5da3a1fae
commit b413f9ab16
No known key found for this signature in database
18 changed files with 107 additions and 58 deletions

View file

@ -412,35 +412,21 @@ li {
}
/* images */
.image__banner,
.image__placeholder.banner {
.image__banner {
border: 1px solid var(--accent-color);
border-radius: var(--rounded-lg);
height: auto;
width: 100%;
}
.image__placeholder {
background-color: var(--color-darkest);
justify-content: center;
.image__banner,
.image__banner > * {
display: block;
width: 100%;
height: 100%;
}
.image__placeholder > svg {
stroke: var(--color-lightest) !important;
stroke-width: var(--stroke-width-bold);
height: 1.75rem;
width: 1.75rem;
}
.image__placeholder.round {
border-radius: var(--rounded-full);
}
.image__placeholder.banner {
padding: 6rem 0;
margin: 1rem 0;
.image__banner > * {
height: auto;
}
/* pages */

View file

@ -4,19 +4,31 @@
.avatar__wrapper {
width: 100%;
justify-content: center;
margin-bottom: 1rem;
margin-bottom: 1.5rem;
}
.avatar__wrapper img {
border-radius: var(--rounded-full);
border: 1px solid var(--accent-color);
.avatar__wrapper .avatar__wrapper--interior {
width: var(--avatar-size);
height: var(--avatar-size);
border: 1px solid var(--accent-color);
border-radius: var(--rounded-full);
display: flex;
padding: 1rem;
background-color: var(--color-lightest);
}
.avatar__wrapper,
.avatar__wrapper .avatar__wrapper--interior {
justify-content: center;
overflow: hidden;
}
.avatar__wrapper .avatar__wrapper--interior picture > *,
.avatar__wrapper .avatar__wrapper--interior img {
width: 100%;
height: 100%;
}
@media screen and (min-width: 768px) {
:root {
--avatar-size: 24rem;