automated age added slogan redesigned back with skill categories and expandable details fixed card flip on touch devices and accessibility improvements
This commit is contained in:
MineTec committed
1 parent
e62a87d284
commit
80b371664e
3 files changed
+328
-60
No files matched your search
+252
-17
@@ -1,6 +1,8 @@
|
||||
:root {
|
||||
--height: 300px;
|
||||
--width: 550px;
|
||||
--width-expanded: min(780px, calc(100vw - 40px));
|
||||
--height-expanded: min(615px, calc(100dvh - 40px));
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@@ -66,6 +68,22 @@ body {
|
||||
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 {
|
||||
@@ -76,10 +94,16 @@ body {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.card-container:hover .card, #flip:target {
|
||||
#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;
|
||||
@@ -105,7 +129,7 @@ body {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.card .front hr {
|
||||
.card .front hr, .card .back hr {
|
||||
height: calc(var(--height) / 2);
|
||||
width: 0px;
|
||||
|
||||
@@ -131,13 +155,111 @@ body {
|
||||
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: space-evenly;
|
||||
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 {
|
||||
@@ -161,21 +283,76 @@ body {
|
||||
}
|
||||
|
||||
.card .back .interests {
|
||||
font-size: 1.4em;
|
||||
letter-spacing: 0.3em;
|
||||
line-height: 1.6em;
|
||||
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 h2 {
|
||||
font-size: 0.7em;
|
||||
letter-spacing: 0;
|
||||
line-height: 1em;
|
||||
.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;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
color: #404040;
|
||||
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 {
|
||||
@@ -188,6 +365,11 @@ body {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.card .flip-button i {
|
||||
width: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cap-visibleWhenCanHover {
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -246,17 +428,58 @@ li .spacer {
|
||||
:root {
|
||||
--height: 550px;
|
||||
--width: 300px;
|
||||
--width-expanded: var(--width);
|
||||
--height-expanded: min(700px, calc(100dvh - 80px));
|
||||
}
|
||||
.card .front, .card .back {
|
||||
.card .front, .card .back-main {
|
||||
flex-direction: column;
|
||||
}
|
||||
.card-container:hover .card, #flip:target {
|
||||
#flip:target, #details:target + .card-container .card, .card-container:has(.back :focus-visible) .card {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.card .back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.card .front hr {
|
||||
.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;
|
||||
|
||||
@@ -270,3 +493,15 @@ li .spacer {
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user