First working layout

content/stylesheets/main.scss

@@ -0,0 +1,52 @@
+img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+body {
+  box-sizing: border-box;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.content-wrapper {
+  margin: auto auto;
+}
+.details-wrapper {
+  border: 2px solid black;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .details-container {
+    border: 2px solid black;
+  }
+  .details-logo {
+    order: 0;
+    flex-basis: 10%;
+  }
+  .details-text {
+    order: 1;
+    flex-basis: 70%;
+  }
+  .details-photo{
+    order: 2;
+    flex-basis: 15%;
+    .showcase-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      .showcase-image{
+        align-self: center;
+        margin: 0.5em;
+        max-width: 150px;
+        border: 1px solid red;
+      }
+    }
+  }
+  .details-contact {
+    order: 3;
+    flex-basis: 100%;
+  }
+}

content/verenigingen/vvn.md

@@ -1,6 +1,18 @@
 ---
 titel: VVN
 naam: VVN
+logo: placeholder.png
+contact: some_email@some_domain.bla
+website: www.somewebsite.bla
+social:
+  - platform: facebook
+    link: www.link.bla
+  - platform: twitter
+    link: www.link.bla
+showcase:
+  - photo: image.png
+themas:
+  - naam: faking
 bestuur:
   - naam: Bastiaan Aelbrecht
     functie: Voorzitter
@@ -34,7 +46,7 @@ De sterrenkundigen zien hun geliefde ster plots bevriezen. Aan de Zuidpool staat
 
 Supergeleiding op kamertemperatuur, de formidale kwantumcomputer, de werking van ons hart/brein, de klimaatverandering, de jacht op exoplaneten, kwantummechanische fase-overgangen, spintronica, kernfusie… Zovele vragen, zovele mysteries, zoveel Fun.
 
- 
+
 
 En jij, helemaal met verstomming geslagen, merkt de website van de Gentse Vereniging voor Natuurkunde op. Je krijgt spontaan een warm gevoel van binnen, gevoed door een vurig verlangen naar natuurkunde. Om deze honger naar waarheid en mystiek te voeden, hebben een aantal natuurkunde- en ingenieursstudenten in 1992 de VVN opgericht. De VVN is een studievereniging, die iedereen van boreling tot nestor, geïnteresseerd in natuurkunde, tracht te overkoepelen over de faculteitsgrenzen heen.
 
@@ -42,6 +54,6 @@ Je zal bij ons geen Carapils kunnen verkrijgen, of een kiel en een lint, een can
 
 Ons grootste deel van de tijd gaat naar het organiseren van lezingen. Lezingen geschikt zowel voor de geïnteresseerde leek, als de doorgewinterde natuurfilosoof, als zij die pronken met A Brief History of Time in hun boekenkast. Wegens het ontbreken van een gelijkaardige vereniging aan de andere universiteiten, is de VVN voornamelijk hierom bekend in België. Maar wetenschapspopularisatie gaat verder dan slimme mensen een Powerpointpresentatie te laten maken. Met ons budget trachten we experimentele opstellingen aan te schaffen, zoals een trillende plaat, een railgun, een Stirlingmotor, een nevelkamer, een supergeleidende magneet en een ware ‘Elektriseermachine’. Hiermee beogen we iedereen warm te maken voor de wondere wereld van de natuurkunde en echte, coole fysica van dichtbij te laten ervaren. Bij heldere hemel nodigen we iedereen uit om op het dak van de S9 sterren te spotten door professionele telescopen, onder begeleiding van astronomen.
 
- 
+
 
 Nu, zijn wij echt een groepje nerds? Welnee, de VVN brengt eigenlijk vooral mensen samen. Na al die lezingen staat er steeds een frisse pint en een nootje voor jullie klaar. En een heleboel gelijkgezinden waarmee je tot in de late uurtjes kan filosoferen.

content/verenigingen/zeus.md

@@ -1,6 +1,22 @@
 ---
 titel: Zeus WPI
 naam: Zeus WPI
+logo: placeholder.png
+contact: some_email@some_domain.bla
+website: www.somewebsite.bla
+social:
+  - platform: facebook
+    link: www.link.bla
+  - platform: twitter
+    link: www.link.bla
+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
+themas:
+  - naam: thema1
+  - naam: thema2
+  - naam: thema3
 bestuur:
   - functie: Voorzitter
     naam: Robbe Van Herck

layouts/vereniging.erb

@@ -1,8 +1,9 @@
+<div class="content-wrapper">
 <h1> <%= item[:naam] %> </h1>
-<h2> Het bestuur: </h2>
-<ul>
-<% for persoon in item[:bestuur] %>
-    <li> <%= persoon[:functie] %>: <%= persoon[:naam] %> </li>
-<% end %>
-</ul>
-<%= yield %>
+<div class="details-wrapper">
+    <div class="details-container details-text">
+        <%= yield %>
+    </div>
+    <%= render '/partials/detail.*' %>
+</div>
+</div>