neues styling

okfde · Jan 22, 2019 · cc5ef33 · cc5ef33
1 parent ebf3513
commit cc5ef33
Show file tree

Hide file tree

Showing 33 changed files with 1,305 additions and 159 deletions.
diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -11,6 +11,6 @@ de:
     url: /mitmachen
     side: right
 
-  - title: Gründe
+  - title: Wieso?
     url: /gruende
     side: right
diff --git a/_includes/header-nav.liquid b/_includes/header-nav.liquid
@@ -0,0 +1,15 @@
+<div class="row">
+    <div class="col-xs-12">
+        <div class="mobile-menu-toggle"><span></span></div>
+        <div class="nav-wrap gone">
+            {% include navigation.html %}
+        </div>
+        <div class="navbar">
+            <a href="/">
+                <div class="logo">
+                    <img class="img-responsive" src="/static/img/logo_bold.svg" width="120" alt="">
+                </div>
+            </a>
+        </div>
+    </div>
+</div>
diff --git a/_includes/newsletter-form.html b/_includes/newsletter-form.html
@@ -1,50 +1,46 @@
 <div class="jumbotron fond__blue cta-news-wrapper">
   <div class="container">
    <div class="row">
-     <div class="col-lg-10 col-lg-offset-1">
-
-
-
- <form action="//okfn.us5.list-manage.com/subscribe/post?u=929f1e07936386d34833e20d1&amp;id=09be3d520c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
-    <div id="mc_embed_signup_scroll">
-
-        <div class="row text-center">
-          <h3>Newsletter</h3>
-          <div class="col-lg-10 col-lg-offset-1">
-          {% if page.lang == 'en' %}
-            <p>You want to stay informed?<br/>Sign up for our newsletter and hear about the newest developments  
-            </p>
-          {% else %}
-            <p> Du möchtest auf dem Laufenden bleiben? <br /> Melde Dich für unseren Newsletter an und erfahre über die neusten Entwicklungen.
-            </p>
-          {% endif %}
-          </div>
-          <div class="mc-field-group form-group form-group-newsletter text-left">
-            <div class="col-lg-6 col-lg-offset-2">
-              <label for="mce-EMAIL" class="sr-only" >E-Mail</label>
-              <div class="input-group">
-              <input type="email" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="E-Mail" required >
-              <div class="input-group-btn">  
-              <button type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn btn-mitmachen">
+     <div class="col-lg-10">
+        <form action="//okfn.us5.list-manage.com/subscribe/post?u=929f1e07936386d34833e20d1&amp;id=09be3d520c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+          <div id="mc_embed_signup_scroll">
+              <div class="row col-lg-10">
+                <h3>Newsletter</h3>
                 {% if page.lang == 'en' %}
-                  Subscribe!
+                  <p>
+                    You want to stay informed? Sign up for our newsletter and hear about the newest developments  
+                  </p>
                 {% else %}
-                  Abonnieren!
+                  <p> 
+                    Du möchtest auf dem Laufenden bleiben? Melde Dich für unseren Newsletter an und erfahre über die neusten Entwicklungen.
+                  </p>
                 {% endif %}
-                </button>
-                <div style="position: absolute; left: -5000px;"><input type="text" name="b_929f1e07936386d34833e20d1_09be3d520c" value="">
-                  <!-- set to newsletter only-->
-                  <input type="checkbox" value="1" checked="checked" name="group[16985][1]" id="mce-group[16985]-16985-0" style="display:none;">
-                </div>
+              </div>
+              <div class="mc-field-group form-groupform-group-newsletter text-left">
+                <div class="col-lg-6">
+                  <label for="mce-EMAIL" class="sr-only" >E-Mail</label>
+                  <div class="input-group">
+                    <input type="email" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="E-Mail" required >
+                    <div class="input-group-btn">  
+                      <button type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn btn-mitmachen">
+                        {% if page.lang == 'en' %}
+                          Subscribe!
+                        {% else %}
+                          Abonnieren!
+                        {% endif %}
+                      </button>
+                      <div style="position: absolute; left: -5000px;"><input type="text" name="b_929f1e07936386d34833e20d1_09be3d520c" value="">
+                        <!-- set to newsletter only-->
+                        <input type="checkbox" value="1" checked="checked" name="group[16985][1]" id="mce-group[16985]-16985-0" style="display:none;">
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
-            </div>
           </div>
-        </form>    
-      </div>
-
+        </form>  
       </div>
     </div>
   </div>
-</div>
+</div>  
diff --git a/_includes/piwik.html b/_includes/piwik.html
@@ -1,16 +1,15 @@
-<!-- Piwik 
+<!-- Matomo -->
 <script type="text/javascript">
-  var _paq = _paq || [];
-  _paq.push(["setDomains", ["*.datensummit.de","*.datensummit.de"]]);
-  _paq.push(['trackPageView']);
-  _paq.push(['enableLinkTracking']);
-  (function() {
-    var u="//traffic.okfn.de/";
-    _paq.push(['setTrackerUrl', u+'piwik.php']);
-    _paq.push(['setSiteId', '29']);
-    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
-  })();
+ var _paq = _paq || [];
+ /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+ _paq.push(['trackPageView']);
+ _paq.push(['enableLinkTracking']);
+ (function() {
+   var u="//traffic.okfn.de/";
+   _paq.push(['setTrackerUrl', u+'piwik.php']);
+   _paq.push(['setSiteId', '47']);
+   var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+   g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+ })();
 </script>
-<noscript><p><img src="//traffic.okfn.de/piwik.php?idsite=29" style="border:0;" alt="" /></p></noscript>
-End Piwik Code -->
+<!-- End Matomo Code -->
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -53,7 +53,7 @@
             class="img-responsive"
             src="/static/img/logo.svg"
             width="250"
-            alt="Volksentscheid Transparenz"
+            alt=""
           />
         </a>
       </div>
@@ -63,8 +63,8 @@
     <footer>
       <div class="jumbotron meta-links-foot">
         <div class="container">
-          <div class="row text-uppercase">
-            <div class="col-lg-11 col-lg-offset-1">
+          <div class="row">
+            <div class="col-lg-12">
               <div class="col-lg-3"><a href="/ueber">&Uuml;ber uns</a></div>
               <div class="col-lg-3"><a href="/presse">Presse</a></div>
               <div class="col-lg-3"><a href="/impressum">Impressum</a></div>
@@ -73,7 +73,7 @@
                   <img
                     class="okfn-logo img-responsive"
                     width="100"
-                    src="/static/img/OKFN.png"
+                    src="/static/img/OKFN.svg"
                     alt="OKFN Logo"
                   />
                 </a>
@@ -82,20 +82,6 @@
           </div>
         </div>
       </div>
-
-      <!--    {% if page.footerlogos %}
-        <div class="jumbotron fond__grey-mid partner">
-          <div class="container">
-            <div class="row">
-              <div class="col-lg-10 col-lg-offset-1 drl-footer partner">
-                <a href="https://www.okfn.de/"><img class="drl-partner-logo img-responsive" src="/static/img/OKFN.png" alt="OKFN Logo" /></a> Schirmherrschaft: Alexander Dobrindt, Bundesminister für Verkehr und digitale Infrastruktur, MdB
-                Gefördert durch
-                <a href="https://www.bmvi.de/"><img class="drl-partner-logo img-responsive" src="/static/img/bmvi.svg"  alt="Bundesministerium für Verkehr und digitale Infrastruktur" /></a>
-            </div>
-          </div>
-        </div>
-        {% endif %}
-      </div>-->
     </footer>
   </body>
 </html>
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -170,14 +170,17 @@ label {
 
   p {
     margin: 28px 0;
-    font-weight: 600;
+    font-weight: 400;
     line-height: 1.5em;
     font-family: Helvetica, Arial, sans-serif;
   }
 }
 
+.bold{
+  font-weight: 600; 
+}
+
 .meta-links-foot {
-  text-transform: uppercase;
   a,
   a:hover,
   a:visited,
@@ -329,41 +332,6 @@ $keep: 44 + 2 * 15px;
   }
 }
 
-#animation-wrapper,
-.hero-overlay {
-  font-family: Helvetica, Arial, sans-serif;
-  padding: 5% 0;
-  top: 0;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.hero-overlay-ziele {
-  //background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  padding: 0;
-  text-align: left;
-  width: 100%;
-  height: 100%;
-
-  font-family: "Fira Sans", sans-serif;
-  top: 0;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-
-  h1 {
-    font-size: 50px;
-    font-family: "Fira Sans";
-    letter-spacing: 2px;
-    margin-top: -10%;
-    color: $black;
-  }
-}
-
 /* Newsletter Signup */
 
 .form-control {
@@ -1010,7 +978,7 @@ $keep: 44 + 2 * 15px;
 }
 
 #vertical-timeline.light-timeline:before {
-  background: #e7eaec;
+  background: black;
 }
 
 .dark-timeline .vertical-timeline-content:before {
@@ -1091,7 +1059,7 @@ $keep: 44 + 2 * 15px;
   height: 40px;
   border-radius: 50%;
   font-size: 16px;
-  border: 3px solid #f1f1f1;
+  border: 3px solid black;
 }
 
 .vertical-timeline-icon i {
@@ -1128,6 +1096,7 @@ $keep: 44 + 2 * 15px;
   position: relative;
   margin-left: 60px;
   background: #fff;
+  color: black;
   border-radius: 0.25em;
   padding: 1em;
 }
@@ -1139,29 +1108,32 @@ $keep: 44 + 2 * 15px;
 }
 
 .vertical-timeline-content h2 {
-  font-weight: 400;
+  font-weight: 600;
   letter-spacing: 0px;
   margin-top: 4px;
+  color: black;
 }
 
 .vertical-timeline-content p {
-  font-size: 15px;
+  font-size: 20px;
   line-height: 25px;
+  font-weight: 600;
+  color: black;
   margin: 1em 0;
   line-height: 1.6;
 }
 
 .vertical-timeline-content .vertical-date {
   float: left;
-  font-weight: 500;
+  font-weight: 600;
   max-width: 250px;
   color: black;
   line-height: 22px;
 }
 
 .vertical-date small {
   color: black;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .vertical-timeline-content::before {
@@ -1183,7 +1155,7 @@ $keep: 44 + 2 * 15px;
     font-size: 15px;
     line-height: 25px;
     font-family: Helvetica, Arial, sans-serif;
-    color: #5b5b5b;
+    color: black;
   }
 }
 
@@ -1216,6 +1188,7 @@ $keep: 44 + 2 * 15px;
     left: 122%;
     top: 2px;
     font-size: 18px;
+    padding-top: 20px;
   }
   .center-orientation
     .vertical-timeline-block:nth-child(even)
@@ -1577,3 +1550,8 @@ ul {
 #animation-wrapper {
   background: transparent;
 }
+
+
+.section-reason{
+  margin-top: 3em;
+}
diff --git a/entwurf/index.html b/entwurf/index.html
@@ -31,14 +31,12 @@ <h3>Der Entwurf des Berliner Transparenzgesetzes</h3>
           <a href="mailto:[email protected]">[email protected]</a>.<br>
         </p>
         <a class="" href="https://berlin.transparenzgesetz.de/">
-          <div class="container fond__blue">
             <h4 class="text__white text-center">Hier online mitschreiben, kommentieren und Verbesserungsvorschläge einbringen.</h4>
-          </div>
         </a>
         <br>
-         <a class="" href="https://berlin.transparenzgesetz.de/">
-          <div class="container fond__blue">
-            <h4 class="text__white text-center">Hier Gesetzentwurf herunterladen.</h4>
+         <a class="" href="/static/documents/BerlTG-E.pdf">
+            <h4 class="text__white text-center">Hier den aktuellen Gesetzentwurf herunterladen.</h4>
+          </a>
           </div>
         </a>
         <br>

diff --git a/gesetz/index.html b/gesetz/index.html
@@ -21,29 +21,20 @@
 <!-- About -->
 <div class="beneath-sections jumbotron fond__white">
   <div class="container text__black">
-    <div class="row">
-      <div class="col-lg-8 col-lg-offset-2">
-        <!--  
-        <p class="introtext text-center">
-          Das erste zweitägige Fest der Open Knowledge Foundation Deutschland für alle, die Entwicklungen im Bereich Open Data, Transparenz, Data Literacy und Civic Tech in Deutschland gestalten.
-        </p><br>
-        -->
-        <h3>Der Entwurf des Transparenzgesetzes</h3>
+    <div class="row section-reason">
+      <div class="col-lg-12 mb-5">
+        <h1>{{ page.title }}</h1>        
         <p>
           Das neue Transparenzgesetz soll regeln, welche Informationen des Staates künftig aktiv veröffentlicht werden müssen und welche auf Antrag zugänglich gemacht werden müssen. Dazu ist es besonders wichtig, festzulegen, für wen das Gesetz gilt, wie die Bedingungen für den Informationszugang sind und welche Ausnahmen es gibt. Unsere Ideen dazu finden Sie hier.
 
           Kontaktieren können Sie uns hier: <a href="mailto:[email protected]">[email protected]</a>.<br>
         </p>
         <a class="" href="https://berlin.transparenzgesetz.de/" target=_blank>
-          <div class="container fond__blue">
-            <h4 class="text__white text-center">Hier online ansehen, kommentieren und Verbesserungsvorschläge einbringen.</h4>
-          </div>
+          <h4 >Hier online ansehen, kommentieren und Verbesserungsvorschläge einbringen.</h4>
         </a>
         <br>
          <a class="" href="BlnTG.pdf">
-          <div class="container fond__blue">
-            <h4 class="text__white text-center">Hier Gesetzentwurf herunterladen.</h4>
-          </div>
+          <h4>Hier Gesetzentwurf herunterladen.</h4>
         </a>
         <br>
 <!--