diff options
Diffstat (limited to 'website/public/css/hcard.css')
| -rw-r--r-- | website/public/css/hcard.css | 43 |
1 files changed, 27 insertions, 16 deletions
diff --git a/website/public/css/hcard.css b/website/public/css/hcard.css index 99431d9..4f1713d 100644 --- a/website/public/css/hcard.css +++ b/website/public/css/hcard.css @@ -1,21 +1,32 @@ -.u-photo { - margin-inline: auto; - margin-block-end: 3rem; +.h-card { + img { + width: 6rem; + height: 6rem; + border-radius: 1rem; + } } -@media (min-width: 48rem) { - .h-card:not(.h-card--minimal) { - display: flex; - gap: 1rem; - align-items: center; - } +@media (min-width: 36rem) { + .h-card { + grid-column: media-start / content-end; + display: grid; + grid-template-columns: subgrid; /** Subgrid of main column layout */ + grid-template-rows: min-content 1fr; + grid-template-areas: + "empty heading" + "photo text"; - .u-photo { - margin: 0; - } -} + img { + grid-area: photo; + margin-block-start: var(--spacing-block-sm); + } -.u-photo { - width: 256px; -} + header { + grid-area: heading; + } + .h-card__text { + grid-area: text; + } + } +} |
