Mobile navigation, merchandise content

content/anmeldung.md

@@ -9,9 +9,10 @@ date: '2020-02-12'
 
 - Die Anmeldung ist vorerst nur für Chapter-Mitglieder geöffnet.
 - Die Anmeldung ist verbindlich. Wer dann doch verhindert ist, muss selbst für Ersatz sorgen.
-- Die Basiskosten betragen 35€ (Übernachtung inkl. Frühstück, Reinigung)
-- Abendessen kostet je 8€
-- Nach der Anmeldung erhaltet ihr eine E-Mail mit eurem Betrag und Zahlungsinformationen. Der Betrag sind innerhalb von 2 Wochen zu begleichen, sonst kann der Platz wieder freigegeben werden.
+- Die Basiskosten betragen 40 EUR (Übernachtung inkl. Frühstück & Reinigung)
+- Abendessen & Snacks kosten 10 EUR / Mahlzeit
+- Kalte Getränke werden organisiert, es gilt das Prinzip einer <strong>Kasse des Vertrauens</strong> für die Getränke
+- Nach der Anmeldung kontaktiert euch Marvin auf eurer <strong>E-Mail</strong> Adresse mit eurem Betrag und Zahlungsinformationen. Der Betrag ist <strong>bis zum 22.03.2020</strong> zu begleichen, sonst kann der Platz wieder freigegeben werden.
         </p>
     </div>
 </div>
@@ -58,6 +59,10 @@ date: '2020-02-12'
             <textarea id="message" name="message"></textarea>
             <label for="message">Sonst noch was?</label>
         </div>
+        <div class="grow-2">
+            <input id="bereit" type="checkbox" />
+            <label for="bereit">Mit dem Absenden dieses Formulars bestätige ich, dass ich bereit für dieses geile Erlebnis bin.</label>
+        </div>
         <div class="grow-2">
         </div>
         <div class="grow-2">

content/kosten.md

@@ -0,0 +1,4 @@
+---
+title: Kosten
+date: '2020-02-29'
+---

content/location.md

@@ -1,5 +1,5 @@
 ---
-title: Infos
+title: Location
 date: '2020-02-12'
 ---
 
@@ -13,7 +13,7 @@ Daubachtal 1\
 <section class="cards">
     <article class="card">
         <div class="card-header">
-            Das Haus<strong></strong><br />
+            <strong>Das Haus</strong><br />
             Mit Parkplätzen
         </div>
         <div class="card-body text-center">

content/merch.md

@@ -3,20 +3,19 @@ title: Merchandise
 date: '2020-02-18'
 ---
 
-Es wird Merch geben. Bierkrug?
-
 <div class="center-container">
     <div style="width: 100%;max-width: 600px;">
         <p>
 Es wird Merch geben.
 
-Nach der Bestellung bekommst du von uns eine E-Mail (manuell, nicht automatisch) mit den Zahlungsinfos. Es gilt das Prinzip der **Vorkasse**, der offene Betrag muss bis zum **28. Juni 2020** beglichen sein.
+Nach der Bestellung teilt dir Andi per E-Mail deine Zahlungsdetails mit. Es gilt das Prinzip der **Vorkasse**, der offene Betrag muss bis zum **28. Juni 2020** beglichen sein.
+Bitte habt Verständnis, dass die Finanzen von der Anmeldung getrennt von denen der Mechandise-Bestellung behandelt werden.
         </p>
     </div>
 </div>
 
 <div class="center-container">
-    <form class="form" method="GET" action="https://ssl.webpack.de/beging.de/form/write/ddwemerch">
+    <form class="form" method="GET" action="https://ssl.webpack.de/beging.de/form/write/ddwemerchtest">
         <div class="grow-1">
             <input id="name" name="name" type="text" required />
             <label for="name">Name</label>
@@ -27,11 +26,40 @@ Nach der Bestellung bekommst du von uns eine E-Mail (manuell, nicht automatisch)
         </div>
         <div class="grow-2">
             <select id="bierkrug" name="bierkrug" required>
-                <option value="Bierkrug ja">Ja! Bierkrug! (15,00 EUR)</option>
-                <option value="Bierkrug nein">Kein Bierkrug</option>
+                <option value="Kein Bierkrug">Kein Bierkrug</option>
+                <option value="1 Bierkrug">1 Bierkrug! (je 13,00 EUR)</option>
+                <option value="2 Bierkrüge">2 Bierkrüge!</option>
+                <option value="3 Bierkrüge">3 Bierkrüge!</option>
+                <option value="4 Bierkrüge">4 Bierkrüge!</option>
+                <option value="5 Bierkrüge">5 Bierkrüge!</option>
+                <option value="6 Bierkrüge">6 Bierkrüge!</option>
             </select>
             <label for="bierkrug">Bierkrug</label>
         </div>
+        <div class="grow-2">
+            <select id="weizen" name="weizen" required>
+                <option value="Kein Weißbierglas">Kein Weißbierglas</option>
+                <option value="1 Weißbierglas">1 Weißbierglas! (je 8,00 EUR)</option>
+                <option value="2 Weißbiergläser">2 Weißbiergläser!</option>
+                <option value="3 Weißbiergläser">3 Weißbiergläser!</option>
+                <option value="4 Weißbiergläser">4 Weißbiergläser!</option>
+                <option value="5 Weißbiergläser">5 Weißbiergläser!</option>
+                <option value="6 Weißbiergläser">6 Weißbiergläser!</option>
+            </select>
+            <label for="weizen">Weißbierglas</label>
+        </div>
+        <div class="grow-2">
+            <select id="emaille" name="emaille" required>
+                <option value="Keine Emailletasse">Keine Emailletasse</option>
+                <option value="1 Emailletasse ja">1 Emailletasse! (je 10,00 EUR)</option>
+                <option value="2 Emailletasse">2 Emailletassen!</option>
+                <option value="3 Emailletasse">3 Emailletassen!</option>
+                <option value="4 Emailletasse">4 Emailletassen!</option>
+                <option value="5 Emailletasse">5 Emailletassen!</option>
+                <option value="6 Emailletasse">6 Emailletassen!</option>
+            </select>
+            <label for="emaille">Emailletasse</label>
+        </div>
         <div class="grow-2">
             <textarea id="message" name="message"></textarea>
             <label for="message">Sonst noch was?</label>
@@ -43,3 +71,63 @@ Nach der Bestellung bekommst du von uns eine E-Mail (manuell, nicht automatisch)
         </div>
     </form> 
 </div>
+
+
+
+<div class="center-container">
+
+# Bierkrug
+</div>
+
+<div class="center-container">
+    13,00 EUR / Stück
+</div>
+<div class="center-container">
+    Passend in&nbsp;<strong>coolem &lt;DD&gt;-Design</strong>&nbsp;bedruckt.
+</div>
+<div class="center-container">
+    Bunt und rundherum.
+</div>
+
+<div class="center-container mt-25">
+    <img src="../assets/bierkrug.png" style="width: 100%; max-width: 350px;">
+</div>
+
+<div class="center-container mt-60">
+
+# Emaille Tasse
+</div>
+
+<div class="center-container">
+    10,00 EUR / Stück
+</div>
+<div class="center-container">
+    Passend in&nbsp;<strong>coolem &lt;DD&gt;-Design</strong>&nbsp;bedruckt.
+</div>
+<div class="center-container">
+    Bunt und rundherum.
+</div>
+
+<div class="center-container">
+    <img src="../assets/emaille.jpg" style="width: 100%; max-width: 350px;">
+</div>
+
+
+<div class="center-container mt-60">
+
+# Weißbierglas
+</div>
+
+<div class="center-container">
+    8,00 EUR / Stück
+</div>
+<div class="center-container">
+    Passend in &nbsp;<strong>coolem &lt;DD&gt;-Design</strong>&nbsp;bedruckt.
+</div>
+<div class="center-container">
+    Bunt und rundherum.
+</div>
+
+<div class="center-container mt-25">
+    <img src="../assets/weizen.png" style="width: 100%; max-width: 350px;">
+</div>

layouts/partials/navigation.html

@@ -13,14 +13,19 @@
             <li {{$classString | safeHTMLAttr}}>Anmeldung</li>
           </a>
 
-          {{ if (eq .Permalink (string ("info/" | absURL))) }}{{ $classString = "class='active'" }}{{else}}{{$classString = ""}}{{ end }}
-          <a href='{{ "info/" | absURL }}'>
-            <li {{$classString | safeHTMLAttr}}>Infos</li>
+          {{ if (eq .Permalink (string ("kosten/" | absURL))) }}{{ $classString = "class='active'" }}{{else}}{{$classString = ""}}{{ end }}
+          <a href='{{ "kosten/" | absURL }}'>
+            <li {{$classString | safeHTMLAttr}}>Kosten</li>
+          </a>
+
+          {{ if (eq .Permalink (string ("location/" | absURL))) }}{{ $classString = "class='active'" }}{{else}}{{$classString = ""}}{{ end }}
+          <a href='{{ "location/" | absURL }}'>
+            <li {{$classString | safeHTMLAttr}}>Location</li>
           </a>
 
           {{ if (eq .Permalink (string ("merch/" | absURL))) }}{{ $classString = "class='active'" }}{{else}}{{$classString = ""}}{{ end }}
           <a href='{{ "merch/" | absURL }}'>
-            <li {{$classString | safeHTMLAttr}}>Merch</li>
+            <li {{$classString | safeHTMLAttr}}>Merchandise</li>
           </a>
         </ul>
       </div>
@@ -31,3 +36,4 @@
       </div>
     </nav>
   </div>
+  {{ partial "sidebar.html" . }}

layouts/partials/sidebar.html

@@ -0,0 +1,20 @@
+<div id="sidebar">
+    <div class="hamburger">
+        <div data-action="toggle-sidebar">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </div>
+    <ul>
+        <a href='{{ "anmeldung/" | absURL }}'>
+            <li>Anmeldung</li>
+        </a>
+        <a href='{{ "location/" | absURL }}'>
+            <li>Location</li>
+        </a>
+        <a href='{{ "merch/" | absURL }}'>
+            <li>Merchandise</li>
+        </a>
+    </ul>
+</div>

src/style/_customgrid.scss

@@ -0,0 +1,38 @@
+$gridPrefix: "tg-";
+
+.#{$gridPrefix}container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+
+
+    .#{$gridPrefix}row {
+        display: flex;
+        margin: 0;
+        padding: 0;
+    }
+
+    .#{$gridPrefix}auto {
+        flex: 0 0 auto;
+        margin: 0;
+        padding: 0;
+    }
+
+    .#{$gridPrefix}fill {
+        flex: 1;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+    }
+
+    @for $i from 1 through 6 {
+        .#{$gridPrefix}fill-#{$i} {
+            flex: #{$i};
+            margin: 0;
+            padding: 0;
+            overflow-y: auto;
+        }
+    }
+}

src/style/_layout_shorthand.scss

@@ -0,0 +1,22 @@
+@for $i from 0 through 20 {
+    .m-#{$i*5} {margin: #{$i*5}px;}
+    .m-#{$i*5}-i {margin: #{$i*5}px !important;}
+    .mt-#{$i*5} {margin-top: #{$i*5}px;}
+    .mt-#{$i*5}-i {margin-top: #{$i*5}px !important;}
+    .mb-#{$i*5} {margin-bottom: #{$i*5}px;}
+    .mb-#{$i*5}-i {margin-bottom: #{$i*5}px !important;}
+    .ml-#{$i*5} {margin-left: #{$i*5}px;}
+    .ml-#{$i*5}-i {margin-left: #{$i*5}px !important;}
+    .mr-#{$i*5} {margin-right: #{$i*5}px;}
+    .mr-#{$i*5}-i {margin-right: #{$i*5}px !important;}
+    .p-#{$i*5} {padding: #{$i*5}px;}
+    .p-#{$i*5}-i {padding: #{$i*5}px !important;}
+    .pt-#{$i*5} {padding-top: #{$i*5}px;}
+    .pt-#{$i*5}-i {padding-top: #{$i*5}px !important;}
+    .pb-#{$i*5} {padding-bottom: #{$i*5}px;}
+    .pb-#{$i*5}-i {padding-bottom: #{$i*5}px !important;}
+    .pl-#{$i*5} {padding-left: #{$i*5}px;}
+    .pl-#{$i*5}-i {padding-left: #{$i*5}px !important;}
+    .pr-#{$i*5} {padding-right: #{$i*5}px;}
+    .pr-#{$i*5}-i {padding-right: #{$i*5}px !important;}
+}

src/style/_navigation.scss

@@ -27,6 +27,10 @@
       display: flex;
       align-items: center;
 
+      @media screen and (max-width: $breakpoint-sm) {
+        display: none;
+      }
+
       a {
         display: inline-block;
         text-decoration: none;

src/style/_sidebar.scss

@@ -0,0 +1,100 @@
+#sidebar {
+    position: fixed;
+    right: 0;
+    top: 0;
+    background-color: #FFF;
+    border-left: 0px solid $primary-color;
+    height: calc(100vh - #{$navigation-height});
+    height: 100vh;
+    width: 0;
+    z-index: 2000;
+    transition: width .4s;
+    display: none;
+
+    ul {
+        list-style: none;
+        padding: 0;
+        
+        a {
+            color: #000;
+            text-decoration: none;
+            display: block;
+            padding-left: 10px;
+            padding-top: 5px;
+            padding-bottom: 5px;
+
+            li {
+                padding-left: 10px;
+                padding-top: 5px;
+                padding-bottom: 5px;
+                border-left: 2px solid transparent;
+            }
+
+            &:hover,
+            &.active {
+                li {
+                    border-left-color: black;
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: $breakpoint-sm) {
+        display: inherit;
+    }
+}
+
+div.hamburger {
+    height: $navigation-height;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: end;
+
+    > div {
+        padding: 25px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    span {
+        display: block;
+        width: 33px;
+        height: 4px;
+        margin-bottom: 5px;
+        position: relative;
+
+        background: #FFF;
+        border-radius: 3px;
+
+        transition: transform .2s;
+    }
+}
+
+body.sidebar {
+    #sidebar {
+        width: 265px;
+        border-left-width: 4px;
+    }
+
+    div.hamburger {
+        span {
+            transform-origin: center;
+            background-color: #000;
+        }
+
+        span:nth-child(1) {
+            transform: translateY(9px) rotate(45deg);
+        }
+
+        span:nth-child(2) {
+            opacity: 0;
+        }
+
+        span:nth-child(3) {
+            transform: translateY(-9px) rotate(-45deg);
+        }
+    }
+}

src/style/_variables.scss

@@ -5,6 +5,8 @@ $breakpoint-sm: 768px;
 $breakpoint-lg: 992px;
 $breakpoint-xl: 1200px;
 
+$navigation-height: 80px;
+
 $primary-color: #09003d;
 $primary-color: rgb(128, 0, 0);
 $hero-color: #fff;

src/style/combined.scss

@@ -7,6 +7,9 @@
 @import "_footer.scss";
 @import "_cards.scss";
 @import "_form.scss";
+@import "_sidebar.scss";
+@import "_customgrid.scss";
+@import "_layout_shorthand.scss";
 
 @font-face {
   font-family: "SFMoviePoster";

src/typescript/script.ts

@@ -8,6 +8,11 @@ if (document.body.classList.contains("hero")) {
     });
 }
 
+// Sidebar toggle
+document.querySelector('[data-action="toggle-sidebar"]').addEventListener("click",() => {
+	document.body.classList.toggle("sidebar");
+});
+
 document.querySelector('form').addEventListener('submit', (e : any) => {
     let targetUrl = e.target.action;
 

static/js/script.js

@@ -7,6 +7,10 @@ if (document.body.classList.contains("hero")) {
             document.body.classList.remove("scroll");
     });
 }
+// Sidebar toggle
+document.querySelector('[data-action="toggle-sidebar"]').addEventListener("click", function () {
+    document.body.classList.toggle("sidebar");
+});
 document.querySelector('form').addEventListener('submit', function (e) {
     var targetUrl = e.target.action;
     // Load form data