508 lines
9.3 KiB
CSS
508 lines
9.3 KiB
CSS
:root {
|
|
--height: 300px;
|
|
--width: 550px;
|
|
--width-expanded: min(780px, calc(100vw - 40px));
|
|
--height-expanded: min(615px, calc(100dvh - 40px));
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: local("Roboto"), url("font/roboto.ttf") format("truetype");
|
|
font-display: swap;
|
|
}
|
|
|
|
body {
|
|
font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
|
|
|
background-image: url("../img/background.svg");
|
|
background-color: black;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100dvh;
|
|
width: 100vw;
|
|
|
|
min-height: var(--height);
|
|
min-width: var(--width);
|
|
}
|
|
|
|
.footer-container {
|
|
position: absolute;
|
|
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
|
|
right: 12px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
font-size: 0.8em;
|
|
padding: 5px 14px;
|
|
border-radius: 999px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.footer-container a {
|
|
color: inherit;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.footer-container a:hover {
|
|
color: white;
|
|
}
|
|
|
|
.footer-container .separator {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.card-container {
|
|
width: var(--width);
|
|
height: var(--height);
|
|
perspective: 1000px;
|
|
transition: width 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
|
|
}
|
|
|
|
.anchor {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#details:target + .card-container {
|
|
width: var(--width-expanded);
|
|
height: var(--height-expanded);
|
|
}
|
|
|
|
#details:target + .card-container .card {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 1s;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
#flip:target, .card-container:has(.back :focus-visible) .card {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.card-container:hover .card {
|
|
transform: rotateX(180deg);
|
|
}
|
|
}
|
|
|
|
.card .front, .card .back {
|
|
background-image: url("../img/noise.png");
|
|
background-repeat: repeat;
|
|
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
|
|
border-radius: 10px;
|
|
background-color: white;
|
|
}
|
|
|
|
.card .front {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card .front img {
|
|
border-radius: 50%;
|
|
max-height: 200px;
|
|
}
|
|
|
|
.card .front hr, .card .back hr {
|
|
height: calc(var(--height) / 2);
|
|
width: 0px;
|
|
|
|
border-radius: 10px;
|
|
border: 2px dashed lightgray;
|
|
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.card .front .name {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.card .front .name h1 {
|
|
text-align: left;
|
|
margin: 0 0 10px 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.card .front .name ul {
|
|
padding: 0 0 0 20px;
|
|
margin: 0;
|
|
list-style: square;
|
|
}
|
|
|
|
.card .front .name .slogan {
|
|
margin: 12px 0 0 0;
|
|
font-size: 0.85em;
|
|
font-weight: 300;
|
|
color: #606060;
|
|
}
|
|
|
|
.card .back {
|
|
transform: rotateX(180deg);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card .back-main {
|
|
flex-shrink: 0;
|
|
height: var(--height);
|
|
overflow: hidden;
|
|
transition: height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.15s;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card .details {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0 50px 50px 50px;
|
|
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.15s, visibility 0s 0.15s;
|
|
}
|
|
|
|
#details:target + .card-container .back-main {
|
|
height: 360px;
|
|
}
|
|
|
|
#details:target + .card-container .details {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: opacity 0.2s 0.1s, visibility 0s;
|
|
}
|
|
|
|
.card .details p {
|
|
margin: 0;
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
.card .details p + p {
|
|
margin-top: 0.7em;
|
|
}
|
|
|
|
.card .details-button {
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
padding: 0 0 15px 0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
|
|
font-size: 0.85em;
|
|
color: #808080;
|
|
}
|
|
|
|
.card .details-button i {
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.card .details-close {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#details:target + .card-container .details-open,
|
|
#details:target + .card-container .flip-button {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#details:target + .card-container .details-close {
|
|
visibility: visible;
|
|
}
|
|
|
|
.card .details-close-hover {
|
|
display: none;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.card .details-close-touch {
|
|
display: none;
|
|
}
|
|
|
|
.card .details-close-hover {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.card .back hr {
|
|
margin: 0 20px;
|
|
}
|
|
|
|
.card .back ul {
|
|
list-style: none;
|
|
text-align: left;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.card .back ul li {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.card .back ul li i {
|
|
width: 20px;
|
|
margin-right: 7px;
|
|
text-align: center;
|
|
color: #404040;
|
|
font-size: 0.9em;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.card .back .interests {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
align-items: center;
|
|
column-gap: 10px;
|
|
row-gap: 6px;
|
|
}
|
|
|
|
.card .back .interests .label {
|
|
text-align: right;
|
|
font-size: 0.85em;
|
|
font-weight: 300;
|
|
color: #606060;
|
|
}
|
|
|
|
.card .back .interests .icons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4em;
|
|
font-size: 1.25em;
|
|
color: #404040;
|
|
}
|
|
|
|
.card .back .interests .skill {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 1.25em;
|
|
}
|
|
|
|
.card .back .interests .skill > i {
|
|
width: 1.25em;
|
|
text-align: center;
|
|
}
|
|
|
|
.card .back .interests .icon {
|
|
width: 1.25em;
|
|
height: 1em;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.card .back .interests .caption {
|
|
display: none;
|
|
margin-top: 4px;
|
|
|
|
font-size: 0.5em;
|
|
line-height: 1.2em;
|
|
color: #606060;
|
|
text-align: center;
|
|
hyphens: auto;
|
|
}
|
|
|
|
#details:target + .card-container .interests {
|
|
row-gap: 14px;
|
|
}
|
|
|
|
#details:target + .card-container .interests .label {
|
|
align-self: start;
|
|
padding-top: 0.1em;
|
|
}
|
|
|
|
#details:target + .card-container .interests .icons {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
#details:target + .card-container .interests .skill {
|
|
width: 4.8em;
|
|
}
|
|
|
|
#details:target + .card-container .interests .caption {
|
|
display: block;
|
|
}
|
|
|
|
.card .flip-button {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0 25px 15px 0;
|
|
|
|
font-size: 1em;
|
|
color: #808080;
|
|
}
|
|
|
|
.card .flip-button i {
|
|
width: 1.25em;
|
|
text-align: center;
|
|
}
|
|
|
|
.cap-visibleWhenCanHover {
|
|
visibility: visible;
|
|
}
|
|
|
|
.cap-visibleWhenPinned {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.cap-visibleWhenUnPinned {
|
|
visibility: hidden;
|
|
}
|
|
|
|
a {
|
|
font-style: normal;
|
|
text-decoration: none;
|
|
color: black;
|
|
cursor: pointer;
|
|
}
|
|
|
|
li .spacer {
|
|
height: 1rem;
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.requires-js {
|
|
display: none;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.cap-visibleWhenCanHover {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.cap-visibleWhenPinned {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.cap-visibleWhenUnPinned {
|
|
visibility: visible;
|
|
}
|
|
|
|
#flip:target .cap-visibleWhenPinned {
|
|
visibility: visible;
|
|
}
|
|
|
|
#flip:target .cap-visibleWhenUnPinned {
|
|
visibility: hidden;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
:root {
|
|
--height: 550px;
|
|
--width: 300px;
|
|
--width-expanded: var(--width);
|
|
--height-expanded: min(700px, calc(100dvh - 80px));
|
|
}
|
|
.card .front, .card .back-main {
|
|
flex-direction: column;
|
|
}
|
|
#flip:target, #details:target + .card-container .card, .card-container:has(.back :focus-visible) .card {
|
|
transform: rotateY(180deg);
|
|
}
|
|
.card .back {
|
|
transform: rotateY(180deg);
|
|
}
|
|
.card .back-main {
|
|
justify-content: space-evenly;
|
|
}
|
|
.card .details {
|
|
padding: 0 25px 25px 25px;
|
|
}
|
|
#details:target + .card-container .details {
|
|
order: -1;
|
|
flex: none;
|
|
padding: 25px 20px 10px 20px;
|
|
}
|
|
#details:target + .card-container .back-main {
|
|
flex: 1;
|
|
height: auto;
|
|
overflow-y: auto;
|
|
justify-content: flex-start;
|
|
padding: 10px 20px 15px 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
#details:target + .card-container .back-main > ul,
|
|
#details:target + .card-container .back-main > hr {
|
|
display: none;
|
|
}
|
|
#details:target + .card-container .interests {
|
|
grid-template-columns: 1fr;
|
|
row-gap: 4px;
|
|
}
|
|
#details:target + .card-container .interests .label {
|
|
text-align: left;
|
|
margin-top: 8px;
|
|
}
|
|
#details:target + .card-container .interests .icons {
|
|
flex-wrap: wrap;
|
|
gap: 6px 4px;
|
|
}
|
|
#details:target + .card-container .interests .skill {
|
|
width: auto;
|
|
min-width: 3em;
|
|
}
|
|
.card .front hr, .card .back hr {
|
|
width: calc(var(--width) / 2);
|
|
height: 0px;
|
|
|
|
border-radius: 10px;
|
|
border: 2px dashed lightgray;
|
|
|
|
margin: 0 10px;
|
|
}
|
|
.card .front .name {
|
|
margin-top: 30px;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) and (max-width: 600px) {
|
|
.card-container:hover .card {
|
|
transform: rotateY(180deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.card, .card-container, .card .back-main, .card .details {
|
|
transition: none;
|
|
}
|
|
}
|