erin
/
website
1
1
Fork 0
Code Issues Pull Requests Releases Activity

Mobile friendly navigation

This commit is contained in:
~erin 2022-03-05 14:23:43 -05:00
parent ccf9e3540d
commit 65accef040
No known key found for this signature in database
GPG Key ID: DA70E064A8C70F44
2 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_includes/navigation.liquid
View File

@ -1,8 +1,10 @@
<nav>
<ul>
<li><a class="button" href="/">Home</a></li>
<li><a class="button" href="/about">About</a></li>
<li><a class="button" href="/blog">Blog</a></li>
<li><a class="button" href="/rss.xml">RSS</a></li>
<li class="one"><a class="button" href="/">Home</a></li>
<li class="two"><a class="button" href="/about">About</a></li>
<li class="three"><a class="button" href="/contact">Contact</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>
</nav>

28
_scss/_navigation.scss
View File

@ -1,3 +1,4 @@
@media only screen and (min-width: 600px) {
nav {
max-width: 20cm;
margin: auto;
@ -5,7 +6,6 @@ nav {
font-size: 20px;
ul {
max-width: 10cm;
list-style: none;
margin: auto;
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;
}
}
}
}