Mobile friendly navigation
This commit is contained in:
parent
ccf9e3540d
commit
65accef040
|
@ -1,8 +1,10 @@
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a class="button" href="/">Home</a></li>
|
<li class="one"><a class="button" href="/">Home</a></li>
|
||||||
<li><a class="button" href="/about">About</a></li>
|
<li class="two"><a class="button" href="/about">About</a></li>
|
||||||
<li><a class="button" href="/blog">Blog</a></li>
|
<li class="three"><a class="button" href="/contact">Contact</a></li>
|
||||||
<li><a class="button" href="/rss.xml">RSS</a></li>
|
<li class="four"><a class="button" href="/donate">Donate</a></li>
|
||||||
|
<li class="five"><a class="button" href="/blog">Blog</a></li>
|
||||||
|
<li class="six"><a class="button" href="/rss.xml">RSS</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
@media only screen and (min-width: 600px) {
|
||||||
nav {
|
nav {
|
||||||
max-width: 20cm;
|
max-width: 20cm;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
@ -5,7 +6,6 @@ nav {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
max-width: 10cm;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -18,3 +18,29 @@ nav {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
nav {
|
||||||
|
font-size: 20px;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
padding: 0px;
|
||||||
|
margin: auto;
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
grid-auto-rows: minmax(50px, auto);
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 0px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue