fixed mobile view

This commit is contained in:
Lars Westermann 2019-04-15 18:14:28 +02:00
parent 788273ea99
commit a892b9963e
Signed by: lars.westermann
GPG key ID: 9D417FA5BB9D5E1D

View file

@ -3,28 +3,42 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>47.0 KIF</title> <title>47.0 KIF</title>
</head> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <style>
@font-face { @font-face {
font-family: Montserrat; font-family: Montserrat;
src: url('Montserrat-Bold.ttf') src: url('Montserrat-Bold.ttf')
} }
body { body {
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 20pt; font-size: 20pt;
max-width: 400px; max-width: 400px;
margin: auto; margin: auto;
background: #fff;
} }
body > div { body > div {
width: 400px; width: 100%;
} }
nav { nav {
margin: -34px 30px 0 30px;
width: 300px;
border: solid 20px rgb(177,225,28);
border-radius: 30px; border-radius: 30px;
width: 77%;
padding: 4%;
background: rgb(177, 225, 28);
margin-top: -7%;
margin-left: auto;
margin-right: auto;
} }
nav > a {
nav div {
background: #fff;
border-radius: 18px;
}
nav a {
display: block; display: block;
text-decoration: none; text-decoration: none;
color: rgb(177, 225, 28); color: rgb(177, 225, 28);
@ -32,25 +46,31 @@
border-top: solid 10px rgb(177, 225, 28); border-top: solid 10px rgb(177, 225, 28);
padding: 10px 0; padding: 10px 0;
} }
nav > a:hover {
nav a:hover {
background-color: rgb(177, 225, 28); background-color: rgb(177, 225, 28);
color: white; color: white;
outline: none;
} }
nav > a:first-child {
nav a:first-child {
border: none; border: none;
} }
</style> </style>
</head>
<body> <body>
<div> <div>
<img src="Logo.svg"> <img src="Logo.svg">
</div> </div>
<nav> <nav>
<div>
<a href="anmeldung">Anmeldung</a> <a href="anmeldung">Anmeldung</a>
<!-- <a href="#">Teilnehmerliste</a> --> <!-- <a href="#">Teilnehmerliste</a> -->
<a href="wiki">Wiki</a> <a href="wiki">Wiki</a>
<a href="kulturtag">Kulturtag</a> <a href="kulturtag">Kulturtag</a>
<a href="cfd">Call for Decoration</a> <a href="cfd">Call for Decoration</a>
<a href="twitter">Twitter</a> <a href="twitter">Twitter</a>
</div>
</nav> </nav>
</body> </body>
</html> </html>