Skip to content

Commit 57b738c

Browse files
melledijkstramelledijkstra
committed
New design of story items in story overview pages
1 parent 0624b56 commit 57b738c

File tree

10 files changed

+203
-194
lines changed

10 files changed

+203
-194
lines changed

‎_includes/story_item.html

+6-11
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,25 @@
1-
{% if include.story.language != nil %}
2-
{% capture cardStyling %}style='border-bottom: 3px solid #ad9977;'{% endcapture %}
3-
{% else %}
4-
{%- assign cardStyling = "" -%}
5-
{% endif %}
61
<div class="grid-item col-xs-12 col-sm-12 col-md-6 col-lg-4">
7-
<div class="story-item card margin-10">
2+
<div class="story-item card margin-15">
83
<a href="{{ include.story.url }}">
94
<div class="trim">
105
<img class="image center-block img-responsive"
116
src="{{ include.story.image }}"
127
alt="story image"/>
138
</div>
149
</a>
15-
<div class="card-content" {{ cardStyling }}>
10+
<div class="card-content">
1611
{% if include.story.language != nil %}
1712
<small class="programming-language-tooltip"
18-
style="background-color: #ad9977;"
1913
>{{ include.story.language.name }}</small>
2014
{% endif %}
21-
<h2 class="title sans">
15+
<h2 class="title serif">
2216
<a href="{{ include.story.url }}">{{ include.story.title }}</a>
2317
</h2>
2418
<div class="info">
25-
<div class="time">
19+
<span class="time">
2620
<span class="mdi mdi-clock"></span> {{ include.story.date | date: '%e %b %Y' }}
27-
</div>
21+
</span>
22+
<span><i class="mdi mdi-book-open-page-variant"></i> {{ include.story.content | number_of_words | divided_by: 225 | floor }} min</span>
2823
{% if include.story.tags %}
2924
<div class="categories">
3025
<span class="mdi mdi-tag"></span>

‎_layouts/overview.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="container-fluid">
1414
<div class="row">
1515
<div class="col col-xs-12">
16-
<div id="collection-list">
16+
<div id="collection-navigation">
1717
{% for collection in site.collections %}
1818
{% if collection.label == 'posts' %}
1919
{% continue %}

‎_layouts/story.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,9 @@ <h1 class="story-title">{{ page.title }}</h1>
4848
</div>
4949
{% assign img = page.image | remove: '/assets/images/stories/' %}
5050
{% if site.data.images contains img %}
51-
<p class="serif softcolor">Photo by <a target="_blank" href="{{site.data.images[img].url}}">{{site.data.images[img].owner}}</a></p>
51+
<p class="serif softcolor no-margin-tb"><i class="mdi mdi-camera"></i> Photo by <a target="_blank" href="{{site.data.images[img].url}}">{{site.data.images[img].owner}}</a></p>
5252
{% endif %}
53+
<p class="serif softcolor small no-margin-tb"><i class="mdi mdi-book-open-page-variant"></i> {{ page.content | number_of_words | divided_by: 225 | floor }} min</p>
5354

5455
<div class="share-buttons">
5556
<!-- Twitter share button -->

‎_sass/_helpers.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@
2222
}
2323

2424
.no-margin-lr {
25-
margin-left: 0;
26-
margin-right: 0;
25+
margin-left: 0 !important;
26+
margin-right: 0 !important;
2727
}
2828

2929
.no-margin-tb {
30-
margin-top: 0;
31-
margin-bottom: 0;
30+
margin-top: 0 !important;
31+
margin-bottom: 0 !important;
3232
}
3333

3434
.margin-5 {

‎_sass/_story-items.scss

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
@import 'variables';
2+
@import 'helpers';
3+
4+
/*----------------------------------------------------------------------------------*
5+
* Stories overview page & Story items
6+
*----------------------------------------------------------------------------------*/
7+
8+
#collection-navigation {
9+
display: block;
10+
text-align: center;
11+
z-index: 10;
12+
left: 10%;
13+
14+
a {
15+
position: relative;
16+
display: inline-block;
17+
padding: 10px 20px;
18+
margin: 25px 30px 15px 30px;
19+
font-weight: bold;
20+
text-transform: uppercase;
21+
border: 2px solid #b2a38a;
22+
color: #b2a38a;
23+
letter-spacing: 2px;
24+
font-size: .8em;
25+
background-color: transparent;
26+
text-decoration: none;
27+
transition: all .45s ease-out;
28+
}
29+
30+
.underline {
31+
position: absolute;
32+
width: 0;
33+
height: 2.5px;
34+
background: white;
35+
transition: all .3s ease-Out;
36+
bottom: 0;
37+
left: 0;
38+
}
39+
40+
a {
41+
&:hover {
42+
.underline {
43+
width: 100%;
44+
}
45+
46+
color: white;
47+
background-color: #b2a38a;
48+
}
49+
50+
&.active {
51+
color: white;
52+
background-color: #b2a38a;
53+
}
54+
}
55+
}
56+
57+
#grid {
58+
padding-bottom: 30px;
59+
margin: 15px auto 0;
60+
}
61+
62+
.story-item {
63+
.image {
64+
width: 100%;
65+
height: auto;
66+
}
67+
68+
&:hover .image {
69+
70+
}
71+
72+
/* this class makes sure the story image doesn't get to big */
73+
.trim {
74+
max-height: 500px;
75+
overflow: hidden;
76+
77+
@include prefix(box-shadow, (0 0 5px rgba(0,0,0,0.5)), webkit moz o);
78+
}
79+
}
80+
81+
.softcolor {
82+
color: #868686;
83+
}
84+
85+
/***************
86+
* Cards
87+
***************/
88+
89+
.card {
90+
position: relative;
91+
background-color: white;
92+
margin-top: 10px;
93+
margin-bottom: 0;
94+
95+
@include prefix(transition, (all 0.3s), webkit moz o);
96+
97+
border-radius: 3px;
98+
99+
h1, h2, h3, h4, h5, h6 {
100+
margin: 0;
101+
}
102+
103+
.card-content {
104+
$left: 5%;
105+
$border-color: #ad9977;
106+
107+
position: relative;
108+
background-color: white;
109+
top: -3vh;
110+
margin-left: $left;
111+
margin-right: 2%;
112+
padding: 25px 16px 15px 25px;
113+
114+
border-top: 2px solid $border-color;
115+
116+
@include prefix(box-shadow, (0 0 4px rgba(0,0,0,0.3)), webkit moz o);
117+
118+
.title {
119+
width: 100%;
120+
margin-bottom: 15px;
121+
font-size: 24px;
122+
}
123+
124+
.title:after {
125+
content: '';
126+
width: 25%;
127+
height: 3px;
128+
background-color: $primary-color;
129+
}
130+
131+
.sneak-peek {
132+
text-overflow: ellipsis;
133+
word-wrap: break-word;
134+
margin: 10px 0 13px 0;
135+
}
136+
137+
.info {
138+
color: #727272;
139+
}
140+
141+
.programming-language-tooltip {
142+
background-color: $border-color;
143+
font-size: 15px;
144+
color: white;
145+
position: absolute;
146+
padding: 5px;
147+
148+
border-radius: 2px;
149+
150+
top: -20px;
151+
right: 15px;
152+
153+
@include prefix(box-shadow, (0 1px 4px 0 rgba(0, 0, 0, 0.2)), webkit moz);
154+
}
155+
156+
}
157+
158+
}
159+

‎_sass/_variables.scss

+9
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,12 @@ $f-xhr: 4.5rem;
1212
$f-2xh: 6rem;
1313
$f-weight: 400;
1414
$f-line-height: 1.5;
15+
16+
/**
17+
* Melle's Colors :D
18+
*/
19+
$primary-color: #b2a38a;
20+
$pundo: rgba(240, 93, 94, 1);
21+
$beja: rgba(216, 164, 127, 1);
22+
$kollo: rgba(15, 113, 115, 1);
23+
$darre: rgba(39, 41, 50, 1);

0 commit comments

Comments
 (0)