Add initial membership form

sites/angestoepselt/geld.md

@@ -25,10 +25,10 @@ Wir verwenden das Geld für spannende und langweilige Sachen:
 
 Ein aktueller Überblick über unsere monatlichen laufenden Kosten:
 
-- Miete			650€
+- Miete 650€
 - Ökostrom/-gas 150€
-- Bürobedarf 	 50€
-- Internet		 40€
+- Bürobedarf 50€
+- Internet 40€
 - Versicherungen 30€
 
 ## Spendenkonto
@@ -40,7 +40,7 @@ Bank: Sparkasse Mainfranken Würzburg<br>
 IBAN: DE23 7905 0000 0047 3098 28<br>
 BIC: BYLADEM1SWU
 
-![EPC QR-Code für Spende](/sites/angestoepselt/_assets/images/epc.png)
+![EPC QR-Code für Spende](/assets/epc.png)
 
 ## Spendenbescheinigung
 

sites/angestoepselt/mitmachen/beitreten.md

@@ -0,0 +1,83 @@
+---
+layout: layouts/page.njk
+useForms: true
+---
+
+# Vereinsmitglied werden
+
+Schön, dich bei uns begrüßen zu dürfen!
+Du kannst direkt hier einen Mitgliedsantrag stellen.
+Alternativ kannst du auch klassisch einen [schriftlichen Antrag](/assets/Antrag_Mitgliedschaft.pdf) ausfüllen und uns zukommen lassen.
+
+<form method="post" action="/geld">
+
+Bitte erzähle uns zunächst ein paar Eckdaten über dich:
+
+<label class="form-input">
+  <span>Name:</span>
+  <input type="text" name="contactname" required placeholder="Vorname Nachname" />
+</label>
+
+<label class="form-input">
+  <span>Email:</span>
+  <input type="email" name="contactemail" required placeholder="mail@beispiel.de" />
+</label>
+
+<label class="form-input">
+  <span>Email:</span>
+  <input type="tel" name="contactphone" required placeholder="+49 931 123456" />
+</label>
+
+<label class="form-input">
+  <span>Adresse:</span>
+  <input type="text" name="address" required placeholder="Straße Nr." />
+</label>
+
+<label class="form-input">
+  <span>Postleitzahl:</span>
+  <input type="text" name="zipcode" required placeholder="12345" />
+</label>
+
+<label class="form-input">
+  <span>Wohnort:</span>
+  <input type="text" name="city" required placeholder="Würzburg" />
+</label>
+
+Ab wann möchtest du im Verein aufgenommen werden (gerne auch rückwirkend)?
+Wenn du dieses Feld leer lässt, nehmen wir dich ab dem nächstmöglichen Zeitpunkt auf.
+
+<label class="form-input">
+  <span>Aufnahmedatum:</span>
+  <input type="date" name="registrationdate" />
+</label>
+
+Nach unserer [Satzung](/satzung) gibt es bei uns zwei Arten von Mitgliedern:
+
+- _Ordentliche Mitglieder_ engagieren sich im Verein und zahlen in der Regel einen Mitgliedsbeitrag (aktuell 60€ pro Jahr).
+  Dieser ist allerdings optional, da wir niemanden aufgrund finanzieller Aspekte ausschließen möchten.
+  Ob du den Mitgliedsbeitrag zahlst oder nicht bleibt komplett dir überlassen und wird vertraulich behandelt.
+- _Fördermitglieder_ nehmen nicht aktiv an den Vereinsaktivitäten teil und zahlen einen selbst gewählten regelmäßigen Beitrag zur Unterstützung des Vereins.
+
+Wie möchtest du dem Verein beitreten?
+
+<input type="radio" id="mode-o" class="radio-input" name="mode" required value="Ordentlich" />
+<div class="form-input">
+	<label for="mode-o">Ich möchte als ordentliches Mitglied beitreten.</label>
+</div>
+<input type="radio" id="mode-b" class="radio-input" name="mode" required value="Befreit" />
+<div class="form-input">
+	<label for="mode-b">Ich möchte als vom Mitgliedsbeitrag befreites Mitglied beitreten.</label>
+</div>
+<input type="radio" id="mode-f" class="radio-input" name="mode" required value="Fördermitglied" />
+<div class="form-input">
+	<label for="mode-f">Ich möchte als Fördermitglied beitreten.</label>
+</div>
+
+Das war's!
+Wir werden uns, nachdem du den Antrag abgeschickt hast, bei dir melden.
+
+<div class="form-submit">
+  <input type="submit" value="Abschicken" />
+</div>
+
+</form>

sites/angestoepselt/mitmachen/index.md

@@ -62,3 +62,11 @@ Gruppeneinladung.
 </div>
 
 </form>
+
+## Mitglied werden
+
+Wenn du schon so begeistert bist, kannst du auch gerne direkt hier ein Mitglied im Verein werden:
+
+- [Zum _Mitgliedsantrag_](beitreten)
+
+{.form-choices}

styles/components/_form-elements.scss

@@ -101,14 +101,13 @@
 	}
 
 	&:checked {
-		$color: colors.$teal-600;
-
-		@include colors.coderdojo-theme {
-			$color: colors.$orange-500;
-		}
-
 		+ .form-input > label {
-			color: $color;
+			color: colors.$teal-800;
+			border-color: colors.$teal-800;
+
+			@include colors.coderdojo-theme {
+				color: colors.$orange-500;
+			}
 		}
 	}
 

styles/lib/_colors.scss

@@ -8,6 +8,7 @@ $gray-50: #ffffff;
 $brown-800: #55433c;
 $brown-500: #866152;
 
+$teal-800: #4d8b87;
 $teal-600: #6bc2bd;
 $teal-500: #4edcca;
 $teal-300: #caf4ef;