Skip to content

GitLab

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

responsive grid layout

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