trwnh.com/hugo/assets/styles/partials/h-card.scss
2022-12-03 15:40:21 -06:00

75 lines
1.5 KiB
SCSS

@import "../mixins/shadow.scss";
.h-card {
--border-radius: 0.5em;
@include shadow-low;
border-radius: var(--border-radius);
max-width: 80ch;
header {
background-image: url('/header.jpg');
background-size: cover;
background-position: center;
width: 100%;
aspect-ratio: 2;
display: grid;
place-items: end start;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.u-logo {
height: 60%;
width: 30%;
background: rgba(0,0,0,0.5);
border-radius: var(--border-radius);
margin-left: 1em;
margin-bottom: 1em;
}
.display-name {
display: flex;
flex-flow: column;
padding-left: 1em;
.p-name {
&::after {display: none;}
&:focus {padding: unset; color: unset; background: unset;}
text-decoration: none;
color: inherit;
font-weight: 900;
font-size: 1.5em;
line-height: 1.5em;
margin-top: 0.5em;
}
.p-nickname:not(.p-name) {
font-size: 1em;
line-height: 1.5em;
opacity: 0.75;
margin-bottom: 0.5em;
}
background: var(--ui-overlay);
color: var(--ui-overlay-text);
}
section {
> .p-name,
> .u-email,
> .u-impp,
> .u-url,
> .p-note,
> .p-gender-identity
{
display: none;
}
}
.e-note {
font-size: 1em;
line-height: 1.5em;
p {
margin-bottom: 0.5em;
}
padding: 1em;
padding-top: 0;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
margin-bottom: 1em;
}