I'm done

content/search.html.erb

@@ -1,7 +1,7 @@
 <div class="search">
     <div class="search__main">
         <form id="search_form">
-            <label>Wat zoek je? <input type="text"></label>
+            <label>Wat zoek je?</label><input class="search__input" type="text">
             <button type="submit">Zoek!</button>
         </form>
     </div>

content/stylesheets/main.css

@@ -42,11 +42,10 @@ main {
   flex-direction: column;
   justify-content: space-between;
   width: calc(100%-5rem);
-
-  padding: 2rem 2rem 0 2rem;
 }
 
 .main_content {
+  padding: 3rem;
   width: 100%;
   height: 100%;
   margin: 0 auto;
@@ -90,11 +89,6 @@ main {
   color: var(--white);
 }
 
-footer {
-  width: 80%;
-  margin: 0 auto;
-}
-
 details {
   margin-bottom: 1rem;
 }
@@ -172,6 +166,14 @@ details[open] {
   font-weight: bolder;
 }
 
+.search__main {
+  margin: 3rem;
+}
+
+.search__input {
+  margin: 0 0.5rem;
+}
+
 .hidden {
   display: none;
 }
@@ -261,8 +263,6 @@ details[open] {
   main {
     margin: 0;
     width: 100%;
-
-    padding: 0.5rem;
   }
 }
 
@@ -668,7 +668,6 @@ h2 {
   align-items: baseline;
   flex-wrap: wrap;
   gap: 12px;
-  justify-content: center;
 }
 
 .detail_title h2 {
@@ -747,16 +746,22 @@ h2 {
   height: 3rem;
 }
 
-footer {
-  padding-top: 1rem;
+.footer {
+  max-width: 100%;
+  width: 100%;
+  background-color: var(--darkblue);
+  margin: 0 auto;
   display: flex;
   justify-content: space-between;
+
+  color: var(--white);
 }
 
 .showcase-image > img {
   flex-grow: 3;
-  height: 30rem;
+  max-height: 20rem;
   max-width: 80vw;
+  object-fit: scale-down;
 }
 
 .showcase-container {
@@ -814,7 +819,7 @@ footer {
 @media only screen and (max-width: 700px) {
   .details-contact {
     float: none;
-    width: 300px;
+    max-width: 300px;
     padding-bottom: 2rem;
   }
 }
@@ -823,4 +828,12 @@ footer {
   .detail-body {
     width: 100%;
   }
+
+  .main_content {
+    padding: 0.5rem;
+  }
+
+  .footer {
+    margin-bottom: 5rem;
+  }
 }

content/stylesheets/quiz.css

@@ -98,3 +98,7 @@ h3::first-letter {
   font-size: 1rem !important;
   border-width: 4px !important;
 }
+
+.quizSpotlight {
+  margin: 0;
+}

layouts/default.erb

@@ -4,10 +4,10 @@
   <div class="main_content">
     <%= yield %>
   </div>
-<footer class="align">
+  <footer class="align footer">
     <p>©2020 Gentse studentenraad</p>
     <div lang="en">
       <p>Made with ♥ by <a href="https://zeus.gent">Zeus WPI</a></p>
     </div>
-</footer>
+  </footer>
 </main>

layouts/homepage.erb

@@ -1,5 +1,5 @@
 <style>
-  main {
+  .main_content {
     padding: 0;
   }
 </style>