Merge branch 'design-faq'

Rules

@@ -6,7 +6,8 @@ preprocess do
   themas.each do |thema|
     content = ''
     attributes = {
-        naam: thema
+        identifier: thema,
+        naam: thema.capitalize
     }
     identifier = "/themas/#{thema}"
 

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>

content/stylesheets/main.css

@@ -471,67 +471,71 @@ 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%;
+  transform: scale(1);
+  transition: transform ease-in 0.1s;
 }
 
 .tile:hover .tile__image {
-  filter: blur(2px);
+  transform: scale(1.1);
+}
+
+.tile__image--svg {
+  width: 100%;
+  height: 100%;
+}
+
+.tile__image img, .tile__image svg {
+  width: auto;
+  height: 100%;
+}
+.tile__image svg {
+  fill: var(--white);
 }
 
 .tile:hover .tile__title {
@@ -539,42 +543,21 @@ 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 {
   font-size: 1.2rem;
 }
 
-.clickable {
-  transform: scale(1);
-  transition: ease-in 0.2s;
-
-  transition-property: transform;
-}
-
-.clickable:hover {
-  cursor: pointer;
-  transform: scale(1.05);
-}
-
 .split-2 {
   display: flex;
   flex-wrap: wrap;

content/verenigingen.md

@@ -1,5 +1,5 @@
 ---
-naam: Ontdek Verenigingen
+naam: Ontdek verenigingen
 navigable: true
 order: 2
 ---

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");

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">
-            <%= @items["/assets/themas_icon/"+thema[:naam]+".svg"].compiled_content %>
+        <a class="tile clickable tile--medium" href="<%= thema.path %>">
+          <div class="tile__image tile__image--svg tile__image--blue">
+            <%= @items["/assets/themas_icon/"+thema[:identifier]+".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>