Added form styling

content/anmeldung.md

@@ -1,8 +1,46 @@
 ---
-title: Kontakt & Anfahrt
+title: Anmeldung
 date: '2020-02-12'
 ---
 
-Anmeldeformular kommt
+<div class="center-container">
-
+    <div style="width: 100%;max-width: 600px;">
-<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfBLKLXulGQOIXj123Q6vQL2a-w5qPV342561C9GE0O_6FDcg/viewform?embedded=true" width="100%" height="1491" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        <p>
+            Die Anmeldung ist vorerst nur für Chapter-Mitglieder geöffnet.
+        </p>
+    </div>
+</div>
+<div class="center-container">
+    <form class="form">
+        <div class="grow-1">
+            <input id="name" name="name" type="text" required />
+            <label for="name">Name</label>
+        </div>
+        <div class="grow-1">
+            <input id="mail" name="mail" type="email" required />
+            <label for="mail">E-Mail</label>
+        </div>
+        <div class="grow-1">
+            <input id="hex" name="hex" type="text" placeholder="0x00" required pattern="[0-9a-fA-F]{1,2}x[0-9a-fA-F]{1,2}f" />
+            <label for="hex">Hex-ID (z.B. 0xC0)</label>
+        </div>
+        <div class="grow-1">
+            <input id="chapter" name="chapter" type="text" required />
+            <label for="chapter">Chapter</label>
+        </div>
+        <div class="grow-2">
+            <select id="ernaehrung" name="ernaehrung" required>
+                <option selected></option>
+                <option value="Fleisch">Ich esse Fleisch</option>
+                <option value="Vegetarier">Vegetarier</option>
+                <option value="Veganer">Veganer</option>
+            </select>
+            <label for="ernaehrung">Ernährung</label>
+        </div>
+        <div class="grow-2">
+        </div>
+        <div class="grow-2">
+            <input class="btn" type="submit" value="Verbindlich anmelden" />
+        </div>
+    </form> 
+</div>

layouts/_default/single.html

@@ -8,6 +8,7 @@
     {{ end }}
     <div id="content">
         <h1>{{ .Title }}</h1>
+        <hr />
         {{ .Content }}
     </div>
     {{ partial "footer.html" . }}

layouts/partials/hero.html

@@ -1,7 +1,7 @@
 <div id="hero">
     <div>
       <div>
-        <h1>Das erste alljährliche<small>*</small><br /><img src="assets/dd_white.png">-Wochenende</DD></h1>
+        <h1>Das erste alljährliche*<br /><img src="assets/dd_white.png">-Wochenende</DD></h1>
         <h2>28.08 - 30.08.2020</h2>
         <h3><a href='{{ "anmeldung/" | absURL }}' class="btn btn-light btn-lg">INFOS</a> <a href='{{ "anmeldung/" | absURL }}' class="btn btn-light btn-lg">JETZT ANMELDEN!</a></h3>
       </div>

src/style/_form.scss

@@ -0,0 +1,82 @@
+.form {
+    display: flex;
+    text-align: left;
+    width: 100%;
+    max-width: 600px;
+    flex-wrap: wrap;
+    flex-direction: row;
+
+    label {
+        display: block;
+        font-size: .7em;
+        opacity: 0.7;
+    }
+
+    .grow-1, .grow-2 {
+        margin-bottom: 0px;
+        flex-basis: 50%;
+        padding: 5px;
+
+        &.single-line label {
+            display: inline;
+            font-size: inherit;
+            opacity: inherit;
+        }
+    }
+
+    .grow-1 {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+
+    .grow-2 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+        .grow-1, .grow-2 {
+            flex: 0 0 100%;
+            max-width: 100%;
+        }
+    }
+
+    input[type=text], input[type=email], select, textarea {
+        width: 100%;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        padding: 4px;
+        border-left: 5px solid $primary-color;
+    }
+
+    input[type=submit] {
+        width: 100%;
+    }
+    
+    input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus {
+        border-color: $primary-color;
+    }
+    
+    input[type="checkbox"] {
+        display:none;
+    }
+    
+    input[type="checkbox"] + label::before {
+        width: 23px;
+        height: 23px;
+        border-radius: 3px;
+        border: 2px solid $primary-color;
+        background-color: #fff;
+        display: block;
+        content: "";
+        float: left;
+        margin-right: 10px;
+    }
+    
+    input[type="checkbox"]:checked+label::before {
+        box-shadow: inset 0px 0px 0px 3px #fff;
+        background-color: $primary-color;
+    }
+
+
+}

src/style/combined.scss

@@ -6,6 +6,7 @@
 @import "_style.scss";
 @import "_footer.scss";
 @import "_cards.scss";
+@import "_form.scss";
 
 @font-face {
   font-family: "SFMoviePoster";
@@ -91,11 +92,25 @@ p {
   padding-bottom: 300px;
 }
 
+hr {
+  color: $primary-color;
+  text-align: left;
+  margin-left:0;
+  width: 300px;
+  max-width: 100%;
+  margin-bottom: 25px;
+}
+
+.center-container {
+  display: flex;
+  justify-content: center;
+}
+
 .text-center {
   text-align: center;
 }
 
-a.btn {
+input.btn, a.btn {
   color: #000 !important;
   border: 1px solid #ccc;
   border-radius: 4px;
@@ -183,9 +198,9 @@ body.hero {
   }
 
   h1 {
-    font-size: 15vw;
+    font-size: 14vw;
     font-weight: normal;
-    line-height: 15vw;
+    line-height: 11vw;
 
     img {
       width: 18vw;

static/css/ndws.css

@@ -6112,6 +6112,84 @@ footer .footer-row img {
   display: inline;
 }
 
+.form {
+  display: flex;
+  text-align: left;
+  width: 100%;
+  max-width: 600px;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+.form label {
+  display: block;
+  font-size: 0.7em;
+  opacity: 0.7;
+}
+.form .grow-1,
+.form .grow-2 {
+  margin-bottom: 0px;
+  flex-basis: 50%;
+  padding: 5px;
+}
+.form .grow-1.single-line label,
+.form .grow-2.single-line label {
+  display: inline;
+  font-size: inherit;
+  opacity: inherit;
+}
+.form .grow-1 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+.form .grow-2 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+@media screen and (max-width: 576px) {
+  .form .grow-1,
+  .form .grow-2 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+.form input[type='text'],
+.form input[type='email'],
+.form select,
+.form textarea {
+  width: 100%;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 4px;
+  border-left: 5px solid maroon;
+}
+.form input[type='submit'] {
+  width: 100%;
+}
+.form input[type='text']:focus,
+.form input[type='email']:focus,
+.form select:focus,
+.form textarea:focus {
+  border-color: maroon;
+}
+.form input[type='checkbox'] {
+  display: none;
+}
+.form input[type='checkbox'] + label::before {
+  width: 23px;
+  height: 23px;
+  border-radius: 3px;
+  border: 2px solid maroon;
+  background-color: #fff;
+  display: block;
+  content: '';
+  float: left;
+  margin-right: 10px;
+}
+.form input[type='checkbox']:checked + label::before {
+  box-shadow: inset 0px 0px 0px 3px #fff;
+  background-color: maroon;
+}
+
 @font-face {
   font-family: 'SFMoviePoster';
   src: url('../font/SFMoviePoster.ttf') format('truetype');
@@ -6199,10 +6277,25 @@ p {
   padding-bottom: 300px;
 }
 
+hr {
+  color: maroon;
+  text-align: left;
+  margin-left: 0;
+  width: 300px;
+  max-width: 100%;
+  margin-bottom: 25px;
+}
+
+.center-container {
+  display: flex;
+  justify-content: center;
+}
+
 .text-center {
   text-align: center;
 }
 
+input.btn,
 a.btn {
   color: #000 !important;
   border: 1px solid #ccc;
@@ -6221,23 +6314,29 @@ a.btn {
   user-select: none;
   text-decoration: none;
 }
+input.btn.btn-sm,
 a.btn.btn-sm {
   font-size: 0.8em;
 }
+input.btn.btn-lg,
 a.btn.btn-lg {
   font-size: 1.5em;
 }
+input.btn.btn-xl,
 a.btn.btn-xl {
   font-size: 2em;
 }
+input.btn:hover,
 a.btn:hover {
   color: #333 !important;
   background-color: #e6e6e6;
   border-color: #adadad;
 }
+input.btn.btn-light,
 a.btn.btn-light {
   color: #fff !important;
 }
+input.btn.btn-light:hover,
 a.btn.btn-light:hover {
   color: #333 !important;
 }
@@ -6304,9 +6403,9 @@ body.hero {
   vertical-align: text-top;
 }
 #hero h1 {
-  font-size: 15vw;
+  font-size: 14vw;
   font-weight: normal;
-  line-height: 15vw;
+  line-height: 11vw;
 }
 #hero h1 img {
   width: 18vw;