183 lines
3.3 KiB
SCSS
183 lines
3.3 KiB
SCSS
main.index {
|
|
|
|
text-transform: lowercase;
|
|
|
|
--padding-inline: 1rem;
|
|
--gap: 2rem;
|
|
--border-radius: 0.5rem;
|
|
|
|
display: grid;
|
|
gap: var(--gap, 1rem);
|
|
|
|
padding-inline: 0;
|
|
|
|
#hcard {
|
|
background: var(--color-card-background);
|
|
color: var(--color-card-text);
|
|
border-radius: var(--border-radius);
|
|
--avatar-size: 7.5rem;
|
|
|
|
> .section-title {
|
|
margin-block: 0;
|
|
padding-block: 1rem;
|
|
padding-inline: var(--padding-inline, 1rem);
|
|
}
|
|
|
|
> header {
|
|
background-image: url("/images/sunset.jpg");
|
|
background-size: cover;
|
|
background-position: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 20rem;
|
|
aspect-ratio: 2;
|
|
|
|
position: relative;
|
|
.u-photo {
|
|
position: absolute;
|
|
top: calc(100% - var(--avatar-size) / 2);
|
|
left: var(--padding-inline, 1rem);
|
|
width: var(--avatar-size, 7.5rem);
|
|
height: var(--avatar-size, 7.5rem);
|
|
aspect-ratio: 1;
|
|
background: #ddd;
|
|
border: 0.5rem solid #ddd;
|
|
box-sizing: border-box;
|
|
border-radius: 1rem;
|
|
}
|
|
margin-block-end: calc(var(--avatar-size) / 2);
|
|
|
|
}
|
|
|
|
.info {
|
|
padding-inline: var(--padding-inline, 1rem);
|
|
}
|
|
|
|
.p-name {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
margin-block-start: calc(var(--avatar-size) / 2 + 0.5rem);
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
.u-uid {
|
|
font-family: monospace;
|
|
font-size: 1rem;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.p-note {
|
|
margin-block: 1rem;
|
|
}
|
|
|
|
#contact {
|
|
|
|
margin-block: 3rem;
|
|
padding-inline: var(--padding-inline, 1rem);
|
|
> .section-title {
|
|
margin-block-start: 2rem;
|
|
margin-block-end: 1rem;
|
|
}
|
|
}
|
|
|
|
#links {
|
|
padding-inline: var(--padding-inline, 1rem);
|
|
padding-block-end: 3rem;
|
|
}
|
|
|
|
}
|
|
|
|
#quotes {
|
|
padding-inline: var(--padding-inline, 1rem);
|
|
padding-block: 1rem;
|
|
margin-block-start: var(--gap, 1rem);
|
|
background: var(--color-card-background);
|
|
color: var(--color-card-text);
|
|
border-radius: var(--border-radius);
|
|
> .section-title {
|
|
margin-block-start: 0;
|
|
margin-block-end: 2rem;
|
|
}
|
|
}
|
|
|
|
.metadata {
|
|
dt {
|
|
font-variant: small-caps;
|
|
font-weight: bold;
|
|
}
|
|
dd {
|
|
margin-inline-start: 0;
|
|
}
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.quote {
|
|
margin-inline: 0;
|
|
blockquote {
|
|
margin: 0;
|
|
border-inline-start: 4px solid var(--color-primary-highlight);
|
|
padding-inline-start: 0.5rem;
|
|
}
|
|
cite {
|
|
padding-inline-start: calc(0.5rem + 4px);
|
|
&:before {
|
|
content: '— ';
|
|
}
|
|
}
|
|
}
|
|
|
|
#deeds {
|
|
background: var(--color-card-background);
|
|
color: var(--color-card-text);
|
|
border-radius: var(--border-radius);
|
|
padding-inline: var(--padding-inline, 1rem);
|
|
padding-block: 1rem;
|
|
}
|
|
|
|
#done {
|
|
> .section-title {
|
|
margin-block-start: 0;
|
|
margin-block-end: 1rem;
|
|
}
|
|
#mastodon {
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
#updates {
|
|
background: var(--color-card-background);
|
|
color: var(--color-card-text);
|
|
border-radius: var(--border-radius);
|
|
padding-inline: var(--padding-inline, 1rem);
|
|
}
|
|
|
|
@media (min-width: 60rem) {
|
|
--gap: 1rem;
|
|
padding-inline: 2rem;
|
|
grid-template-areas:
|
|
"info deeds"
|
|
"updates updates";
|
|
grid-template-columns: 20rem 1fr;
|
|
#info {
|
|
grid-area: info;
|
|
}
|
|
#deeds {
|
|
grid-area: deeds;
|
|
}
|
|
#updates {
|
|
grid-area: updates;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
padding-inline: 3rem;
|
|
grid-template-areas:
|
|
"info deeds updates";
|
|
grid-template-columns: 20rem 1fr 20rem;
|
|
}
|
|
} |