Commit f020901e authored by Jonas Heinrich's avatar Jonas Heinrich

enhance several styling issues

parent ac02c548
body {
margin: 0;
margin: 0 !important;
padding: 0 !important;
font-family: 'Open Sans Bold', sans-serif;
font-size: 14px;
color: white;
......@@ -11,11 +12,10 @@ p {
}
.container {
height:100vh;
height: 100vh;
display: grid;
grid-template-rows: 80px 1fr;
grid-template-rows: auto 1fr;
grid-template-columns: 55% 45%;
grid-row-gap: 0px;
grid-template-areas:
"logo navigation"
"map content"
......@@ -24,14 +24,20 @@ p {
navigation {
background: #f5f6f7;
text-align: right;
padding: 15px 30px 15px 0px;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 30px;
}
content {
background: #142736;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
min-height: 1fr;
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: 100%;
}
logo {
......@@ -66,22 +72,52 @@ map {
}
.description {
padding: 20px 0px;
width: 85%;
margin: auto;
padding: 30px 7% 0px 7%;
font-family: 'Montserrat', sans-serif;
font-size: 0.9em;
line-height: 20px;
}
h2 {
font-weight: normal;
font-size: 22px;
line-height: 60px;
.video-navigation {
margin: 20px 7%;
display: flex;
flex-grow: 1;
flex-flow: row;
flex-direction: row;
align-items: center;
flex-wrap:wrap;
}
h3 {
font-size: 16px;
line-height: 20px;
.btn {
font-family: 'Open Sans', sans-serif;
background-color: rgb(109, 119, 129);
text-align: center;
line-height: 42px;
font-weight: 700;
color: #fff;
border-radius: 3px;
text-decoration: none;
opacity: 1;
flex: 1;
white-space: nowrap; /* Kein Zeilenumbruch */
padding: 0 20px;
margin: 5px;
border-bottom: 3px solid rgb(212, 219, 224);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btn a {
text-decoration: none;
color:inherit;
}
.btn:hover{
background-color: rgb(212, 219, 224);
color: rgb(109, 119, 129);
}
h1, h2, h3, h4, h5, h6 {
......@@ -90,6 +126,16 @@ h1, h2, h3, h4, h5, h6 {
margin: 0;
}
h2 {
font-size: 22px;
margin-bottom: 20px;
}
h3 {
font-size: 16px;
line-height: 20px;
}
@media only screen and (max-device-width: 480px) {
.container {
......@@ -148,46 +194,3 @@ h1, h2, h3, h4, h5, h6 {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
color: black;
}
.btn {
font-family: 'Open Sans', sans-serif;
/* background-color: rgb(58, 160, 255); */
background-color: rgb(109, 119, 129);
text-align: center;
line-height: 42px;
font-weight: 700;
color: #fff;
border-radius: 3px;
text-decoration: none;
opacity: 1;
margin-top: 10px;
margin-right: 10px;
width: 47%;
border-bottom: 3px solid rgb(212, 219, 224);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.expand {
display: inline-block;
}
.btn a {
text-decoration: none;
color:inherit;
}
.btn:hover{
background-color: rgb(212, 219, 224);
color: rgb(109, 119, 129);
}
.video-navigation {
position: absolute;
bottom: 35px;
width: 580px;
padding-left: 40px;
}
.video-grid {
display: flex;
flex-direction: column;
padding: 0 7% 35px 8%;
padding: 15px 7% 35px 8%;
margin: auto;
}
.video-item {
......
......@@ -19,17 +19,19 @@
<div class="container">
<logo>
<img class="logo" src=images/logo.png>
<img class='logo' src='images/logo.png' ref='main.html'>
<img class="burger_menu" id="burger_menu" src=images/menu.png>
</logo>
<navigation>
<ul>
<li><a href=# id="overview">Werkübersicht</a></li>
<li><a href=# id="about">Über das Projekt</a></li>
</ul>
<div class="wrapper">
<ul>
<li><a href='#' ref='overview.html' class="nav-item">Werkübersicht</a></li>
<li><a href='#' ref='about.html' class="nav-item">Über das Projekt</a></li>
</ul>
</div>
</navigation>
<map>
<div id='map' style='width: 100%; height: 100%;'></div>
<!-- <div id='map' style='width: 100%; height: 100%;'></div> -->
</map>
<content>
......@@ -40,8 +42,8 @@
</div>
<div class="video-navigation">
<a href='#' src='overview.html' class="btn expand">Zur Werkübersicht</a>
<a href='#' src='video/video1.html' class="btn expand">Zur ersten Episode</a>
<a href='#' src='overview.html' class='btn'>Zur Werkübersicht</a>
<a href='#' src='video/video1.html' class='btn'>Zur ersten Episode</a>
</div>
</content>
......@@ -54,16 +56,6 @@
<script src="js/map.js"></script>
<script src="js/main.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
});
$( ".btn " ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
</script>
</body>
</html>
$( "#overview" ).click(function() {
load_page( "overview.html" );
});
$( "#about" ).click(function() {
load_page( "about.html" );
});
$( "logo" ).click(function() {
if ($("navigation").css("height") == "0px"){
$("navigation").css("height","50px");
......@@ -14,8 +6,8 @@ $( "logo" ).click(function() {
}
});
$( ".btn + :not([class=disabled])" ).click(function() {
var link = $(this).find('a:first').attr('src');
$('body').on('click','.btn + :not([class=disabled]), .nav-item, .logo', function() {
var link = $(this).attr('ref');
load_page(link);
});
......
......@@ -33,7 +33,7 @@ map.on('load', function() {
map.setMaxBounds(bounds);
});
map.addLayer({
/* map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
......@@ -56,7 +56,7 @@ map.on('load', function() {
],
'fill-extrusion-opacity': .6
}
}, labelLayerId);
}, labelLayerId); */
map.addSource('museum', { type: 'geojson', data: 'geojson/museum.geojson' });
......
<div class="description">
<h2>Werkübersicht</h2>
Unsere Virtuelle-Ausstellung beginnt mit velit magni aliquid minus. Repellendus et harum consectetur alias ad. Suscipit vel assumenda quia similique et quia doloribus. Maiores sed animi voluptate et perferendis eum quia. Et est veniam temporibus quia ipsa repudiandae autem quo. Sed harum assumenda accusantium mollitia.
</div>
<div class="video-navigation">
<a href='#' src='overview.html' class='btn'>Zur Werkübersicht</a>
<a href='#' src='video/video1.html' class='btn'>Zur ersten Episode</a>
</div>
This diff is collapsed.
......@@ -49,8 +49,8 @@
</div>
<div class="video-navigation">
<a href='#' src="overview.html" class="btn expand">Zur Werkübersicht</a>
<a href="#" src='video/video2.html' class="btn expand">Zur nächsten Episode</a>
<a href='#' src="overview.html" class="btn">Zur Werkübersicht</a>
<a href="#" src='video/video2.html' class="btn">Zur nächsten Episode</a>
</div>
</body>
......@@ -58,11 +58,6 @@
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
$( ".btn " ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
});
</script>
</html>
......@@ -48,19 +48,14 @@
</div>
<div class="video-navigation">
<a href='#' src="video/video9.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='overview.html' class="btn expand">Zur Werkübersicht</a>
<a href='#' src="video/video9.html" class="btn">Zur vorherigen Episode</a>
<a href="#" src='overview.html' class="btn">Zur Werkübersicht</a>
</div>
</body>
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
});
</script>
</html>
......@@ -48,8 +48,8 @@
</div>
<div class="video-navigation">
<a href='#' src="video/video1.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video3.html' class="btn expand">Zur nächsten Episode</a>
<a href='#' src="video/video1.html" class="btn">Zur vorherigen Episode</a>
<a href="#" src='video/video3.html' class="btn">Zur nächsten Episode</a>
</div>
</body>
......@@ -57,11 +57,6 @@
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
});
</script>
</html>
......@@ -48,8 +48,8 @@
</div>
<div class="video-navigation">
<a href='#' src="video/video2.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video4.html' class="btn expand">Zur nächsten Episode</a>
<a href='#' src="video/video2.html" class="btn">Zur vorherigen Episode</a>
<a href="#" src='video/video4.html' class="btn">Zur nächsten Episode</a>
</div>
</body>
......@@ -57,11 +57,6 @@
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
});
</script>
</html>
......@@ -48,8 +48,8 @@
</div>
<div class="video-navigation">
<a href='#' src="video/video3.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video5.html' class="btn expand">Zur nächsten Episode</a>
<a href='#' src="video/video3.html" class="btn">Zur vorherigen Episode</a>
<a href="#" src='video/video5.html' class="btn">Zur nächsten Episode</a>
</div>
</body>
......@@ -57,11 +57,6 @@
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
});
</script>
</html>
......@@ -48,8 +48,8 @@
</div>
<div class="video-navigation">
<a href='#' src="video/video4.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video6.html' class="btn expand">Zur nächsten Episode</a>
<a href='#' src="video/video4.html" class="btn">Zur vorherigen Episode</a>
<a href="#" src='video/video6.html' class="btn">Zur nächsten Episode</a>
</div>
</body>
......@@ -57,11 +57,6 @@
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
});
</script>
</html>
......@@ -48,8 +48,8 @@
</div>
<div class="video-navigation">
<a href='#' src="video/video5.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video7.html' class="btn expand">Zur nächsten Episode</a>
<a href='#' src="video/video5.html" class="btn">Zur vorherigen Episode</a>
<a href="#" src='video/video7.html' class="btn">Zur nächsten Episode</a>
</div>
</body>
......@@ -57,11 +57,6 @@
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
});
</script>
</html>
......@@ -48,8 +48,8 @@
</div>
<div class="video-navigation">
<a href='#' src="video/video6.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video8.html' class="btn expand">Zur nächsten Episode</a>
<a href='#' src="video/video6.html" class="btn">Zur vorherigen Episode</a>
<a href="#" src='video/video8.html' class="btn">Zur nächsten Episode</a>
</div>
</body>
......@@ -57,11 +57,6 @@
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
});
</script>
</html>
......@@ -48,8 +48,8 @@
</div>
<div class="video-navigation">
<a href='#' src="video/video7.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video9.html' class="btn expand">Zur nächsten Episode</a>
<a href='#' src="video/video7.html" class="btn">Zur vorherigen Episode</a>
<a href="#" src='video/video9.html' class="btn">Zur nächsten Episode</a>
</div>
</body>
......@@ -57,11 +57,6 @@
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
});
</script>
</html>
......@@ -48,8 +48,8 @@
</div>
<div class="video-navigation">
<a href='#' src="video/video8.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video10.html' class="btn expand">Zur nächsten Episode</a>
<a href='#' src="video/video8.html" class="btn">Zur vorherigen Episode</a>
<a href="#" src='video/video10.html' class="btn">Zur nächsten Episode</a>
</div>
</body>
......@@ -57,11 +57,6 @@
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
});
</script>
</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