code cleanup simplified css with flip axis variable and shared rules subset roboto font as woff2
This commit is contained in:
MineTec committed
1 parent
411870c8ad
commit
8972b54fa8
5 files changed
+75
-157
No files matched your search
+61
-139
@@ -3,11 +3,20 @@
|
||||
--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.ttf") format("truetype");
|
||||
src: local("Roboto"), url("font/roboto.woff2") format("woff2");
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@@ -24,7 +33,6 @@ body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100dvh;
|
||||
width: 100vw;
|
||||
@@ -72,7 +80,7 @@ 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);
|
||||
transition: width 0.3s var(--ease-expand), height 0.3s var(--ease-expand);
|
||||
}
|
||||
|
||||
.anchor {
|
||||
@@ -86,10 +94,6 @@ body {
|
||||
height: var(--height-expanded);
|
||||
}
|
||||
|
||||
#details:target + .card-container .card {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -97,33 +101,30 @@ body {
|
||||
transition: transform 1s;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
animation: hint-x 0.9s ease-in-out 1.2s;
|
||||
animation: hint 0.9s ease-in-out 1.2s;
|
||||
animation-composition: add;
|
||||
}
|
||||
|
||||
@keyframes hint-x {
|
||||
35% { transform: rotateX(25deg); }
|
||||
70% { transform: rotateX(-6deg); }
|
||||
@keyframes hint {
|
||||
35% { transform: rotate3d(var(--flip-axis), 25deg); }
|
||||
70% { transform: rotate3d(var(--flip-axis), -6deg); }
|
||||
}
|
||||
|
||||
@keyframes hint-y {
|
||||
35% { transform: rotateY(25deg); }
|
||||
70% { transform: rotateY(-6deg); }
|
||||
}
|
||||
|
||||
#flip:target, .card-container:has(.back :focus-visible) .card {
|
||||
transform: rotateX(180deg);
|
||||
#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: rotateX(180deg);
|
||||
transform: rotate3d(var(--flip-axis), 180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.card .front, .card .back {
|
||||
background-image: url("../img/noise.png");
|
||||
background-repeat: repeat;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@@ -136,7 +137,6 @@ body {
|
||||
|
||||
.card .front {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -161,9 +161,7 @@ body {
|
||||
}
|
||||
|
||||
.card .front .name h1 {
|
||||
text-align: left;
|
||||
margin: 0 0 10px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card .front .name ul {
|
||||
@@ -172,16 +170,19 @@ body {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
.card .front .name .slogan {
|
||||
margin: 12px 0 0 0;
|
||||
.card .front .name .slogan,
|
||||
.card .details h2,
|
||||
.card .back .interests .label {
|
||||
font-size: 0.85em;
|
||||
font-weight: 300;
|
||||
color: #606060;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.card .front .name .slogan {
|
||||
margin: 12px 0 0 0;
|
||||
}
|
||||
|
||||
.card .back {
|
||||
transform: rotateX(180deg);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
@@ -191,10 +192,9 @@ body {
|
||||
flex-shrink: 0;
|
||||
height: var(--height);
|
||||
overflow: hidden;
|
||||
transition: height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.15s;
|
||||
transition: height 0.3s var(--ease-expand), opacity 0.15s;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -210,7 +210,7 @@ body {
|
||||
}
|
||||
|
||||
#details:target + .card-container .back-main {
|
||||
height: 360px;
|
||||
height: var(--height-main-expanded);
|
||||
}
|
||||
|
||||
#details:target + .card-container .details {
|
||||
@@ -221,9 +221,6 @@ body {
|
||||
|
||||
.card .details h2 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 0.85em;
|
||||
font-weight: 300;
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
.card .details p {
|
||||
@@ -235,20 +232,23 @@ body {
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
.card .details-button {
|
||||
.card .flip-button, .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;
|
||||
color: var(--color-control);
|
||||
}
|
||||
|
||||
.card .details-button {
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.card .details-button i {
|
||||
@@ -268,27 +268,12 @@ body {
|
||||
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;
|
||||
}
|
||||
@@ -301,7 +286,7 @@ body {
|
||||
width: 20px;
|
||||
margin-right: 7px;
|
||||
text-align: center;
|
||||
color: #404040;
|
||||
color: var(--color-icon);
|
||||
font-size: 0.9em;
|
||||
line-height: 1em;
|
||||
}
|
||||
@@ -316,9 +301,6 @@ body {
|
||||
|
||||
.card .back .interests .label {
|
||||
text-align: right;
|
||||
font-size: 0.85em;
|
||||
font-weight: 300;
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
.card .back .interests .icons {
|
||||
@@ -326,7 +308,7 @@ body {
|
||||
align-items: center;
|
||||
gap: 0.4em;
|
||||
font-size: 1.25em;
|
||||
color: #404040;
|
||||
color: var(--color-icon);
|
||||
}
|
||||
|
||||
.card .back .interests .skill {
|
||||
@@ -336,7 +318,7 @@ body {
|
||||
width: 1.25em;
|
||||
}
|
||||
|
||||
.card .back .interests .skill > i {
|
||||
.card .back .interests .skill > i, .card .flip-button i {
|
||||
width: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -353,7 +335,7 @@ body {
|
||||
|
||||
font-size: 0.5em;
|
||||
line-height: 1.2em;
|
||||
color: #606060;
|
||||
color: var(--color-muted);
|
||||
text-align: center;
|
||||
hyphens: auto;
|
||||
}
|
||||
@@ -380,17 +362,8 @@ body {
|
||||
}
|
||||
|
||||
.card .flip-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 25px 15px 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
font-size: 0.85em;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.card .front .flip-button {
|
||||
@@ -400,71 +373,47 @@ body {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.card .flip-button i {
|
||||
width: 1.25em;
|
||||
text-align: center;
|
||||
.card .pin-remove, #flip:target .pin-add {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cap-visibleWhenCanHover {
|
||||
visibility: visible;
|
||||
#flip:target .pin-remove {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cap-visibleWhenPinned {
|
||||
visibility: hidden;
|
||||
@media (hover: hover) {
|
||||
.touch-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cap-visibleWhenUnPinned {
|
||||
visibility: hidden;
|
||||
@media not (hover: hover) {
|
||||
.hover-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li .spacer {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.requires-js {
|
||||
html:not(.js) .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 {
|
||||
--max-height: calc(100dvh - 110px);
|
||||
--width: min(300px, calc(100vw - 32px));
|
||||
--height: min(550px, calc(100dvh - 110px));
|
||||
--height: min(550px, var(--max-height));
|
||||
--width-expanded: min(440px, calc(100vw - 24px));
|
||||
--height-expanded: calc(100dvh - 110px);
|
||||
--height-expanded: var(--max-height);
|
||||
--flip-axis: 0, 1, 0;
|
||||
}
|
||||
.footer-container {
|
||||
bottom: calc(6px + env(safe-area-inset-bottom, 0px));
|
||||
@@ -476,25 +425,12 @@ li .spacer {
|
||||
.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 {
|
||||
animation-name: hint-y;
|
||||
}
|
||||
.card .front img {
|
||||
max-height: min(200px, 30dvh);
|
||||
}
|
||||
.card .front hr, .card .back hr {
|
||||
width: calc(var(--width) / 2);
|
||||
height: 0px;
|
||||
|
||||
border-radius: 10px;
|
||||
border: 2px dashed lightgray;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
.card .front .name {
|
||||
@@ -502,22 +438,15 @@ li .spacer {
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.card .front .name h1 {
|
||||
text-align: center;
|
||||
}
|
||||
.card .front .name ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.card .back-main {
|
||||
justify-content: center;
|
||||
gap: 28px;
|
||||
padding-bottom: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.card .back hr {
|
||||
margin: 0;
|
||||
}
|
||||
#details:target + .card-container .back {
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -557,7 +486,6 @@ li .spacer {
|
||||
}
|
||||
#details:target + .card-container .interests .caption {
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
overflow-wrap: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -574,12 +502,6 @@ li .spacer {
|
||||
}
|
||||
}
|
||||
|
||||
@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