Adjust grid to always show labels

content/stylesheets/main.css

@@ -471,67 +471,64 @@ fieldset p label input {
   column-gap: 0.5rem;
   row-gap: 0.5rem;
 
-  align-items: center;
+  align-items: top;
   justify-items: center;
   align-content: center;
   grid-template-columns: repeat(3, minmax(33%, 170px));
 }
 
 .tile {
-  min-width: 200px;
+  flex-direction: column;
-  max-width: 300px;
-  flex: 1 0 calc(25% - 10px);
   position: relative;
-}
+  width: 200px;
-
+  text-decoration: none;
-.tile--small {
-  min-width: 50px;
-  max-width: 50px;
-}
-
-.tile--medium {
-  min-width: 150px;
-  max-width: 200px;
-}
-
-.tile--blue {
-  background-color: var(--darkblue);
-}
-
-.tile::before {
-  content: "";
-  float: left;
-  padding-top: 100%;
 }
 
 .tile__image {
-  position: absolute;
+  width: 200px;
-  top: 50%;
+  height: 200px;
-  left: 50%;
+}
-  transform: translate(-50%, -50%);
-  height: 95%;
-  width: auto;
 
-  transition: ease-in 0.2s;
+.tile--small {
-  transition-property: filter;
+  width: 50px;
+}
+.tile--small .tile__image {
+  width: 50px;
+  height: 50px;
+}
 
+.tile--medium {
+  width: 150px;
+}
+.tile--medium .tile__image {
+  width: 150px;
+  height: 150px;
+}
+
+.tile__image--blue {
+  background-color: var(--darkblue);
+}
+
+.tile__image {
+  height: 100%;
+  width: 100%;
+
+  padding: 1rem;
   display: flex;
   justify-content: center;
 }
 
 .tile__image--svg {
-  width: 80%;
-  height: auto;
-
-  fill: var(--white);
-}
-
-.tile__image svg {
   width: 100%;
+  height: 100%;
 }
 
-.tile:hover .tile__image {
+.tile__image img, .tile__image svg {
-  filter: blur(2px);
+  width: auto;
+  height: 100%;
+}
+.tile__image svg {
+  fill: var(--white);
 }
 
 .tile:hover .tile__title {
@@ -539,24 +536,15 @@ fieldset p label input {
 }
 
 .tile__title {
-  opacity: 0;
+  color: black;
-  position: absolute;
-  bottom: 0;
-  left: 0;
   width: 100%;
-  max-width: 100%;
 
   font-size: 1.5rem;
 
   text-align: center;
   font-weight: bold;
-  color: white;
-  text-shadow: 2px 2px #333;
 
   padding: 5px;
-
-  transition: ease-in 0.2s;
-  transition-property: opacity;
 }
 
 .tile__title--medium {
@@ -565,7 +553,7 @@ fieldset p label input {
 
 .clickable {
   transform: scale(1);
-  transition: ease-in 0.2s;
+  transition: ease-in 0.1s;
 
   transition-property: transform;
 }

layouts/verenigingen.erb

@@ -1,25 +1,27 @@
 <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 %>'">
+        <a class="tile clickable tile--medium" href="<%= thema.path %>">
-          <div class="tile__image tile__image--svg">
+          <div class="tile__image tile__image--svg tile__image--blue">
             <%= @items["/assets/themas_icon/"+thema[:naam]+".svg"].compiled_content %>
           </div>
           <p class="tile__title tile__title--medium"> <%= thema[:naam] %> </p>
-        </div>
+        </a>
       <% end %>
     </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 %>'">
+        <a class="tile clickable tile--medium" href="<%= item.path %>">
-          <img class="tile__image" src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>">
+          <div class="tile__image">
-          <p class="tile__title tile__title--medium"> <%= item[:titel] || item[:naam] %> </p>
+            <img src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>">
           </div>
+          <p class="tile__title tile__title--medium"> <%= item[:titel] || item[:naam] %> </p>
+        </a>
       <% end %>
     </div>
   </div>