512 lines
9.8 KiB
CSS
512 lines
9.8 KiB
CSS
:root {
|
|
--height: 300px;
|
|
--width: 550px;
|
|
--width-expanded: min(780px, calc(100vw - 40px));
|
|
--height-expanded: min(640px, calc(100dvh - 40px));
|
|
--height-main-expanded: 360px;
|
|
|
|
--flip-axis: 1, 0, 0;
|
|
--ease-expand: cubic-bezier(0.2, 0.9, 0.3, 1);
|
|
|
|
--color-icon: #404040;
|
|
--color-muted: #606060;
|
|
--color-control: #808080;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: local("Roboto"), url("font/roboto.woff2") format("woff2");
|
|
font-weight: 100 900;
|
|
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;
|
|
|
|
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;
|
|
}
|
|
|
|
.preload * {
|
|
transition: none !important;
|
|
}
|
|
|
|
.card-container {
|
|
width: var(--width);
|
|
height: var(--height);
|
|
perspective: 1000px;
|
|
transition: width 0.3s var(--ease-expand), height 0.3s var(--ease-expand);
|
|
}
|
|
|
|
.anchor {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#details:target + .card-container {
|
|
width: var(--width-expanded);
|
|
height: var(--height-expanded);
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 1s;
|
|
transform-style: preserve-3d;
|
|
|
|
animation: hint 0.9s ease-in-out 1.2s;
|
|
animation-composition: add;
|
|
}
|
|
|
|
@keyframes hint {
|
|
35% { transform: rotate3d(var(--flip-axis), 25deg); }
|
|
70% { transform: rotate3d(var(--flip-axis), -6deg); }
|
|
}
|
|
|
|
#flip:target,
|
|
#details:target + .card-container .card,
|
|
.card-container:has(.back :focus-visible) .card,
|
|
.card .back {
|
|
transform: rotate3d(var(--flip-axis), 180deg);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.card-container:hover .card {
|
|
transform: rotate3d(var(--flip-axis), 180deg);
|
|
}
|
|
}
|
|
|
|
.card .front, .card .back {
|
|
background-image: url("../img/noise.png");
|
|
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
|
|
border-radius: 10px;
|
|
background-color: white;
|
|
}
|
|
|
|
.card .front {
|
|
display: flex;
|
|
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 {
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
.card .front .name ul {
|
|
padding: 0 0 0 20px;
|
|
margin: 0;
|
|
list-style: square;
|
|
}
|
|
|
|
.card .front .name .slogan,
|
|
.card .details h2,
|
|
.card .back .interests .label {
|
|
font-size: 0.85em;
|
|
font-weight: 300;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.card .front .name .slogan {
|
|
margin: 12px 0 0 0;
|
|
}
|
|
|
|
.card .back {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card .back-main {
|
|
flex-shrink: 0;
|
|
height: var(--height);
|
|
overflow: hidden;
|
|
transition: height 0.3s var(--ease-expand), opacity 0.15s;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card .details {
|
|
padding: 0 50px 10px 50px;
|
|
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.15s, visibility 0s 0.15s;
|
|
}
|
|
|
|
#details:target + .card-container .back-main {
|
|
height: var(--height-main-expanded);
|
|
}
|
|
|
|
#details:target + .card-container .back {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#details:target + .card-container .details {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: opacity 0.2s 0.1s, visibility 0s;
|
|
}
|
|
|
|
.card .details h2 {
|
|
margin: 0 0 6px 0;
|
|
}
|
|
|
|
.card .details p {
|
|
margin: 0;
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
.card .details p + p {
|
|
margin-top: 0.7em;
|
|
}
|
|
|
|
.card .flip-button, .card .details-button {
|
|
position: absolute;
|
|
bottom: 0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
|
|
font-size: 0.85em;
|
|
color: var(--color-control);
|
|
}
|
|
|
|
.card .details-button {
|
|
z-index: 1;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 0 0 15px 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#details:target + .card-container .details-close {
|
|
position: sticky;
|
|
order: 1;
|
|
left: auto;
|
|
transform: none;
|
|
flex: none;
|
|
justify-content: center;
|
|
margin-top: auto;
|
|
padding: 18px 0 15px 0;
|
|
background: linear-gradient(to bottom, rgba(248, 248, 248, 0), rgb(248, 248, 248) 45%);
|
|
}
|
|
|
|
.card .back hr {
|
|
margin: 0 20px;
|
|
}
|
|
|
|
.card .back ul {
|
|
list-style: none;
|
|
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: var(--color-icon);
|
|
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;
|
|
}
|
|
|
|
.card .back .interests .icons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4em;
|
|
font-size: 1.25em;
|
|
color: var(--color-icon);
|
|
}
|
|
|
|
.card .back .interests .skill {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 1.25em;
|
|
}
|
|
|
|
.card .back .interests .skill > i, .card .flip-button 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: var(--color-muted);
|
|
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 {
|
|
right: 0;
|
|
padding: 0 25px 15px 0;
|
|
}
|
|
|
|
.card .front .flip-button {
|
|
top: 0;
|
|
left: 0;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.card .pin-remove, #flip:target .pin-add {
|
|
display: none;
|
|
}
|
|
|
|
#flip:target .pin-remove {
|
|
display: flex;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.touch-only {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media not (hover: hover) {
|
|
.hover-only {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
html:not(.js) .requires-js {
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (max-width: 760px) {
|
|
#details:target + .card-container .back-main > ul,
|
|
#details:target + .card-container .back-main > hr {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
:root {
|
|
--max-height: calc(100dvh - 110px);
|
|
--width: min(300px, calc(100vw - 32px));
|
|
--height: min(550px, var(--max-height));
|
|
--width-expanded: min(440px, calc(100vw - 24px));
|
|
--height-expanded: var(--max-height);
|
|
--flip-axis: 0, 1, 0;
|
|
}
|
|
.footer-container {
|
|
bottom: calc(6px + env(safe-area-inset-bottom, 0px));
|
|
right: 6px;
|
|
gap: 6px;
|
|
font-size: 0.7em;
|
|
padding: 3px 10px;
|
|
}
|
|
.card .front, .card .back-main {
|
|
flex-direction: column;
|
|
}
|
|
.card .front img {
|
|
max-height: min(200px, 30dvh);
|
|
}
|
|
.card .front hr, .card .back hr {
|
|
width: calc(var(--width) / 2);
|
|
height: 0px;
|
|
margin: 0;
|
|
}
|
|
.card .front .name {
|
|
margin-top: 25px;
|
|
margin-left: 0;
|
|
text-align: center;
|
|
}
|
|
.card .front .name ul {
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.card .back-main {
|
|
gap: 28px;
|
|
padding-bottom: 30px;
|
|
box-sizing: border-box;
|
|
}
|
|
#details:target + .card-container .details {
|
|
padding: 20px 25px 5px 25px;
|
|
}
|
|
#details:target + .card-container .back-main {
|
|
flex: none;
|
|
height: auto;
|
|
overflow: visible;
|
|
justify-content: flex-start;
|
|
padding: 15px 25px 0 25px;
|
|
}
|
|
#details:target + .card-container .interests {
|
|
grid-template-columns: 1fr;
|
|
row-gap: 4px;
|
|
width: 100%;
|
|
}
|
|
#details:target + .card-container .interests .label {
|
|
text-align: left;
|
|
margin-top: 10px;
|
|
}
|
|
#details:target + .card-container .interests .icons {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px 4px;
|
|
}
|
|
#details:target + .card-container .interests .skill {
|
|
width: auto;
|
|
min-width: 0;
|
|
}
|
|
#details:target + .card-container .interests .caption {
|
|
-webkit-hyphens: auto;
|
|
overflow-wrap: break-word;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.card, .card-container, .card .back-main, .card .details {
|
|
transition: none;
|
|
animation: none;
|
|
}
|
|
}
|