71 lines
1.2 KiB
CSS
71 lines
1.2 KiB
CSS
@import url(base.css);
|
|
|
|
@layer {
|
|
header { row-gap: 0; }
|
|
header p {
|
|
grid-area: 2/1/2/4;
|
|
margin: 0;
|
|
text-align: center;
|
|
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
font-stretch: 90%;
|
|
}
|
|
}
|
|
|
|
@layer {
|
|
.portrait {
|
|
margin: 0;
|
|
border: 4px solid currentcolor;
|
|
box-shadow: var(--shadow);
|
|
img {
|
|
display: block;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
.char {
|
|
width: 80%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
|
|
display: grid;
|
|
gap: 0.5em 2em;
|
|
|
|
&:nth-of-type(odd) {
|
|
grid-template:
|
|
"portrait name" auto
|
|
"portrait desc" 1fr / min-content auto;
|
|
}
|
|
&:nth-of-type(even) {
|
|
grid-template:
|
|
"name portrait" auto
|
|
"desc portrait" 1fr / auto min-content;
|
|
}
|
|
|
|
.portrait { grid-area: portrait; }
|
|
h2 { grid-area: name; margin: 0; }
|
|
> div, p { grid-area: desc; align-self: start; }
|
|
}
|
|
}
|
|
|
|
@layer {
|
|
.char {
|
|
margin-top: 2em;
|
|
padding-top: 2em;
|
|
border-top: 3px double currentcolor;
|
|
}
|
|
.char:last-of-type {
|
|
padding-bottom: 2em;
|
|
border-bottom: 3px double currentcolor;
|
|
}
|
|
|
|
h2 small {
|
|
font-size: 70%;
|
|
font-weight: 700;
|
|
}
|
|
}
|