Commit 30d122f2 authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files

fix styling issues

parent ab4ec157
...@@ -34,10 +34,6 @@ content { ...@@ -34,10 +34,6 @@ content {
background: #142736; background: #142736;
overflow: -moz-scrollbars-vertical; overflow: -moz-scrollbars-vertical;
overflow-y: scroll; overflow-y: scroll;
min-height: 1fr;
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: 100%;
} }
logo { logo {
...@@ -75,6 +71,13 @@ map { ...@@ -75,6 +71,13 @@ map {
background-size: cover; background-size: cover;
} }
.episode-wrapper {
display: grid;
height: 100%;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
.description { .description {
padding: 30px 7% 0px 7%; padding: 30px 7% 0px 7%;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
...@@ -83,7 +86,8 @@ map { ...@@ -83,7 +86,8 @@ map {
} }
.video-navigation { .video-navigation {
margin: 20px 7%; margin: 20px 7% 0px 7%;
padding-bottom: 20px;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-flow: row; flex-flow: row;
......
...@@ -35,6 +35,10 @@ ...@@ -35,6 +35,10 @@
</map> </map>
<content> <content>
<div class='episode-wrapper'>
<div class='empty'></div>
<div class="description"> <div class="description">
<h2>Werkübersicht</h2> <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. 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.
...@@ -45,6 +49,8 @@ ...@@ -45,6 +49,8 @@
<a href='#' ref='video/video1.html' class='btn'>Zur ersten Episode</a> <a href='#' ref='video/video1.html' class='btn'>Zur ersten Episode</a>
</div> </div>
</div>
</content> </content>
</div> </div>
......
<html> <html>
<body> <body>
<div class='episode-wrapper'>
<div class='empty'></div>
<div class="description"> <div class="description">
<h2>Werkübersicht</h2> <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. 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.
...@@ -9,5 +12,7 @@ ...@@ -9,5 +12,7 @@
<a href='#' ref='overview.html' class='btn'>Zur Werkübersicht</a> <a href='#' ref='overview.html' class='btn'>Zur Werkübersicht</a>
<a href='#' ref='video/video1.html' class='btn'>Zur ersten Episode</a> <a href='#' ref='video/video1.html' class='btn'>Zur ersten Episode</a>
</div> </div>
</div>
</body> </body>
</html> </html>
<html> <html>
<body> <body>
<div class='episode-wrapper'>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
...@@ -48,8 +50,10 @@ ...@@ -48,8 +50,10 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' src="overview.html" class="btn">Zur Werkübersicht</a> <a href='#' ref="overview.html" class="btn">Zur Werkübersicht</a>
<a href="#" src='video/video2.html' class="btn">Zur nächsten Episode</a> <a href="#" ref='video/video2.html' class="btn">Zur nächsten Episode</a>
</div>
</div> </div>
</body> </body>
......
<html> <html>
<body> <body>
<div class='episode-wrapper'>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
...@@ -51,6 +53,8 @@ ...@@ -51,6 +53,8 @@
<a href='#' ref="video/video9.html" class="btn">Zur vorherigen Episode</a> <a href='#' ref="video/video9.html" class="btn">Zur vorherigen Episode</a>
<a href="#" ref='overview.html' class="btn">Zur Werkübersicht</a> <a href="#" ref='overview.html' class="btn">Zur Werkübersicht</a>
</div> </div>
</div>
</body> </body>
<script language="javascript"> <script language="javascript">
......
<html> <html>
<body> <body>
<div class='episode-wrapper'>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
...@@ -52,6 +54,8 @@ ...@@ -52,6 +54,8 @@
<a href="#" ref='video/video3.html' class="btn">Zur nächsten Episode</a> <a href="#" ref='video/video3.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div>
</body> </body>
<script language="javascript"> <script language="javascript">
......
<html> <html>
<body> <body>
<div class='episode-wrapper'>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
...@@ -52,6 +54,8 @@ ...@@ -52,6 +54,8 @@
<a href="#" ref='video/video4.html' class="btn">Zur nächsten Episode</a> <a href="#" ref='video/video4.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div>
</body> </body>
<script language="javascript"> <script language="javascript">
......
<html> <html>
<body> <body>
<div class='episode-wrapper'>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
...@@ -52,6 +54,8 @@ ...@@ -52,6 +54,8 @@
<a href="#" ref='video/video5.html' class="btn">Zur nächsten Episode</a> <a href="#" ref='video/video5.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div>
</body> </body>
<script language="javascript"> <script language="javascript">
......
<html> <html>
<body> <body>
<div class='episode-wrapper'>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
...@@ -52,6 +54,8 @@ ...@@ -52,6 +54,8 @@
<a href="#" ref='video/video6.html' class="btn">Zur nächsten Episode</a> <a href="#" ref='video/video6.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div>
</body> </body>
<script language="javascript"> <script language="javascript">
......
<html> <html>
<body> <body>
<div class='episode-wrapper'>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
...@@ -52,6 +54,8 @@ ...@@ -52,6 +54,8 @@
<a href="#" ref='video/video7.html' class="btn">Zur nächsten Episode</a> <a href="#" ref='video/video7.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div>
</body> </body>
<script language="javascript"> <script language="javascript">
......
<html> <html>
<body> <body>
<div class='episode-wrapper'>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
...@@ -52,6 +54,8 @@ ...@@ -52,6 +54,8 @@
<a href="#" ref='video/video8.html' class="btn">Zur nächsten Episode</a> <a href="#" ref='video/video8.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div>
</body> </body>
<script language="javascript"> <script language="javascript">
......
<html> <html>
<body> <body>
<div class='episode-wrapper'>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
...@@ -52,6 +54,8 @@ ...@@ -52,6 +54,8 @@
<a href="#" ref='video/video9.html' class="btn">Zur nächsten Episode</a> <a href="#" ref='video/video9.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div>
</body> </body>
<script language="javascript"> <script language="javascript">
......
<html> <html>
<body> <body>
<div class='episode-wrapper'>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
...@@ -67,6 +69,8 @@ ...@@ -67,6 +69,8 @@
<a href="#" ref='video/video10.html' class="btn">Zur nächsten Episode</a> <a href="#" ref='video/video10.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div>
</body> </body>
<script language="javascript"> <script language="javascript">
......
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