diff --git a/sites/coderdojo/anmelden.md b/sites/coderdojo/anmelden.md new file mode 100644 index 0000000..d2228a5 --- /dev/null +++ b/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 + +
diff --git a/styles/components/_form-elements.scss b/styles/components/_form-elements.scss index 0aad0f2..53a28d1 100644 --- a/styles/components/_form-elements.scss +++ b/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; - background-color: colors.$yellow-500; + @extend %focused-form-input; } } .form-input { @extend %form-item; - > span { + > :first-child { @extend %form-label; flex-grow: 1; @@ -54,8 +70,7 @@ } } - > input, - > textarea { + > :last-child { @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; + } } } diff --git a/styles/components/_markup.scss b/styles/components/_markup.scss index e4c90b7..69928c0 100644 --- a/styles/components/_markup.scss +++ b/styles/components/_markup.scss @@ -109,14 +109,18 @@ a[href] { } blockquote { - @extend %narrow-content-gutter; - $border: 0.5em solid colors.$teal-300; - border-top: $border; - border-bottom: $border; + $color: colors.$teal-300; @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 {