style the quiz a little again

content/quiz.md

@@ -2,4 +2,5 @@
 naam: Quiz
 navigable: true
 order: 4
+head: <link rel="stylesheet" href="/stylesheets/quiz.css">
 ---

content/stylesheets/main.css

@@ -28,7 +28,7 @@ body {
 }
 
 a {
-	color: inherit;
+  color: inherit;
 }
 
 main {
@@ -41,23 +41,54 @@ main {
   padding: 2rem 2rem 0 2rem;
 }
 
+.main_content {
+  width: 100%;
+  margin: 0 auto;
+}
+
 .beforeTheFold {
   min-height: 100vh;
 }
 
+.quizSpotlight {
+  margin-top: 2rem;
+  font-size: 2rem;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+}
+
+.quizSpotlight:hover {
+  cursor: pointer;
+}
+
+.quizSpotlight a {
+  position: relative;
+  text-decoration: none;
+  background: var(--white);
+  color: var(--darkblue);
+  border: 0.4rem solid var(--darkblue);
+  padding: 1rem 2rem;
+  margin-right: 3rem;
+}
+.quizSpotlight a:hover {
+  background-color: var(--lightblue);
+  border: 0.4rem solid var(--lightblue);
+  color: var(--white);
+}
+
 footer {
   width: 80%;
   margin: 0 auto;
 }
 
 details {
-	margin-bottom: 1rem;
+  margin-bottom: 1rem;
 }
 summary {
-	cursor: pointer;
+  cursor: pointer;
 }
 details[open] {
-	border-bottom: 1px solid #000;
+  border-bottom: 1px solid #000;
 }
 
 .align {
@@ -111,7 +142,8 @@ details[open] {
   color: inherit;
 }
 
-.nav-link:hover, .active_link {
+.nav-link:hover,
+.active_link {
   background: var(--yellow);
   color: var(--lightblue);
 }
@@ -146,43 +178,43 @@ details[open] {
 }
 
 .randomVerenigingen p:nth-child(odd) {
-    -webkit-text-stroke-width: 2px;
+  -webkit-text-stroke-width: 2px;
-    -webkit-text-stroke-color: var(--lightblue);
+  -webkit-text-stroke-color: var(--lightblue);
-    color: transparent;
+  color: transparent;
 }
 
 .randomVerenigingen p {
-    text-transform: uppercase;
+  text-transform: uppercase;
 }
 
-.randomVereniging{
+.randomVereniging {
-    border: 2px solid var(--yellow);
+  border: 2px solid var(--yellow);
-    padding: 1rem;
+  padding: 1rem;
-    margin: 1rem;
+  margin: 1rem;
 }
 
-.randomVerenigingWrapper{
+.randomVerenigingWrapper {
-    min-width: 20rem;
+  min-width: 20rem;
-    flex: 1;
+  flex: 1;
 }
 
 .randomVerenigingenWrapper {
-    display: flex;
+  display: flex;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
-    justify-content: space-between;
+  justify-content: space-between;
 }
-.randomVerenigingWrapper:nth-child(1){
+.randomVerenigingWrapper:nth-child(1) {
-    padding-top: 4rem;
+  padding-top: 4rem;
 }
-.randomVerenigingWrapper:nth-child(2){
+.randomVerenigingWrapper:nth-child(2) {
-    padding-top: 2rem;
+  padding-top: 2rem;
 }
 
-.randomVereniging_imageWrapper{
+.randomVereniging_imageWrapper {
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    margin-bottom: 2rem;
+  margin-bottom: 2rem;
-    margin-top: 1rem;
+  margin-top: 1rem;
 }
 
 /* Small screens */
@@ -277,9 +309,11 @@ input {
   color: inherit;
   background-color: transparent;
 }
+
 button {
   border: 0.15em solid var(--darkblue);
 }
+
 input {
   border: none;
   border-bottom: 0.15em solid var(--darkblue);
@@ -335,28 +369,6 @@ h2 {
   margin: 0.5em 0;
 }
 
-.quizSpotlight {
-  margin-top: 2rem;
-  font-size: 2rem;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: bold;
-}
-
-.quizSpotlight a {
-  position: relative;
-  text-decoration: none;
-  background: var(--white);
-  color: var(--darkblue);
-  border: 0.4rem solid var(--darkblue);
-  padding: 1rem 2rem;
-  margin-right: 3rem;
-}
-.quizSpotlight a:hover {
-  background-color: var(--lightblue);
-  border: 0.4rem solid var(--lightblue);
-  color: var(--white);
-}
-
 .scroll {
   display: block;
   position: absolute;
@@ -417,47 +429,8 @@ h2 {
   box-shadow: inset 0 -0.15em 0 var(--yellow);
 }
 
-#postcodeField {
+.home_link .active_link {
-  -webkit-appearance: none;
+  box-shadow: inset 0 -0.1rem 0 var(--darkblue);
-  margin: 0;
-}
-
-#postcodeField::-webkit-outer-spin-button,
-#postcodeField::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-#postcodeField[type="number"] {
-  -moz-appearance: textfield;
-}
-
-fieldset {
-  max-height: 60vh;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-  overflow-y: auto;
-  margin: auto;
-}
-
-fieldset p label {
-  display: flex;
-}
-
-fieldset p {
-  margin: 15px 10px;
-}
-
-fieldset p label input {
-  margin-right: 10px;
-}
-
-.buttons {
-  width: 70%;
-  margin: 20px auto;
-  display: flex;
-  justify-content: space-between;
 }
 
 .link {
@@ -581,7 +554,8 @@ fieldset p label input {
   height: 100%;
 }
 
-.tile__image img, .tile__image svg {
+.tile__image img,
+.tile__image svg {
   width: auto;
   height: 100%;
 }
@@ -631,8 +605,10 @@ fieldset p label input {
 }
 
 @media only screen and (max-width: 1024px) {
-  .randomVerenigingWrapper:nth-child(1), .randomVerenigingWrapper:nth-child(2){ /* Dit heeft hogere prioriteit dan elk kind. */
+  .randomVerenigingWrapper:nth-child(1),
-        padding-top: 0;
+  .randomVerenigingWrapper:nth-child(2) {
+    /* Dit heeft hogere prioriteit dan elk kind. */
+    padding-top: 0;
   }
 }
 

content/stylesheets/quiz.css

@@ -82,7 +82,19 @@ 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;
 }

layouts/default.erb

@@ -1,7 +1,9 @@
 <%= render '/partials/navbar.*' %>
 
 <main>
-<%= yield %>
+  <div class="main_content">
+    <%= yield %>
+  </div>
 <footer class="align">
   <div>
     <img src="" alt="">

layouts/partials/question.erb

@@ -5,18 +5,16 @@
   </p>
   <input id="postcodeField" type=number placeholder=9000>
 <%else%>
-<form id="<%= number %>_form">
+<form id="<%= number %>_form" class="form">
-  <fieldset>
   <% question[:antwoorden].sort_by{ |x| x[:tekst] }.each_with_index do |answer, idx| %>
-    <p>
+    <label class="form__element">
-    <label>
         <input type=<% if question[:type] == "meerkeuze" %>"checkbox"<% else %>"radio"<% end %>
           value='<%=number+"#"+idx.to_s%>' name=<%= number %> >
-        <%= answer[:tekst] %>
+        <span class="form__element__text">
+          <%= answer[:tekst] %>
+        </span>
     </label>
-    </p>
   <% end %>
-  </fieldset>
 </form>
 <% question[:antwoorden].sort_by{ |x| x[:tekst] }.each_with_index do |answer, idx|%>
   <% if answer[:vraag] %>
@@ -42,14 +40,11 @@
 
       return postcodes;
     })();
-    console.log(postcodes);
     let last_answered = [];
 
     const postcodeField = document.getElementById("postcodeField");
 
     const handler = () => {
-      console.log(postcodeField.value);
-
       const selected = postcodes[postcodeField.value] || [];
 
       // Update results

layouts/quiz.erb

@@ -2,8 +2,9 @@
   <h2 class="page-header-sub">Welke verenigingen passen bij jou?</h2>
   <p>Het invullen van deze quiz zal jou helpen de vereniging te vinden die bij jou past.</p>
   <p>Niet alle vragen hoeven ingevuld te worden en bij sommige vragen komen plots bijvragen tevoorschijn.</p>
+  <br>
   <div onclick="goNext()" class="quizSpotlight">
-    <a>Start</a>
+    <a>Start!</a>
   </div>
 </div>
 <div class="quiz_content">
@@ -133,7 +134,6 @@
     quizIntro.classList.add("hidden");
     previousButton.style.display = "";
 
-    console.log("here "+state.question.index)
     if(state.question.index == 0) {
       previousButton.style.display = "none";
       nextButton.style.display = "none";