Styling and navigation logic

content/anmeldung.md

@@ -1,10 +1,8 @@
 ---
 title: Kontakt & Anfahrt
-date: '2014-04-09'
+date: '2020-02-12'
 ---
 
-<p><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1491.2070126276749!2d8.019840114042237!3d50.87386025123275!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bc1c92617567e9%3A0xf8194b5a7311fcf8!2sMartinikirche!5e1!3m2!1sde!2sde!4v1463569599015" width="100%" height="350" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
+Anmeldeformular kommt
 
-**Martinikirche**\
+<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>
-Grabenstraße 22\
-57072 Siegen

content/info.md

@@ -0,0 +1,84 @@
+---
+title: Infos
+date: '2020-02-12'
+---
+
+<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2545.2760388898882!2d7.947020516297274!3d50.36140710165712!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bdd25d282463d9%3A0x3b67bdeed2db34d8!2sVerein%20f%C3%BCr%20Sozialwesen%20und%20%C3%96kologie%20G%C3%BClle-M%C3%BChle!5e0!3m2!1sen!2sde!4v1581491224203!5m2!1sen!2sde" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="true"></iframe>
+
+**Verein für Sozialwesen und Ökologie Gülle Mühle e.V.**\
+Daubachtal 1\
+65558 Langenscheid\
+[www.guelle-muehle.de](https://www.guelle-muehle.de/)
+
+<section class="cards">
+    <article class="card">
+        <div class="card-header">
+            Das Haus<strong></strong><br />
+            Mit Parkplätzen
+        </div>
+        <div class="card-body text-center">
+            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/LWmnVRfX4P.jpg"  />
+            </a>
+        </div>
+    </article>
+    <article class="card">
+        <div class="card-header">
+            <strong>Lagerfeuer</strong><br />
+            Kinder bitte wegdenken
+        </div>
+        <div class="card-body text-center">
+            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/gO6sg4fY6I.jpg"  />
+            </a>
+        </div>
+    </article>
+    <article class="card">
+        <div class="card-header">
+            <strong>Terrasse</strong><br />
+            Eingehend geprüfte Flunkyballeignung
+        </div>
+        <div class="card-body text-center">
+            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ZovtdYV7q3.jpg"  />
+            </a>
+        </div>
+    </article>
+    <article class="card">
+        <div class="card-header">
+            <strong>Aufenthaltsraum</strong><br />
+            Von innen viel größer
+        </div>
+        <div class="card-body text-center">
+            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ECE1Bdcflr.jpg"  />
+            </a>
+        </div>
+    </article>
+    <article class="card">
+        <div class="card-header">
+            <strong>Küche</strong><br />
+            Gulasch? Gulasch!
+        </div>
+        <div class="card-body text-center">
+            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/Stdx7GzUbz.jpg"  />
+            </a>
+        </div>
+    </article>
+    <article class="card">
+        <div class="card-header">
+            <strong>Bach</strong><br />
+            Morgens ein paar Bahnen schwimmen
+        </div>
+        <div class="card-body text-center">
+            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/G9yH4Oy3eu.jpg"  />
+            </a>
+        </div>
+    </article>
+</section>
+
+
+
+

layouts/_default/single.html

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

layouts/partials/footer.html

@@ -2,23 +2,18 @@
   <div class="footer-row">
     <div class="column">
       <p>
-        <strong>Nacht der Wissenschaft Siegen</strong>
+        <strong>Codename DDWE</strong>
       </p>
       <p>
-        Eine Veranstaltung der Studentischen Initiative für
+        Eine Schnapsidee des &lt;DD&gt;-Chapter Siegen: Name folgt...
-        Wissenschaftskommunikation.<br />Kurz: WissKomm
       </p>
       <p>
-        <a href="http://www.wisskomm.org" target="_blank">www.wisskomm.org</a>
+        <a href='http://durstiger-donnerstag.de/index.php?page=kontakt_impressum' target="_blank">Impressum</a> | <a href='http://durstiger-donnerstag.de/index.php?page=datenschutz' target="_blank">Datenschutzerklärung</a>
-      </p>
-      <p>
-        <a href='{{ "legal" | absURL }}'>Impressum</a> | <a href='{{ "privacy" | absURL }}'>Datenschutzerklärung</a>
       </p>
     </div>
     <div class="column">
       <p>
-        <a href="https://www.facebook.com/ndwsiegen/" target="_blank"><img src='{{ "img/facebook_g.png" | absURL }}' width="50px" /></a>
+        <img src='{{ "assets/D5_Logo.svg" | absURL }}' >
-        <a href="https://www.instagram.com/nacht_der_wissenschaft_siegen/" target="_blank"><img src='{{ "img/instagram_g.png" | absURL }}' width="50px" /></a>
       </p>
     </div>
   </div>

layouts/partials/hero.html

@@ -1,9 +1,7 @@
 <div id="hero">
     <div>
-      <h1>Das erste alljährliche*<br /><img src="assets/dd_white.png" style="height: 3.1rem; display: inline-block;">-Wochenende</DD></h1>
+      <h1>Das erste alljährliche<small>*</small><br /><img src="assets/dd_white.png">-Wochenende</DD></h1>
-      <div style="padding: 5vh 0;">
+      <h2>28.08 - 30.08.2020</h2>
-        <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>
-      <h3><a href="" class="btn btn-light btn-lg">Jetzt anmelden!</a></h3>
     </div>
   </div>

layouts/partials/navigation.html

@@ -1,15 +1,21 @@
 <div class="nav">
     <nav>
       <div class="nav-left">
+        {{ $classString := "" }}
+        
+        
         <a href='{{ "" | absURL }}' class="header-logo">
           <img src='{{ "assets/dd_white.png" | absURL }}' />
         </a>
         <ul class="nav-links">
-          <a href='{{ "anmeldung" | absURL }}'>
+          {{ if (eq .Permalink (string ("anmeldung/" | absURL))) }}{{ $classString = "class='active'" }}{{else}}{{$classString = ""}}{{ end }}
-            <li>Anmeldung</li>
+          <a href='{{ "anmeldung/" | absURL }}'>
+            <li {{$classString | safeHTMLAttr}}>Anmeldung</li>
           </a>
-          <a href='{{ "asd" | absURL }}'>
+
-            <li>Anmeldung</li>
+          {{ if (eq .Permalink (string ("info/" | absURL))) }}{{ $classString = "class='active'" }}{{else}}{{$classString = ""}}{{ end }}
+          <a href='{{ "info/" | absURL }}'>
+            <li {{$classString | safeHTMLAttr}}>Infos</li>
           </a>
         </ul>
       </div>

src/style/_cards.scss

@@ -12,6 +12,8 @@
         margin: 1rem .25em;
         border: 1px solid rgba(0,0,0,.125);
         border-radius: .25rem;
+        background-color: #fff;
+        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 
         > a {
             color: unset;
@@ -21,9 +23,10 @@
         .card-header {
             background-color: red;
             padding: .75rem 1.25rem;
-            background-color: rgba(0,0,0,.03);
             border: 0px solid rgba(0,0,0,.125);
             border-bottom-width: 1px;
+            background-color: $primary-color;
+            color: #fff;
 
             @media screen and (max-width: $breakpoint-xs) {
                 border-width: 1px;

src/style/_footer.scss

@@ -42,6 +42,7 @@ footer {
       img {
         display: inline-block;
         margin: 0px 10px;
+        max-width: 250px;
       }
     }
   }

src/style/_navigation.scss

@@ -7,6 +7,8 @@
   top: 0;
   width: 100%;
   z-index: 1000;
+  font-family: "SFMoviePoster", system-ui, sans-serif;
+  font-size: 2.8rem;
 
   nav {
     padding: 0 20px;
@@ -17,6 +19,7 @@
 
     .header-logo img {
       height: 35px;
+      display: inline-block;
     }
 
     .nav-links {
@@ -36,7 +39,7 @@
           &:hover,
           &.active {
             border-color: inherit;
-            padding: 5px 0px;
+            padding: 0px 0px;
           }
         }
       }

src/style/_variables.scss

@@ -6,6 +6,6 @@ $breakpoint-lg: 992px;
 $breakpoint-xl: 1200px;
 
 $primary-color: #09003d;
-$primary-color: #09003d18;
+$primary-color: rgb(128, 0, 0);
 $hero-color: #fff;
 $footer-color: #898f9c;

src/style/combined.scss

@@ -7,6 +7,20 @@
 @import "_footer.scss";
 @import "_cards.scss";
 
+@font-face {
+  font-family: "SFMoviePoster";
+  src: url("../font/SFMoviePoster.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "SFMoviePoster";
+  src: url("../font/SFMoviePosterBold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+
 @font-face {
   font-family: "FiraSans";
   src: url("../font/FiraSans-Regular.ttf") format("truetype");
@@ -47,6 +61,15 @@ body {
   position: absolute;
   top: 80px;
   width: 100%;
+  min-height: calc(100vh - 80px);
+}
+
+h1,h2,h3,h4,h5,h6 {
+  font-family: "SFMoviePoster", system-ui, sans-serif;
+}
+
+h1 {
+  font-size: 4rem;
 }
 
 h2,h3 {
@@ -63,9 +86,7 @@ p {
   max-width: 1440px;
   margin: auto;
   
-  @media screen and (max-width: $breakpoint-xs) {
+
-    padding: 20px;
-  }
 
   padding-bottom: 300px;
 }
@@ -147,18 +168,42 @@ body.hero {
   justify-content: center;
   text-align: center;
 
+  > div > div {
+    border: 1px solid red;
+    padding: 0;
+  }
+
+  h1,h2,h3,h4 {
+    img {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    small {
+      font-size: .5em;
+      vertical-align: text-top;
+    }
+  }
+
   h1 {
-    font-size: 7vw;
+    font-size: 15vw;
     font-weight: normal;
+    line-height: 15vw;
+
+    img {
+      width: 18vw;
+      height: auto;
+    }
   }
 
   h2 {
-    font-size: 4vw;
     font-weight: lighter;
+    font-size: 8vw;
+    line-height: 8vw;
   }
 
   h3 {
-    font-size: 2vw;
+    font-size: 3vw;
     font-weight: lighter;
   }
 
@@ -172,13 +217,23 @@ body.hero {
     opacity: 0.3;
   }
 
-  @media only screen and (max-width: $breakpoint-xs) {
+  @media only screen and (max-width: $breakpoint-xl) {
-    h2 {
+    h1 {font-size: 20vw; line-height: 17vw; img{width: 28vw;}}
-      font-size: 6vw;
+    h2 {font-size: 12vw; line-height: 12vw;}
-    }
+    h3 {font-size: 4vw;}
+  }
 
-    h3 {
+  @media only screen and (max-width: $breakpoint-lg) {
-      font-size: 4vw;
+    h1 img{width: 34vw;}
-    }
+    h3 { font-size: 5vw; }
+  }
+
+  @media only screen and (max-width: $breakpoint-sm) {
+  }
+
+  @media only screen and (max-width: $breakpoint-xs) {
+    h1 {font-size: 22vw; line-height: 20vw;}
+    h2 {font-size: 16vw; line-height: 16vw;}
+    h3 {font-size: 9vw;}
   }
 }

static/css/ndws.css

@@ -5947,6 +5947,8 @@ select {
   top: 0;
   width: 100%;
   z-index: 1000;
+  font-family: 'SFMoviePoster', system-ui, sans-serif;
+  font-size: 2.8rem;
 }
 .nav nav {
   padding: 0 20px;
@@ -5957,6 +5959,7 @@ select {
 }
 .nav nav .header-logo img {
   height: 35px;
+  display: inline-block;
 }
 .nav nav .nav-links {
   list-style: none;
@@ -5975,7 +5978,7 @@ select {
 .nav nav .nav-links a li:hover,
 .nav nav .nav-links a li.active {
   border-color: inherit;
-  padding: 5px 0px;
+  padding: 0px 0px;
 }
 .nav nav .nav-left {
   display: flex;
@@ -6048,6 +6051,7 @@ footer .footer-row a {
 footer .footer-row img {
   display: inline-block;
   margin: 0px 10px;
+  max-width: 250px;
 }
 
 .cards {
@@ -6065,6 +6069,9 @@ footer .footer-row img {
   margin: 1rem 0.25em;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
+  background-color: #fff;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 .cards .card > a {
   color: unset;
@@ -6073,9 +6080,10 @@ footer .footer-row img {
 .cards .card .card-header {
   background-color: red;
   padding: 0.75rem 1.25rem;
-  background-color: rgba(0, 0, 0, 0.03);
   border: 0px solid rgba(0, 0, 0, 0.125);
   border-bottom-width: 1px;
+  background-color: maroon;
+  color: #fff;
 }
 @media screen and (max-width: 576px) {
   .cards .card .card-header {
@@ -6104,6 +6112,20 @@ footer .footer-row img {
   display: inline;
 }
 
+@font-face {
+  font-family: 'SFMoviePoster';
+  src: url('../font/SFMoviePoster.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'SFMoviePoster';
+  src: url('../font/SFMoviePosterBold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
 @font-face {
   font-family: 'FiraSans';
   src: url('../font/FiraSans-Regular.ttf') format('truetype');
@@ -6144,6 +6166,20 @@ body {
   position: absolute;
   top: 80px;
   width: 100%;
+  min-height: calc(100vh - 80px);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'SFMoviePoster', system-ui, sans-serif;
+}
+
+h1 {
+  font-size: 4rem;
 }
 
 h2,
@@ -6162,11 +6198,6 @@ p {
   margin: auto;
   padding-bottom: 300px;
 }
-@media screen and (max-width: 576px) {
-  #content {
-    padding: 20px;
-  }
-}
 
 .text-center {
   text-align: center;
@@ -6252,16 +6283,40 @@ body.hero {
   justify-content: center;
   text-align: center;
 }
+#hero > div > div {
+  border: 1px solid red;
+  padding: 0;
+}
+#hero h1 img,
+#hero h2 img,
+#hero h3 img,
+#hero h4 img {
+  vertical-align: middle;
+  display: inline-block;
+}
+#hero h1 small,
+#hero h2 small,
+#hero h3 small,
+#hero h4 small {
+  font-size: 0.5em;
+  vertical-align: text-top;
+}
 #hero h1 {
-  font-size: 7vw;
+  font-size: 15vw;
   font-weight: normal;
+  line-height: 15vw;
+}
+#hero h1 img {
+  width: 18vw;
+  height: auto;
 }
 #hero h2 {
-  font-size: 4vw;
   font-weight: lighter;
+  font-size: 8vw;
+  line-height: 8vw;
 }
 #hero h3 {
-  font-size: 2vw;
+  font-size: 3vw;
   font-weight: lighter;
 }
 #hero a {
@@ -6272,11 +6327,40 @@ body.hero {
   width: 20%;
   opacity: 0.3;
 }
-@media only screen and (max-width: 576px) {
+@media only screen and (max-width: 1200px) {
+  #hero h1 {
+    font-size: 20vw;
+    line-height: 17vw;
+  }
+  #hero h1 img {
+    width: 28vw;
+  }
   #hero h2 {
-    font-size: 6vw;
+    font-size: 12vw;
+    line-height: 12vw;
   }
   #hero h3 {
     font-size: 4vw;
   }
 }
+@media only screen and (max-width: 992px) {
+  #hero h1 img {
+    width: 34vw;
+  }
+  #hero h3 {
+    font-size: 5vw;
+  }
+}
+@media only screen and (max-width: 576px) {
+  #hero h1 {
+    font-size: 22vw;
+    line-height: 20vw;
+  }
+  #hero h2 {
+    font-size: 16vw;
+    line-height: 16vw;
+  }
+  #hero h3 {
+    font-size: 9vw;
+  }
+}