Add CoderDojo registration form

sites/coderdojo/anmelden.md

@@ -0,0 +1,69 @@
+---
+layout: layouts/page.njk
+useForms: true
+eleventyNavigation:
+  key: Anmelden
+  order: 20
+---
+
+# Für das CoderDojo anmelden
+
+Schön, dass du an einem CoderDojo teilnehmen möchtest!
+Hier findest du schon mal die Details zur kommenden Veranstaltung:
+
+> **Ort** – Online (Teilnahmelink kommt per Mail)  
+> **Datum** – 16.01.2021  
+> **Start** – 9:00 Uhr (gerne ab 8:30 eintreffen)  
+> **Ende** – gegen 15:00 Uhr
+
+<form method="post" action="/anmelden">
+
+Zunächst müssen wir ein paar Formalitäten klären.
+Wen möchtest du anmelden?
+
+<div class="form-input">
+	<input type="radio" id="registertype-self" name="registertype" required value="self" />
+	<label for="registertype-self">Ich bin über 14 Jahre alt und möchte mich selbst anmelden.</label>
+</div>
+<div class="form-input">
+	<input type="radio" id="registertype-child" name="registertype" required value="child" />
+	<label for="registertype-child">Ich bin Erziehungsberechtigte&ThinSpace;/&ThinSpace;-r und möchte mein Kind anmelden.</label>
+</div>
+
+Bitte verrate uns deinen Namen:
+
+<label class="form-input">
+  <span>Name:</span>
+  <input type="text" name="contactname" required />
+</label>
+
+<label class="form-input">
+  <span>Name des Kindes:</span>
+  <input type="text" name="participantname" required />
+</label>
+
+Optional kannst du uns jetzt noch eine Telefonnummer für Notfälle hinterlassen.
+Bitte gebe außerdem eine Email-Adresse an, an die wir Informationen zur Veranstaltung schicken können.
+
+<label class="form-input">
+  <span>Telefonnummer:</span>
+  <input type="tel" name="contactphone" placeholder="+49 931 1234567" />
+</label>
+
+<label class="form-input">
+  <span>Email:</span>
+  <input type="email" name="contactemail" required placeholder="mail@beispiel.de" />
+</label>
+
+Solltest du noch Fragen haben oder uns anderweitig etwas mitteilen wollen, kannst du das hier tun:
+
+<label class="form-input">
+  <span>Nachricht:</span>
+  <textarea name="message"></textarea>
+</label>
+
+<div class="form-submit">
+  <input type="submit" value="Abschicken" />
+</div>
+
+</form>

styles/components/_form-elements.scss

@@ -18,11 +18,28 @@
 %form-label {
 	font-weight: typography.$emphasized-weight;
 	color: colors.$blue-800;
+
+	@include colors.coderdojo-theme {
+		color: colors.$brown-800;
+	}
 }
 
 %base-form-input {
 	background-color: transparent;
 	border: 0.1rem solid colors.$blue-800;
+
+	@include colors.coderdojo-theme {
+		border-color: colors.$brown-800;
+	}
+}
+
+%focused-form-input {
+	outline: none;
+	background-color: colors.$yellow-500;
+
+	@include colors.coderdojo-theme {
+		background-color: colors.$green-500;
+	}
 }
 
 %form-input {
@@ -37,15 +54,14 @@
 
 	&:focus-visible,
 	&:active {
-		outline: none;
+		@extend %focused-form-input;
-		background-color: colors.$yellow-500;
 	}
 }
 
 .form-input {
 	@extend %form-item;
 
-	> span {
+	> :first-child {
 		@extend %form-label;
 		flex-grow: 1;
 
@@ -54,8 +70,7 @@
 		}
 	}
 
-	> input,
+	> :last-child {
-	> textarea {
 		@extend %form-input;
 		flex-basis: 60%;
 		margin-top: layout.$small-gap;
@@ -65,6 +80,40 @@
 			margin-left: layout.$normal-gap;
 		}
 	}
+
+	> input[type='radio']:first-child {
+		opacity: 0;
+
+		+ label {
+			position: relative;
+			color: colors.$gray-800;
+
+			&:before {
+				content: '\2771';
+				display: inline-block;
+				position: absolute;
+				left: #{layout.$large-gap * -1};
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+
+		&:checked {
+			$color: colors.$teal-600;
+
+			@include colors.coderdojo-theme {
+				$color: colors.$orange-500;
+			}
+
+			+ label {
+				color: $color;
+			}
+		}
+
+		&:focus-visible + label {
+			@extend %focused-form-input;
+		}
+	}
 }
 
 .form-checkbox {
@@ -89,6 +138,10 @@
 
 		&:focus-visible + div {
 			background-color: colors.$yellow-600;
+
+			@include colors.coderdojo-theme {
+				background-color: colors.$green-600;
+			}
 		}
 	}
 

styles/components/_markup.scss

@@ -109,14 +109,18 @@ a[href] {
 }
 
 blockquote {
-	@extend %narrow-content-gutter;
+	$color: colors.$teal-300;
-	$border: 0.5em solid colors.$teal-300;
-	border-top: $border;
-	border-bottom: $border;
 
 	@include colors.coderdojo-theme {
-		$border: colors.$orange-300;
+		$color: colors.$orange-300;
 	}
+
+	@extend %narrow-content-gutter;
+	padding-left: layout.$small-gap;
+	padding-right: layout.$small-gap;
+	$border: 0.5em solid $color;
+	border-top: $border;
+	border-bottom: $border;
 }
 
 .cta-link {