From b13460a7eddac1d663b32366f4df89633dd3a4f7 Mon Sep 17 00:00:00 2001
From: Midgard <midgard@zeus.ugent.be>
Date: Tue, 15 Sep 2020 20:08:14 +0200
Subject: [PATCH 1/4] Use ID to find SVG, lowercase "verenigingen"

---
 content/assets/navbar_icons/{FAQ.svg => faq.svg}              | 0
 content/assets/navbar_icons/{Quiz.svg => quiz.svg}            | 0
 .../{Ontdek Verenigingen.svg => verenigingen.svg}             | 0
 content/faq.erb                                               | 2 +-
 content/verenigingen.md                                       | 2 +-
 layouts/partials/navbar.erb                                   | 4 ++--
 6 files changed, 4 insertions(+), 4 deletions(-)
 rename content/assets/navbar_icons/{FAQ.svg => faq.svg} (100%)
 rename content/assets/navbar_icons/{Quiz.svg => quiz.svg} (100%)
 rename content/assets/navbar_icons/{Ontdek Verenigingen.svg => verenigingen.svg} (100%)

diff --git a/content/assets/navbar_icons/FAQ.svg b/content/assets/navbar_icons/faq.svg
similarity index 100%
rename from content/assets/navbar_icons/FAQ.svg
rename to content/assets/navbar_icons/faq.svg
diff --git a/content/assets/navbar_icons/Quiz.svg b/content/assets/navbar_icons/quiz.svg
similarity index 100%
rename from content/assets/navbar_icons/Quiz.svg
rename to content/assets/navbar_icons/quiz.svg
diff --git a/content/assets/navbar_icons/Ontdek Verenigingen.svg b/content/assets/navbar_icons/verenigingen.svg
similarity index 100%
rename from content/assets/navbar_icons/Ontdek Verenigingen.svg
rename to content/assets/navbar_icons/verenigingen.svg
diff --git a/content/faq.erb b/content/faq.erb
index 2dff166..ed20226 100644
--- a/content/faq.erb
+++ b/content/faq.erb
@@ -4,7 +4,7 @@ navigable: true
 order: 3
 ---
 <div>
-<h1>FAQ — Vaakgestelde vragen</h1>
+<h2>FAQ — Vaakgestelde vragen</h2>
 <% @items.find_all('/faq/*').each do |question| %>
   <details>
     <summary>
diff --git a/content/verenigingen.md b/content/verenigingen.md
index 21fc905..1619fab 100644
--- a/content/verenigingen.md
+++ b/content/verenigingen.md
@@ -1,5 +1,5 @@
 ---
-naam: Ontdek Verenigingen
+naam: Ontdek verenigingen
 navigable: true
 order: 2
 ---
diff --git a/layouts/partials/navbar.erb b/layouts/partials/navbar.erb
index 4384048..d2409d7 100644
--- a/layouts/partials/navbar.erb
+++ b/layouts/partials/navbar.erb
@@ -9,7 +9,7 @@
     <% for i in navigables %>
       <li class="nav-item">
         <a href="<%= i.path %>" class="nav-link">
-          <%= @items["/assets/navbar_icons/"+i[:naam]+".svg"].compiled_content %>
+          <%= @items["/assets/navbar_icons/"+i.identifier.without_ext[1..]+".svg"].compiled_content %>
           <span class="link-text"><%= i[:naam] %> </span>
         </a>
       </li>
@@ -27,7 +27,7 @@
 </nav>
 
 <script>
-  const nav_links = document.querySelectorAll(".nav_link");
+  const nav_links = document.querySelectorAll(".nav-link");
   nav_links.forEach(nav_link => {
     if (nav_link.getAttribute("href") === window.location.pathname) {
       nav_link.classList.add("active_link");

From cb37bdf0c239ff865e7e3ec0df29f2665fe191ba Mon Sep 17 00:00:00 2001
From: Midgard <midgard@zeus.ugent.be>
Date: Tue, 15 Sep 2020 20:46:04 +0200
Subject: [PATCH 2/4] Adjust grid to always show labels

---
 content/stylesheets/main.css | 92 ++++++++++++++++--------------------
 layouts/verenigingen.erb     | 18 +++----
 2 files changed, 50 insertions(+), 60 deletions(-)

diff --git a/content/stylesheets/main.css b/content/stylesheets/main.css
index 0f6d107..49b8ab9 100644
--- a/content/stylesheets/main.css
+++ b/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;
-  max-width: 300px;
-  flex: 1 0 calc(25% - 10px);
+  flex-direction: column;
   position: relative;
-}
-
-.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%;
+  width: 200px;
+  text-decoration: none;
 }
 
 .tile__image {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: 95%;
-  width: auto;
+  width: 200px;
+  height: 200px;
+}
 
-  transition: ease-in 0.2s;
-  transition-property: filter;
+.tile--small {
+  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 {
-  filter: blur(2px);
+.tile__image img, .tile__image svg {
+  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;
-  position: absolute;
-  bottom: 0;
-  left: 0;
+  color: black;
   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;
 }
diff --git a/layouts/verenigingen.erb b/layouts/verenigingen.erb
index ec34f91..0eb1e09 100644
--- a/layouts/verenigingen.erb
+++ b/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 %>'">
-          <div class="tile__image tile__image--svg">
+        <a class="tile clickable tile--medium" href="<%= thema.path %>">
+          <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 %>'">
-          <img class="tile__image" src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>">
+        <a class="tile clickable tile--medium" href="<%= item.path %>">
+          <div class="tile__image">
+            <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>
-        </div>
+        </a>
       <% end %>
     </div>
   </div>

From b8af43b67d4ebb59a2135ef1ae3f281bcbb0af97 Mon Sep 17 00:00:00 2001
From: Midgard <midgard@zeus.ugent.be>
Date: Tue, 15 Sep 2020 20:51:15 +0200
Subject: [PATCH 3/4] Capitalize themes

---
 Rules                    | 3 ++-
 layouts/verenigingen.erb | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/Rules b/Rules
index 20bafd5..7f1e958 100644
--- a/Rules
+++ b/Rules
@@ -6,7 +6,8 @@ preprocess do
   themas.each do |thema|
     content = ''
     attributes = {
-        naam: thema
+        identifier: thema,
+        naam: thema.capitalize
     }
     identifier = "/themas/#{thema}"
 
diff --git a/layouts/verenigingen.erb b/layouts/verenigingen.erb
index 0eb1e09..2d76b9d 100644
--- a/layouts/verenigingen.erb
+++ b/layouts/verenigingen.erb
@@ -5,7 +5,7 @@
       <% for thema in themas %>
         <a class="tile clickable tile--medium" href="<%= thema.path %>">
           <div class="tile__image tile__image--svg tile__image--blue">
-            <%= @items["/assets/themas_icon/"+thema[:naam]+".svg"].compiled_content %>
+            <%= @items["/assets/themas_icon/"+thema[:identifier]+".svg"].compiled_content %>
           </div>
           <p class="tile__title tile__title--medium"> <%= thema[:naam] %> </p>
         </a>

From 6defd64834387ac75d9a8a51881688d2733158b0 Mon Sep 17 00:00:00 2001
From: Midgard <midgard@zeus.ugent.be>
Date: Tue, 15 Sep 2020 21:02:50 +0200
Subject: [PATCH 4/4] Don't let text zoom

---
 content/stylesheets/main.css | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/content/stylesheets/main.css b/content/stylesheets/main.css
index 49b8ab9..c4b0378 100644
--- a/content/stylesheets/main.css
+++ b/content/stylesheets/main.css
@@ -516,6 +516,13 @@ fieldset p label input {
   padding: 1rem;
   display: flex;
   justify-content: center;
+
+  transform: scale(1);
+  transition: transform ease-in 0.1s;
+}
+
+.tile:hover .tile__image {
+  transform: scale(1.1);
 }
 
 .tile__image--svg {
@@ -551,18 +558,6 @@ fieldset p label input {
   font-size: 1.2rem;
 }
 
-.clickable {
-  transform: scale(1);
-  transition: ease-in 0.1s;
-
-  transition-property: transform;
-}
-
-.clickable:hover {
-  cursor: pointer;
-  transform: scale(1.05);
-}
-
 .split-2 {
   display: flex;
   flex-wrap: wrap;