Skip to content

Commit 58a82f8

Browse files
committed
Merge branch 'feature/restyle_blog_pages'
2 parents d634bcc + 0b088e1 commit 58a82f8

7 files changed

Lines changed: 445 additions & 9 deletions

File tree

_layouts/blog.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<html class="no-js">
2+
<head>
3+
<meta charset="utf-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<title></title>
6+
<meta name="description" content="">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
<link rel="stylesheet" href="/css/blog-style.css">
10+
<link rel="stylesheet" href="/css/colors-dark.css">
11+
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
12+
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
13+
<script src="/js/libs/modernizr-2.7.1.min.js"></script>
14+
</head>
15+
<body id="{{ page.title }}">
16+
{{ content }}
17+
</body>
18+
</html>

_layouts/post.html

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
11
---
2-
layout: default
3-
2+
layout: blog
43
---
5-
<div class="container">
6-
{% include post_wrapper.html url=page.url title=page.title content=content author=page.author %}
7-
</div>
4+
5+
<article class="post">
6+
7+
{% if page.external-url %}
8+
<h1>
9+
<a href="{{ page.external-url }}">{{ page.title }}</a>
10+
<a class="anchor" href="{{ page.url }}"><i class="icon-anchor"></i></a>
11+
</h1>
12+
{% else %}
13+
<h1><a href="{{ page.url }}">{{ page.title }}</a></h1>
14+
{% endif %}
15+
16+
<div class="post-content">{{ content }}</div>
17+
18+
<p class="meta">Posted on <span class="postdate">{{ page.date | date: "%b %d, %Y" }}</span></p>
19+
20+
</article>

_layouts/posts_by_author.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
<h1> Posts by author :{{ page.author }}</h1>
2-
<div>
1+
---
2+
layout: blog
3+
---
4+
5+
{{ content }}
6+
7+
<div class="posts-list">
38
{% for post in site.posts do %}
49
{% if post.author == page.author %}
510
<a href="{{ post.url }}/">{{ post.title }}</a>
11+
<p> {{ post.excerpt }} </p>
612
{% endif %}
713
{% endfor %}
814
</div>

blog/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
2-
layout: default
2+
layout: blog
33
title: Jackpine Blog
44
---
55

66
<div id="post-listing" class="container">
77
{% for post in site.posts %}
8-
{% include post_wrapper.html url=post.url title=post.title content=post.content author=post.author %}
8+
{% include post_wrapper.html url=post.url title=post.title content=post.excerpt author=post.author %}
99
{% endfor %}
1010
</div>

css/blog-style.css

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
/*** Reset ***/
2+
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
3+
margin: 0;
4+
padding: 0;
5+
border: 0;
6+
font-size: 100%;
7+
font: inherit;
8+
vertical-align: baseline;
9+
}
10+
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
11+
display: block;
12+
}
13+
body {
14+
line-height: 1;
15+
}
16+
ol, ul {
17+
list-style: bullet;
18+
}
19+
blockquote, q {
20+
quotes: none;
21+
}
22+
blockquote:before, blockquote:after, q:before, q:after {
23+
content: '';
24+
content: none;
25+
}
26+
table {
27+
border-collapse: collapse;
28+
border-spacing: 0;
29+
}
30+
31+
32+
33+
/*** Basics ***/
34+
body {
35+
font-family: Verdana, serif;
36+
font-size: 13px;
37+
line-height: 1.7;
38+
}
39+
40+
a, a:active, a:visited {
41+
text-decoration: none;
42+
border-bottom: 1px solid #839496;
43+
padding-bottom: 2px;
44+
}
45+
a:hover {
46+
background-color: #839496;
47+
color: #000000;
48+
}
49+
50+
p { margin-bottom: 15px; }
51+
ul, ol { padding: 0 0 18px 30px; }
52+
ol li, ul li { margin-top: 10px; margin-bottom: 10px; }
53+
em, i { font-style: italic; }
54+
strong, b { font-weight: bold; }
55+
small { font-size: 0.85em; }
56+
sup { vertical-align: super; font-size: 0.85em; }
57+
sub { vertical-align: sub; font-size: 0.85em; }
58+
59+
code {
60+
font: 0.85em Monaco, Courier, Monospace;
61+
}
62+
63+
blockquote {
64+
margin: 22px 22px;
65+
padding: 0 20px;
66+
border-left: 2px solid #000000;
67+
font-size: 1.2em;
68+
font-style: italic;
69+
line-height: 1.5em;
70+
}
71+
72+
acronym, abbr {
73+
cursor: help;
74+
letter-spacing: 1px;
75+
border-bottom: 1px dashed;
76+
}
77+
78+
79+
h1 {
80+
font-size: 17px;
81+
margin: 0 0 10px 0;
82+
}
83+
h2 {
84+
font-size: 15px;
85+
margin: 0 0 10px 0;
86+
}
87+
h3 {
88+
font-size: 14px;
89+
margin: 0 0 10px 0;
90+
}
91+
92+
93+
94+
/*** Useful Classes ***/
95+
.clear { clear: both; }
96+
.float-left { float: left; }
97+
.float-right { float: right; }
98+
.text-left { text-align: left; }
99+
.text-right { text-align: right; }
100+
.text-center { text-align: center; }
101+
.text-justify { text-align: justify; }
102+
.img-left { float: left; margin: 4px 10px 4px 0; }
103+
.img-right { float: right; margin: 4px 0 4px 10px; }
104+
.img-middle { vertical-align: middle; }
105+
.nopadding { padding: 0; }
106+
.nounderline { text-decoration: underline; }
107+
108+
109+
110+
/*** Structure ***/
111+
#page {
112+
width: 500px;
113+
margin: 0 auto;
114+
position: relative;
115+
}
116+
117+
#header {
118+
width: 500px;
119+
margin: 40px auto 50px auto;
120+
}
121+
#header h1 {
122+
font-size: 32px;
123+
margin-bottom: 4px;
124+
}
125+
#header h1 a {
126+
border: none;
127+
}
128+
129+
#footer {
130+
width: 500px;
131+
margin: 50px auto 20px auto;
132+
padding-top: 10px;
133+
font-size: 0.85em;
134+
border-top: 1px solid #073642;
135+
}
136+
137+
#content {
138+
width: 500px;
139+
margin: 0 auto;
140+
}
141+
142+
#sidebar {
143+
position: absolute;
144+
text-align: right;
145+
width: 160px;
146+
top: 0;
147+
left: -240px;
148+
}
149+
150+
#sidebar li {
151+
list-style: none;
152+
margin: 2px 0;
153+
}
154+
155+
#sidebar a {
156+
border: none;
157+
font-family: "Helvetica Neue", "Helvetica", serif;
158+
font-size: 1.2em;
159+
padding: 2px 4px;
160+
}
161+
162+
163+
164+
/*** Posts ***/
165+
article {
166+
margin-bottom: 40px;
167+
}
168+
169+
article h1 {
170+
font-size: 17px;
171+
margin: 0 0 10px 0;
172+
}
173+
article h1 a {
174+
border: none;
175+
}
176+
article h1 a.anchor {
177+
margin-left: 8px;
178+
}
179+
180+
article img {
181+
display: block;
182+
text-align: center;
183+
margin: 0 auto 1em auto;
184+
}
185+
186+
article .meta {
187+
padding-top: 6px;
188+
font-size: 0.85em;
189+
font-style: italic;
190+
}
191+
192+
img.left {
193+
float: left;
194+
margin: 0 1em 1em 0;
195+
}
196+
img.right {
197+
float: right;
198+
margin: 0 0 1em 1em;
199+
}
200+
img.center {
201+
display: block;
202+
text-align: center;
203+
margin: 0 auto 1em auto;
204+
}
205+
206+
207+
208+
/*** Pagination ***/
209+
.postnavigation {
210+
padding-top: 10px;
211+
text-align: center;
212+
font-size: 0.85em;
213+
}
214+
215+
.postnavigation .left {
216+
float: left;
217+
}
218+
219+
.postnavigation .right {
220+
float: right;
221+
}
222+
223+
224+
225+
/*** Media Queries ***/
226+
@media all and (max-width: 870px) {
227+
228+
#page, #header, #content, #footer {
229+
width: inherit;
230+
padding-left: 10px;
231+
padding-right: 10px;
232+
}
233+
234+
#sidebar {
235+
position: relative;
236+
text-align: left;
237+
width: 100%;
238+
left: 0;
239+
margin: 10px 10px 20px 10px;
240+
}
241+
242+
#sidebar nav select.mnav {
243+
display: block;
244+
margin-bottom: 15px;
245+
}
246+
247+
}
248+
249+
250+
251+
/*** Icons ***/
252+
@font-face {
253+
font-family: 'solarthemeicons';
254+
src: url('../fonts/solarthemeicons.eot');
255+
src: url('../fonts/solarthemeicons.eot#iefix') format('embedded-opentype'),
256+
url('../fonts/solarthemeicons.woff') format('woff'),
257+
url('../fonts/solarthemeicons.ttf') format('truetype'),
258+
url('../fonts/solarthemeicons.svg#solarthemeicons') format('svg');
259+
font-weight: normal;
260+
font-style: normal;
261+
}
262+
263+
[class^="icon-"]:before, [class*=" icon-"]:before {
264+
font-family: "solarthemeicons";
265+
font-style: normal;
266+
font-weight: normal;
267+
speak: none;
268+
display: inline-block;
269+
text-decoration: inherit;
270+
width: 1em;
271+
margin-right: .2em;
272+
text-align: center;
273+
font-variant: normal;
274+
text-transform: none;
275+
line-height: 1.7;
276+
}
277+
278+
.icon-sun:before { content: '\e801'; }
279+
.icon-anchor:before { content: '\e800'; }
280+
.icon-anchor {
281+
font-size: 65%;
282+
}

0 commit comments

Comments
 (0)