MineTec/aboutme
1
0 Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

code cleanup simplified css with flip axis variable and shared rules subset roboto font as woff2

Browse Source
This commit is contained in:
MineTec committed 2026-10-11 00:28:03 +02:00
1 parent 411870c8ad
commit 8972b54fa8
5 files changed
+75 -157
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/font/roboto.ttf
BIN
View File
Binary file not shown.
assets/css/font/roboto.woff2
BIN
View File
Binary file not shown.
assets/css/style.css
+61 -139
View File
@@ -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;
assets/js/script.js
+8 -12
View File
@@ -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 = "<i class=\"fa-solid fa-heart\"></i>E-Mail wurde kopiert!";
if(isCopyTimeout) return;
var previousContent = element.innerHTML;
element.innerHTML = indicatorContent;
isCopyTimout = true;
element.innerHTML = "<i class=\"fa-solid fa-heart\"></i>E-Mail wurde kopiert!";
isCopyTimeout = true;
setTimeout(() => {
element.innerHTML = previousContent;
isCopyTimout = false;
isCopyTimeout = false;
}, 3000)
}
index.html
+6 -6
View File
@@ -11,7 +11,7 @@
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<link rel="canonical" href="https://www.elias-mueller.com/aboutme/">
<script>document.documentElement.classList.add("preload");</script>
<script>document.documentElement.classList.add("js", "preload");</script>
<script src="assets/js/script.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -48,8 +48,8 @@
</div>
<div class="back">
<a class="details-button details-open" href="#details">Mehr<i class="fa-solid fa-chevron-down"></i></a>
<a class="details-button details-close details-close-touch" href="#flip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
<a class="details-button details-close details-close-hover" href="#unflip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
<a class="details-button details-close touch-only" href="#flip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
<a class="details-button details-close hover-only" href="#unflip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
<div class="back-main">
<ul>
<li class="requires-js"><i class="fa-solid fa-person"></i><span id="age">?</span> Jahre</li>
@@ -114,9 +114,9 @@
Am meisten Spaß macht es mir, Dinge von Grund auf zu bauen: vom ersten Gespräch über die Anforderungen bis zur fertigen Lösung.
</p>
</div>
<a class="cap-visibleWhenCanHover flip-button" href="#unflip"><i class="fa-solid fa-angles-left"></i>Zurück</a>
<a class="cap-visibleWhenUnPinned flip-button" href="#flip" aria-label="Rückseite anpinnen" title="Anpinnen"><i class="fa-solid fa-thumbtack"></i></a>
<a class="cap-visibleWhenPinned flip-button" href="#unflip" aria-label="Rückseite lösen" title="Lösen"><i class="fa-solid fa-thumbtack-slash"></i></a>
<a class="flip-button touch-only" href="#unflip"><i class="fa-solid fa-angles-left"></i>Zurück</a>
<a class="flip-button hover-only pin-add" href="#flip" aria-label="Rückseite anpinnen" title="Anpinnen"><i class="fa-solid fa-thumbtack"></i></a>
<a class="flip-button hover-only pin-remove" href="#unflip" aria-label="Rückseite lösen" title="Lösen"><i class="fa-solid fa-thumbtack-slash"></i></a>
</div>
</div>
</div>