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> <!doctype html>
<head> <html lang="de">
<style type="text/css">
body {
margin: 0;
font-family: 'Open Sans Bold', sans-serif;
font-size: 14px;
line-height: 25px;
}
.container { <head>
height:100vh; <meta data-react-helmet="true" charset="utf-8"/>
display: grid; <title>Ausstellung-Virtuell | Folge und Varianz</title>
grid-template-rows: 80px 1fr; <link rel="stylesheet" type="text/css" href="css/main.css">
grid-template-columns: 50% 50%; <script src='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.js'></script>
grid-row-gap: 0px; <link href='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
} </head>
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>
<body> <body>
<div class="container"> <div class="container">
<topmenu-left> <topmenu-left>
<img class="logo" src=images/logo.png> <img class="logo" src=images/logo.png>
</topmenu-left> </topmenu-left>
<topmenu-right>Menu</topmenu-right> <topmenu-right>
<mappane></mappane> <ul>
<videopane> <li><a href=overview.html>Werkübersicht</a></li>
<img class="player" src=images/player.png> <li><a href=about.html>Über das Projekt</a></li>
<div class="description"> </ul>
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2> </topmenu-right>
<p class="prose-big">Bla bla</p> <mappane>
Bla bla bla <div id='map' style='width: 100%; height: 100%;'></div>
</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> </videopane>
</div> </div>
</body> <script>
mapboxgl.accessToken = 'pk.eyJ1Ijoib25ueSIsImEiOiJjajhvdnc1eTgwOTM3MnFudG81MXlpZGJrIn0.lDC0PwJDf704okmeI6w61g';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9'
});
</script>
</body>
</html> </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