Designed the 'Sponserende Leden' page

This commit is contained in:
kindtanton 2019-11-05 20:05:42 +01:00
parent 8f6eee34cc
commit 69c7b45eb8
2 changed files with 61 additions and 16 deletions

View file

@ -7,7 +7,7 @@ narrow_page: true
<div id='sponsoring_members' class="content"> <div id='sponsoring_members' class="content">
<% current_sponsoring_members.each do |member| %> <% 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"> <article class="columns is-mobile">
<div class="column is-gapless is-narrow logo-wrapper"> <div class="column is-gapless is-narrow logo-wrapper">
<% if member[:photo] %> <% if member[:photo] %>
@ -21,22 +21,21 @@ narrow_page: true
</div> </div>
</div> </div>
<% end %> <% end %>
<p class="name"><%= member[:name] %></p>
<p class="username">(<%= member[:nickname] %>)</p>
</div> </div>
<div class="column"> <div class="text_wrapper">
<span style="margin-bottom:0" class="title"><%= member[:name] %></span> <div class="column text_data">
<span class="subtitle">
(<%= member[:nickname] %>)
</span>
<div> <div>
<i> <i class="quote">
- "<%= member[:quote] %>"
<%= member[:quote] %>
</i> </i>
</div> </div>
<blockquote style="margin-top: 0.5em"> <div class="description_text" style="margin-top: 0.5em">
<%= member[:description] %> <%= member[:description] %>
</blockquote> </div>
<div class="columns"> </div>
<div class="columns links">
<% if member[:github] %> <% if member[:github] %>
<a style="padding: 5px" class="social-icon" href="https://github.com/<%= member[:github] %>" target="_blank"> <a style="padding: 5px" class="social-icon" href="https://github.com/<%= member[:github] %>" target="_blank">
<span class="icon"> <span class="icon">

View file

@ -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 { .sponserend_image {
width: 10vw; width: 8rem;
height: 10vw; height: 8rem;
min-width: 100px;
min-height: 100px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display: flex; display: flex;