Commit 6ba729e1 authored by Jonas Heinrich's avatar Jonas Heinrich

responsive grid layout

parent f234c6c8
......@@ -9,50 +9,88 @@ body {
.container {
height:100vh;
display: grid;
grid-template-rows: 80px 1fr;
grid-template-columns: 50% 50%;
grid-template-rows: 80px 85px 300px 1fr;
grid-template-columns: 100%;
grid-row-gap: 0px;
grid-template-areas:
"logo"
"navigation"
"map"
"content"
;
}
topmenu-left {
background: white;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
topmenu-right {
navigation {
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 {
content {
background: #142736;
}
@media screen and (min-width: 44.001em) {
.container {
height:100vh;
display: grid;
grid-template-rows: 80px 1fr;
grid-template-columns: 50% 50%;
grid-row-gap: 0px;
grid-template-areas:
"logo navigation"
"map content"
;
}
navigation {
display: block;
}
content {
overflow-y: auto;
}
}
logo {
background: white;
}
.logo {
padding: 10px;
}
navigation ul li {
display: inline-block;
margin-left: 25px;
font-weight: 700;
font-size: 12px;
}
topmenu-right ul li a {
navigation ul li a {
text-decoration: none;
color: #142736;
}
mappane {
.prose-big {
font-size: 18px;
line-height: 30px;
}
map {
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;
......@@ -60,10 +98,3 @@ h2 {
padding-top: 5px;
padding-bottom: 5px;
}
.prose-big {
font-size: 18px;
line-height: 30px;
}
.logo {
padding: 10px;
}
......@@ -12,19 +12,19 @@
<body>
<div class="container">
<topmenu-left>
<logo>
<img class="logo" src=images/logo.png>
</topmenu-left>
<topmenu-right>
</logo>
<navigation>
<ul>
<li><a href=overview.html>Werkübersicht</a></li>
<li><a href=about.html>Über das Projekt</a></li>
</ul>
</topmenu-right>
<mappane>
</navigation>
<map>
<div id='map' style='width: 100%; height: 100%;'></div>
</mappane>
<videopane>
</map>
<content>
<video class="player" poster="images/player.png"></video>
<div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
......@@ -38,8 +38,7 @@
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>
</content>
</div>
<script>
......
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