sprinkel some hate around

content/stylesheets/main.css

@@ -7,6 +7,11 @@
   --yellow: #fed318;
 }
 
+@font-face {
+  font-family: "MyWebFont";
+  src: url("/static/Bebas Neue.otf"); /* IE9 Compat Modes */
+}
+
 * {
   box-sizing: border-box;
 }
@@ -70,6 +75,10 @@ main {
   padding: 1rem 2rem;
   margin-right: 3rem;
 }
+.quizSpotlight a {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
 .quizSpotlight a:hover {
   background-color: var(--lightblue);
   border: 0.4rem solid var(--lightblue);
@@ -123,8 +132,8 @@ details[open] {
   width: 100%;
 }
 
-.nav-item:last-child {
-  margin-top: auto;
+.nav-link__logo__wrapper {
+  padding: 2rem 0;
 }
 
 .nav-link {
@@ -258,7 +267,7 @@ details[open] {
     justify-content: center;
     transform: rotate(-90deg);
     transition: 0.4s;
-    margin-bottom: 0.7rem;
+    padding: 2rem;
   }
 
   .navbar:hover,
@@ -330,8 +339,11 @@ header {
 }
 
 h2 {
-  font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
+  font-family: MyWebFont, futura, Avenir Next, Verdana, Geneva, Tahoma,
+    sans-serif;
   font-size: 3.4rem;
+
+  font-weight: lighter;
   color: var(--darkblue);
 }
 
@@ -570,6 +582,10 @@ h2 {
   fill: var(--white);
 }
 
+.tile__title::first-letter {
+  text-transform: capitalize;
+}
+
 .tile:hover .tile__title {
   opacity: 1;
 }

content/stylesheets/quiz.css

@@ -1,10 +1,12 @@
 .main_content {
-  margin-top: 5rem;
+  margin-top: 2rem;
 }
+
 .quiz_content {
-  max-width: 900px;
+  max-width: 1100px;
   margin: 0 auto;
 }
+
 .question_wrapper {
   padding: 1rem 0 0 2rem;
   position: relative;
@@ -82,19 +84,17 @@ h3::first-letter {
 }
 
 .buttons {
-<<<<<<< HEAD
   padding: 10px;
-=======
-  width: 70%;
-  margin: 20px auto;
   display: flex;
   justify-content: space-between;
 }
 
-.buttons {
-  width: 70%;
-  margin: 20px auto;
->>>>>>> 85fe081... style the quiz a little again
-  display: flex;
-  justify-content: space-between;
+.question__ {
+  font-size: 2rem;
+}
+
+.small {
+  padding: 1rem 1.5rem !important;
+  font-size: 1rem !important;
+  border-width: 4px !important;
 }

layouts/homepage.erb

@@ -7,7 +7,7 @@
     <div class="intro">
       <div class="header_blueSquare backgroundSquare"></div>
       <h2 class="studentZijn">
-        <span class="underline">Student</span> zijn is
+        <span class="underline">Student</span> zijn is<br>
         <span class="underline">meer</span> dan studeren alleen
       </h2>
     </div>

layouts/partials/navbar.erb

@@ -1,6 +1,6 @@
 <nav class="navbar">
   <ul class="navbar-nav">
-    <li class="nav-item">
+    <li class="nav-item nav-link__logo__wrapper">
       <a href="/" class="nav-link nav-link__logo">
         <img src="/assets/durfDoenClean.png" alt="" class="logo__image">
       </a>
@@ -27,14 +27,14 @@
 </nav>
 
 <script>
-  const nav_links = document.querySelectorAll(".nav-link");
-  nav_links.forEach(nav_link => {
-    if (nav_link.getAttribute("href") === "/") {
-      if (window.location.pathname === "/") {
-        nav_link.classList.add("active_link");
-      }
-    } else if (window.location.pathname.startsWith(nav_link.getAttribute("href"))) {
-      nav_link.classList.add("active_link");
-    }
-  })
+  // const nav_links = document.querySelectorAll(".nav-link");
+  // nav_links.forEach(nav_link => {
+  //   if (nav_link.getAttribute("href") === "/") {
+  //     if (window.location.pathname === "/") {
+  //       nav_link.classList.add("active_link");
+  //     }
+  //   } else if (window.location.pathname.startsWith(nav_link.getAttribute("href"))) {
+  //     nav_link.classList.add("active_link");
+  //   }
+  // })
 </script>

layouts/partials/question.erb

@@ -1,4 +1,4 @@
-<h3> <%= question[:vraag] %> </h3>
+<h2 class="question__"> <%= question[:vraag] %> </h2>
 <% if question[:type] == "specialCase1" %>
   <p>
     Geef je postcode in

layouts/quiz.erb

@@ -14,10 +14,13 @@
     </div>
   <% end %>
 </div>
-<div class="hidden">
-  <h3> Deze verenigingen kan je eens uitchecken ;) </h3>
+<div class="hidden quiz_content">
+  <h2> Misschien is een van deze verenigingen iets voor jou </h2>
   <div id="resultWrapper" class="fancy_link_container">
   </div>
+    <div onclick="window.location.href='/quiz'" class="quizSpotlight">
+    <a class="small">Opnieuw</a>
+  </div>
 </div>
 <div class="buttons quiz_content">
   <div>
@@ -142,6 +145,7 @@
     }
 
     if(!state.question.element) {
+      previousButton.style.display = "none";
       nextButton.style.display = "none";
       resultWrapper.parentNode.classList.remove("hidden");
 

layouts/thema.erb

@@ -1,4 +1,4 @@
-<h1> <%= item[:naam] %> </h1>
+<h2> <%= item[:naam] %> </h2>
 <div class="details-wrapper">
   <div class="details-container details-text">
     <%= yield %>