mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2025-05-24 14:46:16 +00:00
Polish up finish page
This commit is contained in:
parent
134951eb06
commit
b665702737
5 changed files with 161 additions and 8 deletions
|
|
@ -1,8 +0,0 @@
|
||||||
---
|
|
||||||
layout: layouts/page.njk
|
|
||||||
---
|
|
||||||
|
|
||||||
# Erfolgreich abgesendet
|
|
||||||
|
|
||||||
Vielen Dank, wir haben deine Anfrage entgegengenommen und werden uns bei dir
|
|
||||||
melden. Du solltest in Kürze per E-Mail eine entsprechende Bestätigung erhalten.
|
|
||||||
35
src/content/kontakt/fertig.md
Normal file
35
src/content/kontakt/fertig.md
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
---
|
||||||
|
layout: layouts/page.njk
|
||||||
|
extraStylesheets: ['finish']
|
||||||
|
---
|
||||||
|
|
||||||
|
# Es hat geklappt!
|
||||||
|
|
||||||
|
<svg class="finish-hero" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214.46961 61.600083">
|
||||||
|
<linearGradient id="finish-hero-stroke-gradient" class="stroke-gradient" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0%" />
|
||||||
|
<stop offset="25%" />
|
||||||
|
<stop offset="50%" />
|
||||||
|
<stop offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
<path
|
||||||
|
class="cable"
|
||||||
|
d="M0 30.29a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h111.46a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5z"
|
||||||
|
stroke="url(#finish-hero-stroke-gradient)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
class="contacts"
|
||||||
|
d="M204.96 27.13h9.51m-9.51-7.32h9.51m-9.51 14.63h9.51m-9.51 7.32h9.51"
|
||||||
|
stroke="url(#finish-hero-stroke-gradient)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
class="plug"
|
||||||
|
d="M127.92 38.69h6.32a1 1 0 0 1 .94 1v11.45a1.07 1.07 0 0 0 .28.73l8.07 8.93a.93.93 0 0 0 .67.3h31.19a2.38 2.38 0 0 0 1.14-.28l4.14-3.61a.86.86 0 0 1 1.1.25l1.58 3.3a.91.91 0 0 0 .71.34h11.17a.92.92 0 0 0 .82-.52l3.89-7.46a2.3 2.3 0 0 0 .28-1.12l.11-44.47a1.07 1.07 0 0 0-.2-.63l-4.18-6a.92.92 0 0 0-.75-.4h-51a.93.93 0 0 0-.67.3l-8.07 8.93a1.07 1.07 0 0 0-.28.73V21.6a1 1 0 0 1-.94 1h-6.32m53.22 16.41a3.43 3.43 0 0 1-.86 2.27l-1.35 1.51a3.41 3.41 0 0 1-2.54 1.14h-19a3.45 3.45 0 0 1-2.54-1.1l-1.35-1.49a3.39 3.39 0 0 1-.87-2.27V21.92a3.39 3.39 0 0 1 .87-2.27l1.35-1.51A3.45 3.45 0 0 1 157.4 17h19a3.41 3.41 0 0 1 2.54 1.14l1.35 1.51a3.43 3.43 0 0 1 .86 2.27z"
|
||||||
|
fill="url(#finish-hero-stroke-gradient)"
|
||||||
|
stroke="url(#finish-hero-stroke-gradient)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
**Wir stöpseln das** – Vielen Dank, wir haben deine Anfrage
|
||||||
|
entgegengenommen und werden uns bei dir melden. Du solltest in Kürze per E-Mail
|
||||||
|
eine entsprechende Bestätigung erhalten.
|
||||||
124
src/styles/finish.scss
Normal file
124
src/styles/finish.scss
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
/**
|
||||||
|
* finish.scss
|
||||||
|
* This is the stylesheet for the finish page that is displayed after submiting
|
||||||
|
* a contact form.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@use 'sass:list';
|
||||||
|
@use 'lib/colors';
|
||||||
|
@use 'lib/layout';
|
||||||
|
@use 'lib/motion';
|
||||||
|
|
||||||
|
.finish-hero {
|
||||||
|
@keyframes finish-hero {
|
||||||
|
0% { stroke-width: 3px; }
|
||||||
|
10% { stroke-width: 3px; }
|
||||||
|
20% { stroke-width: 5px; }
|
||||||
|
60% { stroke-width: 5px; }
|
||||||
|
100% { stroke-width: 3px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
height: 15vmin;
|
||||||
|
margin: layout.$huge-gap auto;
|
||||||
|
overflow: visible;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-miterlimit: 10;
|
||||||
|
animation: motion.$prominent 0s 1 normal both running finish-hero;
|
||||||
|
|
||||||
|
> .stroke-gradient {
|
||||||
|
$idle-color: colors.$gray-900;
|
||||||
|
$colors: [
|
||||||
|
$idle-color
|
||||||
|
$idle-color
|
||||||
|
$idle-color
|
||||||
|
colors.$blue-500
|
||||||
|
colors.$teal-500
|
||||||
|
colors.$yellow-500
|
||||||
|
colors.$teal-500
|
||||||
|
colors.$gray-300
|
||||||
|
colors.$yellow-500
|
||||||
|
colors.$blue-500
|
||||||
|
colors.$gray-300
|
||||||
|
$idle-color
|
||||||
|
$idle-color
|
||||||
|
$idle-color
|
||||||
|
];
|
||||||
|
|
||||||
|
@for $i from 1 through 4 {
|
||||||
|
> stop:nth-of-type(#{$i}) {
|
||||||
|
@keyframes finish-stroke-gradient-#{$i} {
|
||||||
|
0% { stop-color: $idle-color; }
|
||||||
|
15% { stop-color: $idle-color; }
|
||||||
|
// This is some which magic that chooses the correct colors for each
|
||||||
|
// stop - don't change it unless you know what you are doing! In
|
||||||
|
// general, the output will look something like this:
|
||||||
|
// <animation stop>: <color stop 1> <color stop 2> ...
|
||||||
|
// 20%: 4 3 2 1
|
||||||
|
// 25%: 5 4 3 2
|
||||||
|
// 35%: 6 5 4 3
|
||||||
|
// ...
|
||||||
|
// In order to achieve the 'moving' effect, we make sure that the
|
||||||
|
// first and last three colors match the ones we are given at 15% and
|
||||||
|
// 70% (before and after the core animation).
|
||||||
|
@for $j from 1 to list.length($colors) - 3 {
|
||||||
|
#{15% + $j * 5%} {
|
||||||
|
stop-color: list.nth($colors, 4 + $j - $i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
70% { stop-color: $idle-color; }
|
||||||
|
100% { stop-color: $idle-color; }
|
||||||
|
}
|
||||||
|
|
||||||
|
animation:
|
||||||
|
motion.$prominent 0s 1 normal both running finish-stroke-gradient-#{$i};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .cable {
|
||||||
|
@keyframes finish-hero-cable {
|
||||||
|
0% { transform: translateX(0.5rem); }
|
||||||
|
20% { transform: translateX(0.5rem); }
|
||||||
|
70% { transform: translateX(0.5rem); }
|
||||||
|
100% { transform: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
animation: motion.$prominent 0s 1 normal both running finish-hero-cable;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .plug {
|
||||||
|
@keyframes finish-hero-plug {
|
||||||
|
0% { transform: translateX(-0.5rem); }
|
||||||
|
20% { transform: translateX(-0.5rem); }
|
||||||
|
70% { transform: translateX(-0.5rem); }
|
||||||
|
100% { transform: none; }
|
||||||
|
}
|
||||||
|
@keyframes finish-hero-plug-transition {
|
||||||
|
0% { fill: colors.$gray-900; }
|
||||||
|
100% { fill: colors.$gray-600; }
|
||||||
|
}
|
||||||
|
@keyframes finish-hero-plug-idle {
|
||||||
|
0% { fill: colors.$gray-600; }
|
||||||
|
25% { fill: colors.$teal-600; }
|
||||||
|
50% { fill: colors.$yellow-600; }
|
||||||
|
75% { fill: colors.$blue-800; }
|
||||||
|
100% { fill: colors.$gray-600; }
|
||||||
|
}
|
||||||
|
|
||||||
|
animation: motion.$prominent 0s 1 normal both running finish-hero-plug,
|
||||||
|
motion.$gentle 0.7s 1 normal forwards running finish-hero-plug-transition,
|
||||||
|
motion.$background 1s infinite normal none running finish-hero-plug-idle;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .contacts {
|
||||||
|
@keyframes finish-hero-contacts {
|
||||||
|
0% { transform: translateX(0rem); }
|
||||||
|
20% { transform: translateX(-0.7rem); }
|
||||||
|
70% { transform: translateX(-0.7rem); }
|
||||||
|
100% { transform: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
animation: motion.$prominent 0s 1 normal both running finish-hero-contacts;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -5,6 +5,7 @@ $gray-300: #d6d6d6;
|
||||||
$gray-100: #f9f9f9;
|
$gray-100: #f9f9f9;
|
||||||
$gray-50: #ffffff;
|
$gray-50: #ffffff;
|
||||||
|
|
||||||
|
$teal-600: #6bc2bd;
|
||||||
$teal-500: #4edcca;
|
$teal-500: #4edcca;
|
||||||
$teal-300: #caf4ef;
|
$teal-300: #caf4ef;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
$subtle: 0.1s cubic-bezier(0.56, 0.03, 0.35, 0.9);
|
$subtle: 0.1s cubic-bezier(0.56, 0.03, 0.35, 0.9);
|
||||||
$gentle: 0.2s cubic-bezier(1, 0.11, 0.41, 0.69);
|
$gentle: 0.2s cubic-bezier(1, 0.11, 0.41, 0.69);
|
||||||
$prominent: 0.7s cubic-bezier(.45,.16,.38,.7);
|
$prominent: 0.7s cubic-bezier(.45,.16,.38,.7);
|
||||||
|
$background: 8s cubic-bezier(.45,.16,.38,.7);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue