GitList
Browse code

Add sass files

Cinan Rakosnik authored on 16/02/2013 at 22:09:38
Showing 15 changed files
sass/_parts.scss
History View file @ 45f081a
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,9 @@
0 
+@import "parts/header";
1 
+@import "parts/index";
2 
+@import "parts/article";
3 
+@import "parts/post";
4 
+@import "parts/archive";
5 
+@import "parts/comment";
6 
+@import "parts/footer";
7 
+@import "parts/syntax";
8 
+@import "parts/twitter";
0 9 
\ No newline at end of file
sass/_plugins.scss
History View file @ 45f081a
1 10 
new file mode 100644
... ... 
@@ -0,0 +1 @@
0 
+@import "plugins/fancybox";
0 1 
\ No newline at end of file
sass/base/_color.scss
History View file @ 45f081a
1 2 
new file mode 100644
... ... 
@@ -0,0 +1,7 @@
0 
+$color-background: #eee !default;
1 
+$color-main: #258fb8 !default;
2 
+$color-gray01: #666 !default;
3 
+$color-gray02: #999 !default;
4 
+$color-gray03: #ccc !default;
5 
+$color-gray04: #ddd !default;
6 
+$color-gray05: #fff !default;
0 7 
\ No newline at end of file
sass/base/_font.scss
History View file @ 45f081a
1 8 
new file mode 100644
... ... 
@@ -0,0 +1,17 @@
0 
+$font-default: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
1 
+$font-mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
2 
+
3 
+$font-icon: FontAwesome;
4 
+$font-icon-path: "/font/fontawesome-webfont";
5 
+
6 
+@font-face {
7 
+	font-family: 'FontAwesome';
8 
+	src: url('#{$font-icon-path}.eot');
9 
+	src: url('#{$font-icon-path}.eot?#iefix') format('embedded-opentype'),
10 
+		url('#{$font-icon-path}.woff') format('woff'),
11 
+		url('#{$font-icon-path}.ttf') format('truetype'),
12 
+		url('#{$font-icon-path}.svgz#FontAwesomeRegular') format('svg'),
13 
+		url('#{$font-icon-path}.svg#FontAwesomeRegular') format('svg');
14 
+	font-weight: normal;
15 
+	font-style: normal;
16 
+}
0 17 
\ No newline at end of file
sass/custom/_color.scss
History View file @ 45f081a
1 18 
new file mode 100644
... ... 
@@ -0,0 +1,7 @@
0 
+// $color-background: #eee;
1 
+// $color-main: #258fb8;
2 
+// $color-gray01: #666;
3 
+// $color-gray02: #999;
4 
+// $color-gray03: #ccc;
5 
+// $color-gray04: #ddd;
6 
+// $color-gray05: #fff;
0 7 
\ No newline at end of file
sass/parts/_archive.scss
History View file @ 45f081a
1 8 
new file mode 100644
... ... 
@@ -0,0 +1,73 @@
0 
+.archives{
1 
+	position: relative;
2 
+	&:last-of-type{
3 
+		&:before{
4 
+			content: "";
5 
+			position: absolute;
6 
+			bottom: 0;
7 
+			width: 200px;
8 
+			border-top: 1px solid $color-gray04;
9 
+		}
10 
+	}
11 
+	.year{
12 
+		line-height: 35px;
13 
+		width: 200px;
14 
+		position: absolute;
15 
+		top: 0;
16 
+		padding-top: 15px;
17 
+		border-top: 1px solid #fff;
18 
+		&:before{
19 
+			content: "";
20 
+			position: absolute;
21 
+			top: -2px;
22 
+			width: 100%;
23 
+			border-top: 1px solid $color-gray04;
24 
+		}
25 
+		@media screen and (max-width: 600px){
26 
+			position: relative;
27 
+			width: 100%;
28 
+		}
29 
+	}
30 
+	article{
31 
+		margin-left: 200px;
32 
+		padding: 15px 0;
33 
+		@media screen and (max-width: 600px){
34 
+			margin-left: 0;
35 
+			&:first-of-type{
36 
+				border-top: none;
37 
+				padding-top: 30px;
38 
+			}
39 
+		}
40 
+		.title{
41 
+			margin-bottom: 0;
42 
+		}
43 
+		.meta{
44 
+			color: $color-gray02;
45 
+			font-size: 0.9em;
46 
+			line-height: 2;
47 
+			margin-top: 15px;
48 
+			@media screen and (max-width: 600px){
49 
+				display: none;
50 
+			}
51 
+			span{
52 
+				margin-right: 30px;
53 
+				@include inline-block;
54 
+				&:before{
55 
+					color: $color-gray03;
56 
+					font: 1.3em $font-icon;
57 
+					padding-right: 10px;
58 
+				}
59 
+			}
60 
+			a{
61 
+				color: $color-gray02;
62 
+				@include transition(0.3s);
63 
+				&:hover{
64 
+					color: $color-gray01;
65 
+				}
66 
+			}
67 
+			.date:before{content: "\f073";}
68 
+			.tags:before{content: "\f02c";}
69 
+			.comments:before{content: "\f075";}
70 
+		}
71 
+	}
72 
+}
0 73 
\ No newline at end of file
sass/parts/_article.scss
History View file @ 45f081a
1 74 
new file mode 100644
... ... 
@@ -0,0 +1,141 @@
0 
+article{
1 
+	border-bottom: 1px solid $color-gray04;
2 
+	border-top: 1px solid $color-gray05;
3 
+	padding: 30px 0;
4 
+	position: relative;
5 
+	@media screen and (max-width: 800px){
6 
+		padding-bottom: 15px;
7 
+	}
8 
+	@media screen and (max-width: 600px){
9 
+		padding: 15px 0;
10 
+	}
11 
+	h2.title{
12 
+		font-size: 1.8em;
13 
+		font-weight: 300;
14 
+		line-height: 35px;
15 
+		margin-bottom: 20px;
16 
+		a{
17 
+			color: $color-gray01;
18 
+		}
19 
+	}
20 
+	.entry-content{
21 
+		line-height: 2;
22 
+		text-align: justify;
23 
+		a{
24 
+			&:hover{
25 
+				text-decoration: underline;
26 
+			}
27 
+		}
28 
+		.more-link{
29 
+			display: block;
30 
+			margin-top: 16px;
31 
+			padding-left: 30px;
32 
+			position: relative;
33 
+			&:before{
34 
+				content: "\f061";
35 
+				font: 1.3em $font-icon;
36 
+				line-height: 1.6em;
37 
+				position: absolute;
38 
+				left: 0;
39 
+			}
40 
+		}
41 
+		p, blockquote, ul, ol, dl, table, iframe, h1, h2, h3, h4, h5, h6, .video-container{
42 
+			margin-top: 10px;
43 
+		}
44 
+		ul, ol, dl{
45 
+			margin-left: 20px;
46 
+			ul, ol, dl{
47 
+				margin-top: 0;
48 
+			}
49 
+		}
50 
+		strong{
51 
+			font-weight: bold;
52 
+		}
53 
+		em{
54 
+			font-style: italic;
55 
+		}
56 
+		p{
57 
+			margin-top: 10px;
58 
+		}
59 
+		h2{
60 
+			font-weight: 300;
61 
+			border-bottom: 1px solid $color-gray04;
62 
+			position: relative;
63 
+			&:before{
64 
+				content: "";
65 
+				position: absolute;
66 
+				bottom: -2px;
67 
+				border-bottom: 1px solid $color-gray05;
68 
+				width: 100%;
69 
+			}
70 
+		}
71 
+		img, video{
72 
+			max-width: 100%;
73 
+			height: auto;
74 
+		}
75 
+		blockquote{
76 
+			background: $color-gray04;
77 
+			border-left: 5px solid $color-gray03;
78 
+			padding: 15px 20px;
79 
+			margin-top: 10px;
80 
+			& > p:first-of-type{
81 
+				margin-top: 0;
82 
+			}
83 
+		}
84 
+		iframe{
85 
+			border: none;
86 
+		}
87 
+		table{
88 
+			background: $color-gray04;
89 
+			border: 1px solid $color-gray03;
90 
+			border-spacing: 0;
91 
+			margin-top: 10px;
92 
+			th{
93 
+				background: $color-gray03;
94 
+				padding: 0 15px;
95 
+			}
96 
+			td{
97 
+				text-align: center;
98 
+			}
99 
+			tr{
100 
+				&:nth-of-type(2n){
101 
+					background: #d5d5d5;
102 
+				}
103 
+			}
104 
+		}
105 
+		.caption{
106 
+			display: block;
107 
+			font-size: 0.9em;
108 
+			color: $color-gray02;
109 
+			padding-left: 25px;
110 
+			position: relative;
111 
+			&:before{
112 
+				content: "\f040";
113 
+				color: $color-gray03;
114 
+				font: 1.3em $font-icon;
115 
+				line-height: 1.6em;
116 
+				position: absolute;
117 
+				left: 0;
118 
+			}
119 
+		}
120 
+		.video-container{
121 
+			position: relative;
122 
+			padding-bottom: 56.25%;
123 
+			padding-top: 30px;
124 
+			height: 0;
125 
+			overflow: hidden;
126 
+			iframe, object, embed{
127 
+				position: absolute;
128 
+				top: 0;
129 
+				left: 0;
130 
+				width: 100%;
131 
+				height: 100%;
132 
+				margin-top: 0;
133 
+			}
134 
+		}
135 
+	}
136 
+}
137 
+.share{
138 
+	padding: 15px 0;
139 
+	@include border-shadow();
140 
+}
0 141 
\ No newline at end of file
sass/parts/_comment.scss
History View file @ 45f081a
1 142 
new file mode 100644
... ... 
@@ -0,0 +1,10 @@
0 
+#comment{
1 
+	padding: 30px 0;
2 
+	@include border-shadow();
3 
+	h2.title{
4 
+		font-size: 25px;
5 
+		font-weight: 300;
6 
+		line-height: 35px;
7 
+		margin-bottom: 20px;
8 
+	}
9 
+}
0 10 
\ No newline at end of file
sass/parts/_footer.scss
History View file @ 45f081a
1 11 
new file mode 100644
... ... 
@@ -0,0 +1,6 @@
0 
+footer{
1 
+	padding: 15px 0;
2 
+	border-top: 1px solid $color-gray05;
3 
+	text-align: center;
4 
+	font-size: 0.9em;
5 
+}
0 6 
\ No newline at end of file
sass/parts/_header.scss
History View file @ 45f081a
1 7 
new file mode 100644
... ... 
@@ -0,0 +1,395 @@
0 
+$header-height: 30px;
1 
+
2 
+#header{
3 
+	height: $header-height;
4 
+	padding: 30px 0;
5 
+	border-bottom: 1px solid $color-gray04;
6 
+	line-height: $header-height;
7 
+	@media screen and (max-width: 1040px){
8 
+		height: auto;
9 
+		position: relative;
10 
+		padding-bottom: 10px;
11 
+	}
12 
+	a{
13 
+		color: $color-gray01;
14 
+		@include transition(color 0.3s);
15 
+		&:hover{
16 
+			color: $color-main;
17 
+		}
18 
+	}
19 
+	h1{
20 
+		float: left;
21 
+		font-weight: 300;
22 
+		font-size: 30px;
23 
+		@media screen and (max-width: 1040px){
24 
+			float: none;
25 
+		}
26 
+	}
27 
+}
28 
+#main-nav{
29 
+	float: left;
30 
+	margin-left: 30px;
31 
+	@media screen and (max-width: 1040px){
32 
+		float: none;
33 
+		margin-left: 0;
34 
+		margin-top: 15px;
35 
+	}
36 
+	>ul{
37 
+		@media screen and (max-width: 600px){
38 
+			display: none;
39 
+		}
40 
+		>li{
41 
+			margin-left: 50px;
42 
+			@include inline-block;
43 
+			@media screen and (max-width: 1040px){
44 
+				margin-left: 0;
45 
+				margin-right: 50px;
46 
+				&:last-of-type{
47 
+					margin-right: 0;
48 
+				}
49 
+			}
50 
+			&:hover{
51 
+				>a{
52 
+					color: $color-main;
53 
+				}
54 
+			}
55 
+			>a{
56 
+				padding: 38px 0;
57 
+				margin-top: -38px;
58 
+				&:after{
59 
+					content: "\f078";
60 
+					color: $color-gray03;
61 
+					font: 12px $font-icon;
62 
+					padding-left: 10px;
63 
+				}
64 
+				&:only-child{
65 
+					&:after{
66 
+						content: "";
67 
+					}
68 
+				}
69 
+				@media screen and (max-width: 1040px){
70 
+					padding: 18px 0;
71 
+				}
72 
+			}
73 
+		}
74 
+		ul{
75 
+			position: absolute;
76 
+			top: 60px;
77 
+			left: -15px;
78 
+			z-index: 10;
79 
+			white-space: nowrap;
80 
+			background: $color-gray04;
81 
+			border: 1px solid $color-gray03;
82 
+			list-style: none;
83 
+			display: none;
84 
+			@media screen and (max-width: 1040px){
85 
+				top: 40px;
86 
+			}
87 
+			@include box-shadow(0 4px 8px rgba(0,0,0,0.1));
88 
+			@include border-radius(0 0 5px 5px);
89 
+			ul{
90 
+				@include border-radius(0 5px 5px 5px);
91 
+			}
92 
+			li{
93 
+				@include border-shadow($color-background, $color-gray03);
94 
+				&:hover{
95 
+					background: #d5d5d5;
96 
+				}
97 
+				&:first-of-type{
98 
+					border-top: none;
99 
+					ul{
100 
+						@include border-radius(0 0 5px 5px);
101 
+					}
102 
+				}
103 
+				&:last-of-type{
104 
+					border-bottom: none;
105 
+				}
106 
+				>a{
107 
+					display: block;
108 
+					padding: 5px 15px;
109 
+					&:after{
110 
+						content: "\f054";
111 
+						color: $color-gray02;
112 
+						font: 12px $font-icon;
113 
+						padding-left: 10px;
114 
+					}
115 
+					&:hover{
116 
+						color: $color-gray01;
117 
+					}
118 
+					&:only-child{
119 
+						&:after{
120 
+							content: "";
121 
+						}
122 
+					}
123 
+				}
124 
+			}
125 
+			ul{
126 
+				top: 0;
127 
+				left: 100%;
128 
+			}
129 
+		}
130 
+		li{
131 
+			position: relative;
132 
+			&:hover{
133 
+				>ul{
134 
+					display: block;
135 
+				}
136 
+			}
137 
+		}
138 
+	}
139 
+	select{
140 
+		display: none;
141 
+		margin-bottom: 10px;
142 
+		@media screen and (max-width: 600px){
143 
+			display: block;
144 
+		}
145 
+	}
146 
+}
147 
+#mobile-nav{
148 
+	display: none;
149 
+	height: 37px;
150 
+	position: relative;
151 
+	@media screen and (max-width: 600px){
152 
+		display: block;
153 
+	}
154 
+	a{
155 
+		display: block;
156 
+	}
157 
+	.button{
158 
+		cursor: pointer;
159 
+	}
160 
+	.container{
161 
+		display: none;
162 
+	}
163 
+	.menu{
164 
+		position: relative;
165 
+		width: 100%;
166 
+		.button{
167 
+			background: #f2f2f2;
168 
+			border: 1px solid $color-gray04;
169 
+			color: #999;
170 
+			padding: 0 60px 0 10px;
171 
+			position: relative;
172 
+			@include border-radius(5px);
173 
+			&:hover{
174 
+				color: #999;
175 
+			}
176 
+			&.on{
177 
+				color: #666;
178 
+				@include border-radius(5px 5px 5px 0);
179 
+				&:before{
180 
+					content: "\f077";
181 
+				}
182 
+			}
183 
+			&:before{
184 
+				content: "\f078";
185 
+				color: $color-gray04;
186 
+				font: 16px $font-icon;
187 
+				line-height: 30px;
188 
+				position: absolute;
189 
+				top: 0;
190 
+				right: 40px;
191 
+			}
192 
+		}
193 
+		.container{
194 
+			background: #f2f2f2;
195 
+			border: 1px solid #ddd;
196 
+			border-top: none;
197 
+			position: absolute;
198 
+			top: 31px;
199 
+			z-index: 1;
200 
+			@include border-radius(0 0 5px 5px);
201 
+			ul{
202 
+				list-style: none;
203 
+				ul{
204 
+					margin-left: 20px;
205 
+				}
206 
+			}
207 
+			a{
208 
+				padding: 0 10px;
209 
+			}
210 
+		}
211 
+	}
212 
+	.search{
213 
+		position: absolute;
214 
+		top: 0;
215 
+		right: 0;
216 
+		.button{
217 
+			background: $color-gray04;
218 
+			width: 30px;
219 
+			height: 30px;
220 
+			position: absolute;
221 
+			top: 1px;
222 
+			right: -1px;
223 
+			@include border-radius(0 5px 5px 0);
224 
+			&:before{
225 
+				content: "\f002";
226 
+				color: #f2f2f2;
227 
+				font: 20px $font-icon;
228 
+				line-height: 30px;
229 
+				position: absolute;
230 
+				top: 0;
231 
+				left: 7px;
232 
+			}
233 
+			&.on{
234 
+				background: $color-gray03;
235 
+				&:before{
236 
+					content: "\f00d";
237 
+				}
238 
+			}
239 
+		}
240 
+		.container{
241 
+			position: absolute;
242 
+			right: 51px;
243 
+			z-index: 1;
244 
+		}
245 
+		input[type="text"]{
246 
+			background: #fff;
247 
+			border: 1px solid $color-gray04;
248 
+			border-right: none;
249 
+			color: $color-gray02;
250 
+			font: 13px $font-default;
251 
+			height: 30px;
252 
+			width: 100%;
253 
+			padding: 0 10px;
254 
+			@include border-radius(5px 0 0 5px);
255 
+		}
256 
+	}
257 
+}
258 
+#sub-nav{
259 
+	@media screen and (max-width: 1040px){
260 
+		position: absolute;
261 
+		top: 30px;
262 
+		right: 0;
263 
+	}
264 
+	@media screen and (max-width: 600px){
265 
+		display: none;
266 
+	}
267 
+	.search{
268 
+		float: left;
269 
+		margin-top: 1px;
270 
+		position: relative;
271 
+		@media screen and (max-width: 1040px){
272 
+			float: none;
273 
+			margin-top: 15px;
274 
+		}
275 
+		&:before{
276 
+			content: "\f002";
277 
+			color: $color-gray03;
278 
+			font: 18px $font-icon;
279 
+			line-height: 30px;
280 
+			position: absolute;
281 
+			top: 0;
282 
+			right: 125px;
283 
+		}
284 
+		input[type="text"]{
285 
+			background: #f2f2f2;
286 
+			color: $color-gray02;
287 
+			border: 1px solid $color-gray04;
288 
+			font: 13px $font-default;
289 
+			padding: 6px 15px 6px 35px;
290 
+			width: 100px;
291 
+			@include transition(0.3s);
292 
+			@include border-radius(15px);
293 
+			&:focus, &:active{
294 
+				background: #fff;
295 
+				border-top: 1px solid $color-gray03;
296 
+				color: $color-gray01;
297 
+				outline: none;
298 
+			}
299 
+		}
300 
+	}
301 
+	.social{
302 
+		float: left;
303 
+		margin-right: 15px;
304 
+		@media screen and (max-width: 1040px){
305 
+			float: none;
306 
+			margin-right: 0;
307 
+			a:last-of-type{
308 
+				margin-right: 0;
309 
+			}
310 
+		}
311 
+		a{
312 
+			@include border-radius(50%);
313 
+			@include inline-block;
314 
+			text-indent: -9999px;
315 
+			margin-right: 15px;
316 
+			opacity: 0.5;
317 
+			@include square(28px);
318 
+			@include transition(0.3s);
319 
+			&:hover{
320 
+				opacity: 1;
321 
+			}
322 
+			&.facebook{
323 
+				background: image-url('social/facebook.png') center no-repeat #3B5998;
324 
+				border: 1px solid #3B5998;
325 
+				&:hover{
326 
+					border: 1px solid darken(#3B5998, 10%);
327 
+				}
328 
+			}
329 
+			&.google{
330 
+				background: image-url('social/google.png') center no-repeat #C83D20;
331 
+				border: 1px solid #C83D20;
332 
+				&:hover{
333 
+					border: 1px solid darken(#C83D20, 10%);
334 
+				}
335 
+			}
336 
+			&.twitter{
337 
+				background: image-url('social/twitter.png') center no-repeat #55CFF8;
338 
+				border: 1px solid #55CFF8;
339 
+				&:hover{
340 
+					border: 1px solid darken(#55CFF8, 10%);
341 
+				}
342 
+			}
343 
+			&.github{
344 
+				background: image-url('social/github.png') center no-repeat rgb(175,182,202);
345 
+				border: 1px solid rgb(175,182,202);
346 
+				&:hover{
347 
+					border: 1px solid darken(rgb(175,182,202), 10%);
348 
+				}
349 
+			}
350 
+			&.coderwall{
351 
+				background: image-url('social/coderwall.png') center no-repeat rgb(58,114,159);
352 
+				border: 1px solid rgb(58,114,159);
353 
+				&:hover{
354 
+					border: 1px solid darken(rgb(58,114,159), 10%);
355 
+				}
356 
+			}
357 
+      &.pinboard{
358 
+        background: image-url('social/pinboard.png') center no-repeat rgb(0,102,200);
359 
+        border: 1px solid rgb(58,114,159);
360 
+        &:hover{
361 
+          border: 1px solid darken(rgb(0,102,255), 10%);
362 
+        }
363 
+      }
364 
+			&.linkedin{
365 
+				background: image-url('social/linkedin.png') center no-repeat #005A87;
366 
+				border: 1px solid #005A87;
367 
+				&:hover{
368 
+					border: 1px solid darken(#005A87, 10%);
369 
+				}
370 
+			}
371 
+			&.pinterest{
372 
+				background: image-url('social/pinterest.png') center no-repeat rgb(190,64,55);
373 
+				border: 1px solid rgb(190,64,55);
374 
+				&:hover{
375 
+					border: 1px solid darken(rgb(190,64,55), 10%);
376 
+				}
377 
+			}
378 
+			&.delicious{
379 
+				background: image-url('social/delicious.png') center no-repeat rgb(50,113,203);
380 
+				border: 1px solid rgb(50,113,203);
381 
+				&:hover{
382 
+					border: 1px solid darken(rgb(50,113,203), 10%);
383 
+				}
384 
+			}
385 
+			&.rss{
386 
+				background: image-url('social/rss.png') center no-repeat #EF7522;
387 
+				border: 1px solid #EF7522;
388 
+				&:hover{
389 
+					border: 1px solid darken(#EF7522, 10%);
390 
+				}
391 
+			}
392 
+		}
393 
+	}
394 
+}
sass/parts/_index.scss
History View file @ 45f081a
0 395 
new file mode 100644
... ... 
@@ -0,0 +1,43 @@
0 
+#pagenavi{
1 
+	padding: 20px 0;
2 
+	height: 20px;
3 
+	line-height: 20px;
4 
+	position: relative;
5 
+	@include border-shadow();
6 
+	a{
7 
+		&:hover{
8 
+			text-decoration: underline;
9 
+		}
10 
+	}
11 
+	.prev, .next{
12 
+		position: absolute;
13 
+	}
14 
+	.prev{
15 
+		padding-left: 30px;
16 
+		left: 0;
17 
+		&:before{
18 
+			content: "\f060";
19 
+			font: 1.3em $font-icon;
20 
+			position: absolute;
21 
+			left: 0;
22 
+		}
23 
+	}
24 
+	.next{
25 
+		padding-right: 30px;
26 
+		right: 0;
27 
+		&:before{
28 
+			content: "\f061";
29 
+			font: 1.3em $font-icon;
30 
+			position: absolute;
31 
+			right: 0;
32 
+		}
33 
+	}
34 
+	.center{
35 
+		text-align: center;
36 
+		width: 100%;
37 
+		display: block;
38 
+		@media screen and (max-width: 400px){
39 
+			display: none;
40 
+		}
41 
+	}
42 
+}
0 43 
\ No newline at end of file
sass/parts/_post.scss
History View file @ 45f081a
1 44 
new file mode 100644
... ... 
@@ -0,0 +1,43 @@
0 
+.post{
1 
+	h2.title, .entry-content{
2 
+		margin-left: 200px;
3 
+		@media screen and (max-width: 800px){
4 
+			margin-left: 0;
5 
+		}
6 
+	}
7 
+	.meta{
8 
+		position: absolute;
9 
+		top: 85px;
10 
+		line-height: 2;
11 
+		font-size: 0.9em;
12 
+		color: $color-gray02;
13 
+		width: 170px;
14 
+		@media screen and (max-width: 800px){
15 
+			margin-top: 15px;
16 
+			position: static;
17 
+			width: auto;
18 
+		}
19 
+		a{
20 
+			@include link-colors($color-gray02, $color-gray01);
21 
+			@include transition(0.3s);
22 
+		}
23 
+		.date, .tags, .comments{
24 
+			padding-left: 30px;
25 
+			position: relative;
26 
+			&:before{
27 
+				color: $color-gray03;
28 
+				font: 1.3em $font-icon;
29 
+				line-height: 1.6em;
30 
+				position: absolute;
31 
+				left: 0;
32 
+			}
33 
+			@media screen and (max-width: 800px){
34 
+				@include inline-block;
35 
+				margin-right: 30px;
36 
+			}
37 
+		}
38 
+		.date:before{content: "\f073";}
39 
+		.tags:before{content: "\f02c";}
40 
+		.comments:before{content: "\f075";}
41 
+	}
42 
+}
0 43 
\ No newline at end of file
sass/parts/_syntax.scss
History View file @ 45f081a
1 44 
new file mode 100644
... ... 
@@ -0,0 +1,387 @@
0 
+$base03:          #002b36 !default; //darkest blue
1 
+$base02:          #073642 !default; //dark blue
2 
+$base01:          #586e75 !default; //darkest gray
3 
+$base00:          #657b83 !default; //dark gray
4 
+$base0:           #839496 !default; //medium gray
5 
+$base1:           #93a1a1 !default; //medium light gray
6 
+$base2:           #eee8d5 !default; //cream
7 
+$base3:           #fdf6e3 !default; //white
8 
+$solar-yellow:    #b58900 !default;
9 
+$solar-orange:    #cb4b16 !default;
10 
+$solar-red:       #dc322f !default;
11 
+$solar-magenta:   #d33682 !default;
12 
+$solar-violet:    #6c71c4 !default;
13 
+$solar-blue:      #268bd2 !default;
14 
+$solar-cyan:      #2aa198 !default;
15 
+$solar-green:     #859900 !default;
16 
+
17 
+$solarized: light !default;
18 
+
19 
+@if $solarized == light {
20 
+
21 
+  $_base03: $base03;
22 
+  $_base02: $base02;
23 
+  $_base01: $base01;
24 
+  $_base00: $base00;
25 
+  $_base0:  $base0;
26 
+  $_base1:  $base1;
27 
+  $_base2:  $base2;
28 
+  $_base3:  $base3;
29 
+
30 
+  $base03:  $_base3;
31 
+  $base02:  $_base2;
32 
+  $base01:  $_base1;
33 
+  $base00:  $_base0;
34 
+  $base0:   $_base00;
35 
+  $base1:   $_base01;
36 
+  $base2:   $_base02;
37 
+  $base3:   $_base03;
38 
+}
39 
+
40 
+$pre-bg: $color-gray04;
41 
+$pre-border: $color-gray03;
42 
+
43 
+article{
44 
+	code, pre{
45 
+		background: $pre-bg;
46 
+		border: 1px solid $pre-border;
47 
+		font-family: $font-mono;
48 
+	}
49 
+	code{
50 
+		font-size: 0.9em;
51 
+		padding: 1px 3px;
52 
+		margin: 0 3px;
53 
+		@include border-radius(5px);
54 
+	}
55 
+	pre{
56 
+		font-size: 1 / 0.9em;
57 
+		line-height: 1.5;
58 
+		margin-top: 10px;
59 
+		padding: 5px 15px;
60 
+		overflow-x: auto;
61 
+		@include border-radius(5px);
62 
+		code{
63 
+			background: none;
64 
+			border: none;
65 
+			padding: 0;
66 
+			margin: 0;
67 
+			@include border-radius(0);
68 
+		}
69 
+	}
70 
+}
71 
+
72 
+figure.code{
73 
+	background: $pre-bg;
74 
+	border: 1px solid $pre-border;
75 
+	margin-top: 10px;
76 
+	padding: 5px 15px;
77 
+	@include border-radius(5px);
78 
+	figcaption{
79 
+		font-size: 0.9em;
80 
+		position: relative;
81 
+		span{
82 
+			margin: -5px -15px 0;
83 
+			padding: 5px 15px;
84 
+			display: block;
85 
+			@include background(linear-gradient(top, $pre-border, $pre-bg));
86 
+			&:empty{
87 
+				display: none;
88 
+			}
89 
+		}
90 
+		a{
91 
+			position: absolute;
92 
+			top: 5px;
93 
+			right: 0;
94 
+		}
95 
+	}
96 
+	code, pre{
97 
+		background: none;
98 
+		border: none;
99 
+		padding: 0;
100 
+		margin: 0;
101 
+		@include border-radius(0);
102 
+	}
103 
+	.highlight{
104 
+		overflow-x: auto;
105 
+	}
106 
+	.line-numbers{
107 
+		border-right: 1px solid $pre-border;
108 
+		font-family: $font-mono;
109 
+		padding-right: 15px;
110 
+		text-align: right;
111 
+	}
112 
+	table{
113 
+		border: none;
114 
+		text-align: left;
115 
+		margin-top: 0;
116 
+		td{
117 
+			text-align: left;
118 
+		}
119 
+	}
120 
+	td.code{
121 
+		width: 100%;
122 
+		padding-left: 15px;
123 
+		overflow-x: auto;
124 
+	}
125 
+}
126 
+.entry-content .gist{
127 
+	background: $pre-bg;
128 
+	color: $color-gray01;
129 
+	padding: 30px 15px 5px;
130 
+	margin-top: 10px;
131 
+	border: 1px solid $pre-border;
132 
+	position: relative;
133 
+	overflow: hidden;
134 
+	@include border-radius(5px);
135 
+	.gist-file{
136 
+		margin: 0;
137 
+		.gist-data{
138 
+			background: none;
139 
+			border: none;
140 
+			pre{
141 
+				font: 0.9em $font-mono;
142 
+				line-height: 1.5;
143 
+			}
144 
+		}
145 
+		.gist-meta{
146 
+			font: 300 0.9em $font-default;
147 
+			line-height: 1.5;
148 
+			margin: 0 -16px -6px;
149 
+			padding: 5px 15px;
150 
+			@include background(linear-gradient(top, $pre-bg, $pre-border));
151 
+			a{
152 
+				color: $color-main;
153 
+				&:first-of-type{
154 
+					position: absolute;
155 
+					top: 5px;
156 
+					right: 15px;
157 
+					z-index: 1;
158 
+				}
159 
+				&:nth-of-type(2){
160 
+					position: absolute;
161 
+					top: 0;
162 
+					left: 0;
163 
+					padding: 5px 15px;
164 
+					width: 100%;
165 
+					@include background(linear-gradient(top, $pre-border, $pre-bg));
166 
+				}
167 
+			}
168 
+		}
169 
+	}
170 
+}
171 
+figure.code, .gist-highlight{
172 
+	.c {
173 
+		color:$base01 !important;
174 
+		font-style: italic !important;
175 
+	}
176 
+	/* Comment */
177 
+	.cm {
178 
+		color:$base01 !important;
179 
+		font-style: italic !important;
180 
+	}
181 
+	/* Comment.Multiline */
182 
+	.cp {
183 
+		color:$base01 !important;
184 
+		font-style: italic !important;
185 
+	}
186 
+	/* Comment.Preproc */
187 
+	.c1 {
188 
+		color:$base01 !important;
189 
+		font-style: italic !important;
190 
+	}
191 
+	/* Comment.Single */
192 
+	.cs {
193 
+		color:$base01 !important;
194 
+		font-weight:bold !important;
195 
+		font-style: italic !important;
196 
+	}
197 
+	/* Comment.Special */
198 
+	.err {
199 
+		color:$solar-red !important;
200 
+		background: none !important;
201 
+	}
202 
+	/* Error */
203 
+	.k {
204 
+		color: $solar-orange !important;
205 
+	}
206 
+	/* Keyword */
207 
+	.o {
208 
+		color:$base1 !important;
209 
+		font-weight: bold !important;
210 
+	}
211 
+	/* Operator */
212 
+	.p {
213 
+		color: $base1 !important;
214 
+	}
215 
+	/* Operator */
216 
+	.ow {
217 
+		color:$solar-cyan !important;
218 
+		font-weight: bold !important;
219 
+	}
220 
+	/* Operator.Word */
221 
+	.gd {
222 
+		color:$base1 !important;
223 
+		background-color:mix($solar-red,$base03,25%) !important;
224 
+		display: inline-block;
225 
+	}
226 
+	/* Generic.Deleted */
227 
+	.gd .x {
228 
+		color:$base1 !important;
229 
+		background-color:mix($solar-red,$base03,35%) !important;
230 
+		display: inline-block;
231 
+	}
232 
+	/* Generic.Deleted.Specific */
233 
+	.ge {
234 
+		color:$base1 !important;
235 
+		font-style: italic !important;
236 
+	}
237 
+	/* Generic.Emph */
238 
+	.gh {
239 
+		color: $base01 !important;
240 
+	}
241 
+	/* Generic.Heading */
242 
+	.gi {
243 
+		color:$base1 !important;
244 
+		background-color:mix($solar-green,$base03,20%) !important;
245 
+		display: inline-block;
246 
+	}
247 
+	/* Generic.Inserted */
248 
+	.gi .x {
249 
+		color:$base1 !important;
250 
+		background-color:mix($solar-green,$base03,40%) !important;
251 
+		display: inline-block;
252 
+	}
253 
+	/* Generic.Inserted.Specific */
254 
+	.gs {
255 
+		color:$base1 !important;
256 
+		font-weight: bold !important;
257 
+	}
258 
+	/* Generic.Strong */
259 
+	.gu {
260 
+		color: $solar-violet !important;
261 
+	}
262 
+	/* Generic.Subheading */
263 
+	.kc {
264 
+		color:$solar-green !important;
265 
+		font-weight: bold !important;
266 
+	}
267 
+	/* Keyword.Constant */
268 
+	.kd {
269 
+		color: $solar-blue !important;
270 
+	}
271 
+	/* Keyword.Declaration */
272 
+	.kp {
273 
+		color:$solar-orange !important;
274 
+		font-weight: bold !important;
275 
+	}
276 
+	/* Keyword.Pseudo */
277 
+	.kr {
278 
+		color:$solar-magenta !important;
279 
+		font-weight: bold !important;
280 
+	}
281 
+	/* Keyword.Reserved */
282 
+	.kt {
283 
+		color: $solar-cyan !important;
284 
+	}
285 
+	/* Keyword.Type */
286 
+	.n {
287 
+		color:$solar-blue !important;
288 
+	}
289 
+	.na {
290 
+		color: $solar-blue !important;
291 
+	}
292 
+	/* Name.Attribute */
293 
+	.nb {
294 
+		color: $solar-green !important;
295 
+	}
296 
+	/* Name.Builtin */
297 
+	.nc {
298 
+		color: $solar-magenta !important;
299 
+	}
300 
+	/* Name.Class */
301 
+	.no {
302 
+		color: $solar-yellow !important;
303 
+	}
304 
+	/* Name.Constant */
305 
+	.nl {
306 
+		color:$solar-green !important;
307 
+	}
308 
+	.ne {
309 
+		color:$solar-blue !important;
310 
+		font-weight: bold !important;
311 
+	}
312 
+	/* Name.Exception */
313 
+	.nf {
314 
+		color:$solar-blue !important;
315 
+		font-weight: bold !important;
316 
+	}
317 
+	/* Name.Function */
318 
+	.nn {
319 
+		color: $solar-yellow !important;
320 
+	}
321 
+	/* Name.Namespace */
322 
+	.nt {
323 
+		color:$solar-blue !important;
324 
+		font-weight: bold !important;
325 
+	}
326 
+	/* Name.Tag */
327 
+	.nx {
328 
+		color:$solar-yellow !Important;
329 
+	}
330 
+	.vg {
331 
+		color: $solar-blue !important;
332 
+	}
333 
+	/* Name.Variable.Global */
334 
+	.vi {
335 
+		color: $solar-blue !important;
336 
+	}
337 
+	/* Name.Variable.Instance */
338 
+	.nv {
339 
+		color: $solar-blue !important;
340 
+	}
341 
+	/* Name.Variable */
342 
+	.mf {
343 
+		color: $solar-cyan !important;
344 
+	}
345 
+	/* Literal.Number.Float */
346 
+	.m {
347 
+		color: $solar-cyan !important;
348 
+	}
349 
+	/* Literal.Number */
350 
+	.mh {
351 
+		color: $solar-cyan !important;
352 
+	}
353 
+	/* Literal.Number.Hex */
354 
+	.mi {
355 
+		color: $solar-cyan !important;
356 
+	}
357 
+	/* Literal.Number.Integer */
358 
+	.s {
359 
+		color: $solar-cyan !important;
360 
+	}
361 
+	/* Literal.String */
362 
+	.sd {
363 
+		color: $solar-cyan !important;
364 
+	}
365 
+	/* Literal.String.Doc */
366 
+	.s2 {
367 
+		color: $solar-cyan !important;
368 
+	}
369 
+	/* Literal.String.Double */
370 
+	.se {
371 
+		color: $solar-red !important;
372 
+	}
373 
+	/* Literal.String.Escape */
374 
+	.si {
375 
+		color: $solar-blue !important;
376 
+	}
377 
+	/* Literal.String.Interpol */
378 
+	.sr {
379 
+		color: $solar-cyan !important;
380 
+	}
381 
+	/* Literal.String.Regex */
382 
+	.s1 {
383 
+		color: $solar-cyan !important;
384 
+	}
385 
+	/* Literal.String.Single */
386 
+}
sass/parts/_twitter.scss
History View file @ 45f081a
0 387 
new file mode 100644
... ... 
@@ -0,0 +1,49 @@
0 
+#banner{
1 
+	color: $color-gray02;
2 
+	padding: 30px 0;
3 
+	line-height: 30px;
4 
+	text-align: center;
5 
+	position: relative;
6 
+	display: none;
7 
+	@include border-shadow();
8 
+	&:hover{
9 
+		a{
10 
+			color: $color-main;
11 
+		}
12 
+	}
13 
+	a{
14 
+		color: $color-gray02;
15 
+		@include transition(0.3s);
16 
+		&:hover{
17 
+			text-decoration: underline;
18 
+		}
19 
+	}
20 
+	small{
21 
+		position: absolute;
22 
+		right: 0;
23 
+		bottom: 0;
24 
+	}
25 
+	.loading{
26 
+		background: image-url('loading_pacman.gif') center no-repeat;
27 
+		text-indent: -9999px;
28 
+	}
29 
+	.container{
30 
+		height: 30px;
31 
+		overflow: hidden;
32 
+		position: relative;
33 
+		display: none;
34 
+		.feed{
35 
+			list-style: none;
36 
+			position: absolute;
37 
+			top: 0;
38 
+			width: 100%;
39 
+			li{
40 
+				position: relative;
41 
+				small{
42 
+					position: absolute;
43 
+					right: 0;
44 
+				}
45 
+			}
46 
+		}
47 
+	}
48 
+}
0 49 
\ No newline at end of file
sass/plugins/_fancybox.scss
History View file @ 45f081a
1 50 
new file mode 100644
... ... 
@@ -0,0 +1,228 @@
0 
+/*! fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */
1 
+.fancybox-tmp iframe, .fancybox-tmp object {
2 
+	vertical-align: top;
3 
+	padding: 0;
4 
+	margin: 0;
5 
+}
6 
+
7 
+.fancybox-wrap {
8 
+	position: absolute;
9 
+	top: 0;
10 
+	left: 0;
11 
+	z-index: 8020;
12 
+}
13 
+
14 
+.fancybox-skin {
15 
+	position: relative;
16 
+	padding: 0;
17 
+	margin: 0;
18 
+	background: #f9f9f9;
19 
+	color: #444;
20 
+	text-shadow: none;
21 
+	@include border-radius(4px);
22 
+}
23 
+
24 
+.fancybox-opened {
25 
+	z-index: 8030;
26 
+}
27 
+
28 
+.fancybox-opened .fancybox-skin {
29 
+	@include box-shadow(0 10px 25px rgba(0, 0, 0, 0.5));
30 
+}
31 
+
32 
+.fancybox-outer, .fancybox-inner {
33 
+	padding: 0;
34 
+	margin: 0;
35 
+	position: relative;
36 
+	outline: none;
37 
+}
38 
+
39 
+.fancybox-inner {
40 
+	overflow: hidden;
41 
+}
42 
+
43 
+.fancybox-type-iframe .fancybox-inner {
44 
+	-webkit-overflow-scrolling: touch;
45 
+}
46 
+
47 
+.fancybox-error {
48 
+	color: #444;
49 
+	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
50 
+	margin: 0;
51 
+	padding: 10px;
52 
+}
53 
+
54 
+.fancybox-image, .fancybox-iframe {
55 
+	display: block;
56 
+	width: 100%;
57 
+	height: 100%;
58 
+	border: 0;
59 
+	padding: 0;
60 
+	margin: 0;
61 
+	vertical-align: top;
62 
+}
63 
+
64 
+.fancybox-image {
65 
+	max-width: 100%;
66 
+	max-height: 100%;
67 
+}
68 
+
69 
+#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
70 
+	background-image: image-url('fancybox/fancybox_sprite.png');
71 
+}
72 
+
73 
+#fancybox-loading {
74 
+	position: fixed;
75 
+	top: 50%;
76 
+	left: 50%;
77 
+	margin-top: -22px;
78 
+	margin-left: -22px;
79 
+	background-position: 0 -108px;
80 
+	opacity: 0.8;
81 
+	cursor: pointer;
82 
+	z-index: 8020;
83 
+}
84 
+
85 
+#fancybox-loading div {
86 
+	width: 44px;
87 
+	height: 44px;
88 
+	background: image-url('fancybox/fancybox_loading.gif') center center no-repeat;
89 
+}
90 
+
91 
+.fancybox-close {
92 
+	position: absolute;
93 
+	top: -18px;
94 
+	right: -18px;
95 
+	width: 36px;
96 
+	height: 36px;
97 
+	cursor: pointer;
98 
+	z-index: 8040;
99 
+}
100 
+
101 
+.fancybox-nav {
102 
+	position: absolute;
103 
+	top: 0;
104 
+	width: 40%;
105 
+	height: 100%;
106 
+	cursor: pointer;
107 
+	background: transparent image-url('fancybox/blank.gif'); /* helps IE */
108 
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
109 
+	z-index: 8040;
110 
+}
111 
+
112 
+.fancybox-prev {
113 
+	left: 0;
114 
+}
115 
+
116 
+.fancybox-next {
117 
+	right: 0;
118 
+}
119 
+
120 
+.fancybox-nav span {
121 
+	position: absolute;
122 
+	top: 50%;
123 
+	width: 36px;
124 
+	height: 34px;
125 
+	margin-top: -18px;
126 
+	cursor: pointer;
127 
+	z-index: 8040;
128 
+	visibility: hidden;
129 
+}
130 
+
131 
+.fancybox-prev span {
132 
+	left: 20px;
133 
+	background-position: 0 -36px;
134 
+}
135 
+
136 
+.fancybox-next span {
137 
+	right: 20px;
138 
+	background-position: 0 -72px;
139 
+}
140 
+
141 
+.fancybox-nav:hover span {
142 
+	visibility: visible;
143 
+}
144 
+
145 
+.fancybox-tmp {
146 
+	position: absolute;
147 
+	top: -9999px;
148 
+	left: -9999px;
149 
+	padding: 0;
150 
+	overflow: visible;
151 
+	visibility: hidden;
152 
+}
153 
+
154 
+/* Overlay helper */
155 
+
156 
+#fancybox-overlay {
157 
+	position: absolute;
158 
+	top: 0;
159 
+	left: 0;
160 
+	overflow: hidden;
161 
+	display: none;
162 
+	z-index: 8010;
163 
+	background: #000;
164 
+}
165 
+
166 
+#fancybox-overlay.overlay-fixed {
167 
+	position: fixed;
168 
+	bottom: 0;
169 
+	right: 0;
170 
+}
171 
+
172 
+/* Title helper */
173 
+
174 
+.fancybox-title {
175 
+	visibility: hidden;
176 
+	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
177 
+	position: relative;
178 
+	text-shadow: none;
179 
+	z-index: 8050;
180 
+}
181 
+
182 
+.fancybox-opened .fancybox-title {
183 
+	visibility: visible;
184 
+}
185 
+
186 
+.fancybox-title-float-wrap {
187 
+	position: absolute;
188 
+	bottom: 0;
189 
+	right: 50%;
190 
+	margin-bottom: -35px;
191 
+	z-index: 8030;
192 
+	text-align: center;
193 
+}
194 
+
195 
+.fancybox-title-float-wrap .child {
196 
+	display: inline-block;
197 
+	margin-right: -100%;
198 
+	padding: 2px 20px;
199 
+	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
200 
+	background: rgba(0, 0, 0, 0.8);
201 
+	text-shadow: 0 1px 2px #222;
202 
+	color: #FFF;
203 
+	font-weight: bold;
204 
+	line-height: 24px;
205 
+	white-space: nowrap;
206 
+	@include border-radius(15px);
207 
+}
208 
+
209 
+.fancybox-title-outside-wrap {
210 
+	position: relative;
211 
+	margin-top: 10px;
212 
+	color: #fff;
213 
+}
214 
+
215 
+.fancybox-title-inside-wrap {
216 
+	margin-top: 10px;
217 
+}
218 
+
219 
+.fancybox-title-over-wrap {
220 
+	position: absolute;
221 
+	bottom: 0;
222 
+	left: 0;
223 
+	color: #fff;
224 
+	padding: 10px;
225 
+	background: #000;
226 
+	background: rgba(0, 0, 0, .8);
227 
+}
0 228 
\ No newline at end of file