From eae4f0721cb12c1a5499624ac9b2ca6f4bc0c6cc Mon Sep 17 00:00:00 2001 From: ajuvercr Date: Sat, 12 Sep 2020 22:02:12 +0200 Subject: [PATCH] revisit navbar --- Rules | 1 + content/faq.erb | 2 + content/homepage.md | 2 +- content/stylesheets/main.css | 169 ++++++++++++++++++++++++++--------- content/verenigingen.md | 2 +- layouts/default.erb | 9 +- layouts/homepage.erb | 22 +---- layouts/partials/navbar.erb | 49 ++++++---- 8 files changed, 169 insertions(+), 87 deletions(-) diff --git a/Rules b/Rules index 3f36a84..20bafd5 100644 --- a/Rules +++ b/Rules @@ -40,6 +40,7 @@ end compile '/homepage.md' do filter :kramdown layout '/homepage.*' + layout '/default.*' layout '/base.*' write '/index.html' end diff --git a/content/faq.erb b/content/faq.erb index eef8109..2dff166 100644 --- a/content/faq.erb +++ b/content/faq.erb @@ -3,6 +3,7 @@ naam: FAQ navigable: true order: 3 --- +

FAQ — Vaakgestelde vragen

<% @items.find_all('/faq/*').each do |question| %>
@@ -15,3 +16,4 @@ order: 3
<% end %>

Geen antwoord gevonden op jouw vraag? Contacteer ons!

+
diff --git a/content/homepage.md b/content/homepage.md index f1c84fb..46b0c31 100644 --- a/content/homepage.md +++ b/content/homepage.md @@ -1,5 +1,5 @@ --- naam: Home -navigable: true +navigable: false order: 1 --- diff --git a/content/stylesheets/main.css b/content/stylesheets/main.css index 184804b..95956de 100644 --- a/content/stylesheets/main.css +++ b/content/stylesheets/main.css @@ -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; } diff --git a/content/verenigingen.md b/content/verenigingen.md index 1619fab..942a305 100644 --- a/content/verenigingen.md +++ b/content/verenigingen.md @@ -1,5 +1,5 @@ --- -naam: Ontdek verenigingen +naam: Ontdek navigable: true order: 2 --- diff --git a/layouts/default.erb b/layouts/default.erb index f5d4ac2..b223071 100644 --- a/layouts/default.erb +++ b/layouts/default.erb @@ -1,9 +1,7 @@ -
- <%= render '/partials/navbar.*' %> -
-
+<%= render '/partials/navbar.*' %> + +
<%= yield %> -
+ diff --git a/layouts/homepage.erb b/layouts/homepage.erb index 5ac9f56..9f76a67 100644 --- a/layouts/homepage.erb +++ b/layouts/homepage.erb @@ -1,7 +1,4 @@
-
- <%= render '/partials/navbar.*' %> -
@@ -21,7 +18,7 @@

Durf Doen wil je helpen de vereniging te vinden waar jij je thuis zal voelen.

- Doe de test + Doe de test
@@ -43,21 +40,4 @@

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.

- - - diff --git a/layouts/partials/navbar.erb b/layouts/partials/navbar.erb index d9945ff..e99e145 100644 --- a/layouts/partials/navbar.erb +++ b/layouts/partials/navbar.erb @@ -1,22 +1,33 @@ -