From 69c7b45eb8e47c817423cf669ff7c7d80dece71d Mon Sep 17 00:00:00 2001
From: kindtanton <kindtchiva@gmail.com>
Date: Tue, 5 Nov 2019 20:05:42 +0100
Subject: [PATCH] Designed the 'Sponserende Leden' page

---
 content/about/sponserende_leden.erb           | 23 ++++----
 .../assets/stylesheets/includes/about.scss    | 54 +++++++++++++++++--
 2 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/content/about/sponserende_leden.erb b/content/about/sponserende_leden.erb
index 4a8c455..2d245f6 100644
--- a/content/about/sponserende_leden.erb
+++ b/content/about/sponserende_leden.erb
@@ -7,7 +7,7 @@ narrow_page: true
 
 <div id='sponsoring_members' class="content">
   <% current_sponsoring_members.each do |member| %>
-      <div id="<%= member[:nickname] %>" class="box">
+      <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] %>
@@ -21,22 +21,21 @@ narrow_page: true
                 </div>
               </div>
             <% end %>
+            <p class="name"><%= member[:name] %></p>
+            <p class="username">(<%= member[:nickname] %>)</p>
           </div>
-          <div class="column">
-            <span style="margin-bottom:0" class="title"><%= member[:name] %></span>
-            <span class="subtitle">
-              (<%= member[:nickname] %>)
-            </span>
+          <div class="text_wrapper">
+          <div class="column text_data">
             <div>
-              <i>
-                -
-                <%= member[:quote] %>
+              <i class="quote">
+                "<%= member[:quote] %>"
               </i>
             </div>
-            <blockquote style="margin-top: 0.5em">
+            <div class="description_text" style="margin-top: 0.5em">
               <%= member[:description] %>
-            </blockquote>
-            <div class="columns">
+            </div>
+          </div>
+          <div class="columns links">
               <% if member[:github] %>
                 <a style="padding: 5px" class="social-icon" href="https://github.com/<%= member[:github] %>" target="_blank">
                   <span class="icon">
diff --git a/content/assets/stylesheets/includes/about.scss b/content/assets/stylesheets/includes/about.scss
index 8f3c2bc..40a8bdd 100644
--- a/content/assets/stylesheets/includes/about.scss
+++ b/content/assets/stylesheets/includes/about.scss
@@ -152,11 +152,57 @@
   }
 }
 
+.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;
+  }
+  .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: 10vw;
-  height: 10vw;
-  min-width: 100px;
-  min-height: 100px;
+  width: 8rem;
+  height: 8rem;
   margin-left: auto;
   margin-right: auto;
   display: flex;