Merge branch 'master' into docker

Gemfile

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

Gemfile.lock

@@ -122,16 +122,9 @@ GEM
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sassc (2.4.0)
-      ffi (~> 1.9)
     shellany (0.0.1)
-    slim (4.1.0)
-      temple (>= 0.7.6, < 0.9)
-      tilt (>= 2.0.6, < 2.1)
     slow_enumerator_tools (1.1.0)
-    temple (0.8.2)
     thor (1.0.1)
-    tilt (2.0.10)
     tomlrb (1.3.0)
     tty-color (0.5.2)
     tty-command (0.9.0)
@@ -156,8 +149,6 @@ DEPENDENCIES
   nokogiri
   pdfkit
   sass
-  sassc
-  slim
 
 BUNDLED WITH
    2.1.4

Rules

@@ -19,6 +19,7 @@ compile '/{verenigingen,projecten}/*.md' do
   filter :kramdown
   layout '/vereniging.*'
   layout '/default.*'
+  layout '/base.*'
   write ext: 'html'
 end
 
@@ -26,6 +27,7 @@ compile '/evenementen/*.md' do
   filter :kramdown
   layout '/evenement.*'
   layout '/default.*'
+  layout '/base.*'
   write ext: 'html'
 end
 
@@ -33,6 +35,7 @@ compile '/konventen/*.md' do
   filter :kramdown
   layout '/konvent.*'
   layout '/default.*'
+  layout '/base.*'
   write ext: 'html'
 end
 
@@ -45,7 +48,7 @@ end
 compile '/homepage.md' do
   filter :kramdown
   layout '/homepage.*'
-  layout '/default.*'
+  layout '/base.*'
   write '/index.html'
 end
 
@@ -56,6 +59,7 @@ end
 compile '/faq.erb' do
   filter :erb
   layout '/default.*'
+  layout '/base.*'
   write '/faq/index.html'
 end
 
@@ -63,12 +67,14 @@ compile '/verenigingen.md' do
   filter :kramdown
   layout '/verenigingen.*'
   layout '/default.*'
+  layout '/base.*'
   write ext: 'html'
 end
 
 compile '/*.md' do
   filter :kramdown
   layout '/default.*'
+  layout '/base.*'
   write ext: 'html'
 end
 

content/homepage.md

@@ -3,4 +3,3 @@ naam: Home
 navigable: true
 order: 1
 ---
-Huis

content/stylesheets/main.css

@@ -0,0 +1,213 @@
+:root {
+    --white: hsl(0, 0%, 98%);
+    --darkblue: #013e7a;
+    --lightblue: #1a77d3;
+    --cyan: #aaeeff;
+    --yellow: #fed318;
+}
+
+html, body {
+    padding: 0;
+    margin: 0;
+}
+
+html {
+    background: var(--white);
+    height: 100%;
+}
+
+body {
+    height: 100%;
+    font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.align {
+    margin: 0 auto;
+    max-width: 1280px;
+    padding: 0 1em;
+}
+
+.beforeTheFold, main {
+    position: relative;
+    min-height: 100%;
+}
+
+button, input {
+    font-size: inherit;
+    font-family: inherit;
+    color: inherit;
+    background-color: transparent;
+}
+button {
+    border: 0.15em solid var(--darkblue);
+}
+input {
+    border: none;
+    border-bottom: 0.15em solid var(--darkblue);
+    padding: 0.1em 0.3em;
+}
+
+nav a {
+    text-decoration: none;
+    font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
+    color: var(--darkblue);
+    padding: 0 2rem;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+}
+
+h2 {
+    font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
+    font-size: 3.4rem;
+    color: var(--darkblue);
+}
+.beforeTheFold h2 {
+    max-width: 30rem;
+}
+
+.studentZijn {
+    margin: 4rem 0 2rem 3rem;
+    margin: 11vh 0 2rem 3rem;
+}
+
+.hidden {
+    display: none;
+}
+
+.quote {
+    margin-top: 3rem;
+    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;
+    font-style: italic;
+    font-weight: 500;
+    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;
+    bottom: 0.5rem;
+    left: 0;
+    right: 0;
+    text-align: center;
+    z-index: 1;
+}
+.scroll a {
+    display: inline-block;
+    color: var(--darkblue);
+    font-size: 1.1rem;
+    text-decoration: none;
+    padding: 0.7rem 1.1rem;
+    font-weight: 500;
+    text-shadow:
+        0 0 1em hsla(0, 0%, 100%, 1),
+        0 0 1em hsla(0, 0%, 100%, 1),
+        0 0 0.1em hsla(0, 0%, 100%, 1);
+}
+
+.shade {
+    z-index: -1;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 7rem;
+    background: linear-gradient(
+        hsla(0, 0%, 100%, 0),
+        hsla(0, 0%, 100%, 0.6)
+    );
+}
+
+.backgroundSquare {
+    z-index: -2;
+    position: absolute;
+    background-color: var(--cyan);
+}
+
+.intro {
+    position: relative;
+}
+
+.header_blueSquare {
+    right: 20%;
+    left: -1000px;
+    left: -100vw;
+    top: -1000px;
+    top: -100vw;
+    bottom: -1rem;
+
+    opacity: 0.3;
+    z-index: -3;
+}
+
+.header_photo {
+    background: url(/assets/placeholder.jpg) center center;
+    background-size: cover;
+    right: 0;
+    left: 50%;
+    bottom: 0;
+    top: 20%;
+}
+
+
+
+.randomVerenigingen p:nth-child(odd) {
+    -webkit-text-stroke-width: 2px;
+    -webkit-text-stroke-color: var(--lightblue);
+    color: transparent;
+}
+
+.randomVerenigingen p {
+    text-transform: uppercase;
+}
+
+.underline, .active_link {
+    padding-bottom: -2rem;
+    margin-bottom: -2rem;
+    box-shadow: inset 0 -8px 0 var(--yellow);
+}

content/stylesheets/main.scss

@@ -1,60 +0,0 @@
-img {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
-body {
-  box-sizing: border-box;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0.5em;
-}
-
-h1 {
-  border-left: 2px solid;
-  border-bottom: 2px solid;
-  display: inline-block;
-  padding: 2px 16px 2px 4px;
-}
-
-.content-wrapper {
-  margin: auto auto;
-}
-.details-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  .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;
-      }
-    }
-  }
-  .details-contact {
-    order: 3;
-    flex-basis: 100%;
-    border-top: 2px solid black;
-  }
-  .details-verenigingen{
-    order: 4;
-    flex-basis: 100%;
-  }
-}

layouts/base.erb

@@ -26,7 +26,7 @@
     <img src="" alt="">
   </div>
   <p>©2020 Gentse studentenraad</p>
-  <div>
+  <div lang="en">
     <p>Made with ♥ by <a href="https://zeus.gent">Zeus WPI</a></p>
   </div>
 </footer>

layouts/default.erb

@@ -1,14 +1,5 @@
-<html>
-    <head>
-        <meta charset="UTF-8">
-        <title> Durf Doen! - <%= item[:naam] || abbreviation(item) %> </title>
+<header>
+  <%= render '/partials/navbar.*' %>
+</header>
 
-        <link rel="stylesheet" href="/stylesheets/main.css">
-        <link rel="shortcut icon" href="/assets/favicon.png">
-        <%= item[:head] %>
-    </head>
-    <body>
-        <%= render '/partials/navbar.*' %>
-        <%= yield %>
-    </body>
-</html>
+<%= yield %>

layouts/evenement.erb

@@ -7,4 +7,4 @@
     </div>
     <%= render '/partials/detail.*' %>
 </div>
-</div>
+</div>

layouts/homepage.erb

@@ -1 +1,46 @@
-<%= yield %>
+<div class="beforeTheFold">
+  <header class="align">
+    <%= render '/partials/navbar.*' %>
+  </header>
+
+  <div class="header_photo backgroundSquare"></div>
+
+  <article class="align">
+    <h1 class="hidden">Durf Doen</h1>
+    <div class="intro">
+      <div class="header_blueSquare backgroundSquare"></div>
+      <h2 class="studentZijn">
+        <span class="underline">Student</span> zijn is
+        <span class="underline">meer</span> dan studeren
+      </h2>
+    </div>
+    <div class="quote">
+      <div>
+        <img src="/assets/durfdoenlogo.png" alt="">
+      </div>
+      <div>
+        <p>Durf Doen wil je helpen de vereniging te vinden waar jij je thuis zal voelen.</p>
+        <div class="quizSpotlight">
+          <a href="test">Doe de test</a>
+        </div>
+      </div>
+    </div>
+  </article>
+
+  <div class="scroll">
+    <a href="#main">Of scroll naar beneden voor meer info</a>
+  </div>
+
+  <div class="shade"></div>
+</div>
+
+<main id="main" class="align">
+  <article>
+    <h2>Kende je bijvoorbeeld deze vereniging al?</h2>
+
+    <section class="randomVereniging">
+      <h3>Weus ZPI</h3>
+      <p>Weus ZPI is de studentenvereniging voor InFoRmAtIcA aan de UGent. Ons doel is een bullshitty omgeving te bullshitten voor bullshitted studenten die hun bullshit willen uitbreiden door zich te engageren voor bullshitprojecten.</p>
+    </section>
+  </article>
+</main>

layouts/konvent.erb

@@ -6,4 +6,4 @@
     </div>
     <%= render '/partials/detail.*' %>
 </div>
-</div>
+</div>

layouts/partials/navbar.erb

@@ -1,3 +1,20 @@
-<% for i in navigables %>
-    <%= link_to(i[:naam], i) %>
-<% end %>
+<nav>
+  <img src="/assets/OmdatHetDurfDoenLogoSuckt.png" alt="">
+  <ul>
+    <% for i in navigables %>
+      <li><%= link_to(i[:naam], i, class: "nav_link") %></li>
+    <% end %>
+    <script>
+      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");
+        }
+      })
+    </script>
+
+  </ul>
+  <div>
+    <input type="search" placeholder="Zoek vereniging, convent …">
+  </div>
+</nav>

layouts/verenigingen.erb

@@ -1,6 +1,6 @@
 <div class="flex-horz">
   <div class="horz-child">
-    <h1> Themas </h1>
+    <h1> Thema's </h1>
     <ul>
       <% for thema in themas %>
         <img src="<%= image_url(thema) %>" alt="<%= thema[:naam] %>">

lib/helpers/verenigingen.rb

@@ -51,6 +51,17 @@ module VerenigingenHelper
     else
       item[:image]
     end
+    def abbreviation(item)
+        item.identifier.without_ext.split('/').last
+    end
+    def verenigingen_random(amount)
+        @items.find_all("**/verenigingen/*").map{|x| {
+            "titel" => x[:titel],
+            "naam" => x[:naam],
+            "konvent" => x[:konvent],
+            "themas" => x[:themas]
+        }}.to_a.shuffle[0..amount]
+    end
   end
 
   def image_tag(item)