Skip to content

GitLab

Commit f234c6c8 authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files

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

parent b39e65e5
Hide whitespace changes
Inline Side-by-side
css/main.css 0 → 100644
View file @ f234c6c8
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;
}
index.html
View file @ f234c6c8
<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>
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