revisit navbar
This commit is contained in:
ajuvercr
parent
8e5b5308ae
commit
eae4f0721c
8 changed files with 169 additions and 87 deletions
1
Rules
1
Rules
|
|
@ -40,6 +40,7 @@ end
|
|||
compile '/homepage.md' do
|
||||
filter :kramdown
|
||||
layout '/homepage.*'
|
||||
layout '/default.*'
|
||||
layout '/base.*'
|
||||
write '/index.html'
|
||||
end
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ naam: FAQ
|
|||
navigable: true
|
||||
order: 3
|
||||
---
|
||||
<div>
|
||||
<h1>FAQ — Vaakgestelde vragen</h1>
|
||||
<% @items.find_all('/faq/*').each do |question| %>
|
||||
<details>
|
||||
|
|
@ -15,3 +16,4 @@ order: 3
|
|||
</details>
|
||||
<% end %>
|
||||
<p>Geen antwoord gevonden op jouw vraag? <a href="mailto:durfdoen@gentsestudentenraad.be?Subject=Vraag Durf Doen">Contacteer ons!</a></p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
naam: Home
|
||||
navigable: true
|
||||
navigable: false
|
||||
order: 1
|
||||
---
|
||||
|
|
|
|||
|
|
@ -27,20 +27,139 @@ body {
|
|||
font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
.align {
|
||||
main {
|
||||
margin-left: 5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: calc(100%-5rem);
|
||||
|
||||
min-height: 100%;
|
||||
|
||||
padding: 2rem 2rem 0 2rem;
|
||||
}
|
||||
|
||||
.beforeTheFold {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.align {
|
||||
max-width: 1280px;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.align .large {
|
||||
max-width: 1500px;
|
||||
}
|
||||
|
||||
.beforeTheFold,
|
||||
main {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
.navbar {
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
background-color: var(--lightblue);
|
||||
width: 5rem;
|
||||
height: 100vh;
|
||||
padding-bottom: 2rem;
|
||||
transition: width 600ms ease;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-item:last-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.navbar:hover {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.navbar:hover .link-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 5rem;
|
||||
color: var(--yellow);
|
||||
text-decoration: none;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.nav-link__logo {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: var(--yellow);
|
||||
color: var(--lightblue);
|
||||
}
|
||||
|
||||
.link-text {
|
||||
display: none;
|
||||
margin-left: 1rem;
|
||||
overflow: hidden;
|
||||
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.nav-link svg {
|
||||
width: 2rem;
|
||||
min-width: 2rem;
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
|
||||
.nav-item input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background-color: var(--white);
|
||||
color: var(--darkblue);
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-item input:hover,
|
||||
.nav-item input:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.logo__image {
|
||||
width: 79px;
|
||||
height: 83px;
|
||||
}
|
||||
|
||||
.fa-primary {
|
||||
color: #ff7eee;
|
||||
}
|
||||
|
||||
.fa-secondary {
|
||||
color: #df49a6;
|
||||
}
|
||||
|
||||
.fa-primary,
|
||||
.fa-secondary {
|
||||
transition: var(--transition-speed);
|
||||
}
|
||||
|
||||
button,
|
||||
|
|
@ -63,37 +182,6 @@ header {
|
|||
position: relative;
|
||||
background-color: var(--lightCyan);
|
||||
}
|
||||
header.homepage {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
|
||||
color: var(--darkblue);
|
||||
padding: 1rem 2rem;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
justify-content: space-between;
|
||||
}
|
||||
nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
width: 79px;
|
||||
height: 83px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
|
||||
|
|
@ -232,6 +320,10 @@ h2 {
|
|||
box-shadow: inset 0 -0.15em 0 var(--yellow);
|
||||
}
|
||||
|
||||
.home_link .active_link {
|
||||
box-shadow: inset 0 -0.1rem 0 var(--darkblue);
|
||||
}
|
||||
|
||||
#postcodeField {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
|
|
@ -336,9 +428,6 @@ fieldset p label input {
|
|||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
flex: 1 0 calc(25% - 10px);
|
||||
/* margin: 5px; */
|
||||
/* background: #111; */
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
naam: Ontdek verenigingen
|
||||
naam: Ontdek
|
||||
navigable: true
|
||||
order: 2
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<header class="align homepage">
|
||||
<%= render '/partials/navbar.*' %>
|
||||
</header>
|
||||
<div class="align large">
|
||||
<%= render '/partials/navbar.*' %>
|
||||
|
||||
<main>
|
||||
<%= yield %>
|
||||
</div>
|
||||
<footer class="align">
|
||||
<div>
|
||||
<img src="" alt="">
|
||||
|
|
@ -19,3 +17,4 @@
|
|||
<p>Made with ♥ by <a href="https://zeus.gent">Zeus WPI</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
<div class="beforeTheFold">
|
||||
<header class="align homepage">
|
||||
<%= render '/partials/navbar.*' %>
|
||||
</header>
|
||||
<div class="header_photo backgroundSquare"></div>
|
||||
|
||||
|
||||
|
|
@ -21,7 +18,7 @@
|
|||
<div>
|
||||
<p>Durf Doen wil je helpen de vereniging te vinden waar jij je thuis zal voelen.</p>
|
||||
<div class="quizSpotlight">
|
||||
<a href="test">Doe de test</a>
|
||||
<a href="quiz.html">Doe de test</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,21 +40,4 @@
|
|||
<p>Weus ZPI is de studentenvereniging voor InFoRmAtIcA aan de UGent. Ons doel is een bullshitty omgeving te bullshitten voor bullshitted studenten die hun bullshit willen uitbreiden door zich te engageren voor bullshitprojecten.</p>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="align">
|
||||
<div>
|
||||
<img src="" alt="">
|
||||
<img src="" alt="">
|
||||
<img src="" alt="">
|
||||
<img src="" alt="">
|
||||
<img src="" alt="">
|
||||
<img src="" alt="">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<p>©2020 Gentse studentenraad</p>
|
||||
<div lang="en">
|
||||
<p>Made with ♥ by <a href="https://zeus.gent">Zeus WPI</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,33 @@
|
|||
<nav>
|
||||
<img src="/assets/OmdatHetDurfDoenLogoSuckt.png" alt="" class="logo">
|
||||
<ul>
|
||||
<% for i in navigables %>
|
||||
<li><%= link_to(i[:naam], i, class: "nav_link") %></li>
|
||||
<% end %>
|
||||
<script>
|
||||
const nav_links = document.querySelectorAll(".nav_link");
|
||||
nav_links.forEach(nav_link => {
|
||||
if (nav_link.getAttribute("href") === window.location.pathname) {
|
||||
nav_link.classList.add("active_link");
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<nav class="navbar">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a href="/" class="nav-link nav-link__logo">
|
||||
<img src="/assets/OmdatHetDurfDoenLogoSuckt.png" alt="" class="logo__image">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<% 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>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<form action="/search.html">
|
||||
<input type="search" name="q" placeholder="Zoek vereniging, convent …">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
const nav_links = document.querySelectorAll(".nav_link");
|
||||
nav_links.forEach(nav_link => {
|
||||
if (nav_link.getAttribute("href") === window.location.pathname) {
|
||||
nav_link.classList.add("active_link");
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue