From 24eff647ee5ed6e3ad2f00604b60a002818be8b5 Mon Sep 17 00:00:00 2001
From: ajuvercr <arthur.vercruysse@ugent.be>
Date: Thu, 10 Sep 2020 23:41:07 +0200
Subject: [PATCH] meh

---
 content/stylesheets/main.css | 51 +++++++++++++++++++++++++++++++++---
 layouts/verenigingen.erb     | 25 ++++++++++--------
 2 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/content/stylesheets/main.css b/content/stylesheets/main.css
index ca325bb..162bd02 100644
--- a/content/stylesheets/main.css
+++ b/content/stylesheets/main.css
@@ -314,13 +314,22 @@ fieldset p label input {
   }
 }
 
-.tile-grid {
+.tile-grid--flex {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   justify-content: center;
 }
 
+.tile-grid {
+  display: grid;
+  gap: 0.5rem;
+
+  align-items: center;
+  justify-items: center;
+  grid-template-columns: repeat(3, minmax(33%, 12vw));
+}
+
 .tile {
   min-width: 200px;
   max-width: 300px;
@@ -333,12 +342,12 @@ fieldset p label input {
 
 .tile--small {
   min-width: 50px;
-  max-width: 100px;
+  max-width: 50px;
 }
 
 .tile--medium {
   min-width: 150px;
-  max-width: 200px;
+  max-width: 33%;
 }
 
 .tile::before {
@@ -388,3 +397,39 @@ fieldset p label input {
   cursor: pointer;
   transform: scale(1.05);
 }
+
+.split-2 {
+  display: flex;
+  flex-wrap: wrap;
+
+  justify-content: space-evenly;
+}
+
+.split-2-1,
+.split-2-2 {
+  min-width: 400px;
+  flex-basis: 1;
+}
+
+.split-2-2 {
+  width: 45%;
+}
+
+.split-title {
+  text-align: center;
+}
+
+@media only screen and (max-width: 600px) {
+  .tile-grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 0.1rem;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .tile-grid {
+    grid-template-columns: auto;
+
+    gap: 0.1rem;
+  }
+}
diff --git a/layouts/verenigingen.erb b/layouts/verenigingen.erb
index dc5259e..596fa31 100644
--- a/layouts/verenigingen.erb
+++ b/layouts/verenigingen.erb
@@ -1,15 +1,18 @@
-<div>
-  <div class="horz-child">
-    <h1> Thema's </h1>
-    <ul>
-      <% for thema in themas %>
-        <li> <%= thema[:naam] %> </li>
-      <% end %>
-    </ul>
-  </div>
-  <div>
-    <h1> Konventen en projecten </h1>
+<div class="split-2">
+  <div class="split-2-1">
+    <h1 class="split-title"> Thema's </h1>
     <div class="tile-grid">
+      <% for thema in themas %>
+        <div class="tile clickable tile--medium" onclick="window.location.href = '<%= thema.path %>'">
+          <img class="tile__image" src="/content/assets/themas/<%= thema[:naam] %>.jpg" alt="<%= thema[:naam] %>">
+          <p class="tile__title tile__title--medium"> <%= thema[:naam] %> </p>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <div class="split-2-2">
+    <h1 class="split-title"> Konventen en projecten </h1>
+    <div class="tile-grid--flex">
       <% for item in konventen %>
         <div class="tile clickable tile--medium" onclick="window.location.href = '<%= item.path %>'">
           <img class="tile__image" src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>">