Redesign the blogpost previews and fix a bug pertaining to scss compilation. Fixes #302
This commit is contained in:
Lorin Werthen
parent
ceac9fc66d
commit
dc2794bb98
6 changed files with 60 additions and 56 deletions
26
Gemfile.lock
26
Gemfile.lock
|
|
@ -11,12 +11,12 @@ GEM
|
|||
public_suffix (>= 2.0.2, < 5.0)
|
||||
adsf (1.4.5)
|
||||
rack (>= 1.0.0, < 3.0.0)
|
||||
autoprefixer-rails (10.1.0.0)
|
||||
autoprefixer-rails (10.2.4.0)
|
||||
execjs
|
||||
builder (3.2.4)
|
||||
coderay (1.1.3)
|
||||
colored (1.2)
|
||||
concurrent-ruby (1.1.7)
|
||||
concurrent-ruby (1.1.8)
|
||||
cri (2.15.11)
|
||||
daemons (1.3.1)
|
||||
ddmemoize (1.0.0)
|
||||
|
|
@ -56,7 +56,7 @@ GEM
|
|||
kramdown (2.3.0)
|
||||
rexml
|
||||
libv8 (8.4.255.0)
|
||||
listen (3.4.0)
|
||||
listen (3.4.1)
|
||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||
rb-inotify (~> 0.9, >= 0.9.10)
|
||||
lumberjack (1.2.8)
|
||||
|
|
@ -64,12 +64,12 @@ GEM
|
|||
mini_portile2 (2.5.0)
|
||||
mini_racer (0.3.1)
|
||||
libv8 (~> 8.4.255)
|
||||
nanoc (4.11.22)
|
||||
nanoc (4.12.0)
|
||||
addressable (~> 2.5)
|
||||
colored (~> 1.2)
|
||||
nanoc-checking (~> 1.0)
|
||||
nanoc-cli (= 4.11.22)
|
||||
nanoc-core (= 4.11.22)
|
||||
nanoc-cli (= 4.12.0)
|
||||
nanoc-core (= 4.12.0)
|
||||
nanoc-deploying (~> 1.0)
|
||||
parallel (~> 1.12)
|
||||
tty-command (~> 0.8)
|
||||
|
|
@ -77,12 +77,12 @@ GEM
|
|||
nanoc-checking (1.0.1)
|
||||
nanoc-cli (~> 4.11, >= 4.11.15)
|
||||
nanoc-core (~> 4.11, >= 4.11.15)
|
||||
nanoc-cli (4.11.22)
|
||||
nanoc-cli (4.12.0)
|
||||
cri (~> 2.15)
|
||||
diff-lcs (~> 1.3)
|
||||
nanoc-core (= 4.11.22)
|
||||
nanoc-core (= 4.12.0)
|
||||
zeitwerk (~> 2.1)
|
||||
nanoc-core (4.11.22)
|
||||
nanoc-core (4.12.0)
|
||||
concurrent-ruby (~> 1.1)
|
||||
ddmemoize (~> 1.0)
|
||||
ddmetrics (~> 1.0)
|
||||
|
|
@ -98,7 +98,7 @@ GEM
|
|||
nanoc-cli (~> 4.11, >= 4.11.15)
|
||||
nanoc-core (~> 4.11, >= 4.11.15)
|
||||
nenv (0.3.0)
|
||||
nokogiri (1.11.0)
|
||||
nokogiri (1.11.1)
|
||||
mini_portile2 (~> 2.5.0)
|
||||
racc (~> 1.4)
|
||||
notiffany (0.1.3)
|
||||
|
|
@ -108,7 +108,7 @@ GEM
|
|||
parallel (1.20.1)
|
||||
pastel (0.8.0)
|
||||
tty-color (~> 0.5)
|
||||
pry (0.13.1)
|
||||
pry (0.14.0)
|
||||
coderay (~> 1.1)
|
||||
method_source (~> 1.0)
|
||||
public_suffix (4.0.6)
|
||||
|
|
@ -131,10 +131,10 @@ GEM
|
|||
daemons (~> 1.0, >= 1.0.9)
|
||||
eventmachine (~> 1.0, >= 1.0.4)
|
||||
rack (>= 1, < 3)
|
||||
thor (1.0.1)
|
||||
thor (1.1.0)
|
||||
tomlrb (1.3.0)
|
||||
tty-color (0.6.0)
|
||||
tty-command (0.10.0)
|
||||
tty-command (0.10.1)
|
||||
pastel (~> 0.8)
|
||||
tty-platform (0.3.0)
|
||||
tty-which (0.4.2)
|
||||
|
|
|
|||
5
Rules
5
Rules
|
|
@ -197,10 +197,13 @@ compile '/assets/scripts/**/*.js' do
|
|||
filter :uglify_js, harmony: true if production?
|
||||
end
|
||||
|
||||
ignore '/assets/stylesheets/includes/**/*'
|
||||
ignore '/data/**/*'
|
||||
|
||||
ignore '/assets/stylesheets/includes/**/*'
|
||||
compile '/assets/stylesheets/**/*.scss' do
|
||||
# This filter is necessary for the workaround present in main.scss and deals with out of date dependencies
|
||||
filter :erb
|
||||
|
||||
sass_opts = {
|
||||
syntax: :scss,
|
||||
load_paths: ['content/assets/stylesheets']
|
||||
|
|
|
|||
|
|
@ -66,21 +66,24 @@
|
|||
}
|
||||
|
||||
.blog-preview {
|
||||
position: relative;
|
||||
.blogpreview-heading {
|
||||
display: flex;
|
||||
> a {
|
||||
flex-grow: 1;
|
||||
|
||||
// Fadeout
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100;White+to+Transparent */
|
||||
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
> h3 {
|
||||
margin-bottom: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .blogpreview-extra {
|
||||
color: #7a7a7a;
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
> .blogpreview-tags {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
/* KEEP THIS VVVV */
|
||||
/* HACK The following line of code does nothing. It only serves as a way for nanoc to recognize dependencies with all the sub scss files */
|
||||
// <% @items.find_all('/assets/stylesheets/includes/*').each {|e| e.raw_content } %>
|
||||
/* KEEP THIS ^^^^ */
|
||||
|
||||
@import "includes/variables";
|
||||
|
||||
@import "node_modules/bulma/bulma";
|
||||
@import "node_modules/bulma-divider/dist/css/bulma-divider";
|
||||
@import "node_modules/bulma-timeline/dist/css/bulma-timeline";
|
||||
|
||||
// TODO: Remove this once FF64.0b2+ fixes this fustercluck
|
||||
@-moz-document url-prefix() {
|
||||
.tile {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Sticky footer
|
||||
body {
|
||||
|
|
@ -41,4 +40,4 @@ body {
|
|||
@import "includes/search";
|
||||
@import "includes/about";
|
||||
@import "includes/privacy";
|
||||
@import "includes/toc";
|
||||
@import "includes/toc";
|
||||
|
|
|
|||
|
|
@ -42,13 +42,7 @@
|
|||
<div class="column">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column">
|
||||
<% posts_in_year_or_with_tag(item).each_with_index.select {|e, i| i.even?}.map(&:first).each do |post| %>
|
||||
<%= render '/partials/_blog_preview.*', post: post %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<% posts_in_year_or_with_tag(item).each_with_index.reject {|e, i| i.even?}.map(&:first).each do |post| %>
|
||||
<% posts_in_year_or_with_tag(item).each do |post| %>
|
||||
<%= render '/partials/_blog_preview.*', post: post %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,21 @@
|
|||
<a class="box blog-preview" href="<%= relative_path_to(post) %>">
|
||||
<div class="content">
|
||||
<h3 class="has-text-centered"><%= post[:title] %></h3>
|
||||
<p class="has-text-centered">
|
||||
<%= post[:description] %>
|
||||
</p>
|
||||
<h5 class="has-text-centered">
|
||||
<% if post[:author] %>
|
||||
door <%= post[:author] %>
|
||||
<div class="content blog-preview">
|
||||
<div class="blogpreview-heading">
|
||||
<a href="<%= relative_path_to(post) %>">
|
||||
<h3><%= post[:title] %></h3>
|
||||
</a>
|
||||
<div class="blogpreview-tags">
|
||||
<% post[:tags]&.each do |tag| %>
|
||||
<!-- The following code is a bit hacky, fix when necessary -->
|
||||
<a href=<%= "/blog/#{tag.gsub(' ', '_')}/index.html" %>>
|
||||
<span class="tag is-normal is-rounded"><%= tag %></span>
|
||||
</a>
|
||||
<% end %>
|
||||
</h5>
|
||||
<small><%= post[:created_at] %></small>
|
||||
<br>
|
||||
<%= excerptize(post.reps[:text].compiled_content, length: 200).tr("\n", ' ')%>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<small class="blogpreview-extra"><%= post[:created_at] %><% if post[:author] %> • <%= post[:author] %> <% end %> • <%= post[:description] %></small>
|
||||
<br/>
|
||||
<p>
|
||||
<%= excerptize(post.reps[:text].compiled_content, length: 500).tr("\n", ' ')%>
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
|
|
|
|||
Loading…
Reference in a new issue