abdullahtarawneh.com/assets/scss/layouts/index.scss
2024-06-06 03:05:19 -05:00

207 lines
3.7 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;
padding-block-end: var(--gap, 2rem);
#about {display: contents;}
#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%;
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;
color: inherit;
}
.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);
}
#activity {
header {
display: flex;
h2 {
display: inline-block;
}
align-items: end;
p {
margin-block-end: 1.5rem;
}
justify-content: space-between;
}
}
@media (min-width: 60rem) {
--gap: 1rem;
padding-inline: 2rem;
grid-template-areas:
"hcard deeds"
"quotes deeds"
"updates updates";
grid-template-columns: 20rem 1fr;
grid-template-rows: auto auto 1fr;
#hcard {
grid-area: hcard;
}
#quotes {
grid-area: quotes;
margin-block-start: 0;
}
#deeds {
grid-area: deeds;
}
#updates {
grid-area: updates;
}
}
@media (min-width: 1200px) {
padding-inline: 3rem;
grid-template-areas:
"hcard deeds updates"
"quotes deeds updates";
grid-template-columns: 20rem 1fr 20rem;
}
}