styling and markup
This commit is contained in:
Lorin Werthen
parent
d3a569588d
commit
aa20bbf8d6
7 changed files with 103 additions and 36 deletions
|
|
@ -1,5 +1,8 @@
|
|||
.notification.is-info {
|
||||
.notification.is-info,
|
||||
.notification.is-success,
|
||||
.notification.is-primary {
|
||||
.content {
|
||||
color: white;
|
||||
h1 {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: AWK-les
|
||||
banner: https://zeus.ugent.be/wp-content/uploads/2016/02/awkles-768x1007.jpg
|
||||
description: Een AWK-les voor AWK gerelateerde dingen
|
||||
created_at: 01-02-2016
|
||||
time: 23-02-2016
|
||||
location: Auditorium A1, Campus Sterre, Gebouw S9
|
||||
|
|
|
|||
|
|
@ -1,16 +1,83 @@
|
|||
<div class="tile is-vertical is-ancestor">
|
||||
<div class="tile is-parent is-12">
|
||||
<div class="tile is-child">
|
||||
<%= render '/partials/_tile.*', article: sorted_articles[0] %>
|
||||
<div class="tile is-child notification is-primary">
|
||||
<%= render '/partials/_tile.*', article: all_events[0] %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<% sorted_articles[1..-1].each do |article| %>
|
||||
<div class="tile is-parent is-4">
|
||||
<div class="tile is-child">
|
||||
<%= render '/partials/_tile.*', article: article %>
|
||||
<div class="tile is-child notification is-info">
|
||||
<%= render '/partials/_tile.*', article: all_events[1] %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent is-4">
|
||||
<div class="tile is-child notification is-danger">
|
||||
IDK LOL
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-vertical is-2">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child notification is-warning has-text-centered">
|
||||
<%= fa 'wikipedia-w' %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child notification is-warning 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 notification is-warning has-text-centered">
|
||||
<%= fa 'github' %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child notification is-warning 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 notification is-success">
|
||||
<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 notification is-primary">
|
||||
<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 notification">
|
||||
GITHUB
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-6 is-parent">
|
||||
<div class="tile is-child notification is-info">
|
||||
GITHUB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,21 +26,21 @@
|
|||
|
||||
<section class="section">
|
||||
<div class="columns">
|
||||
|
||||
<div class="container">
|
||||
<div id="event-info" class="is-pulled-right">
|
||||
<div class="box">
|
||||
<ul class="fa-ul">
|
||||
<li><%= fa 'clock-o', li: true %><%= item[:time] %></li>
|
||||
<li><%= fa 'globe', li: true %><%= item[:location] %></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--
|
||||
<div id="event-info" class="column">
|
||||
<div class="box">
|
||||
<ul class="fa-ul">
|
||||
<li><%= fa 'clock-o', li: true %><%= item[:time] %></li>
|
||||
<li><%= fa 'globe', li: true %><%= item[:location] %></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="column is-8 is-offset-2">
|
||||
|
||||
<div class="content">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,5 @@
|
|||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Place this tag where you want the button to render. -->
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div id="navbar">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<div class="column is-narrow is-hidden-mobile">
|
||||
<a id="logo-link" href="/">
|
||||
<img id="logo" src="https://zeus.ugent.be/wp-content/uploads/2009/05/logo-new.png" alt="" />
|
||||
</a>
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
<div class="column">
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
|
||||
<% nav_items do |item, active| %>
|
||||
<a class="nav-item is-tab <%= 'is-active' if active %>" href="<%= relative_path_to(item) %>">
|
||||
<%= item[:title] %>
|
||||
|
|
@ -16,7 +15,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="nav-right">
|
||||
<div class="nav-right is-hidden-mobile">
|
||||
<a class="nav-item" href="https://github.com/ZeusWPI" target="_blank">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,19 @@
|
|||
<a href="<%= relative_path_to(@article) %>">
|
||||
<div class="notification is-info">
|
||||
<div class="main-tile">
|
||||
<div class="content">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h1>
|
||||
<%= @article[:title] %>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<small>
|
||||
<%= @article[:created_at] %>
|
||||
</small>
|
||||
</div>
|
||||
<div class="main-tile">
|
||||
<div class="content">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h1>
|
||||
<%= @article[:title] %>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<small>
|
||||
<%= @article[:created_at] %>
|
||||
</small>
|
||||
</div>
|
||||
<%= @article[:description] %>
|
||||
</div>
|
||||
<%= @article[:description] %>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Reference in a new issue