make right pane scrollable, fix text style, add top menu, add mapbox gl javascript map

f234c6c8 · Jonas Heinrich · b39e65e5 · f234c6c8 · f234c6c8
Commit f234c6c8 authored Dec 18, 2017 by Jonas Heinrich
Hide whitespace changes
Inline Side-by-side

Showing with 117 additions and 79 deletions

css/main.css css/main.css +69 -0

index.html index.html +48 -79

No files found.
--- a/css/main.css
+++ b/css/main.css
+body {
+  margin: 0;
+  font-family: 'Open Sans Bold', sans-serif;
+  font-size: 14px;
+  line-height: 25px;
+  color: white;
+}
+
+.container {
+  height:100vh;
+  display: grid;
+  grid-template-rows: 80px 1fr;
+  grid-template-columns: 50% 50%;
+  grid-row-gap: 0px;
+}
+topmenu-left {
+  background: white;
+  grid-column-start: 1;
+  grid-column-end: 2;
+  grid-row-start: 1;
+  grid-row-end: 2;
+}
+topmenu-right {
+  background: #f5f6f7;
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 2;
+  text-align: right;
+  padding: 15px 30px 15px 0px;
+}
+topmenu-right ul li {
+  display: inline-block;
+  margin-left: 25px;
+  font-weight: 700;
+  font-size: 12px;
+}
+topmenu-right ul li a {
+  text-decoration: none;
+  color: #142736;
+}
+mappane {
+  background-image: url('../images/map.png');
+  background-size: cover;
+}
+videopane {
+  background: #142736;
+  overflow-y: scroll;
+}
+.player {
+  width: 100%;
+}
+.description {
+  padding: 15px 80px 15px 80px;
+}
+h2 {
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 30px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.prose-big {
+  font-size: 18px;
+  line-height: 30px;
+}
+.logo {
+  padding: 10px;
+}
--- a/index.html
+++ b/index.html
-<html>
-<head>
-  <style type="text/css">
-    body {
-      margin: 0;
-      font-family: 'Open Sans Bold', sans-serif;
-      font-size: 14px;
-      line-height: 25px;
-    }
+<!doctype html>
+<html lang="de">

-    .container {
-      height:100vh;
-      display: grid;
-      grid-template-rows: 80px 1fr;
-      grid-template-columns: 50% 50%;
-      grid-row-gap: 0px;
-    }
-    topmenu-left {
-      background: white;
-      grid-column-start: 1;
-      grid-column-end: 2;
-      grid-row-start: 1;
-      grid-row-end: 2;
-    }
-    topmenu-right {
-      background: white;
-      grid-column-start: 2;
-      grid-column-end: 3;
-      grid-row-start: 1;
-      grid-row-end: 2;
-      text-align: right;
-      padding: 30px;
-    }
-    mappane {
-      background-image: url('images/map.png');
-      background-size: cover;
-    }
-    videopane {
-      background: #142736;
-      color: white;
-    }
-    .player {
-      width: 100%;
-    }
-    .description {
-      padding: 15px;
-    }
-    h2 {
-      font-weight: normal;
-      font-size: 22px;
-      line-height: 30px;
-      padding-top: 5px;
-      padding-bottom: 5px;
-    }
-    .prose-big {
-      font-size: 18px;
-      line-height: 30px;
-    }
-    .logo {
-      padding: 10px;
-    }
-  </style>
-</head>
+  <head>
+    <meta data-react-helmet="true" charset="utf-8"/>
+    <title>Ausstellung-Virtuell | Folge und Varianz</title>
+    <link rel="stylesheet" type="text/css" href="css/main.css">
+    <script src='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.js'></script>
+    <link href='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
+  </head>

-<body>
+  <body>

-  <div class="container">
-    <topmenu-left>
-      <img class="logo" src=images/logo.png>
-    </topmenu-left>
-    <topmenu-right>Menu</topmenu-right>
-    <mappane></mappane>
-    <videopane>
-      <img class="player" src=images/player.png>
-      <div class="description">
-        <h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
-        <p class="prose-big">Bla bla</p>
-        Bla bla bla
-      </div>
+    <div class="container">
+      <topmenu-left>
+        <img class="logo" src=images/logo.png>
+      </topmenu-left>
+      <topmenu-right>
+        <ul>
+          <li><a href=overview.html>Werkübersicht</a></li>
+          <li><a href=about.html>Über das Projekt</a></li>
+        </ul>
+      </topmenu-right>
+      <mappane>
+        <div id='map' style='width: 100%; height: 100%;'></div>
+      </mappane>
+      <videopane>
+        <video class="player" poster="images/player.png"></video>
+        <div class="description">
+          <h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
+          <p class="prose-big">Bla bla</p>
+          Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
+          Bla bla bla Bla bla bla Bla bla bla
+          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 bla
+          Bla 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 bla
+          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>

-    </videopane>
-  </div>
+      </videopane>
+    </div>

-</body>
+    <script>
+      mapboxgl.accessToken = 'pk.eyJ1Ijoib25ueSIsImEiOiJjajhvdnc1eTgwOTM3MnFudG81MXlpZGJrIn0.lDC0PwJDf704okmeI6w61g';
+      var map = new mapboxgl.Map({
+      container: 'map',
+      style: 'mapbox://styles/mapbox/light-v9'
+      });
+    </script>
+
+  </body>

 </html>