mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2025-05-24 14:46:16 +00:00
Tweak CSS for CoderDojo forms, add finish and error pages
This commit is contained in:
parent
e3be3d05f2
commit
dfb62777c1
4 changed files with 98 additions and 20 deletions
|
|
@ -53,7 +53,7 @@ Bitte verrate uns deinen Namen<span data-mode="child"> und den deines Kindes</sp
|
|||
|
||||
<label class="form-input" data-mode="child">
|
||||
<span>Name des Kindes:</span>
|
||||
<input type="text" name="participantname" required />
|
||||
<input type="text" name="participantname" />
|
||||
</label>
|
||||
|
||||
Optional kannst du uns jetzt noch eine Telefonnummer für Notfälle hinterlassen.
|
||||
|
|
|
|||
15
sites/coderdojo/kontakt/fehler.md
Normal file
15
sites/coderdojo/kontakt/fehler.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
layout: layouts/page.njk
|
||||
---
|
||||
|
||||
# Da passt was nicht…
|
||||
|
||||
**Entschuldigung**  — 
|
||||
Leider konnten wir dein Formular nicht verarbeiten.
|
||||
Stelle bitte sicher, dass du alle Felder korrekt ausgefüllt hast.
|
||||
|
||||
Außerdem darf dein Browser Cookies nicht blockieren.
|
||||
Das kann auch durch einen Werbeblocker passieren – eventuell musst du für unsere Seite eine Ausnahme hinterlegen.
|
||||
Wir verwenden Cookies nur für die Sicherheit unserer Formulare und binden weder Werbung noch Tracking-Dienste ein.
|
||||
|
||||
Wenn das alles nicht hilft, schreibe uns bitte an [kontakt@coderdojo-wue.de](mailto:kontakt@coderdojo-wue.de).
|
||||
34
sites/coderdojo/kontakt/fertig.md
Normal file
34
sites/coderdojo/kontakt/fertig.md
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
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>
|
||||
|
||||
**Vielen Dank** — 
|
||||
Wir haben deine Anfrage erhalten.
|
||||
|
|
@ -10,6 +10,41 @@
|
|||
@use 'lib/motion';
|
||||
|
||||
.finish-hero {
|
||||
--dark-idle-color: #{colors.$gray-900};
|
||||
--light-idle-color: #{colors.$gray-600};
|
||||
--idle-color-1: #{colors.$teal-600};
|
||||
--idle-color-2: #{colors.$yellow-600};
|
||||
--idle-color-3: #{colors.$blue-800};
|
||||
--gradient-color-1: var(--dark-idle-color);
|
||||
--gradient-color-2: var(--dark-idle-color);
|
||||
--gradient-color-3: #{colors.$blue-500};
|
||||
--gradient-color-4: #{colors.$teal-500};
|
||||
--gradient-color-5: #{colors.$yellow-500};
|
||||
--gradient-color-6: #{colors.$teal-500};
|
||||
--gradient-color-7: #{colors.$gray-300};
|
||||
--gradient-color-8: #{colors.$yellow-500};
|
||||
--gradient-color-9: #{colors.$blue-500};
|
||||
--gradient-color-10: #{colors.$gray-300};
|
||||
--gradient-color-11: var(--dark-idle-color);
|
||||
--gradient-color-12: var(--dark-idle-color);
|
||||
--gradient-color-13: var(--dark-idle-color);
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
--dark-idle-color: #{colors.$brown-800};
|
||||
--light-idle-color: #{colors.$brown-500};
|
||||
--idle-color-1: #{colors.$green-500};
|
||||
--idle-color-2: #{colors.$orange-500};
|
||||
--idle-color-3: #{colors.$yellow-500};
|
||||
--gradient-color-3: #{colors.$orange-500};
|
||||
--gradient-color-4: #{colors.$orange-400};
|
||||
--gradient-color-5: #{colors.$yellow-500};
|
||||
--gradient-color-6: #{colors.$green-500};
|
||||
--gradient-color-7: #{colors.$green-300};
|
||||
--gradient-color-8: #{colors.$orange-400};
|
||||
--gradient-color-9: #{colors.$orange-500};
|
||||
--gradient-color-10: #{colors.$green-500};
|
||||
}
|
||||
|
||||
@keyframes finish-hero {
|
||||
0% {
|
||||
stroke-width: 3px;
|
||||
|
|
@ -37,20 +72,14 @@
|
|||
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;
|
||||
stop-color: var(--dark-idle-color);
|
||||
}
|
||||
15% {
|
||||
stop-color: $idle-color;
|
||||
stop-color: var(--dark-idle-color);
|
||||
}
|
||||
// This is some magic that chooses the correct colors for each
|
||||
// stop - don't change it unless you know what you are doing! In
|
||||
|
|
@ -63,16 +92,16 @@
|
|||
// 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 {
|
||||
@for $j from 1 to 10 {
|
||||
#{15% + $j * 5%} {
|
||||
stop-color: list.nth($colors, 4 + $j - $i);
|
||||
stop-color: var(--gradient-color-#{4 + $j - $i});
|
||||
}
|
||||
}
|
||||
70% {
|
||||
stop-color: $idle-color;
|
||||
stop-color: var(--dark-idle-color);
|
||||
}
|
||||
100% {
|
||||
stop-color: $idle-color;
|
||||
stop-color: var(--dark-idle-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -123,27 +152,27 @@
|
|||
}
|
||||
@keyframes finish-hero-plug-transition {
|
||||
0% {
|
||||
fill: colors.$gray-900;
|
||||
fill: var(--dark-idle-color);
|
||||
}
|
||||
100% {
|
||||
fill: colors.$gray-600;
|
||||
fill: var(--light-idle-color);
|
||||
}
|
||||
}
|
||||
@keyframes finish-hero-plug-idle {
|
||||
0% {
|
||||
fill: colors.$gray-600;
|
||||
fill: var(--light-idle-color);
|
||||
}
|
||||
25% {
|
||||
fill: colors.$teal-600;
|
||||
fill: var(--idle-color-1);
|
||||
}
|
||||
50% {
|
||||
fill: colors.$yellow-600;
|
||||
fill: var(--idle-color-2);
|
||||
}
|
||||
75% {
|
||||
fill: colors.$blue-800;
|
||||
fill: var(--idle-color-3);
|
||||
}
|
||||
100% {
|
||||
fill: colors.$gray-600;
|
||||
fill: var(--light-idle-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue