Merge pull request #432 from ZeusWPI/blogpost-refactor-and-scss-fix
Redesign blogpost previews
This commit is contained in:
lorin
GitHub
commit
e2d34e4cb4
11 changed files with 178 additions and 113 deletions
4
Gemfile
4
Gemfile
|
|
@ -17,10 +17,12 @@ gem 'words_counted', git: 'https://github.com/werthen/words_counted'
|
|||
|
||||
group :development do
|
||||
gem 'adsf'
|
||||
gem 'thin'
|
||||
# puma instead of thin, see https://github.com/nanoc/nanoc/issues/1499
|
||||
gem 'puma'
|
||||
gem 'highline'
|
||||
gem 'terminal-notifier'
|
||||
gem 'terminal-notifier-guard'
|
||||
gem 'nanoc-live'
|
||||
end
|
||||
|
||||
group :production do
|
||||
|
|
|
|||
54
Gemfile.lock
54
Gemfile.lock
|
|
@ -11,20 +11,28 @@ 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)
|
||||
adsf-live (1.4.5)
|
||||
adsf (~> 1.3)
|
||||
em-websocket (~> 0.5)
|
||||
eventmachine (~> 1.2)
|
||||
listen (~> 3.0)
|
||||
rack-livereload (~> 0.3)
|
||||
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)
|
||||
ddmetrics (~> 1.0)
|
||||
ref (~> 2.0)
|
||||
ddmetrics (1.0.1)
|
||||
ddplugin (1.0.3)
|
||||
diff-lcs (1.4.4)
|
||||
em-websocket (0.5.2)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.6.0)
|
||||
eventmachine (1.2.7)
|
||||
execjs (2.7.0)
|
||||
ffi (1.14.2)
|
||||
|
|
@ -48,6 +56,7 @@ GEM
|
|||
concurrent-ruby (~> 1.0)
|
||||
highline (2.0.3)
|
||||
htmlcompressor (0.4.0)
|
||||
http_parser.rb (0.6.0)
|
||||
icalendar (2.7.0)
|
||||
ice_cube (~> 0.16)
|
||||
ice_cube (0.16.3)
|
||||
|
|
@ -56,7 +65,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 +73,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 +86,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)
|
||||
|
|
@ -97,8 +106,14 @@ GEM
|
|||
nanoc-checking (~> 1.0)
|
||||
nanoc-cli (~> 4.11, >= 4.11.15)
|
||||
nanoc-core (~> 4.11, >= 4.11.15)
|
||||
nanoc-live (1.0.0)
|
||||
adsf-live (~> 1.4)
|
||||
listen (~> 3.0)
|
||||
nanoc-cli (~> 4.11, >= 4.11.14)
|
||||
nanoc-core (~> 4.11, >= 4.11.14)
|
||||
nenv (0.3.0)
|
||||
nokogiri (1.11.0)
|
||||
nio4r (2.5.5)
|
||||
nokogiri (1.11.1)
|
||||
mini_portile2 (~> 2.5.0)
|
||||
racc (~> 1.4)
|
||||
notiffany (0.1.3)
|
||||
|
|
@ -108,12 +123,16 @@ 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)
|
||||
puma (5.2.1)
|
||||
nio4r (~> 2.0)
|
||||
racc (1.5.2)
|
||||
rack (2.2.3)
|
||||
rack-livereload (0.3.17)
|
||||
rack
|
||||
rainpress (1.0.1)
|
||||
rb-fsevent (0.10.4)
|
||||
rb-inotify (0.10.1)
|
||||
|
|
@ -127,14 +146,10 @@ GEM
|
|||
slow_enumerator_tools (1.1.0)
|
||||
terminal-notifier (2.0.0)
|
||||
terminal-notifier-guard (1.7.0)
|
||||
thin (1.8.0)
|
||||
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)
|
||||
|
|
@ -163,12 +178,13 @@ DEPENDENCIES
|
|||
kramdown
|
||||
mini_racer
|
||||
nanoc
|
||||
nanoc-live
|
||||
pandoc-ruby
|
||||
puma
|
||||
rainpress
|
||||
sassc
|
||||
terminal-notifier
|
||||
terminal-notifier-guard
|
||||
thin
|
||||
typogruby
|
||||
uglifier (>= 4.0.0)
|
||||
w3c_validators
|
||||
|
|
|
|||
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,21 @@
|
|||
}
|
||||
|
||||
.blog-preview {
|
||||
position: relative;
|
||||
|
||||
// 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%;
|
||||
.blogpreview-heading {
|
||||
display: flex;
|
||||
> a {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
> .blogpreview-extra {
|
||||
color: #7a7a7a;
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
> .blogpreview-tags {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -223,3 +223,11 @@ footer.footer {
|
|||
.has-small-caps {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.underline--magical {
|
||||
background-image: -webkit-linear-gradient(to right, $zeus-orange, #FFFFFF); /* Chrome 10-25, Safari 5.1-6 */
|
||||
background-image: linear-gradient(to right, $zeus-orange, #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 0.15em;
|
||||
background-position: 0 99%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,28 +1,49 @@
|
|||
<% content_for :head do %>
|
||||
<META NAME="Title" CONTENT="Zeus WPI: Werkgroep informatica van de Universiteit Gent">
|
||||
<META NAME="Keywords" CONTENT="zeus wpi, informatica, universiteit gent">
|
||||
<META NAME="Description" CONTENT="Studentenvereniging van de informatica aan de Universiteit Gent. Informatie over o.a. Linux (downloads en lessen), programmeren, en internetbeveiliging.">
|
||||
<meta property="og:title" content="Zeus WPI: WerkgroeP Informatica van de Universiteit Gent" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://zinc.zeus.gent" />
|
||||
<meta property="og:description" content="Studentenvereniging van de informatica aan de Universiteit Gent. Informatie over o.a. Linux (downloads en lessen), programmeren, en internetbeveiliging." />
|
||||
<META NAME="Title" CONTENT="Zeus WPI: Werkgroep informatica van de Universiteit Gent">
|
||||
<META NAME="Keywords" CONTENT="zeus wpi, informatica, universiteit gent">
|
||||
<META NAME="Description" CONTENT="Studentenvereniging van de informatica aan de Universiteit Gent. Informatie over o.a. Linux (downloads en lessen), programmeren, en internetbeveiliging.">
|
||||
<meta property="og:title" content="Zeus WPI: WerkgroeP Informatica van de Universiteit Gent" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://zinc.zeus.gent" />
|
||||
<meta property="og:description" content="Studentenvereniging van de informatica aan de Universiteit Gent. Informatie over o.a. Linux (downloads en lessen), programmeren, en internetbeveiliging." />
|
||||
<% end %>
|
||||
|
||||
<% content_for :scripts do %>
|
||||
<%= asset :js, :gamification %>
|
||||
<%= asset :js, :gamification %>
|
||||
<% end %>
|
||||
|
||||
<div id="homepage">
|
||||
<div class="tile is-vertical is-ancestor">
|
||||
<%= if studytime? then render '/tiles/blokmap.*'end %>
|
||||
<% if studytime? %>
|
||||
<%= render '/tiles/blokmap.*' %>
|
||||
<% end %>
|
||||
<!--next event -->
|
||||
<div class="tile is-parent">
|
||||
<%= render '/partials/_events_tile.*', event: front_page_events[0] %>
|
||||
<div class="tile is-child">
|
||||
<div class="block has-text-centered">
|
||||
<span class="title is-2 underline--magical">Upcoming Events</span>
|
||||
</div>
|
||||
<% unless upcoming_events.empty? %>
|
||||
<% upcoming_events.each do |event| %>
|
||||
<div class="block">
|
||||
<%= render '/partials/_events_tile.*', event: event %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="block content has-text-centered">
|
||||
There are currently no upcoming events. If you have a suggestion, let us know on mattermost in <a href="https://mattermost.zeus.gent/zeus/channels/events">~events</a>!
|
||||
<hr>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<!--top coders -->
|
||||
<div class="tile is-parent is-6">
|
||||
<div class="tile is-child box gamification-tile">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child">
|
||||
<div class="block has-text-centered">
|
||||
<span class="title is-2 underline--magical">Top Coders</span>
|
||||
</div>
|
||||
<div class="box gamification-tile">
|
||||
<div class="content">
|
||||
<div class="tile-header">
|
||||
<h1 class="has-text-centered">
|
||||
|
|
@ -36,27 +57,44 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="block has-text-centered">
|
||||
<span class="title is-2 underline--magical">Previous Events</span>
|
||||
</div>
|
||||
<!-- latest blogpost -->
|
||||
<div class="tile is-6 is-parent">
|
||||
<%= render '/partials/_blog_preview.*', post: sorted_articles.first %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<div class="tile is-vertical">
|
||||
<% front_page_events[1..3].each do |event| %>
|
||||
<div class="tile is-parent ">
|
||||
<% previous_events[0..3].each do |event| %>
|
||||
<div class="block">
|
||||
<%= render '/partials/_events_tile.*', event: event %>
|
||||
</div>
|
||||
<%end%>
|
||||
</div>
|
||||
<div class="tile is-vertical">
|
||||
<% sorted_articles[1..3].each do |post| %>
|
||||
<div class="tile is-parent ">
|
||||
<%= render '/partials/_blog_preview.*', post: post %>
|
||||
</div>
|
||||
<%end%>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child">
|
||||
<div class='content has-text-centered box'>
|
||||
<h2>About Zeus WPI</h2>
|
||||
<p>
|
||||
Zeus WPI is the student association for Computer Science at Ghent University. Our goal is to provide a stimulating environment for motivated students looking to expand their skills by engaging in interesting real-world projects.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
We organize various tech related talks by experts (eg. professors, PhD's, Richard Stallman, Julia Reda, ...), hands-on coding events and introductory lectures for cool technologies. Together we build interesting applications for Ghent University students (Hydra), for FaculteitenKonvent and 12urenloop, and ofcourse for ourselves.
|
||||
</p>
|
||||
</div>
|
||||
<div class="block has-text-centered">
|
||||
<span class="title is-2 underline--magical">Blogposts</span>
|
||||
</div>
|
||||
<% sorted_articles[0..3].each do |post| %>
|
||||
<%= render '/partials/_blog_preview.*', post: post %>
|
||||
<%end%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<!--top coders -->
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 class="title is-3" href="<%= relative_path_to(post) %>">
|
||||
<%= post[:title] %>
|
||||
</a>
|
||||
<div class="blogpreview-tags">
|
||||
<% post[:tags]&.each do |tag| %>
|
||||
<!-- The following code is a bit hacky, fix when necessary -->
|
||||
<a class="tag is-normal is-rounded" href=<%= "/blog/#{tag.gsub(' ', '_')}/index.html" %>>
|
||||
<%= tag %>
|
||||
</a>
|
||||
<% end %>
|
||||
</h5>
|
||||
<small><%= post[:created_at] %></small>
|
||||
<br>
|
||||
<%= excerptize(post.reps[:text].compiled_content, length: 200).tr("\n", ' ')%>
|
||||
</div>
|
||||
</a>
|
||||
</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>
|
||||
<hr>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
<img class="event-tile-image" src="<%= @event[:image] %>" alt="">
|
||||
<% end %>
|
||||
<div class="event-text">
|
||||
<h1 class="has-text-centered">
|
||||
<h2 class="has-text-centered">
|
||||
<%= @event[:title] %>
|
||||
</h1>
|
||||
</h2>
|
||||
|
||||
<div class="description has-text-centered">
|
||||
<%= @event[:description] %>
|
||||
|
|
|
|||
|
|
@ -65,8 +65,8 @@ module EventsHelper
|
|||
@items.find_all('/events/*/*/main.md')
|
||||
end
|
||||
|
||||
def front_page_events
|
||||
upcoming_events + all_events.reverse[(upcoming_events.length)..]
|
||||
def previous_events
|
||||
all_events.reverse[(upcoming_events.length)..]
|
||||
end
|
||||
|
||||
def sub_events(grouped_event)
|
||||
|
|
|
|||
Loading…
Reference in a new issue