fix several styling issues

about.html

@@ -3,6 +3,7 @@
     <div class="description">
       <h2>Herzlich Willkommen zu Ausstellung-Virtuell</h2>
       <p class="prose-big">Bla bla</p>
+    </div>
 
       <section class="grid">
             <span class="grid__item">
@@ -34,7 +35,7 @@
                </div>
              </span>
              <span class="grid__item">
-             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+             <div class="profile-img clip" style="background-image: url('images/profiles/mueller-quade.jpeg'); background-size: cover; background-position: 50% 0;"></div>
                <div class="meta center">
                  <h3 class="meta__title">Insa Müller-Quade</h3>
                  <span class="quiet small">Moderation</span>
@@ -55,7 +56,7 @@
                </div>
              </span>
              <span class="grid__item">
-             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+             <div class="profile-img clip" style="background-image: url('images/profiles/stetter.jpeg'); background-size: cover; background-position: 50% 0;"></div>
                <div class="meta center">
                  <h3 class="meta__title">Hanna Stetter</h3>
                  <span class="quiet small">Moderation</span>
@@ -76,20 +77,22 @@
                </div>
              </span>
              <span class="grid__item">
-             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+             <div class="profile-img clip" style="background-image: url('images/profiles/levchenko.jpeg'); background-size: cover; background-position: 50% 0;"></div>
                <div class="meta center">
                  <h3 class="meta__title">Oleksander Levchenko</h3>
                  <span class="quiet small">Dokumentation</span>
                </div>
              </span>
              <span class="grid__item">
-             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+             <div class="profile-img clip" style="background-image: url('images/profiles/schmitt.jpeg'); background-size: cover; background-position: 50% 0;"></div>
                <div class="meta center">
-                 <h3 class="meta__title">Lukas</h3>
+                 <h3 class="meta__title">Lukas Schmitt</h3>
                  <span class="quiet small">Konzeptplanung</span>
                </div>
              </span>
       </section>
+
+<div class="description">
       Wir danken auch:
       <a href=https://www.zak.kit.edu target=new><img src="images/logo_zak_whitened.png" width=100%></a>
       <a href=https://www.kit.edu target=new><img src="images/logo_kit_whitened.png" width=100%></a>

css/main.css

@@ -83,7 +83,6 @@ h2 {
     align-items: stretch;
     position: relative;
     overflow: hidden;
-    padding: 1.5em 0 1em;
     text-align: center;
     user-select: none;
     justify-content: center;
@@ -91,7 +90,7 @@ h2 {
 
 .grid__item {
     position: relative;
-    width: 27%;
+    width: 140px;
     padding-left: 1em;
     padding-right: 1em;
     padding-top: 0;
@@ -210,3 +209,20 @@ h1, h2, h3, h4, h5, h6 {
     font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
     color: black;
 }
+
+#video-navigation {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.btn {
+  color: #155724;
+  background-color: #d4edda;
+  border-color: #c3e6cb;
+  border: 1px solid transparent;
+  vertical-align: middle;
+  flex: 1;
+}

css/videre.css

-body *, * {
-  padding: 0;
-  margin: 0;
-  outline: none;
-  box-sizing: border-box;
-  font-family: "Proxima Nova"; }
-
 .flex {
   display: -webkit-flex;
   display: -moz-flex;

index.html

@@ -11,9 +11,6 @@
     <link rel="stylesheet" type="text/css" href="css/videre.css">
     <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
   	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.eot">
-    <script src="js/jquery-3.2.1.min.js"></script>
-    <script src="js/videre.js"></script>
-    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   </head>
 
   <body>
@@ -82,6 +79,9 @@
       </content>
     </div>
 
+    <script src="js/jquery-3.2.1.min.js"></script>
+    <script src="js/videre.js"></script>
+    <script src="js/jquery-ui-1.12.1.min.js"></script>
     <script src='js/mapbox-gl-0.43.0.js'></script>
     <script src="js/map.js"></script>
     <script src="js/main.js"></script>

video/video1.html

@@ -46,14 +46,28 @@
       Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
       Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
     </div>
-    </content>
+
+    <div id="video-navigation">
+      <div class="btn disabled">
+        < Vorheriges Objekt
+      </div>
+      <div class="btn">
+        Nächstes Objekt >
+      </div>
     </div>
 
+  </content>
+  </div>
+
   </body>
 
   <script language="javascript">
     $(document).ready(function(){
     	$('#player').videre();
+
+      $('.next')click(function() {
+        $( "content" ).load( "video2.html" );
+      });
     });
   </script>
 </html>