mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-13 19:13:42 +02:00
76 lines
No EOL
2.1 KiB
HTML
76 lines
No EOL
2.1 KiB
HTML
<!-- Victor Westerlund - www.victorwesterlund.com -->
|
|
<style>
|
|
body:not(.dark) .modal[data-page="contact_signal"] .inner {
|
|
--palette-inverted: 255,255,255;
|
|
--palette-background: 58,118,240;
|
|
|
|
--swatch-background: rgb(var(--palette-background));
|
|
--swatch-inverted: rgb(var(--palette-inverted));
|
|
}
|
|
|
|
body:not(.dark) .modal[data-page="contact_signal"] .button.solid {
|
|
background-color: var(--swatch-inverted);
|
|
color: var(--swatch-background);
|
|
}
|
|
|
|
.modal .inner > h1,
|
|
.modal .inner > p,
|
|
.modal .button.phantom {
|
|
color: var(--swatch-inverted);
|
|
}
|
|
|
|
/* ---- */
|
|
|
|
#logo_signal {
|
|
width: clamp(100px,50%,200px);
|
|
}
|
|
|
|
#number {
|
|
background: black;
|
|
padding: 10px 15px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.button.copied {
|
|
pointer-events: none;
|
|
animation: beat 500ms forwards;
|
|
animation-delay: 200ms;
|
|
}
|
|
|
|
.button.copied svg,
|
|
.button.copied p:first-of-type {
|
|
opacity: 0;
|
|
}
|
|
|
|
.button.copied p:last-of-type {
|
|
position: absolute;
|
|
animation: slide 1000ms forwards;
|
|
}
|
|
|
|
@keyframes beat {
|
|
0% { transform: scale(1); }
|
|
25% { transform: scale(.95); }
|
|
55% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
@keyframes slide {
|
|
0% { transform: translateY(calc(var(--padding))); opacity: 0; }
|
|
30% { transform: translateY(0); opacity: 1; }
|
|
70% { transform: translateY(0); opacity: 1; }
|
|
100% { transform: translateY(calc(var(--padding) * -1)); opacity: 0; }
|
|
}
|
|
|
|
@media (max-width: 300px) {
|
|
.button.copied p:last-of-type {
|
|
display: initial;
|
|
}
|
|
}
|
|
</style>
|
|
<img id="logo_signal" src="assets/img/icons/signal.svg"/>
|
|
<h1 id="number">+4670-245-2459</h1>
|
|
<p>Signal is a free and encrypted message platform with apps for all major platforms.</p>
|
|
<div class="button solid" data-action="copyText" data-value="+46702452459">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18 2H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H9V4h9v12zM3 15v-2h2v2H3zm0-5.5h2v2H3v-2zM10 20h2v2h-2v-2zm-7-1.5v-2h2v2H3zM5 22c-1.1 0-2-.9-2-2h2v2zm3.5 0h-2v-2h2v2zm5 0v-2h2c0 1.1-.9 2-2 2zM5 6v2H3c0-1.1.9-2 2-2z"/></svg>
|
|
<p>copy number</p>
|
|
</div> |