degeneralize box

This commit is contained in:
Lorin Werthen 2016-08-30 22:48:58 +02:00
parent 5f65118621
commit 564d71285e
2 changed files with 78 additions and 74 deletions

View file

@ -2,16 +2,18 @@ a.box {
color: #000; color: #000;
} }
.box { #homepage {
background-color: $box-colour; .box {
background-color: $box-colour;
&.highlighted { &.highlighted {
background-color: $highlighted-box-colour; background-color: $highlighted-box-colour;
color: $highlighted-text-colour; color: $highlighted-text-colour;
.content { .content {
h1 { h1 {
color: white; color: white;
}
} }
} }
} }

View file

@ -1,76 +1,78 @@
<div class="tile is-vertical is-ancestor"> <div id="homepage">
<div class="tile is-parent is-12"> <div class="tile is-vertical is-ancestor">
<%= render '/partials/_tile.*', article: all_events[0] %> <div class="tile is-parent is-12">
</div> <%= render '/partials/_tile.*', article: all_events[0] %>
<div class="tile">
<div class="tile is-parent is-4">
<%= render '/partials/_tile.*', article: all_events[1], htmlclass: "highlighted" %>
</div> </div>
<div class="tile is-parent is-4"> <div class="tile">
<div class="tile is-child box highlighted"> <div class="tile is-parent is-4">
IDK LOL <%= render '/partials/_tile.*', article: all_events[1], htmlclass: "highlighted" %>
</div> </div>
</div> <div class="tile is-parent is-4">
<div class="tile is-vertical is-2"> <div class="tile is-child box highlighted">
<div class="tile is-parent"> IDK LOL
<div class="tile is-child box has-text-centered">
<%= fa 'wikipedia-w' %>
</div> </div>
</div> </div>
<div class="tile is-parent"> <div class="tile is-vertical is-2">
<div class="tile is-child box has-text-centered"> <div class="tile is-parent">
<%= fa 'video-camera' %> <div class="tile is-child box has-text-centered">
</div> <%= fa 'wikipedia-w' %>
</div>
</div>
<div class="tile is-vertical is-2">
<div class="tile is-parent">
<div class="tile is-child box has-text-centered">
<%= fa 'github' %>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box has-text-centered">
<%= fa 'facebook-official' %>
</div>
</div>
</div>
</div>
<div class="tile">
<div class="tile is-4 is-parent">
<div class="tile is-child box">
<div class="content">
<h1><%= sorted_articles.first[:title] %></h1>
<%= sorted_articles.first[:description] %>
</div>
</div>
</div>
<div class="tile is-vertical">
<div class="tile is-parent">
<div class="tile is-child box">
<p>
Numero uno: @werthen
</p>
<p>
Numero dos: @myncke
</p>
<p>
Numero tres: @iepoev
</p>
<p>
Numero quatro: @becousae
</p>
</div>
</div>
<div class="tile">
<div class="tile is-6 is-parent">
<div class="tile is-child box">
GITHUB
</div> </div>
</div> </div>
<div class="tile is-6 is-parent"> <div class="tile is-parent">
<div class="tile is-child box has-text-centered">
<%= fa 'video-camera' %>
</div>
</div>
</div>
<div class="tile is-vertical is-2">
<div class="tile is-parent">
<div class="tile is-child box has-text-centered">
<%= fa 'github' %>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box has-text-centered">
<%= fa 'facebook-official' %>
</div>
</div>
</div>
</div>
<div class="tile">
<div class="tile is-4 is-parent">
<div class="tile is-child box">
<div class="content">
<h1><%= sorted_articles.first[:title] %></h1>
<%= sorted_articles.first[:description] %>
</div>
</div>
</div>
<div class="tile is-vertical">
<div class="tile is-parent">
<div class="tile is-child box"> <div class="tile is-child box">
GITHUB <p>
Numero uno: @werthen
</p>
<p>
Numero dos: @myncke
</p>
<p>
Numero tres: @iepoev
</p>
<p>
Numero quatro: @becousae
</p>
</div>
</div>
<div class="tile">
<div class="tile is-6 is-parent">
<div class="tile is-child box">
GITHUB
</div>
</div>
<div class="tile is-6 is-parent">
<div class="tile is-child box">
GITHUB
</div>
</div> </div>
</div> </div>
</div> </div>