diff --git a/assets/css/font/roboto.ttf b/assets/css/font/roboto.ttf deleted file mode 100644 index bba55f6..0000000 Binary files a/assets/css/font/roboto.ttf and /dev/null differ diff --git a/assets/css/font/roboto.woff2 b/assets/css/font/roboto.woff2 new file mode 100644 index 0000000..275e3b3 Binary files /dev/null and b/assets/css/font/roboto.woff2 differ diff --git a/assets/css/style.css b/assets/css/style.css index f018bcf..77644f1 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -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; diff --git a/assets/js/script.js b/assets/js/script.js index e1bd0de..d9e43f6 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,24 +1,20 @@ -var jsBlocks = document.getElementsByClassName("requires-js"); -Array.from(jsBlocks).forEach(block => block.style.display = "block"); -var isCopyTimout = false; +var isCopyTimeout = false; function contact(element) { - var adress = atob("ZWxpYXM=") + atob("QGVsaWFzLW11ZWxsZXIuY29t"); - var uri = atob("bWFpbHRv") + ":" + adress; - window.location.href = uri; + var address = atob("ZWxpYXM=") + atob("QGVsaWFzLW11ZWxsZXIuY29t"); + window.location.href = atob("bWFpbHRv") + ":" + address; if(!navigator.clipboard) return; - navigator.clipboard.writeText(adress); + navigator.clipboard.writeText(address); - if(isCopyTimout) return; - var indicatorContent = "E-Mail wurde kopiert!"; + if(isCopyTimeout) return; var previousContent = element.innerHTML; - element.innerHTML = indicatorContent; - isCopyTimout = true; + element.innerHTML = "E-Mail wurde kopiert!"; + isCopyTimeout = true; setTimeout(() => { element.innerHTML = previousContent; - isCopyTimout = false; + isCopyTimeout = false; }, 3000) } diff --git a/index.html b/index.html index ec3246c..73ca148 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + @@ -48,8 +48,8 @@
Mehr - Weniger - Weniger + Weniger + Weniger
- Zurück - - + Zurück + +