+ diff --git a/script.js b/script.js new file mode 100644 index 0000000..8842a8e --- /dev/null +++ b/script.js @@ -0,0 +1,23 @@ +var jsBlocks = document.getElementsByClassName("requires-js"); +Array.from(jsBlocks).forEach(block => block.style.display = "block"); +var isCopyTimout = false; + +function contact(element) { + var adress = atob("ZWxpYXM=") + atob("QGVsaWFzLW11ZWxsZXIuY29t"); + var uri = atob("bWFpbHRv") + ":" + adress; + window.location.href = uri; + + if(!navigator.clipboard) return; + navigator.clipboard.writeText(adress); + + if(isCopyTimout) return; + var indicatorContent = "E-Mail wurde kopiert!"; + var previousContent = element.innerHTML; + element.innerHTML = indicatorContent; + isCopyTimout = true; + + setTimeout(() => { + element.innerHTML = previousContent; + isCopyTimout = false; + }, 3000) +} \ No newline at end of file diff --git a/style.css b/style.css index 20c86ad..ee2c0ef 100644 --- a/style.css +++ b/style.css @@ -65,6 +65,20 @@ body { max-height: 200px; } +.card .front 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 { text-align: left; margin: 0 0 10px 0; @@ -99,17 +113,31 @@ body { .card .back ul li i { width: 20px; - margin-right: 10px; + margin-right: 7px; text-align: center; + color: #404040; + font-size: 0.9em; + line-height: 1em; } .card .back .interests { - font-size: 1.5em; + font-size: 1.4em; letter-spacing: 0.3em; line-height: 1.6em; text-align: center; } +.card .back .interests h2 { + font-size: 0.7em; + letter-spacing: 0; + line-height: 1em; + text-align: center; + padding: 0; + margin: 0; + margin-bottom: 5px; + color: #404040; +} + .card .flip-button { position: absolute; right: 0; @@ -117,7 +145,7 @@ body { padding: 0 20px 10px 0; font-size: 1.5em; - color: gray; + color: #404040; } .mobile-visible { @@ -128,6 +156,11 @@ a { font-style: normal; text-decoration: none; color: black; + cursor: pointer; +} + +.requires-js { + display: none; } @media (hover: hover) { @@ -149,5 +182,18 @@ a { } .card .back { transform: rotateY(180deg); - } + } + .card .front hr { + width: calc(var(--width) / 2); + height: 0px; + + border-radius: 10px; + border: 2px dashed lightgray; + + margin: 0 10px; + } + .card .front .name { + margin-top: 30px; + margin-left: 0; + } }