make navbar mobile friendly
This commit is contained in:
ajuvercr
parent
eae4f0721c
commit
b2104b8f69
6 changed files with 77 additions and 17 deletions
1
content/assets/navbar_icons/FAQ.svg
Normal file
1
content/assets/navbar_icons/FAQ.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="question" class="svg-inline--fa fa-question fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"></path></svg>
|
||||
|
After Width: | Height: | Size: 816 B |
1
content/assets/navbar_icons/Ontdek.svg
Normal file
1
content/assets/navbar_icons/Ontdek.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="compass" class="svg-inline--fa fa-compass fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M347.94 129.86L203.6 195.83a31.938 31.938 0 0 0-15.77 15.77l-65.97 144.34c-7.61 16.65 9.54 33.81 26.2 26.2l144.34-65.97a31.938 31.938 0 0 0 15.77-15.77l65.97-144.34c7.61-16.66-9.54-33.81-26.2-26.2zm-77.36 148.72c-12.47 12.47-32.69 12.47-45.16 0-12.47-12.47-12.47-32.69 0-45.16 12.47-12.47 32.69-12.47 45.16 0 12.47 12.47 12.47 32.69 0 45.16zM248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 448c-110.28 0-200-89.72-200-200S137.72 56 248 56s200 89.72 200 200-89.72 200-200 200z"></path></svg>
|
||||
|
After Width: | Height: | Size: 747 B |
1
content/assets/navbar_icons/Quiz.svg
Normal file
1
content/assets/navbar_icons/Quiz.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pencil-alt" class="svg-inline--fa fa-pencil-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg>
|
||||
|
After Width: | Height: | Size: 705 B |
1
content/assets/navbar_icons/search.svg
Normal file
1
content/assets/navbar_icons/search.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
|
||||
|
After Width: | Height: | Size: 577 B |
|
|
@ -34,8 +34,6 @@ main {
|
|||
justify-content: space-between;
|
||||
width: calc(100%-5rem);
|
||||
|
||||
min-height: 100%;
|
||||
|
||||
padding: 2rem 2rem 0 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -84,14 +82,6 @@ footer {
|
|||
margin-top: auto;
|
||||
}
|
||||
|
||||
.navbar:hover {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.navbar:hover .link-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -99,11 +89,12 @@ footer {
|
|||
height: 5rem;
|
||||
color: var(--yellow);
|
||||
text-decoration: none;
|
||||
transition: 0.2s;
|
||||
transition: 0.4s;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-link__logo {
|
||||
justify-content: center;
|
||||
.nav-link a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
|
|
@ -140,6 +131,68 @@ footer {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
/* Small screens */
|
||||
@media only screen and (max-width: 600px) {
|
||||
.navbar {
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large screens */
|
||||
@media only screen and (min-width: 600px) {
|
||||
.navbar {
|
||||
top: 0;
|
||||
width: 5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.nav-link__logo {
|
||||
justify-content: center;
|
||||
transform: rotate(-90deg);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.navbar:hover,
|
||||
.navbar:focus,
|
||||
.navbar:focus-within {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.navbar:hover .link-text,
|
||||
.navbar:focus .link-text,
|
||||
.navbar:focus-within .link-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar:hover .nav-link__logo,
|
||||
.navbar:focus .nav-link__logo,
|
||||
.navbar:focus-within .nav-link__logo {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,16 +9,19 @@
|
|||
<% for i in navigables %>
|
||||
<li class="nav-item">
|
||||
<a href="<%= i.path %>" class="nav-link">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="font-awesome-flag" class="svg-inline--fa fa-font-awesome-flag fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M444.373 359.424c0 7.168-6.144 10.24-13.312 13.312-28.672 12.288-59.392 23.552-92.16 23.552-46.08 0-67.584-28.672-122.88-28.672-39.936 0-81.92 14.336-115.712 29.696-2.048 1.024-4.096 1.024-6.144 2.048v77.824c0 21.405-16.122 34.816-33.792 34.816-19.456 0-34.816-15.36-34.816-34.816V102.4C12.245 92.16 3.029 75.776 3.029 57.344 3.029 25.6 28.629 0 60.373 0s57.344 25.6 57.344 57.344c0 18.432-8.192 34.816-22.528 45.056v31.744c4.124-1.374 58.768-28.672 114.688-28.672 65.27 0 97.676 27.648 126.976 27.648 38.912 0 81.92-27.648 92.16-27.648 8.192 0 15.36 6.144 15.36 13.312v240.64z"></path></svg>
|
||||
<%= @items["/assets/navbar_icons/"+i[:naam]+".svg"].compiled_content %>
|
||||
<span class="link-text"><%= i[:naam] %> </span>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
|
||||
<li class="nav-item">
|
||||
<form class="nav-link" action="/search.html">
|
||||
<input type="search" name="q" placeholder="Zoek…">
|
||||
</form>
|
||||
<div class="nav-link">
|
||||
<a href="/search.html"><%= @items["/assets/navbar_icons/search.svg"].compiled_content %></a>
|
||||
<form class="link-text" action="/search.html">
|
||||
<input type="search" name="q" placeholder="Zoek…">
|
||||
</form>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in a new issue