i like this blogpost header more

This commit is contained in:
Lorin Werthen 2017-04-20 14:20:32 +02:00
parent ecc386087d
commit a6a9a27fda
No known key found for this signature in database
GPG key ID: F11FFC921E0E08E0
4 changed files with 56 additions and 22 deletions

View file

@ -23,6 +23,7 @@ group :development do
gem 'adsf' gem 'adsf'
gem 'highline' gem 'highline'
gem 'terminal-notifier-guard' gem 'terminal-notifier-guard'
gem 'terminal-notifier'
end end
group :production do group :production do

View file

@ -84,6 +84,7 @@ GEM
sass (3.4.23) sass (3.4.23)
shellany (0.0.1) shellany (0.0.1)
slop (3.6.0) slop (3.6.0)
terminal-notifier (1.7.1)
terminal-notifier-guard (1.7.0) terminal-notifier-guard (1.7.0)
therubyracer (0.12.3) therubyracer (0.12.3)
libv8 (~> 3.16.14.15) libv8 (~> 3.16.14.15)
@ -112,6 +113,7 @@ DEPENDENCIES
kramdown kramdown
nanoc (= 4.7.4) nanoc (= 4.7.4)
sass sass
terminal-notifier
terminal-notifier-guard terminal-notifier-guard
therubyracer therubyracer
w3c_validators w3c_validators

View file

@ -33,8 +33,41 @@ dl {
} }
} }
.blogwidth{ .blog-heading {
width: 75%; display: flex;
margin:auto; flex-direction: column;
word-wrap: normal;
.titlewrap {
position: relative;
margin: auto;
.title {
font-size: 4rem;
font-weight: bolder;
}
.subtitle {
position: absolute;
}
.details {
right: 0;
position: absolute;
margin-top: -1.1rem;
line-height: 1;
text-align: right;
}
}
&::after {
content: '';
width: 80px;
height: 1px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
display: block;
background: $zeus-orange;
}
} }

View file

@ -1,22 +1,20 @@
<div class="heading"> <div class="blog-heading">
<h1 class="title is-1 has-text-centered"> <div class="titlewrap">
<%= item[:title] %> <h1 class="title is-1 has-text-centered">
</h1> <%= item[:title] %>
<% if item[:author] %> </h1>
<h2 class="subtitle is-3 has-text-centered"> <% if item[:author] %>
<% if item[:lang] == :en %> <h2 class="subtitle is-3 has-text-centered">
by door <%= item[:author] %>
<% else %> </h2>
door
<% end %> <% end %>
<%= item[:author] %> <div class="details">
</h2> <small>
<% end %> Geschreven op <%= item[:created_at] %><br>
<p class="has-text-centered"> Leestijd: <%= reading_time @item %>
<small>Geschreven op <%= item[:created_at] %></small><br> </small>
Leestijd: <%= reading_time @item %> </div>
</p> </div>
<hr>
</div> </div>
<div class="columns"> <div class="columns">