Designed the 'Sponserende Leden' page
This commit is contained in:
parent
8f6eee34cc
commit
69c7b45eb8
2 changed files with 61 additions and 16 deletions
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue