detail pagina heeft een beetje style, done for today, ik suck in commits

content/stylesheets/main.css

@@ -61,7 +61,7 @@ footer {
   width: 5rem;
   height: 100vh;
   padding-bottom: 2rem;
-  transition: width 600ms ease;
+  transition: width 300ms ease;
 }
 
 .navbar-nav {
@@ -110,6 +110,9 @@ footer {
   font-weight: bolder;
 }
 
+.hidden{
+  display: none;}
+
 .nav-link svg {
   width: 2rem;
   min-width: 2rem;
@@ -236,9 +239,10 @@ header {
   background-color: var(--lightCyan);
 }
 
+
 h2 {
   font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
-  font-size: 3.4rem;
+  font-size: 2.8rem;
   color: var(--darkblue);
 }
 
@@ -590,6 +594,63 @@ fieldset p label input {
   min-width: 400px;
 }
 
+.details-logo>img{
+  width: 100px;
+}
+
+.details-logo{
+  display: flex;
+  justify-content: center;
+}
+
+.detail_title{
+  display: flex;
+  flex-direction: row;
+}
+.vereniging_themas{
+  list-style: none;
+  display: flex;
+  align-items: center;
+  margin: 0 3rem;
+  padding: 0;
+}
+.vereniging_thema{
+  width: 4rem;
+  height: 4rem;
+  margin: 0  1rem  0 0;
+}
+
+.vereniging_thema>a>svg:hover{
+  transform: scale(1.2);
+  transform-origin: center center;
+  transition: all 150ms ease;
+}
+
+.vereniging_thema>a>svg{
+  fill: #013e7a;
+  width: 3rem;
+  height: 3rem;
+}
+
+footer{
+  padding-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.showcase-image>img{
+  flex-grow: 3;
+  height: 30rem;
+  max-width: 80vw;
+}
+
+.showcase-container{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+}
+
 @media only screen and (max-width: 600px) {
   .tile-grid {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

layouts/default.erb

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

layouts/detail.erb

@@ -1,7 +1,24 @@
-<h1> <%= item[:naam] %> </h1>
 <div class="details-container details-logo">
     <img src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=huge" alt="<%= item[:naam] %>">
 </div>
+<div class="detail_title">
+    <h2>
+    <%= item[:naam] %>
+    </h2>
+    <% if item[:themas] %>
+                <ul class="vereniging_themas">
+                    <% for thema in item[:themas] %>
+                        <li>
+                        <div class="vereniging_thema">
+                        <a href="/themas/<%= thema %>.html">
+                        <%= @items["/assets/themas_icon/"+thema+".svg"].compiled_content %>
+                        </a>
+                        </div>
+                        </li>
+                    <% end %>
+                </ul>
+            <% end %>
+</div>
 <div class="details-container details-contact">
     <% if item[:deelname_link] %>
         <a href="<%= item[:deelname_link] %>"><%= item[:deelname_link] %></a>
@@ -31,7 +48,7 @@
             </div>
         <% end %>
     <% end %>
-    <div class="thema-container">
+    <div class="thema-container hidden">
     <% if item[:themas] %>
         <p><span class="thema-title">Thema's:</span>
             <ul>
@@ -43,16 +60,6 @@
     <% end %>
     </div>
 </div>
-<% if item[:verenigingen] %>
-    <div class="details-container details-verenigingen">
-        <% for vereniging in item[:verenigingen] %>
-            <div class="vereninging-container">
-                <p><%= vereniging[:naam] %></p>
-                <img src="<%= vereniging[:photo] %>" alt="vereniging logo"></img>
-            </div>
-        <% end %>
-    </div>
-<% end %>
 <% if item.path.include? "konventen" %>
     <% for vereniging in verenigingen_voor_konvent(item[:id]) %>
         <div>

layouts/evenement.erb

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

layouts/homepage.erb

@@ -1,9 +1,6 @@
 <div class="beforeTheFold">
   <div class="header_photo backgroundSquare"></div>
-
-
   <article class="align">
-    <h1 class="hidden">Durf Doen</h1>
     <div class="intro">
       <div class="header_blueSquare backgroundSquare"></div>
       <h2 class="studentZijn">

layouts/partials/navbar.erb

@@ -3,6 +3,7 @@
     <li class="nav-item">
       <a href="/" class="nav-link nav-link__logo">
         <img src="/assets/OmdatHetDurfDoenLogoSuckt.png" alt="" class="logo__image">
+            <h1 class="hidden">Durf Doen</h1>
       </a>
     </li>
 

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 %>

layouts/verenigingen.erb

@@ -1,6 +1,6 @@
 <div class="split-2">
   <div class="split-2-1">
-    <h1 class="split-title"> Thema's </h1>
+    <h2 class="split-title"> Thema's </h2>
     <div class="tile-grid">
       <% for thema in themas %>
         <div class="tile clickable tile--medium tile--blue" onclick="window.location.href = '<%= thema.path %>'">
@@ -13,7 +13,7 @@
     </div>
   </div>
   <div class="split-2-2">
-    <h1 class="split-title"> Konventen </h1>
+    <h2 class="split-title"> Konventen </h2>
     <div class="tile-grid">
       <% for item in konventen %>
         <div class="tile clickable tile--medium" onclick="window.location.href = '<%= item.path %>'">