Merge branch 'master' of ssh://git.zeus.gent:2222/kelder/durfdoen-2.0

stuveco fix

.gitignore

@@ -10,3 +10,6 @@ tmp/nanoc/
 crash.log
 
 .idea/
+
+
+.sass-cache/

Gemfile

@@ -10,8 +10,6 @@ gem 'nanoc'
 gem 'pdfkit'
 gem 'sass'
 gem 'nokogiri'
-gem 'sassc'
-gem 'slim'
 
 group :nanoc do
   gem 'guard-nanoc'

Makefile

@@ -1,2 +1,11 @@
+.PHONY: live build setup
+
+live:
+	bundle exec nanoc live
+
 build:
-	nanoc
+	bundle exec nanoc
+
+setup:
+	which bundle || { { gem install bundler && which bundle; } || echo 'Could not find `bundle`.'" Make sure the directory with the Ruby's gem executables is in your PATH. (Typically ~/.gem/ruby/*/bin)" && false; }
+	bundle install

README.md

@@ -3,22 +3,24 @@ Durf Doen 2.0
 
 ## Setup instructions
 
-1. Install bundler (`gem install bundler`)
+1. Install Ruby, preferably the version specified in `.ruby-version`
-2. Install other gems (`bundle install`)
+2. Install bundler (`gem install bundler`)
-3. Build and serve the site (`bundle exec nanoc live`)
+3. Install other dependencies (`bundle install`)
+4. Build and serve the site (`bundle exec nanoc live`)
+
+To build the artefacts for production: `bundle exec nanoc`
 
 ### Setup on windows
 
-This is very flacky, but it might help to 
+This is very flaky, but it might help to
-- Ofcourse only install ruby 2.6
+- Of course only install Ruby 2.6
-- change `gem 'mini_racer'` to `gem 'mini_racer', platforms: :ruby` in Gemfile
+- Change `gem 'mini_racer'` to `gem 'mini_racer', platforms: :ruby` in Gemfile
-- following this github page https://github.com/eakmotion/therubyracer_for_windows
+- Follow this GitHub page https://github.com/eakmotion/therubyracer_for_windows
-- Edit this file `C:\Ruby26-x64\lib\ruby\gems\2.6.0\gems\eventmachine-1.2.7-x64-mingw32\lib` by adding `require 'em pure_ruby'` and a newline to the top of the file.
+- Edit this file `C:\Ruby26-x64\lib\ruby\gems\2.6.0\gems\eventmachine-1.2.7-x64-mingw32\lib`, adding `require 'em pure_ruby'` and a newline to the top of the file
 - After all this, on my machine, it still throws an exception, but the live reloading works, until it doesn't (most of the time after a failed compile)
 
+### Optional setup via Docker
 
-### Optional setup via docker
+You can run the code in a separated Docker environment. It compiles the code and serves the files via nginx.
-
-You can run the code in a separated docker environment. It compiles the code and serves the files via nginx.
 
     docker build --tag durfdoen2 . && docker run --publish 8080:80 --detach --name dd durfdoen2

Rules

@@ -6,7 +6,8 @@ preprocess do
   themas.each do |thema|
     content = ''
     attributes = {
-        naam: thema
+        identifier: thema,
+        naam: thema.downcase
     }
     identifier = "/themas/#{thema}"
 
@@ -54,7 +55,7 @@ compile '/quiz.md' do
   layout '/quiz.*'
   layout '/default.*'
   layout '/base.*'
-  write ext: 'html'
+  write '/quiz/index.html'
 end
 
 compile '/search.html.erb' do

content/assets/js/random_vereniging.js

@@ -0,0 +1,16 @@
+window.addEventListener('load', function() {
+  let options = document.getElementsByClassName('randomVerenigingWrapper');
+  let selected = Array.from(options).map(x => ({ x, r: Math.random() + -0.5 * x.hasAttribute('data-iszeus')}))
+   .sort((a, b) => a.r - b.r)
+   .map(a => a.x)
+   .slice(0, 3)
+   .map(x => ({ x, r: Math.random()}))
+   .sort((a, b) => a.r - b.r)
+   .map(a => a.x);
+
+  let destination = document.getElementById("display_repo");
+  for (node of selected) {
+    node.getElementsByTagName("img")[0].setAttribute("loading", "eager");
+    destination.prepend(node);
+  }
+});

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/homepage.md

@@ -2,4 +2,5 @@
 naam: Home
 navigable: false
 order: 1
+head: <script src="/assets/js/random_vereniging.js"></script>
 ---

content/konventen/fk.md

@@ -1,7 +1,7 @@
 ---
 naam: FaculteitenKonvent Gent vzw
 verkorte_naam: FK Gent
-logo: placeholder.png
+id: fk
 contact: fk@student.ugent.be
 website: https://www.fkgent.be/
 social:
@@ -9,14 +9,11 @@ social:
     link: https://www.facebook.com/FaculteitenKonventGent
 themas:
   - faculteit
-showcase:
-  - photo: https://via.placeholder.com/300.png/09f/fff
-  - photo: https://via.placeholder.com/300.png/09f/fff
-  - photo: https://via.placeholder.com/300.png/09f/fff
 verenigingen:
   - verkorte_naam: vereniging1
     photo: https://via.placeholder.com/200.png/90f/fff
   - verkorte_naam: vereniging2
     photo: https://via.placeholder.com/200.png/90f/fff
 ---
+
 Het Faculteiten Konvent overkoepelt meer dan 29 verenigingen. Voor elke opleiding aan de universiteit bestaat er wel een Faculteitskring. Ze verzorgen de opvang van nieuwe studenten en organiseren tal van activiteiten waar elkeen zijn medestudenten kan ontmoeten.

content/konventen/gsr.md

@@ -1,7 +1,7 @@
 ---
 naam: Gentse Studentenraad
+id: gsr
 verkorte_naam: GSR
-logo: placeholder.png
 contact: info@gentsestudentenraad.be
 website: https://www.gentsestudentenraad.be
 social:
@@ -18,5 +18,6 @@ showcase:
   - photo: /assets/logos/GSRB.jpg
   - photo: /assets/logos/GSRC.jpg
 ---
+
 De Gentse Studentenraad is de centrale studentenraad van de UGent. De Gentse Studentenraad vertegenwoordigt en verdedigt (de belangen van) de studenten bij het universiteitsbestuur. Gaande van onderwijsaangelegenheden (Onderwijs- en examenreglement (OER), bijzondere statuten, studiemaatregelen ...) tot sociale zaken (homes, studentenresto's), de thema's die binnen de Gentse Studentenraad worden aangesneden zijn bijzonder divers.
 De Gentse Studentenraad is echter op meer niveaus aanwezig dan enkel het universitaire. In de eerste plaats ondersteunt de Gentse Studentenraad de elf facultaire studentenraden. Ook op het stedelijk niveau en op het Vlaams niveau is de Gentse Studentenraad actief. Daarenboven ondersteunt de Gentse Studentenraad ook verschillende grote en minder grote projecten zoals de Fietsambassade, Cultour en Start to Talk.

content/konventen/hk.md

@@ -1,7 +1,7 @@
 ---
 naam: Home Konvent
+id: hk
 verkorte_naam: HK
-logo: placeholder.png
 contact: hk@student.ugent.be
 website: https://www.homekonvent.be/
 social:
@@ -23,4 +23,5 @@ verenigingen:
   - verkorte_naam: vereniging2
     photo: https://via.placeholder.com/200.png/90f/fff
 ---
+
 Het HK is een plaats waar de verschillende vereningingen van de 5 homes elkaar treffen.

content/konventen/ik.md

@@ -1,7 +1,7 @@
 ---
 naam: Internationaal Konvent
 verkorte_naam: IK Gent
-logo: placeholder.png
+id: ik
 contact: ik@student.ugent.be
 website: https://internationaalkonv.wixsite.com/internationalkonvent
 social:
@@ -24,6 +24,7 @@ verenigingen:
   - verkorte_naam: vereniging2
     photo: https://via.placeholder.com/200.png/90f/fff
 ---
+
 Het IK probeert de buitenlandse studenten en internationale studentenverenigingen te helpen in hun zoektocht naar informatie & ontspanning.
 
 We want international students to feel included by providing information concerning student activities and the university whilst working with internationally minded people and organisations.

content/konventen/kultk.md

@@ -1,7 +1,7 @@
 ---
 naam: Kultureel Konvent
+id: kultk
 verkorte_naam: Kultureel Konvent
-logo: placeholder.png
 contact: kultureelkonvent@gmail.com
 website: http://student.ugent.be/kultkcentraal/index.html
 social:
@@ -10,4 +10,5 @@ social:
 themas:
   - cultuur
 ---
+
 Het KultK telt acht vereningen die elk een eigen deel van de Kultuur met de grote K proberen te introduceren aan de medestudenten.

content/konventen/pfk.md

@@ -1,7 +1,7 @@
 ---
 naam: Politiek en Filosofisch Konvent
 verkorte_naam: PFK
-logo: placeholder.png
+id: pfk
 contact: pfk@student.ugent.be
 website: https://pfk.ugent.be/
 social:
@@ -9,14 +9,6 @@ social:
     link: https://www.facebook.com/PFKGent/
 themas:
   - politiek en filosofisch
-showcase:
-  - photo: https://via.placeholder.com/300.png/09f/fff
-  - photo: https://via.placeholder.com/300.png/09f/fff
-  - photo: https://via.placeholder.com/300.png/09f/fff
-verenigingen:
-  - verkorte_naam: vereniging1
-    photo: https://via.placeholder.com/200.png/90f/fff
-  - verkorte_naam: vereniging2
-    photo: https://via.placeholder.com/200.png/90f/fff
 ---
+
 Het PFK groepeert de politieke, filosofische en levensbeschouwelijke verenigingen aan de UGent. Dit konvent is de uitgelezen plaats om je aan te sluiten bij een ideologische, filosofische of politieke beweging.

content/konventen/wvk.md

@@ -7,6 +7,7 @@ konvent: wvk
 website: https://wvk.ugent.be/
 contact: wvk@student.ugent.be
 ---
+
 Het WVK groepeert alle maatschappelijk-sociaal geïnspireerde studentenverenigingen en alle wetenschappelijke werkgroepen. Als konvent organiseert het WVK zelf (in tegenstelling tot sommige andere konventen) geen eigen activiteiten, maar richt het zich volledig op het samenbrengen en verdedigen van de belangen van de maatschappelijke verenigingen en wetenschappelijke werkgroepen aan de Universiteit Gent.
 
-<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwvkcentraal%2Fvideos%2F795092330635099%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
+<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwvkcentraal%2Fvideos%2F795092330635099%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden; margin: auto;" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

content/projecten/schamper.md

@@ -1,8 +1,9 @@
 ---
 naam: Schamper
+id: schamper
 verkorte_naam: Schamper
 konvent: schamper
-website: schamper.ugent.be
+website: https://www.schamper.ugent.be
 contact: kernredactie@schamper.be
 social:
   - platform: facebook
@@ -14,6 +15,7 @@ social:
 themas:
   - cultuur
 ---
+
 Schamper is anders dan de facultaire verenigingen omdat ze niet allemaal hetzelfde studeren. Ze zijn anders dan de streekgebonden studentenclubs, omdat ze niet allemaal uit dezelfde contreien komen. Ze zijn anders dan politiek-filosofische verenigingen omdat ze niet allemaal dezelfde ideologische mening hebben. Maar ze zijn vooral anders, omdat ze kritische, schampere studentenjournalistiek brengen.
 In de eerste plaats is Schamper trots op de journalistiek, literair en esthetisch hoogstaande pareltjes die tweewekelijks, in vijfduizendvoud, aan alle faculteiten en resto's afgeleverd worden.
 Daarnaast wagen zij zich ook wel aan activiteiten zoals de ondertussen beruchte Schamperfuif of Schamperquiz.

content/projecten/stujardin.md

@@ -1,7 +1,10 @@
 ---
+titel: StuJardin
+id: stujardin
 naam: StuJardin
 verkorte_naam: StuJardin
 konvent: gsr
+logo: /assets/sfeerfotos/stujardin.png
 contact: http://stujardin@gmail.com/
 website: http://student.ugent.be/stujardin/
 social:

content/projecten/urgent.md

@@ -4,7 +4,7 @@ id: urgent
 naam: Urgent.fm
 verkorte_naam: Urgent.fm
 konvent: urgent
-website: www.urgent.fm
+website: https://www.urgent.fm
 social:
   - platform: facebook
     link: https://www.facebook.com/urgent.fm/

content/quiz.md

@@ -2,4 +2,5 @@
 naam: Quiz
 navigable: true
 order: 4
+head: <link rel="stylesheet" href="/stylesheets/quiz.css">
 ---

content/quiz/vraag1.md

@@ -352,39 +352,39 @@ antwoorden:
     antwoorden:
       - tekst: biw - Bos- en natuurbeheer
         verenigingen:
-          - naam: fbw
+          - naam: stubio
           - naam: vlk
 
       - tekst: biw - cel- en genbiotechnologie
         verenigingen:
-          - naam: fbw
+          - naam: stubio
           - naam: vlk
 
       - tekst: biw - Chemie en voedingstechnologie
         verenigingen:
-          - naam: fbw
+          - naam: stubio
           - naam: vlk
 
       - tekst: biw - Landbouwkunde
         verenigingen:
-          - naam: fbw
+          - naam: stubio
           - naam: vlk
           - naam: gk
           - naam: iaas
 
       - tekst: biw - Land- en waterbeheer
         verenigingen:
-          - naam: fbw
+          - naam: stubio
           - naam: vlk
 
       - tekst: biw - Milieutechnologie
         verenigingen:
-          - naam: fbw
+          - naam: stubio
           - naam: vlk
 
       - tekst: Biowetenschappen
         verenigingen:
-          - naam: fbw
+          - naam: stubio
           - naam: lila
 
   - tekst: Farmaceutische wetenschappen

content/quiz/vraag3.md

@@ -1,53 +1,205 @@
 ---
-vraag: Wie wil je ontmoeten?
+vraag: Wat zijn je interesses?
 type: meerkeuze
 antwoorden:
-  - tekst: Studenten die uit dezelfde streek afkomstig zijn
+  - tekst: Archeologie
-    vraag: Uit welke streek ben jij afkomstig?
+    verenigingen:
-    type: specialCase1
+      - naam: aw
+
+  - tekst: BDSM
+    verenigingen:
+      - naam: kajira
+
+  - tekst: Consulting
+    verenigingen:
+      - naam: oedc
+
+  - tekst: Cultuur en creatief zijn
+    vraag: Wat zijn je interesses?
+    type: meerkeuze
     antwoorden:
-      - tekst: TODO
+      - tekst: Culturele voorstellingen bijwonen
         verenigingen:
-          - naam: TODO
+          - naam: cultour
-
+      - tekst: Dansen
-  - tekst: Eender wie, onafhankelijk van interesses, studies of andere aspecten
         verenigingen:
-      - naam: theepot
+          - naam: gudc
-
+      - tekst: Dichtkunst en gesproken woord
-  - tekst: Internationale studenten
-    vereningingen:
-      - naam: esn
-      - naam: International students association gent
-
-  - tekst: Ik ben holebistudent en zou graag andere holebistudenten ontmoeten
         verenigingen:
-      - naam: vg
+          - naam: auwla
+      - tekst: Fotografie
+        verenigingen:
+          - naam: schamper
+      - tekst: Muziek spelen
+        verenigingen:
+          - naam: guho
+          - naam: guso
+          - naam: studentenfanfare
+      - tekst: Schilderen en tekenen
+        verenigingen:
+          - naam: modelstudies
+      - tekst: Schrijven
+        verenigingen:
+          - naam: schamper
+          - naam: auwla
+          - naam: prometheus
+      - tekst: Theater
+        verenigingen:
+          - naam: matrak
+      - tekst: Zingen
+        verenigingen:
+          - naam: guk
 
-  - tekst: Ik heb een migratieachtergond en zou graag mensen met eenzelfde achtergrond als mezelf ontmoeten
+  - tekst: De pers
-    vraag: Je gaf aan een migratieachtergrond te hebben en graag andere studenten te ontmoeten met dezelfde achtergrond. Wat is jouw culturele achtergrond?
+    vraag: Wat zijn je interesses?
-    type: dropdown
+    type: meerkeuze
     antwoorden:
-      - tekst: China
+      - tekst: Fotografie
         verenigingen:
-          - naam: chisag
+          - naam: schamper
+      - tekst: Journalistiek
+        verenigingen:
+          - naam: schamper
+          - naam: urgent
+      - tekst: Lay-out
+        verenigingen:
+          - naam: schamper
+      - tekst: Schrijven
+        verenigingen:
+          - naam: schamper
+          - naam: auwla
+          - naam: prometheus
 
+  - tekst: Duurzaamheid
+    verenigingen:
+      - naam: durgent
+
+  - tekst: Economie
+    verenigingen:
+      - naam: flyse
+      - naam: capitant
+      - naam: re9000
+
+  - tekst: Finance
+    verenigingen:
+      - naam: capitant
+
+  - tekst: Kritisch denken en debat
+    verenigingen:
+      - naam: engage
+      - naam: tsg
+
+  - tekst: land- en tuinbouw
+    verenigingen:
+      - naam: gk
+      - naam: stujardin
+
+  - tekst: Me inzetten voor anderen
+    vraag: Wat zijn je interesses?
+    type: meerkeuze
+    antwoorden:
+      - tekst: Andere studenten ondersteunen
+        verenigingen:
+          - naam: flux
+          - naam: cultour
+          - naam: stt
+      - tekst: Cultuur promoten
+        verenigingen:
+          - naam: cultour
+      - tekst: studentenvertegenwoordiging
+        verenigingen:
+          - naam: gsr
+
+  - tekst: ondernemen
+    verenigingen:
+      - naam: flyse
+
+  - tekst: Politiek
+    vraag: Waar ben je specifiek in geïnteresseerd?
+    type: meerkeuze
+    antwoorden:
+      - tekst: Vlaamse en nationale politiek
+        vraag: Welke overtuiging?
+        type: meerkeuze
+        antwoorden:
+          - tekst: Vlaams-Nationalistisch
+            verenigingen:
+              - naam: nsv
+
+          - tekst: Conservatief en Vlaams-Nationalistisch
+            verenigingen:
+              - naam: kvhv
+
+          - tekst: Antikapitalistisch
+            verenigingen:
+              - naam: als
+
+          - tekst: Christendemocratisch
+            verenigingen:
+              - naam: cds
+
+          - tekst: Marxistisch
+            verenigingen:
+              - naam: comac
+
+          - tekst: Ecologistisch
+            verenigingen:
+              - naam: groen
+              - naam: durgent
+
+          - tekst: Vlaams-republikeins
+            verenigingen:
+              - naam: nva
+
+          - tekst: Socialistisch
+            verenigingen:
+              - naam: socialisten
+
+          - tekst: Liberaal
+            verenigingen:
+              - naam: lvsv
+
+      - tekst: Europese politiek
+        verenigingen:
+          - naam: minos
+
+      - tekst: Internationale politiek, Verenigde Naties en debat
+        verenigingen:
+          - naam: vvny
+
+  - tekst: STEM
+    vraag: Wat zijn je interesses?
+    type: meerkeuze
+    antwoorden:
+      - tekst: Techniek
+        verenigingen:
+          - naam: ieee
+          - naam: best
+      - tekst: Wiskunde
+        verenigingen:
+          - naam: prime
+      - tekst: Fysica en sterrenkunde
+        verenigingen:
+          - naam: vvn
+      - tekst: Informatica
+        verenigingen:
+          - naam: zeus
+
+  - tekst: radio maken
+    verenigingen:
+      - naam: urgent
+
+  - tekst: Verschillende culturen
+    vraag: Wat zijn je interesses?
+    type: meerkeuze
+    antwoorden:
       - tekst: Armenië
         verenigingen:
           - naam: hayasa
-
-      - tekst: Indonesië
-        verenigingen:
-          - naam: indosag
-
       - tekst: Japan
         verenigingen:
-          - naam: tnok
+          - naam: tnk
-
+      - tekst: De Klassieke Oudheid
-      - tekst: Vietnam
         verenigingen:
-          - naam: vinasag
+          - naam: kk
-
-      - tekst: Sub-Sahara Afrika
-        verenigingen:
-          - naam: umoja
 ---

content/quiz/vraag4.md

@@ -1,207 +1,53 @@
 ---
-vraag: Wat zijn je interesses?
+vraag: Wie wil je ontmoeten?
 type: meerkeuze
 antwoorden:
-  - tekst: Archeologie
+  - tekst: Studenten die uit dezelfde streek afkomstig zijn
-    verenigingen:
+    vraag: Uit welke streek ben jij afkomstig?
-      - naam: aw
+    type: specialCase1
-
-  - tekst: BDSM
-    verenigingen:
-      - naam: kajira
-
-  - tekst: Consulting
-    verenigingen:
-      - naam: oedc
-
-  - tekst: Cultuur en creatief zijn
-    vraag: Wat zijn je interesses?
-    type: meerkeuze
     antwoorden:
-      - tekst: Culturele voorstellingen bijwonen
+      - tekst: TODO
         verenigingen:
-          - naam: cultour
+          - naam: TODO
-      - tekst: Dansen
-        verenigingen:
-          - naam: gudc
-      - tekst: Dichtkunst en gesproken woord
-        verenigingen:
-          - naam: auwla
-          - naam: prometheus
-      - tekst: Fotografie
-        verenigingen:
-          - naam: schamper
-      - tekst: Illusionisme
-        verenigingen:
-          - naam: illusiona
-      - tekst: Muziek spelen
-        verenigingen:
-          - naam: guho
-          - naam: guso
-          - naam: sf
-      - tekst: Schilderen en tekenen
-        verenigingen:
-          - naam: schilder
-      - tekst: Schrijven
-        verenigingen:
-          - naam: schamper
-          - naam: auwla
-      - tekst: Theater
-        verenigingen:
-          - naam: matrak
-      - tekst: Zingen
-        verenigingen:
-          - naam: guk
 
-  - tekst: De pers
+  - tekst: Eender wie, onafhankelijk van interesses, studies of andere aspecten
-    vraag: Wat zijn je interesses?
-    type: meerkeuze
-    antwoorden:
-      - tekst: Fotografie
     verenigingen:
-          - naam: schamper
+      - naam: theepot
-      - tekst: Journalistiek
-        verenigingen:
-          - naam: schamper
-          - naam: urgent
-      - tekst: Lay-out
-        verenigingen:
-          - naam: schamper
-      - tekst: Schrijven
-        verenigingen:
-          - naam: schamper
-          - naam: auwla
 
-  - tekst: Duurzaamheid
+  - tekst: Internationale studenten
-    verenigingen:
+    vereningingen:
-      - naam: durgent
+      - naam: esn
+      - naam: International students association gent
 
-  - tekst: Economie
+  - tekst: Ik ben LGBTQI+ student en zou graag andere LGBTQI+ studenten ontmoeten
     verenigingen:
-      - naam: flyse
+      - naam: vg
-      - naam: capitant
-      - naam: re9000
 
-  - tekst: Finance
+  - tekst: Ik heb een migratieachtergond en zou graag mensen met eenzelfde achtergrond als mezelf ontmoeten
-    verenigingen:
+    vraag: Je gaf aan een migratieachtergrond te hebben en graag andere studenten te ontmoeten met dezelfde achtergrond. Wat is jouw culturele achtergrond?
-      - naam: capitant
-
-  - tekst: Kritisch denken en debat
-    verenigingen:
-      - naam: engage
-      - naam: tzal
-
-  - tekst: land- en tuinbouw
-    verenigingen:
-      - naam: gk
-      - naam: stujardin
-
-  - tekst: Me inzetten voor anderen
-    vraag: Wat zijn je interesses?
-    type: meerkeuze
-    antwoorden:
-      - tekst: Andere studenten ondersteunen
-        verenigingen:
-          - naam: flux
-          - naam: cultour
-          - naam: stt
-      - tekst: Cultuur promoten
-        verenigingen:
-          - naam: cultour
-      - tekst: mentale gezondheid
-        verenigingen:
-          - naam: stt
-      - tekst: studentenvertegenwoordiging
-        verenigingen:
-          - naam: gsr
-
-  - tekst: ondernemen
-    verenigingen:
-      - naam: flyse
-
-  - tekst: Politiek
-    vraag: Waar ben je specifiek in geïnteresseerd?
-    type: meerkeuze
-    antwoorden:
-      - tekst: Vlaamse en nationale politiek
-        vraag: Welke overtuiging?
     type: dropdown
     antwoorden:
-          - tekst: Vlaams-Nationalistisch
+      - tekst: China
         verenigingen:
-              - naam: nsv
+          - naam: chisag
 
-          - tekst: Conservatief en Vlaams-Nationalistisch
-            verenigingen:
-              - naam: kvhv
-
-          - tekst: Antikapitalistisch
-            verenigingenen:
-              - naam: als
-
-          - tekst: Christendemocratisch
-            verenigingenen:
-              - naam: cds
-
-          - tekst: Marxistisch
-            verenigingenen:
-              - naam: comac
-
-          - tekst: Ecologistisch
-            verenigingenen:
-              - naam: jgroen
-              - naam: durgent
-
-          - tekst: Vlaams-republikeins
-            verenigingenen:
-              - naam: jongnva
-
-          - tekst: Socialistisch
-            verenigingenen:
-              - naam: js
-
-          - tekst: Liberaal
-            verenigingenen:
-              - naam: lvsv
-
-      - tekst: Europese politiek
-        verenigingen:
-          - naam: minos
-
-      - tekst: Internationale politiek, Verenigde Naties en debat
-        verenigingen:
-          - naam: vvny
-
-  - tekst: STEM
-    vraag: Wat zijn je interesses?
-    type: meerkeuze
-    antwoorden:
-      - tekst: Techniek
-        verenigingen:
-          - naam: ieee
-          - naam: best
-      - tekst: Wiskunde
-        verenigingen:
-          - naam: prime
-      - tekst: Fysica en sterrenkunde
-        verenigingen:
-          - naam: vvn
-      - tekst: Informatica
-        verenigingen:
-          - naam: zeus
-
-  - tekst: radio maken
-    verenigingen:
-      - naam: urgent
-
-  - tekst: Verschillende culturen
-    vraag: Wat zijn je interesses?
-    type: meerkeuze
-    antwoorden:
       - tekst: Armenië
         verenigingen:
           - naam: hayasa
+
+      - tekst: Indonesië
+        verenigingen:
+          - naam: indosag
+
       - tekst: Japan
         verenigingen:
           - naam: tnok
+
+      - tekst: Vietnam
+        verenigingen:
+          - naam: vinasag
+
+      - tekst: Sub-Sahara Afrika
+        verenigingen:
+          - naam: umoja
 ---

content/search.html.erb

@@ -1,11 +1,11 @@
 <div class="search">
     <div class="search__main">
         <form id="search_form">
-            <label>Wat zoek je? <input type="text"></label>
+            <label>Wat zoek je?</label><input class="search__input" type="text">
             <button type="submit">Zoek!</button>
         </form>
     </div>
-    <div id="search_wrapper" class="search__result"></div>
+    <div id="search_wrapper" class="fancy_link_container"></div>
 </div>
 <script src="https://unpkg.com/lunr/lunr.js"></script>
 
@@ -81,29 +81,17 @@ function ready() {
     function render_results(div, partials) {
         const create_wrapper= document.createElement('div');
         for(let partial of partials) {
-            const html = `<div class="link" onclick="window.location.href = '${partial.url}'">
+            create_wrapper.innerHTML = partial;
-                    <div class="link__img">
-                        <img src="https://dsa.ugent.be/api/verenigingen/${partial.abbrev}/logo?size=small" alt="${partial.titel}">
-                    </div>
-                    <div class="link__content">
-                        <h3 class="link__title">
-                            ${partial.titel} (${partial.kind})
-                        </h3>
-                        <p class="link__text">
-                            ${partial.text}
-                        </p>
-                    </div>
-                </div>`;
-
-            if(html) {
-                create_wrapper.innerHTML = html;
             div.appendChild(create_wrapper.firstChild);
         }
+        if (partials.length == 0) {
+            create_wrapper.innerHTML = "Geen verenigingen gevonden :(";
+            div.appendChild(create_wrapper);
         }
     }
 
     const documents = <%=  CreateFullTextIndex.new(@items.find_all("**/verenigingen/*") + @items.find_all("**/konventen/*")).call.to_json %>;
-    const partials = <%= Hash[(partial_konventen + partial_verenigingen).map { |x| [x[:url], x] }].to_json  %>;
+    const partials = <%= to_partials_search(all_groups()) %>;
 
     const index = lunr(function () {
         this.field('id', {boost: 15});
@@ -118,7 +106,7 @@ function ready() {
 
     doSearch = (query) => {
         clearDiv(wrapper);
-        render_results(wrapper, index.search(query).sortByKey(i => partials[i.ref].titel).stableSort((a, b) => b.score - a.score).map(i => partials[i.ref]));
+        render_results(wrapper, index.search(query).sortByKey(i => partials[i.ref].titel).stableSort((a, b) => b.score - a.score).map(i => partials[i.ref].html));
 
         window.history.pushState("search state", "", window.location.pathname + "?q="+query);
     };

content/stylesheets/main.css

@@ -7,6 +7,11 @@
   --yellow: #fed318;
 }
 
+@font-face {
+  font-family: "MyWebFont";
+  src: url("/static/Bebas Neue.otf"); /* IE9 Compat Modes */
+}
+
 * {
   box-sizing: border-box;
 }
@@ -27,27 +32,47 @@ body {
   font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
 }
 
+a {
+  color: inherit;
+}
+
 main {
   margin-left: 5rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: calc(100%-5rem);
+}
 
-  padding: 2rem 2rem 0 2rem;
+.main_content {
+  padding: 3rem;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
 }
 
 .beforeTheFold {
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  padding: 4rem;
 }
 
-footer {
+details {
-  width: 80%;
+  margin-bottom: 1rem;
-  margin: 0 auto;
+}
+summary {
+  cursor: pointer;
+}
+details[open] {
+  border-bottom: 1px solid #000;
 }
 
 .align {
   max-width: 1280px;
+  margin: auto;
+  padding: 3rem;
 }
 
 .align .large {
@@ -61,7 +86,7 @@ footer {
   width: 5rem;
   height: 100vh;
   padding-bottom: 2rem;
-  transition: width 600ms ease;
+  transition: width 300ms ease;
 }
 
 .navbar-nav {
@@ -82,6 +107,10 @@ footer {
   margin-top: auto;
 }
 
+.nav-link__logo__wrapper {
+  padding: 2rem 0;
+}
+
 .nav-link {
   width: 100%;
   display: flex;
@@ -97,7 +126,8 @@ footer {
   color: inherit;
 }
 
-.nav-link:hover {
+.nav-link:hover,
+.active_link {
   background: var(--yellow);
   color: var(--lightblue);
 }
@@ -110,6 +140,18 @@ footer {
   font-weight: bolder;
 }
 
+.search__main {
+  margin: 3rem;
+}
+
+.search__input {
+  margin: 0 0.5rem;
+}
+
+.hidden {
+  display: none;
+}
+
 .nav-link svg {
   width: 2rem;
   min-width: 2rem;
@@ -131,6 +173,50 @@ footer {
   outline: none;
 }
 
+.randomVerenigingen p:nth-child(odd) {
+  -webkit-text-stroke-width: 2px;
+  -webkit-text-stroke-color: var(--lightblue);
+  color: transparent;
+}
+
+.randomVerenigingen p {
+  text-transform: uppercase;
+}
+
+.randomVereniging {
+  border: 7px solid var(--yellow);
+  padding: 1rem;
+  margin: 1rem;
+}
+
+.randomVerenigingWrapper {
+  min-width: 20rem;
+  flex: 1;
+}
+
+.randomVerenigingWrapper img {
+  max-width: 100%;
+}
+
+.randomVerenigingenWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.randomVerenigingWrapper:nth-child(1) {
+  padding-top: 4rem;
+}
+.randomVerenigingWrapper:nth-child(2) {
+  padding-top: 2rem;
+}
+
+.randomVereniging_imageWrapper {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 2rem;
+  margin-top: 1rem;
+}
+
 /* Small screens */
 @media only screen and (max-width: 600px) {
   .navbar {
@@ -151,8 +237,10 @@ footer {
   main {
     margin: 0;
     width: 100%;
+  }
 
-    padding: 0.5rem;
+  .detail_title > h2 {
+    width: 100%;
   }
 }
 
@@ -168,6 +256,7 @@ footer {
     justify-content: center;
     transform: rotate(-90deg);
     transition: 0.4s;
+    padding: 0;
   }
 
   .navbar:hover,
@@ -222,9 +311,18 @@ input {
   color: inherit;
   background-color: transparent;
 }
+
 button {
+  color: var(--darkblue);
   border: 0.15em solid var(--darkblue);
 }
+
+button:hover {
+  background-color: var(--lightblue);
+  border: 0.15rem solid var(--lightblue);
+  color: var(--white);
+}
+
 input {
   border: none;
   border-bottom: 0.15em solid var(--darkblue);
@@ -237,8 +335,11 @@ header {
 }
 
 h2 {
-  font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
+  font-family: MyWebFont, futura, Avenir Next, Verdana, Geneva, Tahoma,
-  font-size: 3.4rem;
+    sans-serif;
+  font-size: 2.8rem;
+
+  font-weight: lighter;
   color: var(--darkblue);
 }
 
@@ -250,11 +351,6 @@ h2 {
   position: relative;
 }
 
-.studentZijn {
-  margin: 4rem 0 2rem 3rem;
-  margin: 11vh 0 2rem 3rem;
-}
-
 .hidden {
   display: none;
 }
@@ -264,14 +360,7 @@ h2 {
   display: flex;
   position: relative;
   z-index: 2;
-}
-.quote img {
-  width: 103px;
-  height: 185px;
-  margin-right: 2rem;
-}
 
-.quote p {
   max-width: 25rem;
   font-size: 1.5rem;
   font-family: Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
@@ -280,28 +369,6 @@ h2 {
   margin: 0.5em 0;
 }
 
-.quizSpotlight {
-  margin-top: 2rem;
-  font-size: 2rem;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: bold;
-}
-
-.quizSpotlight a {
-  position: relative;
-  text-decoration: none;
-  background: var(--white);
-  color: var(--darkblue);
-  border: 0.4rem solid var(--darkblue);
-  padding: 1rem 2rem;
-  margin-right: 3rem;
-}
-.quizSpotlight a:hover {
-  background-color: var(--lightblue);
-  border: 0.4rem solid var(--lightblue);
-  color: var(--white);
-}
-
 .scroll {
   display: block;
   position: absolute;
@@ -332,11 +399,11 @@ h2 {
   background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.6));
 }
 
-.backgroundSquare {
+/* .backgroundSquare {
   z-index: -2;
   position: absolute;
   background-color: var(--lightCyan);
-}
+} */
 
 .header_blueSquare {
   right: 20%;
@@ -349,27 +416,41 @@ h2 {
   z-index: -3;
 }
 
-.header_photo {
+.beforeTheFold article {
-  background: url(/assets/placeholder.jpg) center center;
+  position: relative;
-  background-size: cover;
+  max-width: 500px;
-  right: 0;
+  padding: 2rem 3rem;
-  left: 50%;
+  z-index: 2;
+  margin: unset;
+  backdrop-filter: blur(2px);
+}
+
+.beforeTheFold article::before {
+  opacity: 0.2;
+  z-index: -1;
+  background-color: var(--white);
+  content: "";
+  top: 0;
   bottom: 0;
-  top: 20%;
+  left: 0;
+  right: 0;
+  /* width: 200vw; */
+  position: absolute;
 }
 
-.randomVerenigingen p:nth-child(odd) {
+.header_photo {
-  -webkit-text-stroke-width: 2px;
+  /* background: url(/assets/placeholder.png) center center; */
-  -webkit-text-stroke-color: var(--lightblue);
+  /* background-size: cover; */
-  color: transparent;
+  /* background-size: contain; */
+  /* background-repeat: no-repeat; */
+  position: absolute;
+  width: auto;
+  height: 100vh;
+  right: 0;
+  top: 0;
 }
 
-.randomVerenigingen p {
+.underline {
-  text-transform: uppercase;
-}
-
-.underline,
-.active_link {
   box-shadow: inset 0 -0.15em 0 var(--yellow);
 }
 
@@ -377,52 +458,11 @@ h2 {
   box-shadow: inset 0 -0.1rem 0 var(--darkblue);
 }
 
-#postcodeField {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-#postcodeField::-webkit-outer-spin-button,
-#postcodeField::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-#postcodeField[type="number"] {
-  -moz-appearance: textfield;
-}
-
-fieldset {
-  max-height: 60vh;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-  overflow-y: auto;
-  margin: auto;
-}
-
-fieldset p label {
-  display: flex;
-}
-
-fieldset p {
-  margin: 15px 10px;
-}
-
-fieldset p label input {
-  margin-right: 10px;
-}
-
-.buttons {
-  width: 70%;
-  margin: 20px auto;
-  display: flex;
-  justify-content: space-between;
-}
-
 .link {
+  color: inherit;
+  text-decoration: none;
   display: grid;
-  grid-template-columns: minmax(min-content, 25%) 80%;
+  grid-template-columns: minmax(min-content, 25%) 1fr;
 
   background-color: #fff;
   border-radius: 4px;
@@ -431,10 +471,31 @@ fieldset p label input {
   transition: 0.3s;
   transition-property: box-shadow;
 
-  margin: 30px auto;
-
   gap: 20px;
   padding: 0.5rem;
+  max-width: 600px;
+  width: 100%;
+  height: 100%;
+}
+
+.link a {
+  display: block;
+  text-decoration: none;
+}
+
+.fancy_link_container {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  margin: auto;
+  gap: 20px;
+  place-items: center;
+  max-width: 1100px;
+}
+
+@media only screen and (max-width: 1100px) {
+  .fancy_link_container {
+    grid-template-columns: auto;
+  }
 }
 
 .link:hover {
@@ -447,6 +508,12 @@ fieldset p label input {
   align-self: center;
 
   min-width: 100px;
+  margin: auto 2rem;
+}
+
+.link__img img {
+  max-height: 100px;
+  max-width: 100px;
 }
 
 .link__content {
@@ -471,110 +538,102 @@ 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 {
+  transform: scale(1);
-  width: 80%;
+  transition: transform ease-in 0.1s;
-  height: auto;
-
-  fill: var(--white);
-}
-
-.tile__image svg {
-  width: 100%;
 }
 
 .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__title::first-letter {
+  text-transform: capitalize;
 }
 
 .tile:hover .tile__title {
   opacity: 1;
 }
 
+.title_link {
+  text-decoration: none;
+}
+
 .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 {
   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;
@@ -590,10 +649,179 @@ 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;
+  align-items: baseline;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.detail_title > a {
+  text-align: center;
+  flex: 1;
+}
+
+.detail_title > a > img {
+  max-height: 100px;
+  max-width: 100%;
+  min-width: 52px;
+}
+
+.detail_title h2 {
+  margin: 0;
+  text-align: center;
+}
+
+.detail_title_themas {
+  display: flex;
+  gap: inherit;
+  justify-content: center;
+  flex: 1;
+}
+
+
+.social > a {
+  display: block;
+
+  width: 100px;
+  height: 100px;
+}
+
+.social > a > .link {
+  display: none;
+}
+
+.social > a > p {
+  padding-top: 65px;
+  text-align: center;
+}
+
+.social-container {
+  margin: auto;
+}
+
+.social-container > ul {
+  list-style: none;
+  padding: 0;
+  justify-content: space-around;
+}
+
+.detail-body {
+  margin: auto;
+  max-width: 1100px;
+  padding: 2rem 0;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.social {
+  width: 52px;
+  height: 52px;
+}
+
+.social > img {
+  width: 52px;
+  height: 52px;
+}
+
+.social + .social {
+  margin-left: 20px;
+}
+
+.vereniging_themas {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  margin: 0 3rem;
+  padding: 0;
+}
+/* .vereniging_thema {
+  width: 4rem;
+  height: 4rem;
+} */
+
+.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 {
+  max-width: 100%;
+  width: 100%;
+  background-color: var(--darkblue);
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+
+  color: var(--white);
+  padding: .5em 3em;
+}
+
+.showcase-image > img {
+  flex-grow: 3;
+  max-height: 20rem;
+  max-width: 100%;
+  object-fit: scale-down;
+}
+
+.showcase-container {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  width: 100%;
+}
+
+@media only screen and (max-width: 1100px) {
+  .showcase-container {
+    flex-wrap: wrap;
+  }
+}
+
 @media only screen and (max-width: 600px) {
   .tile-grid {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
+
+  .header_photo {
+    display: none;
+  }
+
+  .beforeTheFold {
+    width: 100%;
+    padding: 0;
+    min-height: unset;
+  }
+
+  .scroll {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .randomVerenigingWrapper:nth-child(1),
+  .randomVerenigingWrapper:nth-child(2) {
+    /* Dit heeft hogere prioriteit dan elk kind. */
+    padding-top: 0;
+  }
 }
 
 @media only screen and (max-width: 300px) {
@@ -601,3 +829,85 @@ fieldset p label input {
     grid-template-columns: auto;
   }
 }
+
+.detail-content {
+  margin: auto;
+  padding: 2rem 10%;
+}
+
+.details-photo {
+  max-width: 1100px;
+  padding: 2rem 10%;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.details-contact {
+  padding: 1rem;
+  margin: auto;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.contact-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  gap: 1em;
+}
+
+.contact-container > a {
+  text-align: center;
+}
+
+@media only screen and (max-width: 700px) {
+  .details-contact {
+    padding-bottom: 2rem;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .detail-body {
+    width: 100%;
+  }
+
+  .main_content {
+    padding: 0.5rem;
+  }
+
+  .footer {
+    margin-bottom: 5rem;
+  }
+}
+
+.quizSpotlight {
+  margin: 2rem 0;
+  font-size: 2rem;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+}
+
+.quizSpotlight:hover {
+  cursor: pointer;
+}
+
+.quizSpotlight a {
+  position: relative;
+  text-decoration: none;
+  background: var(--white);
+  color: var(--darkblue);
+  border: 0.4rem solid var(--darkblue);
+  padding: 1rem 2rem;
+  margin-right: 3rem;
+}
+.quizSpotlight a {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
+.quizSpotlight a:hover {
+  background-color: var(--lightblue);
+  border: 0.4rem solid var(--lightblue);
+  color: var(--white);
+}

content/stylesheets/quiz.css

@@ -0,0 +1,106 @@
+
+
+.main_content {
+  margin-top: 2rem;
+}
+
+.quiz_content {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.question_wrapper {
+  padding: 1rem 0 0 2rem;
+  position: relative;
+}
+
+.question_wrapper:before {
+  content: "";
+  position: absolute;
+  top: 2rem;
+  left: -7px;
+  background: silver;
+  height: calc(100% - 2rem);
+  width: 3px;
+}
+
+#postcodeField {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+#postcodeField::-webkit-outer-spin-button,
+#postcodeField::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+#postcodeField[type="number"] {
+  -moz-appearance: textfield;
+}
+
+#resultWrapper {
+  padding-top: 2em;
+}
+
+fieldset {
+  max-height: 60vh;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  overflow-y: auto;
+  margin: auto;
+}
+#postcodeField {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+#postcodeField::-webkit-outer-spin-button,
+#postcodeField::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+#postcodeField[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.form {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+}
+
+.form__element {
+  margin: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.form__element__text {
+  margin-left: 10px;
+}
+.form__element__text::first-letter {
+  text-transform: uppercase;
+}
+
+h3::first-letter {
+  text-transform: uppercase;
+}
+
+.buttons {
+  padding: 2em 10px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.question__ {
+  font-size: 2rem;
+}
+
+.small {
+  padding: 1rem 1.5rem !important;
+  font-size: 1rem !important;
+  border-width: 4px !important;
+}

content/verenigingen.md

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

content/verenigingen/ceneka.md

@@ -4,7 +4,7 @@ id: ceneka
 naam: CenEka
 verkorte_naam: CenEka
 konvent: wvk
-website: www.ceneka.be
+website: https://www.ceneka.be
 contact: info@ceneka.be
 social:
   - platform: facebook

content/verenigingen/deliria.md

@@ -5,7 +5,7 @@ naam: Deliria
 verkorte_naam: Deliria
 konvent: sk
 contact: deliriagent@gmail.com
-website: www.deliriagent.be
+website: http://www.deliriagent.be
 social:
   - platform: facebook
 themas:

content/verenigingen/dentalia.md

@@ -5,7 +5,7 @@ naam: Dentalia
 verkorte_naam: Dentalia
 konvent: fk
 contact: dentaliaghent@gmail.com
-website: www.dentalia.be
+website: https://www.dentalia.be
 social:
   - platform: facebook
     link: https://www.facebook.com/Dentalia/

content/verenigingen/durfdoen.md

@@ -1,7 +0,0 @@
----
-titel: Durf Doen
-id: durfdoen
-naam: Durf Doen
-verkorte_naam: Durf Doen
-konvent: gsr
----

content/verenigingen/durgent.md

@@ -3,8 +3,6 @@ naam: D'URGENT
 id: durgent
 verkorte_naam: D'URGENT
 titel: D'URGENT
-id: ugent1010
-naam: UGent1010
 konvent: wvk
 website: https://www.greencommunity.be/durgent
 social:

content/verenigingen/egmont.md

@@ -4,7 +4,7 @@ id: egmont
 naam: Moeder Egmont
 verkorte_naam: Moeder Egmont
 konvent: sk
-website: www.moederegmont.be
+website: https://www.moederegmont.be
 contact: studentenclubmoederegmont@gmail.com
 social:
   - platform: facebook

content/verenigingen/fde.md

@@ -5,6 +5,7 @@ titel: Studentenraad Dierengeneeskunde
 id: fde
 naam: Studentenraad Dierengeneeskunde
 konvent: gsr
+logo: /assets/sfeerfotos/LogoDSR.png
 themas:
   - engagement
 website: http://www.vlaamsdiergeneeskundigekring.be/Studentenraad.php

content/verenigingen/flyse.md

@@ -5,7 +5,7 @@ naam: FLYSE
 verkorte_naam: FLYSE
 konvent: wvk
 contact: info@flyse.be
-website: www.flyse.be
+website: https://www.flyse.be
 social:
   - platform: instagram
     link: https://www.instagram.com/flysegent/

content/verenigingen/fre.md

@@ -1,7 +1,7 @@
 ---
 naam: StuReC
 verkorte_naam: StuReC
-website: sturec.ugent.be
+website: https://sturec.ugent.be
 contact: sturec@ugent.be
 social:
   - platform: facebook
@@ -10,6 +10,7 @@ titel: Facultaire studentenraad rechtsgeleerdheid
 id: fre
 naam: Facultaire studentenraad rechtsgeleerdheid
 konvent: gsr
+logo: /assets/sfeerfotos/logosturec.png
 themas:
   - engagement
 ---

content/verenigingen/fris.md

@@ -6,7 +6,7 @@ id: fris
 naam: Faculteitsraad Ingenieurswetenschappen en Architectuur
 konvent: gsr
 contact: fris@ugent.be
-website: fris.ugent.be
+website: https://fris.ugent.be
 themas:
   -  engagement
 ---

content/verenigingen/geeraard.md

@@ -4,7 +4,7 @@ id: geeraard
 naam: Geeraard
 verkorte_naam: Geeraard
 konvent: sk
-website: www.degeeraard.be
+website: https://www.degeeraard.be
 social:
   - platform: instagram
   - platform: facebook

content/verenigingen/geografica.md

@@ -1,6 +1,6 @@
 ---
 titel: Geografica
-id: geografi
+id: geografica
 naam: Geografica
 verkorte_naam: Geografica
 konvent: fk

content/verenigingen/geologica.md

@@ -1,6 +1,6 @@
 ---
 titel: Geologica
-id: geologic
+id: geologica
 naam: Geologica
 verkorte_naam: Geologica
 konvent: fk

content/verenigingen/groen.md

@@ -2,7 +2,7 @@
 naam: Jong Groen StuGent
 verkorte_naam: Jong Groen StuGent
 titel: JGroen StuGent
-id: jgroen
+id: groen
 naam: JGroen StuGent
 konvent: pfk
 contact: stugent@jonggroen.be

content/verenigingen/illusiona.md

@@ -1,6 +0,0 @@
----
-titel: Illusiona
-id: illusiona
-naam: Illusiona
-konvent: gsr
----

content/verenigingen/laetitia.md

@@ -4,7 +4,7 @@ id: laetitia
 naam: Laetitia
 verkorte_naam: Laetitia
 konvent: sk
-website: www.laetitia-gent.be
+website: http://www.laetitia-gent.be
 social:
   - platform: facebook
     link: https://www.facebook.com/studentenclub.laetitia

content/verenigingen/lombrosiana.md

@@ -1,6 +1,6 @@
 ---
 titel: Lombrosiana
-id: lombro
+id: lombrosiana
 naam: Lombrosiana
 verkorte_naam: Lombrosiana
 konvent: fk

content/verenigingen/meetjesland.md

@@ -4,7 +4,7 @@ id: meetjesland
 naam: Moeder Meetjesland
 verkorte_naam: Moeder Meetjesland
 konvent: sk
-website: www.moeder-meetjesland.be
+website: https://www.moeder-meetjesland.be
 social:
   - platform: facebook
     link: https://www.facebook.com/MoederMeetjesland

content/verenigingen/minos.md

@@ -8,9 +8,9 @@ contact: info@minosgent.gmail.com
 website: https://minosgent.com/
 social:
   - platform: facebook
-    link: www.facebook.com/MinosGent
+    link: https://www.facebook.com/MinosGent
   - platform: instagram
-    link: www.instagram.com/minosgent
+    link: https://www.instagram.com/minosgent
 themas:
   -  politiek en filosofisch
   - internationaal

content/verenigingen/modelstudies.md

@@ -1,6 +1,6 @@
 ---
 titel: Atelier Modelstudies
-id: schilder
+id: modelstudies
 naam: Atelier Modelstudies
 verkorte_naam: Atelier Modelstudies
 konvent: kultk

content/verenigingen/nva.md

@@ -1,6 +1,6 @@
 ---
 titel: Jong N-VA UGent
-id: jongnva
+id: nva
 naam: Jong N-VA UGent
 verkorte_naam: Jong N-VA UGent
 konvent: pfk

content/verenigingen/oedc.md

@@ -4,12 +4,16 @@ id: oedc
 naam: 180 degrees consulting
 verkorte_naam: 180 degrees consulting
 konvent: wvk
-website: http://www.180dc.org/ghent
+website: https://www.180ghent.com/
 social:
   - platform: facebook
     link: https://www.facebook.com/180DegreesConsultingGhent
 themas:
   - economie en development
+showcase:
+  - photo: /assets/logos/oedcA.jpg
+  - photo: /assets/logos/oedcB.jpg
+  - photo: /assets/logos/oedcV.jpg
 ---
 
 180 Degrees Consulting is the world’s largest student-driven consultancy. The Ghent branch was founded on July 1, 2014 and operates at Ghent University. We bring top university talent to the non-profit sector, transforming good organizations into great ones via our high-quality and uniquely affordable consulting services. Our mission is to strengthen the ability of socially conscious organizations and to achieve high impact social outcomes trough the development of innovative, practical and sustainable solutions.

content/verenigingen/prometheus.md

@@ -4,6 +4,7 @@ id: prometheus
 naam: Prometheus
 verkorte_naam: Prometheus
 konvent: kultk
+logo: /assets/sfeerfotos/logoprometheus.jpg
 contact: prometheusgent@gmail.com
 website: https://prometheusgent.wordpress.com/
 social:

content/verenigingen/socialisten.md

@@ -1,6 +1,6 @@
 ---
 titel: Jongsocialisten StuGent
-id: js
+id: socialisten
 naam: Jongsocialisten StuGent
 verkorte_naam: Jongsocialisten StuGent
 konvent: pfk

content/verenigingen/stt.md

@@ -4,11 +4,12 @@ id: stt
 naam: Start to talk
 verkorte_naam: stt
 konvent: gsr
+logo: /assets/sfeerfotos/logostt.jpeg
 contact: starttotalk@bemsa-gent.be
-website: https://bemsa-gent.be/scoph/start-to-talk/?fbclid=IwAR0nSY-mojzm1Ou7IRVCjdWXqdner0_H2f5QTr55DZVcAUfj6ArEL5OrIuQ
+website: https://bemsa-gent.be/scoph/start-to-talk
 social:
   - platform: facebook
-    link: facebook.com/starttotalkgent/
+    link: https://facebook.com/starttotalkgent/
 themas:
   - lifestyle
   - engagement

content/verenigingen/stuart.md

@@ -5,7 +5,7 @@ titel: Studentenraad Faculteit Letteren en Wijsbegeerte
 id: stuart
 naam: Studentenraad Faculteit Letteren en Wijsbegeerte
 konvent: gsr
-website: stuart.ugent.be
+website: https://stuart.ugent.be
 contact: stuart@ugent.be
 social:
   - platform: facebook

content/verenigingen/stubio.md

@@ -2,10 +2,10 @@
 naam: StuBio
 verkorte_naam: StuBio
 titel: Faculteitsraad Bio-ingenieurswetenschappen
-id: fbw
+id: stubio
 naam: Faculteitsraad Bio-ingenieurswetenschappen
 konvent: gsr
-website: stubio.ugent.be
+website: https://stubio.ugent.be
 contact: stubio@ugent.be
 social:
   - platform: facebook

content/verenigingen/studentenfanfare.md

@@ -1,6 +1,6 @@
 ---
 titel: Studentenfanfare
-id: sf
+id: studentenfanfare
 naam: Studentenfanfare
 verkorte_naam: Studentenfanfare
 konvent: kultk

content/verenigingen/stugg.md

@@ -5,7 +5,7 @@ titel: Studentenraad Geneeskunde en Gezondheidswetenschappen
 id: stugg
 naam: Studentenraad Geneeskunde en Gezondheidswetenschappen
 konvent: gsr
-website: www.stugg.be
+website: https://www.stugg.be
 contact: info@stugg.be
 social:
   - platform: facebook

content/verenigingen/stujardin.md

@@ -4,6 +4,7 @@ id: stujardin
 naam: StuJardin
 verkorte_naam: StuJardin
 konvent: gsr
+logo: /assets/sfeerfotos/stujardin.png
 contact: http://stujardin@gmail.com/
 website: http://student.ugent.be/stujardin/
 social:

content/verenigingen/stuveco.md

@@ -5,7 +5,7 @@ titel: Studentenraad Faculteit Economie en Bedrijfskunde
 id: stuveco
 naam: Studentenraad Faculteit Economie en Bedrijfskunde
 konvent: gsr
-website: stuveco.ugent.be
+website: https://stuveco.be
 themas:
   -  engagement
 showcase:

content/verenigingen/stuw.md

@@ -9,7 +9,7 @@ website: https://stuw.ugent.be/
 contact: stuw@ugent.be
 social:
   - platform: facebook
-    link: facebook.com/stuwugent
+    link: https://facebook.com/stuwugent
 themas:
   -  engagement
 ---

content/verenigingen/tnk.md

@@ -1,6 +1,6 @@
 ---
 titel: Tomo No Kai
-id: tnok
+id: tnk
 naam: Tomo No Kai
 verkorte_naam: Tomo No Kai
 konvent: ik

content/verenigingen/tsg.md

@@ -1,6 +1,6 @@
 ---
 titel: "'t Zal Wel Gaan"
-id: tzal
+id: tsg
 naam: "'t Zal Wel Gaan"
 verkorte_naam: "'t Zal Wel Gaan"
 konvent: pfk

content/verenigingen/urgent.md

@@ -4,7 +4,7 @@ id: urgent
 naam: Urgent.fm
 verkorte_naam: Urgent.fm
 konvent: urgent
-website: www.urgent.fm
+website: https://www.urgent.fm
 social:
   - platform: facebook
     link: https://www.facebook.com/urgent.fm/

content/verenigingen/vbk.md

@@ -7,9 +7,10 @@ konvent: fk
 website: https://www.vlaamsebiomedischekring.be/
 contact: vbkgent@gmail.com
 social:
-  - plaform: facebook
+  - platform: facebook
     link: https://www.facebook.com/vlaamsebiomedischekring/
 themas:
   - faculteit
 ---
+
 V.B.K. simply the best! Voor alle studenten Biomedische wetenschappen organiseren wij tal van beestelijke feestjes in de Point Final, tevens ons kringcafe waar tal van promo's doorgaan. Ook hebben wij ons zalige galabal samen met VLAK. Naast feestjes doen we ook toffe sportactiviteiten, cultuuractiviteiten enz. Met ons zal je de leukste studententijd tegemoet gaan, twijfel dus niet om lid te worden van onze familie, je zal er zeker geen spijt van hebben!