Fix nav and improve styling on non-homepage pages

Rules

@@ -63,12 +63,19 @@ compile '/faq.erb' do
   write '/faq/index.html'
 end
 
+compile '/evenementen.erb' do
+  filter :erb
+  layout '/default.*'
+  layout '/base.*'
+  write '/evenementen/index.html'
+end
+
 compile '/verenigingen.md' do
   filter :kramdown
   layout '/verenigingen.*'
   layout '/default.*'
   layout '/base.*'
-  write ext: 'html'
+  write '/verenigingen/index.html'
 end
 
 compile '/*.md' do

content/evenementen.erb

@@ -1,5 +1,5 @@
 ---
-titel: Evenementen
+naam: Evenementen
 navigable: true
 order: 2
 ---

content/faq.erb

@@ -1,9 +1,9 @@
 ---
-titel: FAQ
+naam: FAQ
 navigable: true
 order: 3
 ---
-<h1>FAQ — Vaakgevraagdevragen</h1>
+<h1>FAQ — Vaakgestelde vragen</h1>
 <% @items.find_all('/faq/*').each do |question| %>
   <details>
     <summary>

content/stuver.html.erb

@@ -1,5 +1,5 @@
 ---
-title: Stuver
+naam: Stuver
 head: "<meta http-equiv=\"refresh\" content=\"0;URL='https://gentsestudentenraad.be'\"/>"
 ---
 Ga naar <a href="https://gentsestudentenraad.be">de website van de Gentse Studentenraad</a>.

content/stylesheets/main.css

@@ -2,7 +2,8 @@
     --white: hsl(0, 0%, 98%);
     --darkblue: #013e7a;
     --lightblue: #1a77d3;
-    --cyan: #aaeeff;
+    --cyan: hsl(192, 100%, 83%);
+    --lightCyan: hsl(192, 100%, 94%);
     --yellow: #fed318;
 }
 
@@ -47,18 +48,29 @@ input {
     padding: 0.1em 0.3em;
 }
 
+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: 0 2rem;
+    padding: 1rem 2rem;
+    margin: 0 1rem;
 }
 
 nav ul {
     list-style: none;
-    display: flex;
     justify-content: space-between;
 }
+nav li {
+    display: inline-block;
+}
 
 nav {
     display: flex;
@@ -67,6 +79,11 @@ nav {
     padding: 1rem 0;
 }
 
+header .logo {
+    width: 79px;
+    height: 83px;
+}
+
 h2 {
     font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
     font-size: 3.4rem;
@@ -76,6 +93,10 @@ h2 {
     max-width: 30rem;
 }
 
+.intro {
+    position: relative;
+}
+
 .studentZijn {
     margin: 4rem 0 2rem 3rem;
     margin: 11vh 0 2rem 3rem;
@@ -166,11 +187,7 @@ h2 {
 .backgroundSquare {
     z-index: -2;
     position: absolute;
-    background-color: var(--cyan);
-}
-
-.intro {
-    position: relative;
+    background-color: var(--lightCyan);
 }
 
 .header_blueSquare {
@@ -181,7 +198,6 @@ h2 {
     top: -100vw;
     bottom: -1rem;
 
-    opacity: 0.3;
     z-index: -3;
 }
 
@@ -207,7 +223,5 @@ h2 {
 }
 
 .underline, .active_link {
-    padding-bottom: -2rem;
-    margin-bottom: -2rem;
-    box-shadow: inset 0 -8px 0 var(--yellow);
+    box-shadow: inset 0 -0.15em 0 var(--yellow);
 }

layouts/base.erb

@@ -15,7 +15,7 @@
 
 <%= yield %>
 
-<footer>
+<footer class="align">
   <div>
     <img src="" alt="">
     <img src="" alt="">

layouts/default.erb

@@ -1,5 +1,7 @@
-<header>
+<header class="align">
   <%= render '/partials/navbar.*' %>
 </header>
 
-<%= yield %>
+<main class="align">
+  <%= yield %>
+</main>

layouts/evenement.erb

@@ -1,4 +1,3 @@
-<div class="content-wrapper">
 <h1> <%= item[:naam] %> </h1>
 <p> georganiseerd door: <%= item[:organiser] %></p>
 <div class="details-wrapper">
@@ -7,4 +6,3 @@
     </div>
     <%= render '/partials/detail.*' %>
 </div>
-</div>

layouts/homepage.erb

@@ -1,5 +1,5 @@
 <div class="beforeTheFold">
-  <header class="align">
+  <header class="align homepage">
     <%= render '/partials/navbar.*' %>
   </header>
 

layouts/konvent.erb

@@ -1,4 +1,3 @@
-<div class="content-wrapper">
 <h1> <%= item[:naam] %> </h1>
 <div class="details-wrapper">
     <div class="details-container details-text">
@@ -6,4 +5,3 @@
     </div>
     <%= render '/partials/detail.*' %>
 </div>
-</div>

layouts/partials/navbar.erb

@@ -1,5 +1,5 @@
 <nav>
-  <img src="/assets/OmdatHetDurfDoenLogoSuckt.png" alt="">
+  <img src="/assets/OmdatHetDurfDoenLogoSuckt.png" alt="" class="logo">
   <ul>
     <% for i in navigables %>
       <li><%= link_to(i[:naam], i, class: "nav_link") %></li>

layouts/thema.erb

@@ -1,9 +1,7 @@
-<div class="content-wrapper">
-  <h1> <%= item[:naam] %> </h1>
-  <div class="details-wrapper">
-    <div class="details-container details-text">
-      <%= yield %>
-    </div>
-    <%= render '/partials/detail.*' %>
+<h1> <%= item[:naam] %> </h1>
+<div class="details-wrapper">
+  <div class="details-container details-text">
+    <%= yield %>
   </div>
+  <%= render '/partials/detail.*' %>
 </div>

layouts/vereniging.erb

@@ -1,9 +1,7 @@
-<div class="content-wrapper">
-  <h1> <%= item[:naam] %> </h1>
-  <div class="details-wrapper">
-    <div class="details-container details-text">
-      <%= yield %>
-    </div>
-    <%= render '/partials/detail.*' %>
+<h1> <%= item[:naam] %> </h1>
+<div class="details-wrapper">
+  <div class="details-container details-text">
+    <%= yield %>
   </div>
+  <%= render '/partials/detail.*' %>
 </div>