From 7005da9cd7234b4c0910bba75be348f22e476603 Mon Sep 17 00:00:00 2001
From: Robbe Van Herck <robbevanherck1@gmail.com>
Date: Wed, 11 Dec 2019 23:31:35 +0100
Subject: [PATCH] Revert "Revert "Clean-up sponsorende leden""

---
 content/about/sponserende_leden.erb           |  59 ----------
 content/about/sponsorende-leden.erb           |  53 +++++++++
 .../assets/stylesheets/includes/about.scss    | 110 +++++++++---------
 layouts/partials/_about_sub_navbar.erb        |   2 +-
 4 files changed, 111 insertions(+), 113 deletions(-)
 delete mode 100644 content/about/sponserende_leden.erb
 create mode 100644 content/about/sponsorende-leden.erb

diff --git a/content/about/sponserende_leden.erb b/content/about/sponserende_leden.erb
deleted file mode 100644
index 8b09846..0000000
--- a/content/about/sponserende_leden.erb
+++ /dev/null
@@ -1,59 +0,0 @@
----
-narrow_page: true
----
-
-<%= render '/partials/_about_sub_navbar.*', selected: 'sponsoring_members' %>
-<h1 class='title is-1 has-text-centered'>Sponserende leden</h1>
-
-<div id='sponsoring_members' class="content">
-  <% current_sponsoring_members.each do |member| %>
-      <div id="<%= member[:nickname] %>" class="box sponsoring_member">
-        <article class="columns is-mobile">
-          <div class="column is-gapless is-narrow logo-wrapper">
-            <% if member[:photo] %>
-              <div class="sponserend_image">
-                <img src="<%=member[:photo]%>">
-              </div>
-            <% else %>
-              <div class="sponserend_image" style="background-color: #ff7f00">
-                <div class="logo-initial has-text-centered">
-                  <%= member[:name].chars.first %>
-                </div>
-              </div>
-            <% end %>
-            <p class="name"><%= member[:name] %></p>
-            <p class="username">(<%= member[:nickname] %>)</p>
-          </div>
-          <div class="text_wrapper">
-          <div class="column text_data">
-            <div>
-              <i class="quote">
-                "<%= to_HTML(member[:quote]) %>"
-              </i>
-            </div>
-            <div class="description_text" style="margin-top: 0.5em">
-              <%= to_HTML(member[:description]) %>
-            </div>
-          </div>
-          <div class="columns links">
-              <% member[:links].each do |link| %>
-                <% if link[:icon] %>
-                  <a style="padding: 5px" class="social-icon" href="<%= link[:url] %>" target="_blank">
-                    <span class="icon">
-                      <%= fa link[:icon], {:size => "2x"} %>
-                    </span>
-                  </a>
-                <% else %>
-                  <a style="padding: 5px" class="social-icon" href="<%= link[:url] %>" target="_blank">
-                    <span class="icon">
-                      <%= fa :globe, {:size => "2x"} %>
-                    </span>
-                  </a>
-                <% end %>
-              <% end %>
-            </div>
-          </div>
-        </article>
-      </div>
-    <% end %>
-  </div>
diff --git a/content/about/sponsorende-leden.erb b/content/about/sponsorende-leden.erb
new file mode 100644
index 0000000..d26c137
--- /dev/null
+++ b/content/about/sponsorende-leden.erb
@@ -0,0 +1,53 @@
+---
+narrow_page: true
+---
+
+<%= render '/partials/_about_sub_navbar.*', selected: 'sponsoring-members' %>
+<h1 class='title is-1 has-text-centered'>Sponsorende leden</h1>
+
+<div id='sponsoring-members' class="content">
+  <% current_sponsoring_members.each do |member| %>
+    <div id="<%= member[:nickname] %>" class="box sponsoring-member">
+      <article class="columns is-mobile">
+        <div class="column is-gapless is-narrow logo-wrapper">
+          <% if member[:photo] %>
+            <img src="<%= member[:photo] %>" alt="<%= member[:name] %>">
+          <% else %>
+            <div class="logo-initial has-text-centered">
+              <%= member[:name].chars.first %>
+            </div>
+          <% end %>
+          <div class="name"><%= member[:name] %></div>
+          <div class="username">(<%= member[:nickname] %>)</div>
+        </div>
+        <div class="column">
+          <div>
+            <blockquote>
+              <%= to_HTML(member[:quote]) %>
+            </blockquote>
+            <p class="description">
+              <%= to_HTML(member[:description]) %>
+            </p>
+          </div>
+          <div class="links">
+            <% member[:links].each do |link| %>
+              <% if link[:icon] %>
+                <a class="social-icon" href="<%= link[:url] %>" target="_blank">
+                    <span class="icon">
+                      <%= fa link[:icon], {:size => "2x"} %>
+                    </span>
+                </a>
+              <% else %>
+                <a class="social-icon" href="<%= link[:url] %>" target="_blank">
+                    <span class="icon">
+                      <%= fa :globe, {:size => "2x"} %>
+                    </span>
+                </a>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
+      </article>
+    </div>
+  <% end %>
+</div>
diff --git a/content/assets/stylesheets/includes/about.scss b/content/assets/stylesheets/includes/about.scss
index e5f1118..fbb07e6 100644
--- a/content/assets/stylesheets/includes/about.scss
+++ b/content/assets/stylesheets/includes/about.scss
@@ -162,60 +162,64 @@ table.board-table {
   }
 }
 
-.name{
-  padding-top: 0.75rem;
-  font-size: 1.4rem;
-  font-weight: bold;
-}
-
-.username{
-  margin-top: -1.5rem;
-  font-weight: lighter;
-  font-size: 1.1rem;
-}
-
-.logo-wrapper{
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 14rem;
-  padding: 0.75rem 0;
-}
-
-@media screen and (max-width: 550px){
-  .logo-wrapper{
-    width: 10rem;
+.sponsoring-member {
+  .name {
+    padding-top: 0.75rem;
+    font-size: 1.4rem;
+    font-weight: bold;
+    text-align: center;
   }
-  .name{
-    font-size: 1rem;
+
+  .username {
+    font-weight: lighter;
+    font-size: 1.1rem;
   }
-  .username{
-    font-size: 0.9rem;
+
+  .logo-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 14rem;
+    padding: 0.75rem 0;
+
+    img {
+      max-width: 9rem;
+      max-height: 9rem;
+    }
+  }
+
+  .links {
+    margin-top: 1.5rem;
+
+    .social-icon {
+      margin-right: 0.6rem;
+    }
+  }
+
+  blockquote {
+    font-size: 1.2rem;
+  }
+
+  .description {
+    font-size: 1.1rem;
+    font-weight: normal;
+  }
+
+  .logo-initial {
+    background-color: #ff7f00;
+    width: 7rem;
+    height: 7rem;
+  }
+
+  @media screen and (max-width: 550px){
+    .logo-wrapper {
+      width: 10rem;
+    }
+    .name{
+      font-size: 1rem;
+    }
+    .username{
+      font-size: 0.9rem;
+    }
   }
 }
-.links{
-  padding-left: 1rem;
-}
-
-.quote {
-  font-size: 1.2rem;
-}
-
-.text_data {
-  margin: 2rem 0;
-  border-left: 0.25rem solid #09C3FF;
-}
-
-.description {
-  font-size: 1.1rem;
-}
-
-.sponserend_image {
-  width: 8rem;
-  height: 8rem;
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  align-items: center;
-  border-radius: 100000000000000px;
-}
diff --git a/layouts/partials/_about_sub_navbar.erb b/layouts/partials/_about_sub_navbar.erb
index 0c200a4..ff46093 100644
--- a/layouts/partials/_about_sub_navbar.erb
+++ b/layouts/partials/_about_sub_navbar.erb
@@ -5,6 +5,6 @@
     <li class="<%= 'is-active' if @selected == 'historiek'%>"><a href="/about/historiek">Historiek</a></li>
     <li class="<%= 'is-active' if @selected == 'oud-bestuur'%>"><a href="/about/oud-bestuur">Oud-bestuur</a></li>
     <li class="<%= 'is-active' if @selected == 'verslagen'%>"><a href="/about/verslagen">Verslagen</a></li>
-    <li class="<%= 'is-active' if @selected == 'sponsoring_members'%>"><a href="/about/sponserende_leden">Sponserende leden</a></li>
+    <li class="<%= 'is-active' if @selected == 'sponsoring-members'%>"><a href="/about/sponsorende-leden">Sponsorende leden</a></li>
   </ul>
 </div>