Skip to content

Commit a567beb

Browse files
pingsweptpingswept
committed
Improve typography, post and page formatting
1 parent ca56990 commit a567beb

File tree

4 files changed

+109
-53
lines changed

4 files changed

+109
-53
lines changed

‎assets/css/rascal.css‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,48 @@ body {
44
line-height: 1.0em;
55
background-color: #e7e8e9;
66
}
7+
p {
8+
line-height: 1.6em;
9+
}
10+
h1.post-title {
11+
font-size: 30px;
12+
color: #414243;
13+
}
14+
h2 {
15+
font-size: 24px;
16+
letter-spacing: 0px;
17+
text-indent: 0px;
18+
}
19+
h2 a {
20+
color: #414243;
21+
}
22+
a:hover {
23+
color: #c6433c;
24+
}
25+
h3 {
26+
margin-top: 20px;
27+
margin-bottom: 15px;
28+
font-size: 20px;
29+
}
30+
h5 {
31+
font-size: 12px;
32+
}
733
.site-head {
834
margin-bottom: 0px;
935
}
1036
.post {
1137
max-width: 820px;
1238
background-color: #f5f5f5;
1339
margin-top: 0px;
14-
padding-top: 60px;
40+
padding-top: 80px;
1541
position: static;
1642
/* to prevent weird overlap on page.hbs */
1743
}
44+
.post-footer {
45+
margin-top: 0px;
46+
padding-top: 20px;
47+
border-top: #414243 1px solid;
48+
}
1849
ul.nav li {
1950
display: inline;
2051
list-style-type: none;

‎assets/css/rascal.less‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,39 @@ body {
1717
background-color: @rascal-white;
1818
}
1919

20+
p {
21+
line-height: 1.6em;
22+
}
23+
24+
h1.post-title {
25+
font-size: 30px;
26+
color: @rascal-gray;
27+
}
28+
29+
h2 {
30+
font-size: 24px;
31+
letter-spacing: 0px;
32+
text-indent: 0px;
33+
}
34+
35+
h2 a {
36+
color: @rascal-gray;
37+
}
38+
39+
a:hover {
40+
color: @rascal-red;
41+
}
42+
43+
h3 {
44+
margin-top: 20px;
45+
margin-bottom: 15px;
46+
font-size: 20px;
47+
}
48+
49+
h5 {
50+
font-size: 12px;
51+
}
52+
2053
.site-head {
2154
margin-bottom: 0px;
2255
}
@@ -25,10 +58,16 @@ body {
2558
max-width: 820px;
2659
background-color: @rascal-bright-white;
2760
margin-top: 0px;
28-
padding-top: 60px;
61+
padding-top: 80px;
2962
position: static; /* to prevent weird overlap on page.hbs */
3063
}
3164

65+
.post-footer {
66+
margin-top: 0px;
67+
padding-top: 20px;
68+
border-top: @rascal-gray 1px solid;
69+
}
70+
3271
ul.nav li {
3372
display: inline;
3473
list-style-type: none;

‎page.hbs‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,13 @@
2626
</script>
2727

2828
<main class="content" role="main">
29-
30-
<article class="{{post_class}}">
31-
32-
{{#post}}
33-
34-
<h1 class="post-title">{{{title}}}</h1>
35-
36-
<section class="post-content">
37-
{{content}}
38-
</section>
39-
40-
{{/post}}
41-
42-
</article>
43-
29+
<div class="center-column">
30+
<article class="{{post_class}}">
31+
{{#post}}
32+
<section class="post-content">
33+
{{content}}
34+
</section>
35+
{{/post}}
36+
</article>
37+
</div>
4438
</main>

‎post.hbs‎

Lines changed: 28 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -26,47 +26,39 @@
2626
</script>
2727

2828
<main class="content" role="main">
29+
<div class="center-column">
30+
<article class="{{post_class}}">
31+
{{! Everything inside the #post tags pulls data from the post }}
32+
{{#post}}
33+
<h1 class="post-title">{{{title}}}</h1>
34+
<span class="post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time> | {{author.name}} {{tags prefix="on " separator=" | "}}</span>
2935

30-
<article class="{{post_class}}">
31-
32-
{{! Everything inside the #post tags pulls data from the post }}
33-
{{#post}}
34-
35-
<span class="post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time> {{tags prefix="on " separator=" | "}}</span>
36-
37-
<h1 class="post-title">{{{title}}}</h1>
38-
39-
<section class="post-content">
40-
{{content}}
41-
</section>
42-
43-
<footer class="post-footer">
44-
45-
<section class="author">
46-
<h4>{{author.name}}</h4>
47-
<p>{{author.bio}}</p>
36+
<section class="post-content">
37+
{{content}}
4838
</section>
4939

50-
<section class="share">
51-
<h4>Share this post</h4>
52-
<a class="icon-twitter" href="http://twitter.com/share?text={{encode title}}&url={{url absolute="true"}}"
53-
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
54-
<span class="hidden">Twitter</span>
55-
</a>
56-
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
57-
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
58-
<span class="hidden">Facebook</span>
59-
</a>
60-
<a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}"
61-
onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
62-
<span class="hidden">Google+</span>
63-
</a>
64-
</section>
40+
<footer class="post-footer">
6541

66-
</footer>
42+
<section class="share">
43+
<h4>Share this post</h4>
44+
<a class="icon-twitter" href="http://twitter.com/share?text={{encode title}}&url={{url absolute="true"}}"
45+
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
46+
<span class="hidden">Twitter</span>
47+
</a>
48+
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
49+
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
50+
<span class="hidden">Facebook</span>
51+
</a>
52+
<a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}"
53+
onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
54+
<span class="hidden">Google+</span>
55+
</a>
56+
</section>
6757

68-
{{/post}}
58+
</footer>
6959

70-
</article>
60+
{{/post}}
7161

62+
</article>
63+
</div>
7264
</main>

0 commit comments

Comments
 (0)