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

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>
+<div class="details-wrapper">
-<ul>
+    <div class="details-container details-text">
-<% for persoon in item[:bestuur] %>
-    <li> <%= persoon[:functie] %>: <%= persoon[:naam] %> </li>
-<% end %>
-</ul>
         <%= yield %>
+    </div>
+    <%= render '/partials/detail.*' %>
+</div>
+</div>