Redesign the blogpost previews and fix a bug pertaining to scss compilation. Fixes #302

This commit is contained in:
Lorin Werthen 2021-02-25 12:33:02 +01:00
parent ceac9fc66d
commit dc2794bb98
No known key found for this signature in database
GPG key ID: F11FFC921E0E08E0
6 changed files with 60 additions and 56 deletions

View file

@ -11,12 +11,12 @@ GEM
public_suffix (>= 2.0.2, < 5.0) public_suffix (>= 2.0.2, < 5.0)
adsf (1.4.5) adsf (1.4.5)
rack (>= 1.0.0, < 3.0.0) rack (>= 1.0.0, < 3.0.0)
autoprefixer-rails (10.1.0.0) autoprefixer-rails (10.2.4.0)
execjs execjs
builder (3.2.4) builder (3.2.4)
coderay (1.1.3) coderay (1.1.3)
colored (1.2) colored (1.2)
concurrent-ruby (1.1.7) concurrent-ruby (1.1.8)
cri (2.15.11) cri (2.15.11)
daemons (1.3.1) daemons (1.3.1)
ddmemoize (1.0.0) ddmemoize (1.0.0)
@ -56,7 +56,7 @@ GEM
kramdown (2.3.0) kramdown (2.3.0)
rexml rexml
libv8 (8.4.255.0) libv8 (8.4.255.0)
listen (3.4.0) listen (3.4.1)
rb-fsevent (~> 0.10, >= 0.10.3) rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10) rb-inotify (~> 0.9, >= 0.9.10)
lumberjack (1.2.8) lumberjack (1.2.8)
@ -64,12 +64,12 @@ GEM
mini_portile2 (2.5.0) mini_portile2 (2.5.0)
mini_racer (0.3.1) mini_racer (0.3.1)
libv8 (~> 8.4.255) libv8 (~> 8.4.255)
nanoc (4.11.22) nanoc (4.12.0)
addressable (~> 2.5) addressable (~> 2.5)
colored (~> 1.2) colored (~> 1.2)
nanoc-checking (~> 1.0) nanoc-checking (~> 1.0)
nanoc-cli (= 4.11.22) nanoc-cli (= 4.12.0)
nanoc-core (= 4.11.22) nanoc-core (= 4.12.0)
nanoc-deploying (~> 1.0) nanoc-deploying (~> 1.0)
parallel (~> 1.12) parallel (~> 1.12)
tty-command (~> 0.8) tty-command (~> 0.8)
@ -77,12 +77,12 @@ GEM
nanoc-checking (1.0.1) nanoc-checking (1.0.1)
nanoc-cli (~> 4.11, >= 4.11.15) nanoc-cli (~> 4.11, >= 4.11.15)
nanoc-core (~> 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) cri (~> 2.15)
diff-lcs (~> 1.3) diff-lcs (~> 1.3)
nanoc-core (= 4.11.22) nanoc-core (= 4.12.0)
zeitwerk (~> 2.1) zeitwerk (~> 2.1)
nanoc-core (4.11.22) nanoc-core (4.12.0)
concurrent-ruby (~> 1.1) concurrent-ruby (~> 1.1)
ddmemoize (~> 1.0) ddmemoize (~> 1.0)
ddmetrics (~> 1.0) ddmetrics (~> 1.0)
@ -98,7 +98,7 @@ GEM
nanoc-cli (~> 4.11, >= 4.11.15) nanoc-cli (~> 4.11, >= 4.11.15)
nanoc-core (~> 4.11, >= 4.11.15) nanoc-core (~> 4.11, >= 4.11.15)
nenv (0.3.0) nenv (0.3.0)
nokogiri (1.11.0) nokogiri (1.11.1)
mini_portile2 (~> 2.5.0) mini_portile2 (~> 2.5.0)
racc (~> 1.4) racc (~> 1.4)
notiffany (0.1.3) notiffany (0.1.3)
@ -108,7 +108,7 @@ GEM
parallel (1.20.1) parallel (1.20.1)
pastel (0.8.0) pastel (0.8.0)
tty-color (~> 0.5) tty-color (~> 0.5)
pry (0.13.1) pry (0.14.0)
coderay (~> 1.1) coderay (~> 1.1)
method_source (~> 1.0) method_source (~> 1.0)
public_suffix (4.0.6) public_suffix (4.0.6)
@ -131,10 +131,10 @@ GEM
daemons (~> 1.0, >= 1.0.9) daemons (~> 1.0, >= 1.0.9)
eventmachine (~> 1.0, >= 1.0.4) eventmachine (~> 1.0, >= 1.0.4)
rack (>= 1, < 3) rack (>= 1, < 3)
thor (1.0.1) thor (1.1.0)
tomlrb (1.3.0) tomlrb (1.3.0)
tty-color (0.6.0) tty-color (0.6.0)
tty-command (0.10.0) tty-command (0.10.1)
pastel (~> 0.8) pastel (~> 0.8)
tty-platform (0.3.0) tty-platform (0.3.0)
tty-which (0.4.2) tty-which (0.4.2)

5
Rules
View file

@ -197,10 +197,13 @@ compile '/assets/scripts/**/*.js' do
filter :uglify_js, harmony: true if production? filter :uglify_js, harmony: true if production?
end end
ignore '/assets/stylesheets/includes/**/*'
ignore '/data/**/*' ignore '/data/**/*'
ignore '/assets/stylesheets/includes/**/*'
compile '/assets/stylesheets/**/*.scss' do 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 = { sass_opts = {
syntax: :scss, syntax: :scss,
load_paths: ['content/assets/stylesheets'] load_paths: ['content/assets/stylesheets']

View file

@ -66,21 +66,24 @@
} }
.blog-preview { .blog-preview {
position: relative; .blogpreview-heading {
display: flex;
> a {
flex-grow: 1;
// Fadeout > h3 {
&::after { margin-bottom: 0;
content: ''; display: inline-block;
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 */ > .blogpreview-extra {
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ color: #7a7a7a;
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ display: inline-block;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ margin-bottom: 5px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ }
height: 100px; > .blogpreview-tags {
width: 100%; color: #7a7a7a;
} }
} }

View file

@ -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 "includes/variables";
@import "node_modules/bulma/bulma"; @import "node_modules/bulma/bulma";
@import "node_modules/bulma-divider/dist/css/bulma-divider"; @import "node_modules/bulma-divider/dist/css/bulma-divider";
@import "node_modules/bulma-timeline/dist/css/bulma-timeline"; @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 // Sticky footer
body { body {

View file

@ -42,13 +42,7 @@
<div class="column"> <div class="column">
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column"> <div class="column">
<% posts_in_year_or_with_tag(item).each_with_index.select {|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>
<div class="column">
<% posts_in_year_or_with_tag(item).each_with_index.reject {|e, i| i.even?}.map(&:first).each do |post| %>
<%= render '/partials/_blog_preview.*', post: post %> <%= render '/partials/_blog_preview.*', post: post %>
<% end %> <% end %>
</div> </div>

View file

@ -1,16 +1,21 @@
<a class="box blog-preview" href="<%= relative_path_to(post) %>"> <div class="content blog-preview">
<div class="content"> <div class="blogpreview-heading">
<h3 class="has-text-centered"><%= post[:title] %></h3> <a href="<%= relative_path_to(post) %>">
<p class="has-text-centered"> <h3><%= post[:title] %></h3>
<%= post[:description] %>
</p>
<h5 class="has-text-centered">
<% if post[:author] %>
door <%= post[:author] %>
<% end %>
</h5>
<small><%= post[:created_at] %></small>
<br>
<%= excerptize(post.reps[:text].compiled_content, length: 200).tr("\n", ' ')%>
</div>
</a> </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 %>
</div>
</div>
<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>