76 lines
1.1 KiB
CSS
76 lines
1.1 KiB
CSS
.bio {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
margin: 2em auto;
|
|
width: 21cm;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.bio__pic {
|
|
height: 0;
|
|
overflow: visible;
|
|
text-align: end;
|
|
background-color: var(--back);
|
|
z-index: 1;
|
|
}
|
|
|
|
.bio__name {
|
|
transform: skewX(-10deg);
|
|
border-radius: 1em;
|
|
box-shadow: var(--shadow);
|
|
margin: 0.5em;
|
|
padding: 1em 2em;
|
|
width: 50%;
|
|
min-width: 9cm;
|
|
background-color: var(--back);
|
|
}
|
|
|
|
.bio__name__main {
|
|
margin: 0;
|
|
text-align: start;
|
|
}
|
|
|
|
.bio__name__sub {
|
|
margin: 0;
|
|
font-size: small;
|
|
}
|
|
|
|
.bio__intro {
|
|
border-radius: 1em;
|
|
box-shadow: var(--shadow);
|
|
padding: 1em 2em;
|
|
margin: 1em 0;
|
|
background-color: var(--back);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.bio {
|
|
justify-content: center;
|
|
}
|
|
.bio__name {
|
|
margin: 8.33em 5em 1em 4em;
|
|
text-align: center;
|
|
width: calc(100vw - 9em);
|
|
min-width: 6em;
|
|
}
|
|
.bio__name__main {
|
|
text-align: center;
|
|
}
|
|
.bio__pic {
|
|
text-align: center;
|
|
z-index: -1;
|
|
position: fixed;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 5em;
|
|
}
|
|
}
|
|
@media (max-width: 520px) {
|
|
.bio__pic {
|
|
top: 9em;
|
|
}
|
|
.bio__intro {
|
|
padding: 0.5em 1em;
|
|
}
|
|
}
|