diff options
Diffstat (limited to 'website/public/css/hcard.css')
| -rw-r--r-- | website/public/css/hcard.css | 83 |
1 files changed, 41 insertions, 42 deletions
diff --git a/website/public/css/hcard.css b/website/public/css/hcard.css index 414eed9..c0e2280 100644 --- a/website/public/css/hcard.css +++ b/website/public/css/hcard.css @@ -1,37 +1,36 @@ -.h-card { - div:has(img) { - width: 6rem; - height: 6rem; - margin-inline: auto; - - img { - width: 6rem; - height: 6rem; - border-radius: 1rem; - filter: contrast(1.25); - } - - &::after { - /* Colour overlay */ - background-color: var(--colour-primary-80); - opacity: 0.3; - - /* Same size and shape as the img */ - border-radius: 1rem; - width: 6rem; - height: 6rem; - - /* Positioned on top of the img */ - display: block; - position: relative; - top: -6rem; - - /* A content value is needed to get the ::after to render */ - content: ''; - } - } +.h-card div:has(img) { + width: 6rem; + height: 6rem; + margin-inline: auto; +} + +.h-card img { + width: 6rem; + height: 6rem; + border-radius: 1rem; + filter: contrast(1.25); +} + +.h-card div:has(img)::after { + /* Colour overlay */ + background-color: var(--colour-primary-80); + opacity: 0.3; + + /* Same size and shape as the img */ + border-radius: 1rem; + width: 6rem; + height: 6rem; + + /* Positioned on top of the img */ + display: block; + position: relative; + top: -6rem; + + /* A content value is needed to get the ::after to render */ + content: ''; } + @media (min-width: 36rem) { .h-card { grid-column: media-start / content-end; @@ -41,18 +40,18 @@ grid-template-areas: "empty heading" "photo text"; + } - div:has(img) { - grid-area: photo; - margin-block-start: var(--spacing-block-sm); - } + .h-card div:has(img) { + grid-area: photo; + margin-block-start: var(--spacing-block-sm); + } - header { - grid-area: heading; - } + .h-card header { + grid-area: heading; + } - .h-card__text { - grid-area: text; - } + .h-card__text { + grid-area: text; } } |