Commit f234c6c8 authored by Jonas Heinrich's avatar Jonas Heinrich

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

parent b39e65e5
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;
}
<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>
<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>
<img class="player" src=images/player.png>
<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 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>
</body>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoib25ueSIsImEiOiJjajhvdnc1eTgwOTM3MnFudG81MXlpZGJrIn0.lDC0PwJDf704okmeI6w61g';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9'
});
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment