├── .gitignore
├── LICENSE
├── README.md
├── gulpfile.js
├── package.json
├── src
    ├── js
    │   ├── nav.js
    │   └── starfield.js
    └── scss
    │   ├── base
    │       ├── _helpers.scss
    │       ├── _mixins.scss
    │       ├── _normalize.scss
    │       ├── _reset.scss
    │       ├── _typography.scss
    │       └── _variables.scss
    │   ├── layout
    │       └── _grid.scss
    │   ├── main.scss
    │   └── modules
    │       ├── _comments.scss
    │       ├── _footer.scss
    │       ├── _header.scss
    │       ├── _nav.scss
    │       ├── _notes.scss
    │       ├── _pagination.scss
    │       └── _posts.scss
└── theme
    ├── css
        └── main.css
    ├── js
        ├── nav.js
        └── starfield.js
    └── theme.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Edmundo Santos
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Dark Side, a Vader-inspired Tumblr theme
 2 | 
 3 | Inspired by the Star Wars universe and the most badass Sith Lord ever, Dark Side is all about Lord Darth Vader and the dark side of the Force.
 4 | 
 5 | - [Install the theme →](https://www.tumblr.com/theme/40329)
 6 | - [Check out the demo →](https://darkside-theme.tumblr.com/)
 7 | 
 8 | ## Theme features
 9 | 
10 | - Responsive;
11 | - Social media links;
12 | - Disqus commenting system;
13 | - Share widget;
14 | - Customisable;
15 | - Open source;
16 | - Support: if you have any suggestions or found some nasty Jedi-bugs, [open a issue](https://github.com/edmundojr/tumblr-darkhorse/issues/new) and I’ll have a look into it.
17 | 
18 | ## Thank you
19 | 
20 | Dark Side was designed and coded by [Edmundo Santos](http://edmundojr.com).
21 | 
22 | Here’s some well deserved thanks for some folks around the web:
23 | 
24 | - The awesome star field background was heavily based on this [Pen](http://codepen.io/neilzo/pen/ZGVWzp) by [Neil Daftary](http://twitter.com/neilzo).
25 | - The [SVG icons](https://github.com/Keyamoon/IcoMoon-Free) were made by the talented [Keyamoon](https://twitter.com/keyamoon).
26 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | // *************************************
 2 | //  Gulpfile
 3 | // *************************************
 4 | 
 5 | 'use strict';
 6 | 
 7 | var gulp         = require('gulp');
 8 | var sass         = require('gulp-sass');
 9 | var autoprefixer = require('gulp-autoprefixer');
10 | var uglify       = require('gulp-uglify');
11 | var browserSync  = require('browser-sync');
12 | 
13 | // -------------------------------------
14 | //  Options
15 | // -------------------------------------
16 | 
17 | var options = {
18 | 
19 | 	html: {
20 | 		files       : '*.html'
21 | 	},
22 | 
23 | 	sass: {
24 | 		files	    : 'src/scss/**/*.scss',
25 | 		destination : 'theme/css'
26 | 	},
27 | 
28 | 	scripts: {
29 | 		files       : 'src/js/**/*.js',
30 | 		destination : 'theme/js'
31 | 	}
32 | };
33 | 
34 | // -------------------------------------
35 | //  Task: Serve
36 | // -------------------------------------
37 | 
38 | gulp.task('serve', ['styles', 'scripts'], function() {
39 | 	browserSync.init({
40 | 		server: './'
41 | 	});
42 | 
43 | 	gulp.watch(options.sass.files, ['styles']);
44 | 	gulp.watch(options.scripts.files, ['scripts']).on('change', browserSync.reload);
45 | 	gulp.watch(options.html.files).on('change', browserSync.reload);
46 | });
47 | 
48 | // -------------------------------------
49 | //  Task: Sass
50 | // -------------------------------------
51 | 
52 | gulp.task('styles', function() {
53 | 	return gulp.src(options.sass.files)
54 | 		.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
55 | 		.pipe(autoprefixer('last 3 versions'))
56 | 		.pipe(gulp.dest(options.sass.destination))
57 | 		.pipe(browserSync.stream());
58 | });
59 | 
60 | // -------------------------------------
61 | //  Task: Scrits
62 | // -------------------------------------
63 | 
64 | gulp.task('scripts', function() {
65 | 	return gulp.src(options.scripts.files)
66 | 		.pipe(uglify())
67 | 		.pipe(gulp.dest(options.scripts.destination))
68 | 		.pipe(browserSync.stream());
69 | });
70 | 
71 | // -------------------------------------
72 | //  Task: Default
73 | // -------------------------------------
74 | 
75 | gulp.task('default', ['serve']);
76 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bones",
 3 |   "version": "0.1.0",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "git+https://github.com/edmundojr/bones.git"
 7 |   },
 8 |   "author": "Edmundo Santos",
 9 |   "license": "MIT",
10 |   "bugs": {
11 |     "url": "https://github.com/edmundojr/bones/issues"
12 |   },
13 |   "homepage": "https://github.com/edmundojr/bones#readme",
14 |   "devDependencies": {
15 |     "browser-sync": "^2.9.11",
16 |     "gulp": "^3.9.0",
17 |     "gulp-autoprefixer": "^3.0.2",
18 |     "gulp-sass": "^2.0.4",
19 |     "gulp-uglify": "^1.5.1"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/js/nav.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 | 
 3 | 	// Variables
 4 | 	var nav       = document.querySelector('.nav');
 5 | 	var navToggle = document.querySelector('.nav__item--toggle');
 6 | 	var navOpen   = 'nav--open';
 7 | 
 8 | 	// Toggle Menu
 9 | 	function toggleMenu() {
10 | 		if (nav.classList.contains(navOpen)) {
11 | 			nav.classList.remove(navOpen);
12 | 		} else {
13 | 			nav.classList.add(navOpen);
14 | 		}
15 | 	}
16 | 
17 | 	// Run toggleMenu() after click event
18 | 	navToggle.addEventListener('click', function(e) {
19 | 		e.preventDefault();
20 | 		toggleMenu();
21 | 	});
22 | 
23 | })();


--------------------------------------------------------------------------------
/src/js/starfield.js:
--------------------------------------------------------------------------------
 1 | // StarField by Neil Daftary
 2 | // http://codepen.io/neilzo/pen/ZGVWzp
 3 | 
 4 | var camera, scene, renderer;
 5 | var mouseX = 0;
 6 | var mouseY = 0;
 7 | var stars = [];
 8 | 
 9 | camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 4000);
10 | 
11 | camera.position.z = 1000;
12 | 
13 | scene = new THREE.Scene();
14 | scene.add(camera);
15 | 
16 | renderer = new THREE.WebGLRenderer({ alpha: true });
17 | renderer.setSize(window.innerWidth, window.innerHeight);
18 | renderer.setClearColor(0x04090d, 0);
19 | 
20 | document.body.appendChild(renderer.domElement);
21 | 
22 | function randomRange(min, max) {
23 | 	return Math.random()*(max-min) + min;
24 | }
25 | 
26 | var throttle = function(type, name, obj) {
27 |   var obj = obj || window;
28 |   var running = false;
29 |   var func = function() {
30 |     if (running) { return; }
31 |     running = true;
32 |     requestAnimationFrame(function() {
33 |       obj.dispatchEvent(new CustomEvent(name));
34 |       running = false;
35 |     });
36 |   };
37 |   obj.addEventListener(type, func);
38 | };
39 | throttle("resize", "optimizedResize");
40 | 
41 | //TODO fix the pause in animation on resize
42 | window.addEventListener('optimizedResize', function(e){
43 |   camera.aspect = window.innerWidth / window.innerHeight;
44 |   camera.updateProjectionMatrix();
45 |   renderer.setSize(window.innerWidth, window.innerHeight);
46 | });
47 | 
48 | function makeParticles() {
49 |   var segments = 16;
50 |   var rings = 16;
51 |   var radius = 4;
52 |   var material = new THREE.MeshBasicMaterial({color: 0xffffff});
53 |   var geometry = new THREE.SphereGeometry(radius, segments, rings);
54 | 
55 |   for (var zpos = -3000; zpos < 3000; zpos += 20) {
56 |     var star = new THREE.Mesh(geometry, material);
57 |     star.position.x = randomRange(-3000, 3000);
58 |     star.position.y = randomRange(-3000, 3000);
59 |     star.position.z = zpos;
60 |     star.scale.x = star.scale.y = randomRange(0, 2);
61 |     scene.add(star);
62 |     stars.push(star);
63 |   }
64 | }
65 | makeParticles();
66 | 
67 | function render() {
68 |   requestAnimationFrame(render);
69 |   for (var i = 0; i < stars.length; i++) {
70 |     var star = stars[i];
71 |     star.position.z += 1.25; // speed
72 |     if (star.position.z > 1000) {
73 |       star.position.z -= 4000;
74 |     }
75 |   }
76 |   renderer.render(scene, camera);
77 | }
78 | render();


--------------------------------------------------------------------------------
/src/scss/base/_helpers.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Base: Helper Classes
 3 | // ----------------------------------------------------------------------------
 4 | 
 5 | 
 6 | // Clearfix
 7 | // ----------------------------------------------
 8 | 
 9 | .clearfix:before,
10 | .clearfix:after {
11 | 	content: "";
12 | 	display: table;
13 | }
14 | 
15 | .clearfix:after {
16 | 	clear: both;
17 | }
18 | 
19 | 
20 | // Image replacement
21 | // ----------------------------------------------
22 | 
23 | .ir {
24 | 	font: 0/0 a;
25 | 	text-shadow: none;
26 | 	color: transparent;
27 | }
28 | 
29 | 
30 | // Hide elements
31 | // ----------------------------------------------
32 | 
33 | .hidden {
34 | 	display: none;
35 | 	visibility: hidden;
36 | }
37 | 
38 | 
39 | // Responsive video
40 | // ----------------------------------------------
41 | 
42 | .video-container {
43 | 	position: relative;
44 | 	padding-bottom: 56.25%;
45 | 	height: 0;
46 | 	margin: -1px;
47 | 	background: black;
48 | 
49 | 	iframe,
50 | 	object {
51 | 		position: absolute;
52 | 		top: 0;
53 | 		left: 0;
54 | 		width: 100%;
55 | 		height: 100%;
56 | 	}
57 | }
58 | 
59 | 
60 | // Responsive audio
61 | // ----------------------------------------------
62 | 
63 | .audio-container {
64 | 	position: relative;
65 | 	margin: -1px;
66 | 	background: rgba(255,255,255,.9);
67 | 
68 | 	iframe,
69 | 	object {
70 | 		display: block;
71 | 		width: 100%;
72 | 		height: auto;
73 | 		margin: 0 auto;
74 | 	}
75 | 
76 | 	.spotify_audio_player {
77 | 		max-height: 80px;
78 | 	}
79 | }
80 | 


--------------------------------------------------------------------------------
/src/scss/base/_mixins.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Base: Mixins
 3 | // ----------------------------------------------------------------------------
 4 | 
 5 | 
 6 | // Breakpoints
 7 | // ----------------------------------------------
 8 | 
 9 | // example @include breakpoint(940) { width:80%; }
10 | 
11 | @mixin breakpoint($size) {
12 | 	@media (max-width: $size + px) { @content; }
13 | }
14 | 
15 | // example @include min-breakpoint(940) { width:80%; }
16 | 
17 | @mixin min-breakpoint($size) {
18 | 	@media only screen and (min-width: $size + px) { @content; }
19 | }
20 | 
21 | 
22 | // Clearfix
23 | // ----------------------------------------------
24 | 
25 | @mixin clearfix() {
26 | 	&:before,
27 | 	&:after {
28 | 		content: "";
29 | 		display: table;
30 | 	}
31 | 
32 | 	&:after {
33 | 		clear: both;
34 | 	}
35 | }
36 | 
37 | 
38 | // Retina Images
39 | // ----------------------------------------------
40 | 
41 | // example: @include retina("logo2x.png", 100, 50);
42 | 
43 | @mixin retina($image, $width, $height) {
44 | 	@media (min--moz-device-pixel-ratio: 1.3),
45 | 			(-o-min-device-pixel-ratio: 2.6/2),
46 | 			(-webkit-min-device-pixel-ratio: 1.3),
47 | 			(min-device-pixel-ratio: 1.3),
48 | 			(min-resolution: 1.3dppx) {
49 | 		background-image: url("#{$image}");
50 | 		background-size: $width + px $height + px;
51 | 		background-size: $width / 16 + rem $height / 16 + rem;
52 | 	}
53 | }
54 | 


--------------------------------------------------------------------------------
/src/scss/base/_normalize.scss:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   -moz-box-sizing: content-box;
213 |   box-sizing: content-box;
214 |   height: 0;
215 | }
216 | 
217 | /**
218 |  * Contain overflow in all browsers.
219 |  */
220 | 
221 | pre {
222 |   overflow: auto;
223 | }
224 | 
225 | /**
226 |  * Address odd `em`-unit font size rendering in all browsers.
227 |  */
228 | 
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 |   font-family: monospace, monospace;
234 |   font-size: 1em;
235 | }
236 | 
237 | /* Forms
238 |    ========================================================================== */
239 | 
240 | /**
241 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 |  * styling of `select`, unless a `border` property is set.
243 |  */
244 | 
245 | /**
246 |  * 1. Correct color not being inherited.
247 |  *    Known issue: affects color of disabled elements.
248 |  * 2. Correct font properties not being inherited.
249 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 |  */
251 | 
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 |   color: inherit; /* 1 */
258 |   font: inherit; /* 2 */
259 |   margin: 0; /* 3 */
260 | }
261 | 
262 | /**
263 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 |  */
265 | 
266 | button {
267 |   overflow: visible;
268 | }
269 | 
270 | /**
271 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 |  * All other form control elements do not inherit `text-transform` values.
273 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 |  * Correct `select` style inheritance in Firefox.
275 |  */
276 | 
277 | button,
278 | select {
279 |   text-transform: none;
280 | }
281 | 
282 | /**
283 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 |  *    and `video` controls.
285 |  * 2. Correct inability to style clickable `input` types in iOS.
286 |  * 3. Improve usability and consistency of cursor style between image-type
287 |  *    `input` and others.
288 |  */
289 | 
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 |   -webkit-appearance: button; /* 2 */
295 |   cursor: pointer; /* 3 */
296 | }
297 | 
298 | /**
299 |  * Re-set default cursor for disabled elements.
300 |  */
301 | 
302 | button[disabled],
303 | html input[disabled] {
304 |   cursor: default;
305 | }
306 | 
307 | /**
308 |  * Remove inner padding and border in Firefox 4+.
309 |  */
310 | 
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 |   border: 0;
314 |   padding: 0;
315 | }
316 | 
317 | /**
318 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 |  * the UA stylesheet.
320 |  */
321 | 
322 | input {
323 |   line-height: normal;
324 | }
325 | 
326 | /**
327 |  * It's recommended that you don't attempt to style these elements.
328 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 |  *
330 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 |  * 2. Remove excess padding in IE 8/9/10.
332 |  */
333 | 
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 |   box-sizing: border-box; /* 1 */
337 |   padding: 0; /* 2 */
338 | }
339 | 
340 | /**
341 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 |  * `font-size` values of the `input`, it causes the cursor style of the
343 |  * decrement button to change from `default` to `text`.
344 |  */
345 | 
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 |   height: auto;
349 | }
350 | 
351 | /**
352 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 |  *    (include `-moz` to future-proof).
355 |  */
356 | 
357 | input[type="search"] {
358 |   -webkit-appearance: textfield; /* 1 */
359 |   -moz-box-sizing: content-box;
360 |   -webkit-box-sizing: content-box; /* 2 */
361 |   box-sizing: content-box;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 |  * Safari (but not Chrome) clips the cancel button when the search input has
367 |  * padding (and `textfield` appearance).
368 |  */
369 | 
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 |   -webkit-appearance: none;
373 | }
374 | 
375 | /**
376 |  * Define consistent border, margin, and padding.
377 |  */
378 | 
379 | fieldset {
380 |   border: 1px solid #c0c0c0;
381 |   margin: 0 2px;
382 |   padding: 0.35em 0.625em 0.75em;
383 | }
384 | 
385 | /**
386 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 |  */
389 | 
390 | legend {
391 |   border: 0; /* 1 */
392 |   padding: 0; /* 2 */
393 | }
394 | 
395 | /**
396 |  * Remove default vertical scrollbar in IE 8/9/10/11.
397 |  */
398 | 
399 | textarea {
400 |   overflow: auto;
401 | }
402 | 
403 | /**
404 |  * Don't inherit the `font-weight` (applied by a rule above).
405 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 |  */
407 | 
408 | optgroup {
409 |   font-weight: bold;
410 | }
411 | 
412 | /* Tables
413 |    ========================================================================== */
414 | 
415 | /**
416 |  * Remove most spacing between table cells.
417 |  */
418 | 
419 | table {
420 |   border-collapse: collapse;
421 |   border-spacing: 0;
422 | }
423 | 
424 | td,
425 | th {
426 |   padding: 0;
427 | }
428 | 


--------------------------------------------------------------------------------
/src/scss/base/_reset.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Base: Defaults
 3 | // ----------------------------------------------------------------------------
 4 | 
 5 | html {
 6 | 	box-sizing: border-box;
 7 | }
 8 | 
 9 | *,
10 | *:before,
11 | *:after {
12 | 	box-sizing: inherit;
13 | }
14 | 
15 | // Remove the gap between the follow elements
16 | // and the bottom of their containers
17 | 
18 | audio,
19 | canvas,
20 | iframe,
21 | img,
22 | svg,
23 | video {
24 | 	vertical-align: middle;
25 | }
26 | 
27 | // Responsive images
28 | 
29 | img {
30 | 	max-width: 100%;
31 | 	height: auto;
32 | }
33 | 
34 | // Remove iOS default styles from form elements
35 | 
36 | input[type="text"],
37 | input[type="search"],
38 | input[type="button"],
39 | input[type="submit"],
40 | textarea {
41 | 	-webkit-appearance: none;
42 | 	border-radius: 0;
43 | }
44 | 
45 | // Allow only vertical resizing of textareas
46 | 
47 | textarea {
48 | 	resize: vertical;
49 | }
50 | 
51 | // Remove default margins from figure
52 | 
53 | figure {
54 | 	margin: 0;
55 | }
56 | 


--------------------------------------------------------------------------------
/src/scss/base/_typography.scss:
--------------------------------------------------------------------------------
  1 | //
  2 | // Base: Typography
  3 | // ----------------------------------------------------------------------------
  4 | 
  5 | body {
  6 | 	font: 1.25em/1.5 $font-text;
  7 | 	-webkit-font-smoothing: antialiased;
  8 | 	-moz-osx-font-smoothing: grayscale;
  9 | 	color: $text-color;
 10 | 	background: $background;
 11 | 
 12 | 	@include breakpoint(800) {
 13 | 		font-size: 1.125em;
 14 | 	}
 15 | }
 16 | 
 17 | // A better looking default horizontal rule
 18 | 
 19 | hr {
 20 | 	display: block;
 21 | 	height: 1px;
 22 | 	padding: 0;
 23 | 	margin: 1em 0;
 24 | 	border: 0;
 25 | 	border-top: 1px solid rgba(255,255,255,.5);
 26 | }
 27 | 
 28 | // Selection color
 29 | 
 30 | ::selection {
 31 | 	text-shadow: none;
 32 | 	opacity: .5;
 33 | 	background: currentColor;
 34 | }
 35 | 
 36 | 
 37 | // Headlines
 38 | // ----------------------------------------------
 39 | 
 40 | h1, h2, h3, h4 {
 41 | 	font-family: $font-display;
 42 | 	font-weight: bold;
 43 | }
 44 | 
 45 | h1 {
 46 | 	font-size: 1.5em;
 47 | 	margin-top: 1em;
 48 | 	margin-bottom: 1em;
 49 | }
 50 | 
 51 | h2 {
 52 | 	font-size: 1.3em;
 53 | }
 54 | 
 55 | h3 {
 56 | 	font-size: 1.2em;
 57 | }
 58 | 
 59 | h4 {
 60 | 	font-size: 1.1em;
 61 | }
 62 | 
 63 | 
 64 | // Links and icons inside links
 65 | // ----------------------------------------------
 66 | 
 67 | a {
 68 | 	text-decoration: none;
 69 | 	color: inherit;
 70 | 
 71 | 	svg {
 72 | 		fill: currentColor;
 73 | 	}
 74 | 
 75 | 	&:hover,
 76 | 	&:focus {
 77 | 		color: $accent-color;
 78 | 
 79 | 		svg {
 80 | 			fill: $accent-color;
 81 | 		}
 82 | 	}
 83 | }
 84 | 
 85 | 
 86 | // Chat / Question & Answer
 87 | // ----------------------------------------------
 88 | 
 89 | .chat {
 90 | 	padding: ($gutter/2.5) 0 ($gutter/1.5);
 91 | 	margin: 1em 0;
 92 | 	list-style: none;
 93 | 
 94 | 	li {
 95 | 		padding: 1em $gutter;
 96 | 		border-top: 1px solid rgba(255,255,255,.03);
 97 | 
 98 | 		&:first-child {
 99 | 			border-top: none;
100 | 		}
101 | 	}
102 | 
103 | 	// Links
104 | 
105 | 	a {
106 | 		border-bottom: 1px solid rgba(255,255,255,.1);
107 | 		transition: color $duration, border $duration;
108 | 
109 | 		&:hover,
110 | 		&:focus {
111 | 			border-color: rgba(255,255,255,.4);
112 | 		}
113 | 	}
114 | 
115 | 	// Label
116 | 
117 | 	&__label {
118 | 		display: block;
119 | 		font-weight: bold;
120 | 		color: $accent-color;
121 | 	}
122 | 
123 | 	// Answer
124 | 
125 | 	&--answer {
126 | 		padding: 0 0 ($gutter/1.5);
127 | 		margin: 0;
128 | 
129 | 		li {
130 | 			padding-left: $gutter;
131 | 			padding-right: $gutter;
132 | 			border-top: none;
133 | 
134 | 			&:first-child {
135 | 				padding-top: 2em;
136 | 				padding-bottom: 2em;
137 | 			}
138 | 		}
139 | 	}
140 | 
141 | 	// Question
142 | 
143 | 	&__question {
144 | 		position: relative;
145 | 		margin: 0 -1px;
146 | 		background: rgba(255,255,255,.1);
147 | 
148 | 		// Question arrow
149 | 
150 | 		&::before {
151 | 			position: absolute;
152 | 			bottom: 100%;
153 | 			left: 1px;
154 | 			border-left: 15px solid rgba(255,255,255,0.125);
155 | 			border-right: 15px solid transparent;
156 | 			border-top: 15px solid transparent;
157 | 			box-shadow: -1px 0 0 rgba(255,255,255,0.15);
158 | 			content: "";
159 | 		}
160 | 	}
161 | 
162 | }
163 | 
164 | 
165 | // Quotes
166 | // ----------------------------------------------
167 | 
168 | .quote {
169 | 	margin-left: 0;
170 | 	font-size: 1.3em;
171 | 	font-style: italic;
172 | 
173 | 	cite {
174 | 		display: block;
175 | 		margin-top: 1em;
176 | 		font-size: .7em;
177 | 		font-style: normal;
178 | 	}
179 | }
180 | 
181 | 
182 | // Photos
183 | // ----------------------------------------------
184 | 
185 | .photo {
186 | 	margin: -1px -1px 0;
187 | 
188 | 	img {
189 | 		width: 100%;
190 | 	}
191 | }
192 | 
193 | 
194 | // Main header for search, day and tag pages
195 | // ----------------------------------------------
196 | 
197 | .main__header {
198 | 	position: relative;
199 | 	padding: 0 $gutter $gutter;
200 | 	font-size: .9em;
201 | 	font-style: italic;
202 | 	text-align: center;
203 | 	opacity: 1;
204 | 
205 | 	// Color tag, search query, and date
206 | 
207 | 	.search_query,
208 | 	.tag,
209 | 	.date {
210 | 		color: $accent-color;
211 | 	}
212 | }
213 | 


--------------------------------------------------------------------------------
/src/scss/base/_variables.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Base: Variables
 3 | // ----------------------------------------------------------------------------
 4 | 
 5 | 
 6 | // Container and Gutter
 7 | // ----------------------------------------------
 8 | 
 9 | $gutter: 6.25%;
10 | $maxWidth: 700px;
11 | 
12 | // Colors
13 | // ----------------------------------------------
14 | 
15 | $cod-gray: #04090d;
16 | $iron: #cccdce;
17 | $turbo: #fbe800;
18 | 
19 | $background: $cod-gray;
20 | $text-color: $iron;
21 | $accent-color: $turbo;
22 | 
23 | 
24 | // Fonts
25 | // ----------------------------------------------
26 | 
27 | $font-display: "Fira Sans", sans-serif;
28 | $font-text: "Fira Sans", sans-serif;
29 | 
30 | 
31 | // Transitions
32 | // ----------------------------------------------
33 | 
34 | $duration: .3s;
35 | $easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
36 | 


--------------------------------------------------------------------------------
/src/scss/layout/_grid.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Layout: Container
 3 | // ----------------------------------------------------------------------------
 4 | // Can't get any simpler than that
 5 | 
 6 | .container {
 7 | 	@include clearfix();
 8 | 	position: relative;
 9 | 	width: 90%;
10 | 	max-width: $maxWidth;
11 | 	margin: 0 auto;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/scss/main.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Bones
 3 | // ----------------------------------------------------------------------------
 4 | 
 5 | 
 6 | // Base
 7 | // ----------------------------------------------
 8 | 
 9 | @import "base/variables";
10 | @import "base/mixins";
11 | @import "base/normalize";
12 | @import "base/reset";
13 | @import "base/helpers";
14 | @import "base/typography";
15 | 
16 | 
17 | // Layout
18 | // ----------------------------------------------
19 | 
20 | @import "layout/grid";
21 | 
22 | 
23 | // Modules
24 | // ----------------------------------------------
25 | 
26 | @import "modules/header";
27 | @import "modules/nav";
28 | @import "modules/footer";
29 | @import "modules/posts";
30 | @import "modules/pagination";
31 | @import "modules/comments";
32 | @import "modules/notes";
33 | 


--------------------------------------------------------------------------------
/src/scss/modules/_comments.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Modules: comments
 3 | // ----------------------------------------------------------------------------
 4 | 
 5 | .comments {
 6 | 	padding: $gutter;
 7 | 	margin-top: 10%;
 8 | 	background: rgba(255,255,255,.02);
 9 | 	border: 1px solid rgba(255,255,255,.02);
10 | 	border-top: none;
11 | 	box-shadow: 0 50px 80px 0 rgba(0,0,0,.1);
12 | }
13 | 


--------------------------------------------------------------------------------
/src/scss/modules/_footer.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Module: Footer
 3 | // ----------------------------------------------------------------------------
 4 | 
 5 | .footer {
 6 | 	opacity: .75;
 7 | 	margin-top: 10%;
 8 | 	margin-bottom: 10%;
 9 | 	font-size: .7em;
10 | 	text-align: center;
11 | 	transition: opacity $duration;
12 | 
13 | 	&:hover {
14 | 		opacity: 1;
15 | 	}
16 | 
17 | 	a {
18 | 		display: inline-block;
19 | 		font-weight: bold;
20 | 		opacity: .75;
21 | 		transition: opacity $duration, color $duration;
22 | 
23 | 		&:hover,
24 | 		&:focus {
25 | 			opacity: 1;
26 | 		}
27 | 	}
28 | }
29 | 


--------------------------------------------------------------------------------
/src/scss/modules/_header.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Module: Header
 3 | // ----------------------------------------------------------------------------
 4 | 
 5 | .header {
 6 | 	padding: ($gutter/2.5) $gutter ($gutter/1.5);
 7 | 	margin-top: 3.5%;
 8 | 	margin-bottom: 3.5%;
 9 | 	font-style: italic;
10 | 	text-align: center;
11 | 
12 | 	&__title {
13 | 		font-size: 1.6em;
14 | 		color: $accent-color;
15 | 	}
16 | 
17 | 	&__description {
18 | 		font-size: 0.9em;
19 | 		line-height: 1.5em;
20 | 	}
21 | 
22 | 	&__avatar img {
23 | 		background: rgba(255,255,255,.03);
24 | 		border: 3px solid rgba(255,255,255,.03);
25 | 		border-radius: 50%;
26 | 		box-shadow: 0 50px 80px 0 rgba(0,0,0,.2);
27 | 	}
28 | }
29 | 
30 | 
31 | // Social links
32 | // ----------------------------------------------
33 | 
34 | .social-links {
35 | 	padding: 0;
36 | 	list-style: none;
37 | 
38 | 	li {
39 | 		display: inline-block;
40 | 		margin: .25em;
41 | 	}
42 | 
43 | 	a {
44 | 		display: block;
45 | 		width: 30px;
46 | 		height: 30px;
47 | 		transition: transform $duration;
48 | 
49 | 		&:hover,
50 | 		&:focus {
51 | 			transform: scale(1.2);
52 | 		}
53 | 	}
54 | 
55 | 	svg {
56 | 		max-width: 20px;
57 | 		transition: color $duration;
58 | 	}
59 | }
60 | 
61 | // Star Field
62 | // ----------------------------------------------
63 | 
64 | body > canvas {
65 | 	position: fixed;
66 | 	top: 0;
67 | 	left: 0;
68 | 	right: 0;
69 | 	bottom: 0;
70 | 	z-index: -1;
71 | 	opacity: .6;
72 | 	pointer-events: none;
73 | }
74 | 


--------------------------------------------------------------------------------
/src/scss/modules/_nav.scss:
--------------------------------------------------------------------------------
  1 | //
  2 | // Module: navigation
  3 | // ----------------------------------------------------------------------------
  4 | 
  5 | .nav {
  6 | 	position: fixed;
  7 | 	top: 0;
  8 | 	left: 0;
  9 | 	z-index: 10;
 10 | 	padding: 2em 2em 0;
 11 | 	font-size: .8em;
 12 | 	font-style: normal;
 13 | 	font-weight: bold;
 14 | 	letter-spacing: .025em;
 15 | 	line-height: 1.875;
 16 | 	text-align: left;
 17 | 	text-transform: uppercase;
 18 | 
 19 | 	// Items
 20 | 
 21 | 	&__item {
 22 | 		position: relative;
 23 | 		display: block;
 24 | 		padding: 0 1em 0 2em;
 25 | 		transition: color $duration, opacity $duration, visibility $duration, transform $duration $easeOutBack;
 26 | 		opacity: 0;
 27 | 		visibility: hidden;
 28 | 
 29 | 		// Add delay to each item
 30 | 
 31 | 		@for $i from 1 to 10 {
 32 | 			&:nth-child(#{$i}) {
 33 | 				transform: translateY($i * -10px);
 34 | 				transition-delay: $i * 0.06s;
 35 | 			}
 36 | 		}
 37 | 
 38 | 		// Toggle icon
 39 | 
 40 | 		&--toggle {
 41 | 			visibility: visible;
 42 | 			opacity: 1;
 43 | 			transform: none !important;
 44 | 
 45 | 			// Spaceship icon
 46 | 
 47 | 			&::before {
 48 | 				position: absolute;
 49 | 				top: 50%;
 50 | 				left: 0;
 51 | 				width: 18px;
 52 | 				height: 2px;
 53 | 				margin-top: -2px;
 54 | 				background: currentColor;
 55 | 				box-shadow: 3px 6px 0 currentColor, 3px -6px 0 currentColor;
 56 | 				transition: background $duration, box-shadow $duration, transform $duration;
 57 | 				content: "";
 58 | 			}
 59 | 
 60 | 			&:hover::before,
 61 | 			&:focus::before {
 62 | 				background: currentColor;
 63 | 				box-shadow: 3px 6px 0 currentColor, 3px -6px 0 currentColor;
 64 | 			}
 65 | 		}
 66 | 
 67 | 		// Search
 68 | 
 69 | 		&--search input {
 70 | 			max-width: 120px;
 71 | 			padding: .25em;
 72 | 			margin-left: -.25em;
 73 | 			text-transform: inherit;
 74 | 			background: rgba(255,255,255,.03);
 75 | 			border: none;
 76 | 			border-radius: 3px;
 77 | 			transition: background $duration;
 78 | 
 79 | 			&:hover,
 80 | 			&:focus {
 81 | 				background: rgba(255,255,255,.06);
 82 | 				outline: none;
 83 | 			}
 84 | 		}
 85 | 	}
 86 | 
 87 | 	// Nav open
 88 | 
 89 | 	&--open {
 90 | 		.nav__item {
 91 | 			visibility: visible;
 92 | 			opacity: 1;
 93 | 			transform: none;
 94 | 
 95 | 			&--toggle::before {
 96 | 				background: currentColor;
 97 | 				box-shadow: -4px 7px 0 currentColor, -4px -7px 0 currentColor;
 98 | 				transform: translateX(4px);
 99 | 			}
100 | 		}
101 | 	}
102 | }
103 | 


--------------------------------------------------------------------------------
/src/scss/modules/_notes.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Modules: notes
 3 | // ----------------------------------------------------------------------------
 4 | 
 5 | .notes {
 6 | 	padding: $gutter;
 7 | 	margin: 10% 0 0;
 8 | 	list-style: none;
 9 | 	font-size: 0.8em;
10 | 	background: rgba(255,255,255,.01);
11 | 	border: 1px solid rgba(255,255,255,.01);
12 | 	border-top: none;
13 | 	box-shadow: 0 50px 80px 0 rgba(0,0,0,.1);
14 | 
15 | 	.note + .note {
16 | 		padding-top: 1em;
17 | 	}
18 | 
19 | 	.avatar_frame img {
20 | 		max-width: 32px;
21 | 	}
22 | 
23 | 	.action {
24 | 		padding-left: .75em;
25 | 
26 | 		a {
27 | 			opacity: .5;
28 | 			border-bottom: 1px solid rgba(255,255,255,.1);
29 | 			transition: opacity $duration, color $duration, border $duration;
30 | 
31 | 			&:hover,
32 | 			&:focus {
33 | 				opacity: 1;
34 | 				border-color: rgba(255,255,255,.4);
35 | 			}
36 | 		}
37 | 	}
38 | }
39 | 


--------------------------------------------------------------------------------
/src/scss/modules/_pagination.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Module: pagination
 3 | // ----------------------------------------------------------------------------
 4 | 
 5 | .pagination {
 6 | 	margin-top: 20%;
 7 | 	padding: ($gutter/2.5) $gutter ($gutter/1.5);
 8 | 	font-size: .9em;
 9 | 	font-weight: bold;
10 | 	letter-spacing: .025em;
11 | 	text-align: center;
12 | 	text-transform: uppercase;
13 | 
14 | 	// Link
15 | 
16 | 	&__link {
17 | 		display: inline-block;
18 | 		padding: .5em 1.5em;
19 | 		transition: color $duration;
20 | 
21 | 		&--prev {
22 | 			padding-left: .5em;
23 | 
24 | 			&:hover svg,
25 | 			&:focus svg {
26 | 				transform: translateX(-7px);
27 | 			}
28 | 		}
29 | 
30 | 		&--next {
31 | 			padding-right: .5em;
32 | 
33 | 			&:hover svg,
34 | 			&:focus svg {
35 | 				transform: translateX(7px);
36 | 			}
37 | 		}
38 | 	}
39 | 
40 | 	// Arrow icon
41 | 
42 | 	&__arrow {
43 | 		display: inline-block;
44 | 		margin-top: -5px;
45 | 		transition: transform $duration $easeOutBack;
46 | 	}
47 | }


--------------------------------------------------------------------------------
/src/scss/modules/_posts.scss:
--------------------------------------------------------------------------------
  1 | //
  2 | // Modules: posts
  3 | // ----------------------------------------------------------------------------
  4 | 
  5 | .post {
  6 | 	position: relative;
  7 | 	min-height: 300px;
  8 | 	background: rgba(255,255,255,.03);
  9 | 	border: 1px solid rgba(255,255,255,.03);
 10 | 	box-shadow: 0 50px 80px 0 rgba(0,0,0,.2);
 11 | 
 12 | 	& + & {
 13 | 		margin-top: 20%;
 14 | 	}
 15 | 
 16 | 
 17 | 	// Content
 18 | 	// ----------------------------------------------
 19 | 
 20 | 	&__content {
 21 | 		padding: ($gutter/2.5) $gutter ($gutter/1.5);
 22 | 
 23 | 		// Images
 24 | 
 25 | 		img {
 26 | 			width: calc(100% + #{$gutter*2.32});
 27 | 			max-width: none;
 28 | 			margin: 1em (-$gutter*1.16);
 29 | 		}
 30 | 
 31 | 		// Links
 32 | 
 33 | 		a {
 34 | 			border-bottom: 1px solid rgba(255,255,255,.1);
 35 | 			transition: color $duration, border $duration;
 36 | 
 37 | 			&:hover,
 38 | 			&:focus {
 39 | 				border-color: rgba(255,255,255,.4);
 40 | 			}
 41 | 		}
 42 | 	}
 43 | 
 44 | 
 45 | 	// Post Title
 46 | 	// ----------------------------------------------
 47 | 
 48 | 	&__title {
 49 | 		color: $accent-color;
 50 | 
 51 | 		a {
 52 | 			display: inline-block;
 53 | 			color: inherit;
 54 | 			border: none;
 55 | 			transition: color $duration;
 56 | 
 57 | 			&:hover,
 58 | 			&:focus {
 59 | 				color: white;
 60 | 			}
 61 | 		}
 62 | 
 63 | 		svg {
 64 | 			display: inline-block;
 65 | 			max-width: 24px;
 66 | 			margin: -6px .5em 0 0;
 67 | 		}
 68 | 	}
 69 | 
 70 | 
 71 | 	// Post Meta
 72 | 	// ----------------------------------------------
 73 | 
 74 | 	&__meta {
 75 | 		position: absolute;
 76 | 		font-size: .8em;
 77 | 		font-weight: bold;
 78 | 		transform-origin: top right;
 79 | 
 80 | 		// Links
 81 | 
 82 | 		&__item {
 83 | 			position: relative;
 84 | 			float: left;
 85 | 			padding: .5em 1em;
 86 | 			transition: all $duration;
 87 | 
 88 | 			.like_button,
 89 | 			.reblog_button {
 90 | 				margin-top: 3px;
 91 | 			}
 92 | 
 93 | 			svg {
 94 | 				max-width: 20px;
 95 | 				fill: currentColor;
 96 | 				cursor: pointer;
 97 | 				transition: all $duration;
 98 | 			}
 99 | 
100 | 			&:hover,
101 | 			&:focus {
102 | 
103 | 				.share a {
104 | 					opacity: 1;
105 | 					visibility: visible;
106 | 					transform: none !important;
107 | 				}
108 | 			}
109 | 		}
110 | 
111 | 		// Share
112 | 
113 | 		.share {
114 | 			position: absolute;
115 | 			top: 100%;
116 | 			left: 1.75em;
117 | 			width: 132px;
118 | 			transform: translateX(-50%);
119 | 
120 | 			a {
121 | 				float: left;
122 | 				padding: .5em .75em;
123 | 				opacity: 0;
124 | 				visibility: hidden;
125 | 				transition: transform $duration $easeOutBack, opacity $duration $easeOutBack;
126 | 
127 | 				&:nth-child(1) {
128 | 					transform: translate(100%,-100%);
129 | 					transition-delay: .05s;
130 | 				}
131 | 
132 | 				&:nth-child(2) {
133 | 					transform: translate(0,-100%);
134 | 					transition-delay: .1s;
135 | 				}
136 | 
137 | 				&:nth-child(3) {
138 | 					transform: translate(-100%,-100%);
139 | 					transition-delay: .15s;
140 | 				}
141 | 			}
142 | 		}
143 | 
144 | 		// Post meta aside
145 | 
146 | 		&--aside {
147 | 			@extend .post__meta;
148 | 			top: 2.5em;
149 | 			right: 0;
150 | 			transform: rotate(90deg) translate(100%, -50%);
151 | 		}
152 | 
153 | 		// Post meta footer
154 | 
155 | 		&--footer {
156 | 			@extend .post__meta;
157 | 			left: $gutter;
158 | 			bottom: 0;
159 | 			transform: translate(-1em, 50%);
160 | 
161 | 			.post__meta__item:hover,
162 | 			.post__meta__item:focus {
163 | 				transform: scale(1.2);
164 | 			}
165 | 		}
166 | 	}
167 | 
168 | 	// Post type answer
169 | 
170 | 	&--answer {
171 | 		border-top: none;
172 | 	}
173 | 
174 | 	// Post type link
175 | 
176 | 	&--link {
177 | 		&__excerpt {
178 | 			padding-left: 2.25em;
179 | 			margin: -.5em 0 1.5em;
180 | 			opacity: .75;
181 | 		}
182 | 	}
183 | }
184 | 


--------------------------------------------------------------------------------
/theme/css/main.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}audio,canvas,iframe,img,svg,video{vertical-align:middle}img{max-width:100%;height:auto}input[type="text"],input[type="search"],input[type="button"],input[type="submit"],textarea{-webkit-appearance:none;border-radius:0}textarea{resize:vertical}figure{margin:0}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.ir{font:0/0 a;text-shadow:none;color:transparent}.hidden{display:none;visibility:hidden}.video-container{position:relative;padding-bottom:56.25%;height:0;margin:-1px;background:black}.video-container iframe,.video-container object{position:absolute;top:0;left:0;width:100%;height:100%}.audio-container{position:relative;margin:-1px;background:rgba(255,255,255,0.9)}.audio-container iframe,.audio-container object{display:block;width:100%;height:auto;margin:0 auto}.audio-container .spotify_audio_player{max-height:80px}body{font:1.25em/1.5 "Fira Sans",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#cccdce;background:#04090d}@media (max-width: 800px){body{font-size:1.125em}}hr{display:block;height:1px;padding:0;margin:1em 0;border:0;border-top:1px solid rgba(255,255,255,0.5)}::-moz-selection{text-shadow:none;opacity:.5;background:currentColor}::selection{text-shadow:none;opacity:.5;background:currentColor}h1,h2,h3,h4{font-family:"Fira Sans",sans-serif;font-weight:bold}h1{font-size:1.5em;margin-top:1em;margin-bottom:1em}h2{font-size:1.3em}h3{font-size:1.2em}h4{font-size:1.1em}a{text-decoration:none;color:inherit}a svg{fill:currentColor}a:hover,a:focus{color:#fbe800}a:hover svg,a:focus svg{fill:#fbe800}.chat{padding:2.5% 0 4.16667%;margin:1em 0;list-style:none}.chat li{padding:1em 6.25%;border-top:1px solid rgba(255,255,255,0.03)}.chat li:first-child{border-top:none}.chat a{border-bottom:1px solid rgba(255,255,255,0.1);transition:color 0.3s,border 0.3s}.chat a:hover,.chat a:focus{border-color:rgba(255,255,255,0.4)}.chat__label{display:block;font-weight:bold;color:#fbe800}.chat--answer{padding:0 0 4.16667%;margin:0}.chat--answer li{padding-left:6.25%;padding-right:6.25%;border-top:none}.chat--answer li:first-child{padding-top:2em;padding-bottom:2em}.chat__question{position:relative;margin:0 -1px;background:rgba(255,255,255,0.1)}.chat__question::before{position:absolute;bottom:100%;left:1px;border-left:15px solid rgba(255,255,255,0.125);border-right:15px solid transparent;border-top:15px solid transparent;box-shadow:-1px 0 0 rgba(255,255,255,0.15);content:""}.quote{margin-left:0;font-size:1.3em;font-style:italic}.quote cite{display:block;margin-top:1em;font-size:.7em;font-style:normal}.photo{margin:-1px -1px 0}.photo img{width:100%}.main__header{position:relative;padding:0 6.25% 6.25%;font-size:.9em;font-style:italic;text-align:center;opacity:1}.main__header .search_query,.main__header .tag,.main__header .date{color:#fbe800}.container{position:relative;width:90%;max-width:700px;margin:0 auto}.container:before,.container:after{content:"";display:table}.container:after{clear:both}.header{padding:2.5% 6.25% 4.16667%;margin-top:3.5%;margin-bottom:3.5%;font-style:italic;text-align:center}.header__title{font-size:1.6em;color:#fbe800}.header__description{font-size:0.9em;line-height:1.5em}.header__avatar img{background:rgba(255,255,255,0.03);border:3px solid rgba(255,255,255,0.03);border-radius:50%;box-shadow:0 50px 80px 0 rgba(0,0,0,0.2)}.social-links{padding:0;list-style:none}.social-links li{display:inline-block;margin:.25em}.social-links a{display:block;width:30px;height:30px;transition:-webkit-transform 0.3s;transition:transform 0.3s;transition:transform 0.3s, -webkit-transform 0.3s}.social-links a:hover,.social-links a:focus{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.social-links svg{max-width:20px;transition:color 0.3s}body>canvas{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;opacity:.6;pointer-events:none}.nav{position:fixed;top:0;left:0;z-index:10;padding:2em 2em 0;font-size:.8em;font-style:normal;font-weight:bold;letter-spacing:.025em;line-height:1.875;text-align:left;text-transform:uppercase}.nav__item{position:relative;display:block;padding:0 1em 0 2em;transition:color 0.3s,opacity 0.3s,visibility 0.3s,-webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:color 0.3s,opacity 0.3s,visibility 0.3s,transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:color 0.3s,opacity 0.3s,visibility 0.3s,transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),-webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);opacity:0;visibility:hidden}.nav__item:nth-child(1){-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px);transition-delay:0.06s}.nav__item:nth-child(2){-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);transition-delay:0.12s}.nav__item:nth-child(3){-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px);transition-delay:0.18s}.nav__item:nth-child(4){-webkit-transform:translateY(-40px);-ms-transform:translateY(-40px);transform:translateY(-40px);transition-delay:0.24s}.nav__item:nth-child(5){-webkit-transform:translateY(-50px);-ms-transform:translateY(-50px);transform:translateY(-50px);transition-delay:0.3s}.nav__item:nth-child(6){-webkit-transform:translateY(-60px);-ms-transform:translateY(-60px);transform:translateY(-60px);transition-delay:0.36s}.nav__item:nth-child(7){-webkit-transform:translateY(-70px);-ms-transform:translateY(-70px);transform:translateY(-70px);transition-delay:0.42s}.nav__item:nth-child(8){-webkit-transform:translateY(-80px);-ms-transform:translateY(-80px);transform:translateY(-80px);transition-delay:0.48s}.nav__item:nth-child(9){-webkit-transform:translateY(-90px);-ms-transform:translateY(-90px);transform:translateY(-90px);transition-delay:0.54s}.nav__item--toggle{visibility:visible;opacity:1;-webkit-transform:none !important;-ms-transform:none !important;transform:none !important}.nav__item--toggle::before{position:absolute;top:50%;left:0;width:18px;height:2px;margin-top:-2px;background:currentColor;box-shadow:3px 6px 0 currentColor, 3px -6px 0 currentColor;transition:background 0.3s,box-shadow 0.3s,-webkit-transform 0.3s;transition:background 0.3s,box-shadow 0.3s,transform 0.3s;transition:background 0.3s,box-shadow 0.3s,transform 0.3s,-webkit-transform 0.3s;content:""}.nav__item--toggle:hover::before,.nav__item--toggle:focus::before{background:currentColor;box-shadow:3px 6px 0 currentColor, 3px -6px 0 currentColor}.nav__item--search input{max-width:120px;padding:.25em;margin-left:-.25em;text-transform:inherit;background:rgba(255,255,255,0.03);border:none;border-radius:3px;transition:background 0.3s}.nav__item--search input:hover,.nav__item--search input:focus{background:rgba(255,255,255,0.06);outline:none}.nav--open .nav__item{visibility:visible;opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}.nav--open .nav__item--toggle::before{background:currentColor;box-shadow:-4px 7px 0 currentColor, -4px -7px 0 currentColor;-webkit-transform:translateX(4px);-ms-transform:translateX(4px);transform:translateX(4px)}.footer{opacity:.75;margin-top:10%;margin-bottom:10%;font-size:.7em;text-align:center;transition:opacity 0.3s}.footer:hover{opacity:1}.footer a{display:inline-block;font-weight:bold;opacity:.75;transition:opacity 0.3s,color 0.3s}.footer a:hover,.footer a:focus{opacity:1}.post{position:relative;min-height:300px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.03);box-shadow:0 50px 80px 0 rgba(0,0,0,0.2)}.post+.post{margin-top:20%}.post__content{padding:2.5% 6.25% 4.16667%}.post__content img{width:calc(100% + 14.5%);max-width:none;margin:1em -7.25%}.post__content a{border-bottom:1px solid rgba(255,255,255,0.1);transition:color 0.3s,border 0.3s}.post__content a:hover,.post__content a:focus{border-color:rgba(255,255,255,0.4)}.post__title{color:#fbe800}.post__title a{display:inline-block;color:inherit;border:none;transition:color 0.3s}.post__title a:hover,.post__title a:focus{color:white}.post__title svg{display:inline-block;max-width:24px;margin:-6px .5em 0 0}.post__meta,.post__meta--aside,.post__meta--footer{position:absolute;font-size:.8em;font-weight:bold;-webkit-transform-origin:top right;-ms-transform-origin:top right;transform-origin:top right}.post__meta__item{position:relative;float:left;padding:.5em 1em;transition:all 0.3s}.post__meta__item .like_button,.post__meta__item .reblog_button{margin-top:3px}.post__meta__item svg{max-width:20px;fill:currentColor;cursor:pointer;transition:all 0.3s}.post__meta__item:hover .share a,.post__meta__item:focus .share a{opacity:1;visibility:visible;-webkit-transform:none !important;-ms-transform:none !important;transform:none !important}.post__meta .share,.post__meta--aside .share,.post__meta--footer .share{position:absolute;top:100%;left:1.75em;width:132px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.post__meta .share a,.post__meta--aside .share a,.post__meta--footer .share a{float:left;padding:.5em .75em;opacity:0;visibility:hidden;transition:opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),-webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),-webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.post__meta .share a:nth-child(1),.post__meta--aside .share a:nth-child(1),.post__meta--footer .share a:nth-child(1){-webkit-transform:translate(100%, -100%);-ms-transform:translate(100%, -100%);transform:translate(100%, -100%);transition-delay:.05s}.post__meta .share a:nth-child(2),.post__meta--aside .share a:nth-child(2),.post__meta--footer .share a:nth-child(2){-webkit-transform:translate(0, -100%);-ms-transform:translate(0, -100%);transform:translate(0, -100%);transition-delay:.1s}.post__meta .share a:nth-child(3),.post__meta--aside .share a:nth-child(3),.post__meta--footer .share a:nth-child(3){-webkit-transform:translate(-100%, -100%);-ms-transform:translate(-100%, -100%);transform:translate(-100%, -100%);transition-delay:.15s}.post__meta--aside{top:2.5em;right:0;-webkit-transform:rotate(90deg) translate(100%, -50%);-ms-transform:rotate(90deg) translate(100%, -50%);transform:rotate(90deg) translate(100%, -50%)}.post__meta--footer{left:6.25%;bottom:0;-webkit-transform:translate(-1em, 50%);-ms-transform:translate(-1em, 50%);transform:translate(-1em, 50%)}.post__meta--footer .post__meta__item:hover,.post__meta--footer .post__meta__item:focus{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.post--answer{border-top:none}.post--link__excerpt{padding-left:2.25em;margin:-.5em 0 1.5em;opacity:.75}.pagination{margin-top:20%;padding:2.5% 6.25% 4.16667%;font-size:.9em;font-weight:bold;letter-spacing:.025em;text-align:center;text-transform:uppercase}.pagination__link{display:inline-block;padding:.5em 1.5em;transition:color 0.3s}.pagination__link--prev{padding-left:.5em}.pagination__link--prev:hover svg,.pagination__link--prev:focus svg{-webkit-transform:translateX(-7px);-ms-transform:translateX(-7px);transform:translateX(-7px)}.pagination__link--next{padding-right:.5em}.pagination__link--next:hover svg,.pagination__link--next:focus svg{-webkit-transform:translateX(7px);-ms-transform:translateX(7px);transform:translateX(7px)}.pagination__arrow{display:inline-block;margin-top:-5px;transition:-webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.comments{padding:6.25%;margin-top:10%;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.02);border-top:none;box-shadow:0 50px 80px 0 rgba(0,0,0,0.1)}.notes{padding:6.25%;margin:10% 0 0;list-style:none;font-size:0.8em;background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.01);border-top:none;box-shadow:0 50px 80px 0 rgba(0,0,0,0.1)}.notes .note+.note{padding-top:1em}.notes .avatar_frame img{max-width:32px}.notes .action{padding-left:.75em}.notes .action a{opacity:.5;border-bottom:1px solid rgba(255,255,255,0.1);transition:opacity 0.3s,color 0.3s,border 0.3s}.notes .action a:hover,.notes .action a:focus{opacity:1;border-color:rgba(255,255,255,0.4)}
2 | 


--------------------------------------------------------------------------------
/theme/js/nav.js:
--------------------------------------------------------------------------------
1 | !function(){function e(){n.classList.contains(c)?n.classList.remove(c):n.classList.add(c)}var n=document.querySelector(".nav"),t=document.querySelector(".nav__item--toggle"),c="nav--open";t.addEventListener("click",function(n){n.preventDefault(),e()})}();


--------------------------------------------------------------------------------
/theme/js/starfield.js:
--------------------------------------------------------------------------------
1 | function randomRange(e,n){return Math.random()*(n-e)+e}function makeParticles(){for(var e=16,n=16,r=4,i=new THREE.MeshBasicMaterial({color:16777215}),t=new THREE.SphereGeometry(r,e,n),a=-3e3;3e3>a;a+=20){var o=new THREE.Mesh(t,i);o.position.x=randomRange(-3e3,3e3),o.position.y=randomRange(-3e3,3e3),o.position.z=a,o.scale.x=o.scale.y=randomRange(0,2),scene.add(o),stars.push(o)}}function render(){requestAnimationFrame(render);for(var e=0;e<stars.length;e++){var n=stars[e];n.position.z+=1.25,n.position.z>1e3&&(n.position.z-=4e3)}renderer.render(scene,camera)}var camera,scene,renderer,mouseX=0,mouseY=0,stars=[];camera=new THREE.PerspectiveCamera(80,window.innerWidth/window.innerHeight,1,4e3),camera.position.z=1e3,scene=new THREE.Scene,scene.add(camera),renderer=new THREE.WebGLRenderer({alpha:!0}),renderer.setSize(window.innerWidth,window.innerHeight),renderer.setClearColor(264461,0),document.body.appendChild(renderer.domElement);var throttle=function(e,n,r){var r=r||window,i=!1,t=function(){i||(i=!0,requestAnimationFrame(function(){r.dispatchEvent(new CustomEvent(n)),i=!1}))};r.addEventListener(e,t)};throttle("resize","optimizedResize"),window.addEventListener("optimizedResize",function(e){camera.aspect=window.innerWidth/window.innerHeight,camera.updateProjectionMatrix(),renderer.setSize(window.innerWidth,window.innerHeight)}),makeParticles(),render();


--------------------------------------------------------------------------------
/theme/theme.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="{block:English}en{/block:English}{block:French}fr{/block:French}{block:German}de{/block:German}{block:Japanese}ja{/block:Japanese}{block:Italian}it{/block:Italian}{block:Spanish}es{/block:Spanish}{block:Polish}pl{/block:Polish}{block:PortugueseBR}pt-br{/block:PortugueseBR}{block:PortuguesePT}pt{/block:PortuguesePT}">
  3 | 
  4 | <head>
  5 | 
  6 | 	<meta charset="utf-8">
  7 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 | 
  9 | 	<title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}) {/block:SearchPage}{block:PermalinkPage}{block:PostSummary} ‹ {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
 10 | 	<meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block:PermalinkPage}{block:PostSummary}{PostSummary}{/block:PostSummary}{/block:PermalinkPage}">
 11 | 
 12 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 13 | 
 14 | 	{block:Hidden}
 15 | 	<!-- Custom Colors -->
 16 | 	<meta name="color:Text Color" content="#cccdce">
 17 | 
 18 | 	<!-- Disqus and Google Analitycs -->
 19 | 	<meta name="text:Disqus Shortname" content="">
 20 | 	<meta name="text:Google Analytics ID" content="">
 21 | 
 22 | 	<!-- Background and Header customizations -->
 23 | 	<meta name="if:Show Stars Background" content="1">
 24 | 	<meta name="if:Show Avatar" content="0">
 25 | 	<meta name="if:Show Title" content="1">
 26 | 	<meta name="if:Show Description" content="1">
 27 | 
 28 | 	<!-- Menu Items -->
 29 | 	<meta name="if:Show Archive" content="1">
 30 | 	<meta name="if:Show Random" content="1">
 31 | 	<meta name="if:Show RSS feed" content="1">
 32 | 	<meta name="if:Show Search" content="1">
 33 | 	<meta name="if:Show Like Button" content="1">
 34 | 	<meta name="if:Show Reblog Button" content="1">
 35 | 	<meta name="if:Show Share Button" content="1">
 36 | 
 37 | 	<!-- Social Icons on Header -->
 38 | 	<meta name="if:Show Social Icons" content="1">
 39 | 	<meta name="text:Username on Dribbble" content="">
 40 | 	<meta name="text:Username on Facebook" content="">
 41 | 	<meta name="text:Username on Flickr" content="">
 42 | 	<meta name="text:Username on Google Plus" content="">
 43 | 	<meta name="text:Username on Linkedin" content="">
 44 | 	<meta name="text:Username on Pinterest" content="">
 45 | 	<meta name="text:Username on Instagram" content="">
 46 | 	<meta name="text:Username on Spotify" content="">
 47 | 	<meta name="text:Username on Twitter" content="">
 48 | 	<meta name="text:Username on Vimeo" content="">
 49 | 	<meta name="text:Username on YouTube" content="">
 50 | 	{/block:Hidden}
 51 | 
 52 | 	<link rel="shortcut icon" href="{Favicon}">
 53 | 	<link rel="apple-touch-icon" href="{PortraitURL-128}">
 54 | 	<link rel="alternate" type="application/rss+xml" title="{Title} RSS" href="{RSS}">
 55 | 
 56 | 	<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Fira+Sans:400,400italic,700,700italic">
 57 | 
 58 | 	<link rel="stylesheet" href="//static.tumblr.com/fjonrht/7ikoantt5/main.css">
 59 | 
 60 | 	<style>
 61 | 	/* Custom Text and Background Color */
 62 | 	body {
 63 | 		color: {color:Text Color};
 64 | 		background: {BackgroundColor};
 65 | 	}
 66 | 
 67 | 	/* Custom Accent Color */
 68 | 	.header__title,
 69 | 	.post__title,
 70 | 	.chat__label,
 71 | 	.main__header .search_query,
 72 | 	.main__header .tag,
 73 | 	.main__header .date,
 74 | 	a:hover, a:focus,
 75 | 	a:hover svg, a:focus svg {
 76 | 		color: {AccentColor};
 77 | 		fill: {AccentColor};
 78 | 	}
 79 | 
 80 | 	/* Padawan's Custom CSS */
 81 | 	{CustomCSS}
 82 | 	</style>
 83 | 
 84 | </head>
 85 | 
 86 | <body>
 87 | 
 88 | 	<header class="header container" role="banner">
 89 | 
 90 | 		{block:IfShowAvatar}
 91 | 			<figure class="header__avatar">
 92 | 				<img src="{PortraitURL-128}" alt="{Title}">
 93 | 			</figure>
 94 | 		{/block:IfShowAvatar}
 95 | 
 96 | 		{block:IfShowTitle}
 97 | 			<h1 class="header__title">
 98 | 				<a href="{BlogURL}" title="{lang:Home}">
 99 | 					{Title}
100 | 				</a>
101 | 			</h1>
102 | 		{/block:IfShowTitle}
103 | 
104 | 		{block:IfShowDescription}
105 | 			<p class="header__description">
106 | 				{Description}
107 | 			</p>
108 | 		{/block:IfShowDescription}
109 | 
110 | 		<nav class="nav" role="navigation">
111 | 			<a class="nav__item nav__item--toggle" href="#nav">Menu</a>
112 | 			<div id="nav">
113 | 				{block:HasPages}
114 | 					{block:Pages}
115 | 						<a class="nav__item" href="{URL}">
116 | 							{Label}
117 | 						</a>
118 | 					{/block:Pages}
119 | 				{/block:HasPages}
120 | 				{block:IfShowArchive}
121 | 					<a class="nav__item" href="/archive" title="{lang:Browse the archive}">
122 | 						{lang:Archive}
123 | 					</a>
124 | 				{/block:IfShowArchive}
125 | 				{block:AskEnabled}
126 | 					<a class="nav__item" href="/ask">
127 | 						{AskLabel}
128 | 					</a>
129 | 				{/block:AskEnabled}
130 | 				{block:IfShowRandom}
131 | 					<a class="nav__item" href="/random">
132 | 						{lang:Random}
133 | 					</a>
134 | 				{/block:IfShowRandom}
135 | 				{block:SubmissionsEnabled}
136 | 					<a class="nav__item" href="/submit">
137 | 						{SubmitLabel}
138 | 					</a>
139 | 				{/block:SubmissionsEnabled}
140 | 				{block:IfShowRSS}
141 | 					<a class="nav__item" href="{RSS}" title="{lang:Subscribe via RSS}">
142 | 						{lang:RSS feed}
143 | 					</a>
144 | 				{/block:IfShowRSS}
145 | 				{block:IfShowSearch}
146 | 					<form class="nav__item nav__item--search" action="/search" method="get">
147 | 						<input type="text" name="q" value="{SearchQuery}" placeholder="{lang:Search}">
148 | 					</form>
149 | 				{/block:IfShowSearch}
150 | 			</div>
151 | 		</nav>
152 | 
153 | 		{block:IfShowSocialIcons}
154 | 			<ul class="social-links">
155 | 				{block:IfUsernameOnDribbble}
156 | 					<li>
157 | 						<a class="social-links--dribbble" href="https://dribbble.com/{text:Username on Dribbble}">
158 | 							<svg width="32" height="32" viewBox="0 0 32 32"><g><title>Dribbble</title><path d="M 16,0C 7.178,0,0,7.178,0,16s 7.178,16, 16,16s 16-7.178, 16-16S 24.822,0, 16,0z M 16,2.354c 3.474,0, 6.646,1.302, 9.060,3.444 c-0.246,0.35-2.302,3.114-7.162,4.936c-2.24-4.114-4.722-7.494-5.1-8C 13.826,2.486, 14.898,2.354, 16,2.354z M 10.19,3.652 c 0.36,0.494, 2.802,3.878, 5.066,7.904C 8.864,13.254, 3.234,13.23, 2.622,13.222C 3.508,8.98, 6.366,5.456, 10.19,3.652z M 2.332,16.020 c0-0.14, 0.002-0.28, 0.006-0.418C 2.936,15.616, 9.56,15.7, 16.384,13.658c 0.392,0.766, 0.764,1.544, 1.108,2.32 c-0.18,0.050-0.36,0.104-0.538,0.162c-7.048,2.278-10.798,8.488-11.108,9.018C 3.664,22.736, 2.334,19.53, 2.332,16.020z M 15.998,29.686 c-3.158,0-6.070-1.078-8.388-2.884c 0.246-0.502, 3.014-5.848, 10.722-8.534c 0.030-0.010, 0.060-0.020, 0.090-0.030 c 1.92,4.986, 2.712,9.164, 2.916,10.364C 19.698,29.3, 17.894,29.688, 15.998,29.686z M 23.636,27.35c-0.14-0.832-0.866-4.832-2.654-9.744 c 4.282-0.686, 8.044,0.436, 8.512,0.584C 28.884,21.992, 26.702,25.276, 23.636,27.35z M 20.146,15.452 c-0.096-0.234-0.194-0.47-0.294-0.706C 19.568,14.080, 19.264,13.418, 18.946,12.766C 24,10.704, 26.29,7.768, 26.578,7.378 c 1.904,2.326, 3.056,5.288, 3.084,8.514C 29.212,15.796, 24.694,14.88, 20.146,15.452z"></path></g></svg>
159 | 						</a>
160 | 					</li>
161 | 				{/block:IfUsernameOnDribbble}
162 | 				{block:IfUsernameOnFacebook}
163 | 					<li>
164 | 						<a class="social-links--facebook" href="https://facebook.com/{text:Username on Facebook}">
165 | 							<svg width="32" height="32" viewBox="0 0 32 32"><g><title>Facebook</title><path d="M 12.054,32l 5.996,0 l 0.004-16l 5.446-0.002l 0.584-5.514L 18.050,10.484 l 0.008-2.76c0-1.438, 0.098-2.208, 2.162-2.208l 3.812,0 L 24.032,0 L 18.566,0 C 13.268,0, 12.048,2.738, 12.048,7.236l 0.006,3.248L 8.032,10.486L 8.032,16 l 4.022,0 L 12.054,32 z"></path></g></svg>
166 | 						</a>
167 | 					</li>
168 | 				{/block:IfUsernameOnFacebook}
169 | 				{block:IfUsernameOnFlickr}
170 | 					<li>
171 | 						<a class="social-links--flickr" href="https://facebook.com/{text:Username on Flickr}">
172 | 							<svg width="32" height="32" viewBox="0 0 32 32"><g><title>Flickr</title><path d="M 16,0C 7.164,0,0,7.164,0,16s 7.164,16, 16,16s 16-7.164, 16-16C 32,7.162, 24.836,0, 16,0z M 10.112,20.008 c-2.242,0-4.058-1.816-4.058-4.058s 1.816-4.058, 4.058-4.058c 2.242,0, 4.058,1.816, 4.058,4.058S 12.354,20.008, 10.112,20.008z M 21.93,20.008c-2.242,0-4.058-1.816-4.058-4.058s 1.816-4.058, 4.058-4.058c 2.242,0, 4.058,1.816, 4.058,4.058 S 24.172,20.008, 21.93,20.008z"></path></g></svg>
173 | 						</a>
174 | 					</li>
175 | 				{/block:IfUsernameOnFlickr}
176 | 				{block:IfUsernameOnGooglePlus}
177 | 					<li>
178 | 						<a class="social-links--google-plus" href="https://plus.google.com/+{text:Username on Google Plus}">
179 | 							<svg width="32" height="32" viewBox="0 0 32 32"><g><title>Google Plus</title><path d="M 8.572,29.102c 5.3,0, 8.228-3.008, 8.228-6.032c0-2.424-0.716-3.878-2.928-5.442 C 13.116,17.092, 11.668,15.79, 11.668,15.024c0-0.898, 0.256-1.34, 1.608-2.396C 14.66,11.546, 15.64,10.024, 15.64,8.256 c0-2.106-0.938-4.16-2.7-4.836l 2.654,0 l 1.876-1.354c0,0-6.28,0-8.374,0c-3.752,0-7.284,2.844-7.284,6.138 c0,3.366, 2.558,6.084, 6.378,6.084c 0.266,0, 0.524-0.006, 0.776-0.024C 8.718,14.738, 8.54,15.272, 8.54,15.828 c0,0.936, 0.504,1.694, 1.14,2.314c-0.48,0-0.946,0.014-1.452,0.014C 3.578,18.154,0,21.116,0,24.186 C0,27.21, 3.924,29.102, 8.572,29.102z M 9.4,13.434C 7.242,13.37, 5.192,11.020, 4.82,8.188C 4.448,5.354, 5.894,3.186, 8.050,3.25 c 2.156,0.064, 4.208,2.338, 4.58,5.17C 13.004,11.254, 11.556,13.498, 9.4,13.434z M 9.114,18.936c 0.75,0.008, 1.45,0.128, 2.084,0.334 c 1.744,1.21, 2.996,1.896, 3.348,3.28c 0.066,0.28, 0.102,0.568, 0.102,0.864c0,2.444-1.574,4.354-6.092,4.354 c-3.214,0-5.534-2.034-5.534-4.478C 3.022,20.894, 5.9,18.902, 9.114,18.936zM 26,8L 26,2.066L 24,2.066L 24,8L 18,8L 18,10L 24,10L 24,16.066L 26,16.066L 26,10L 32,10L 32,8 z"></path></g></svg>
180 | 						</a>
181 | 					</li>
182 | 				{/block:IfUsernameOnGooglePlus}
183 | 				{block:IfUsernameOnLinkedin}
184 | 					<li>
185 | 						<a class="social-links--linkedin" href="https://linkedin.com/in/{text:Username on Linkedin}">
186 | 							<svg width="32" height="32" viewBox="0 0 32 32"><g><title>Linkedin</title><path d="M 2.064,10L 8,10L 8,32L 2.064,32zM 20.174,10.002C 18,10.002, 16.916,11.038, 16,11.74L 16,10 L 10.032,10 l0,22 L 16,32 L 16,18.15 c0,0-0.218-2.758, 3.088-2.758 C 21.080,15.392, 22,16.526, 22,18.15L 22,32 l 6.288,0 L 28.288,18.344 C 28.288,10.844, 22.25,10.002, 20.174,10.002zM 2,5A3,3 1080 1 0 8,5A3,3 1080 1 0 2,5z"></path></g></svg>
187 | 						</a>
188 | 					</li>
189 | 				{/block:IfUsernameOnLinkedin}
190 | 				{block:IfUsernameOnPinterest}
191 | 					<li>
192 | 						<a class="social-links--pinterest" href="https://pinterest.com/{text:Username on Pinterest}">
193 | 							<svg width="32" height="32" viewBox="0 0 32 32"><g><title>Pinterest</title><path d="M 8.060,18.506c 1.546-2.734-0.498-3.334-0.818-5.316c-1.31-8.1, 9.344-13.632, 14.924-7.972 c 3.86,3.92, 1.318,15.972-4.906,14.72C 11.298,18.74, 20.18,9.146, 15.422,7.264C 11.554,5.732, 9.5,11.944, 11.334,15.032 C 10.258,20.342, 7.942,25.342, 8.88,32c 3.040-2.206, 4.066-6.432, 4.906-10.838c 1.528,0.93, 2.346,1.896, 4.294,2.046 c 7.186,0.558, 11.202-7.174, 10.218-14.31c-0.872-6.324-7.178-9.544-13.902-8.79c-5.316,0.596-10.616,4.894-10.836,11.040 C 3.426,14.9, 4.49,17.716, 8.060,18.506z"></path></g></svg>
194 | 						</a>
195 | 					</li>
196 | 				{/block:IfUsernameOnPinterest}
197 | 				{block:IfUsernameOnInstagram}
198 | 					<li>
199 | 						<a class="social-links--instagram" href="https://instagram.com/{text:Username on Instagram}">
200 | 							<svg width="32" height="32" viewBox="0 0 32 32"><title>Instagram</title><g><path d="M 30.556,0L 1.444,0 C 0.648,0,0,0.646,0,1.442l0,29.116 C0,31.352, 0.648,32, 1.444,32l 29.112,0 C 31.352,32, 32,31.352, 32,30.558L 32,1.442 C 32,0.646, 31.352,0, 30.556,0z M 21.584,16c0,3.084-2.5,5.584-5.584,5.584S 10.416,19.084, 10.416,16 c0-3.084, 2.5-5.584, 5.584-5.584S 21.584,12.916, 21.584,16z M 28,28L 4,28 L 4,14 l 2.634,0 C 6.496,14.646, 6.416,15.314, 6.416,16 c0,5.284, 4.3,9.584, 9.584,9.584s 9.584-4.3, 9.584-9.584c0-0.686-0.080-1.354-0.218-2L 28,14 L 28,28 z M 28,10l-6,0 L 22,4 l 6,0 L 28,10 z"></path></g></svg>
201 | 						</a>
202 | 					</li>
203 | 				{/block:IfUsernameOnInstagram}
204 | 				{block:IfUsernameOnSpotify}
205 | 					<li>
206 | 						<a class="social-links--spotify" href="https://open.spotify.com/user/{text:Username on Spotify}">
207 | 							<svg width="32" height="32" viewBox="0 0 32 32"><g><title>Spotify</title><path d="M 16,0C 7.164,0,0,7.164,0,16c0,8.836, 7.164,16, 16,16s 16-7.164, 16-16C 32,7.164, 24.836,0, 16,0z M 23.392,25.38 c-0.2,0.364-0.576,0.57-0.964,0.57c-0.18,0-0.36-0.044-0.53-0.136c-2.562-1.412-5.472-2.158-8.412-2.158 c-1.762,0-3.502,0.262-5.168,0.778c-0.58,0.18-1.196-0.146-1.374-0.726c-0.18-0.58, 0.144-1.81, 0.726-1.99 c 1.878-0.58, 3.836-0.876, 5.818-0.876c 3.31,0, 6.586,0.84, 9.472,2.43C 23.492,23.564, 23.686,24.848, 23.392,25.38z M 25.424,19.352 c-0.228,0.44-0.676,1.154-1.14,1.154c-0.2,0-0.402-0.046-0.59-0.146c-3.174-1.648-6.608-2.484-10.206-2.484 c-1.982,0-3.95,0.262-5.85,0.782c-0.686,0.186-1.39-0.216-1.576-0.9C 5.878,17.074, 6.28,15.908, 6.964,15.722 c 2.12-0.578, 4.316-0.872, 6.524-0.872c 3.958,0, 7.896,0.96, 11.388,2.774C 25.504,17.95, 25.75,18.724, 25.424,19.352z M 27.588,13.56 c-0.258,0.514-0.774,0.966-1.314,0.966c-0.22,0-0.442-0.050-0.652-0.154c-3.79-1.89-7.872-2.846-12.134-2.846 c-2.22,0-4.432,0.27-6.578,0.8c-0.786,0.194-1.58-0.284-1.774-1.070C 4.94,10.472, 5.42,9.522, 6.206,9.328 C 8.58,8.738, 11.030,8.44, 13.488,8.44c 4.72,0, 9.242,1.062, 13.44,3.154C 27.654,11.956, 27.948,12.836, 27.588,13.56z"></path></g></svg>
208 | 						</a>
209 | 					</li>
210 | 				{/block:IfUsernameOnSpotify}
211 | 				{block:IfUsernameOnTwitter}
212 | 					<li>
213 | 						<a class="social-links--twitter" href="https://twitter.com/{text:Username on Twitter}">
214 | 							<svg width="32" height="32" viewBox="0 0 32 32"><title>Twitter</title><g><path d="M 31.118,3.48c-1.268,0.752-2.674,1.298-4.17,1.594C 25.75,3.796, 24.044,3, 22.156,3 c-3.626,0-6.566,2.94-6.566,6.564c0,0.514, 0.058,1.016, 0.17,1.496c-5.456-0.274-10.294-2.888-13.532-6.86 C 1.662,5.168, 1.34,6.296, 1.34,7.5c0,2.278, 1.16,4.288, 2.92,5.464C 3.184,12.928, 2.172,12.632, 1.286,12.14c0,0.028,0,0.054,0,0.082 c0,3.18, 2.264,5.834, 5.266,6.438C 6.002,18.81, 5.422,18.89, 4.822,18.89c-0.424,0-0.834-0.042-1.236-0.118 c 0.836,2.608, 3.26,4.506, 6.132,4.56c-2.246,1.76-5.078,2.81-8.154,2.81c-0.53,0-1.052-0.032-1.566-0.092 C 2.904,27.912, 6.354,29, 10.062,29c 12.076,0, 18.68-10.004, 18.68-18.68c0-0.284-0.006-0.568-0.020-0.85 c 1.286-0.922, 2.4-2.078, 3.28-3.394c-1.178,0.522-2.442,0.876-3.77,1.034C 29.588,6.298, 30.628,5.010, 31.118,3.48z"></path></g></svg>
215 | 						</a>
216 | 					</li>
217 | 				{/block:IfUsernameOnTwitter}
218 | 				{block:IfUsernameOnVimeo}
219 | 					<li>
220 | 						<a class="social-links--vimeo" href="https://vimeo.com/{text:Username on Vimeo}">
221 | 							<svg width="33" height="32" viewBox="0 0 33 32"><g><title>Vimeo</title><path d="M 18.356,9.554c 3.656-2.194, 5.608,0.892, 3.736,4.386c-1.868,3.492-3.574,5.768-4.468,5.768 c-0.892,0-1.578-2.336-2.6-6.42C 13.968,9.066, 13.974,1.462, 9.582,2.324C 5.442,3.138,0,9.636,0,9.636L 1.3,11.34 c0,0, 2.68-2.112, 3.574-1.056c 0.894,1.056, 4.304,13.812, 5.442,16.164c 0.994,2.064, 3.734,4.792, 6.742,2.844 c 3.004-1.948, 12.994-10.478, 14.784-20.55C 33.628-1.328, 19.82,0.782, 18.356,9.554z"></path></g></svg>
222 | 						</a>
223 | 					</li>
224 | 				{/block:IfUsernameOnVimeo}
225 | 				{block:IfUsernameOnYouTube}
226 | 					<li>
227 | 						<a class="social-links--youtube" href="https://youtube.com/user/{text:Username on YouTube}">
228 | 							<svg width="32" height="32" viewBox="0 0 32 32"><g><title>YouTube</title><path d="M 27.672,5.046c-7.286-0.49-15.924-0.624-23.344,0C 2.024,5.304, 0.446,8.108, 0.274,10.238 c-0.364,4.474-0.364,7.020,0,11.494c 0.174,2.13, 1.712,4.95, 4.056,5.246c 7.508,0.492, 16.102,0.56, 23.344,0 c 2.268-0.394, 3.882-3.116, 4.056-5.246c 0.364-4.474, 0.364-7.298,0-11.774C 31.554,7.828, 30.282,5.142, 27.672,5.046z M 12,21.66L 12,10.19 l 10,5.736L 12,21.66z"></path></g></svg>
229 | 						</a>
230 | 					</li>
231 | 				{/block:IfUsernameOnYouTube}
232 | 			</ul>
233 | 		{/block:IfShowSocialIcons}
234 | 
235 | 	</header>
236 | 
237 | 	<main class="main container" role="main">
238 | 
239 | 		{block:SearchPage}
240 | 			<header class="main__header">
241 | 				{lang:Search results for SearchQuery 2}
242 | 			</header>
243 | 		{/block:SearchPage}
244 | 		{block:TagPage}
245 | 			<header class="main__header">
246 | 				{lang:Showing posts tagged Tag 2}
247 | 			</header>
248 | 		{/block:TagPage}
249 | 		{block:DayPage}
250 | 			<header class="main__header">
251 | 				{lang:Posted on DayOfWeek DayOfMonth Month Year 2}
252 | 			</header>
253 | 		{/block:DayPage}
254 | 
255 | 		{block:NoSearchResults}
256 | 			<div class="post">
257 | 				<div class="post__content">
258 | 					<h1 class="post__title">
259 | 						{lang:No results found}
260 | 					</h1>
261 | 					<p>
262 | 						{lang:No posts containing SearchQuery 2}.
263 | 					</p>
264 | 				</div>
265 | 			</div>
266 | 		{/block:NoSearchResults}
267 | 
268 | 		{block:Posts}
269 | 			<article class="post post--{PostType} {block:Quote}post--quote--{Length}{/block:Quote}">
270 | 
271 | 				{block:Text}
272 | 					<div class="post__content">
273 | 						{block:Title}
274 | 							<h1 class="post__title">
275 | 								<a href="{Permalink}">
276 | 									{Title}
277 | 								</a>
278 | 							</h1>
279 | 						{/block:Title}
280 | 						{Body}
281 | 						{block:More}
282 | 							<a class="post__read-more" href="{Permalink}">
283 | 								{lang:Continue reading}
284 | 							</a>
285 | 						{/block:More}
286 | 					</div>
287 | 				{/block:Text}
288 | 
289 | 				{block:Photo}
290 | 					<figure class="photo">
291 | 						{LinkOpenTag}
292 | 							<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}">
293 | 						{LinkCloseTag}
294 | 					</figure>
295 | 					{block:Caption}
296 | 						<div class="post__content">
297 | 							{Caption}
298 | 						</div>
299 | 					{/block:Caption}
300 | 				{/block:Photo}
301 | 
302 | 				{block:Panorama}
303 | 					<figure class="photo">
304 | 						{LinkOpenTag}
305 | 							<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" width="{PhotoWidth-Panorama}" height="{PhotoHeight-Panorama}">
306 | 						{LinkCloseTag}
307 | 					</figure>
308 | 					{block:Caption}
309 | 						<div class="post__content">
310 | 							{Caption}
311 | 						</div>
312 | 					{/block:Caption}
313 | 				{/block:Panorama}
314 | 
315 | 				{block:Photoset}
316 | 					<figure class="photo photo--photoset">
317 | 						{Photoset}
318 | 					</figure>
319 | 					{block:Caption}
320 | 						<div class="post__content">
321 | 							{Caption}
322 | 						</div>
323 | 					{/block:Caption}
324 | 				{/block:Photoset}
325 | 
326 | 				{block:Quote}
327 | 					<div class="post__content">
328 | 						<blockquote class="quote">
329 | 							“{Quote}”
330 | 							{block:Source}
331 | 								<cite>&mdash; {Source}</cite>
332 | 							{/block:Source}
333 | 						</blockquote>
334 | 					</div>
335 | 				{/block:Quote}
336 | 
337 | 				{block:Link}
338 | 					<div class="post__content">
339 | 						<h1 class="post__title">
340 | 							<a href="{URL}" {Target}>
341 | 								<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M 17,2C 8.716,2, 2,8.716, 2,17S 8.716,32, 17,32S 32,25.284, 32,17S 25.284,2, 17,2z M 26,17 c0,0.002,0,0.002,0,0.004c0,0.13-0.026,0.258-0.076,0.378c-0.050,0.122-0.124,0.232-0.216,0.324l-6,6 c-0.39,0.39-1.024,0.39-1.414,0c-0.39-0.39-0.39-1.024,0-1.414L 22.586,18L 7,18 C 6.448,18, 6,17.552, 6,17C 6,16.448, 6.448,16, 7,16 l 15.586,0 L 18.292,11.708c-0.39-0.39-0.39-1.024,0-1.414c 0.39-0.39, 1.024-0.39, 1.414,0l 6,6c 0.092,0.092, 0.166,0.202, 0.216,0.324 C 25.974,16.74, 26,16.87, 26,17L 26,17z"></path></g></svg>
342 | 								{Name}
343 | 							</a>
344 | 						</h1>
345 | 						{block:Excerpt}
346 | 							<div class="post--link__excerpt">
347 | 								{Excerpt}
348 | 							</div>
349 | 						{/block:Excerpt}
350 | 						{block:Description}
351 | 							{Description}
352 | 						{/block:Description}
353 | 					</div>
354 | 				{/block:Link}
355 | 
356 | 				{block:Video}
357 | 					<div class="video-container">
358 | 						{VideoEmbed-700}
359 | 					</div>
360 | 					{block:Caption}
361 | 						<div class="post__content">
362 | 							{Caption}
363 | 						</div>
364 | 					{/block:Caption}
365 | 				{/block:Video}
366 | 
367 | 				{block:Chat}
368 | 					{block:Title}
369 | 						<div class="post__content">
370 | 							<h1 class="post__title">
371 | 								<a href="{Permalink}">
372 | 									{Title}
373 | 								</a>
374 | 							</h1>
375 | 						</div>
376 | 					{/block:Title}
377 | 					<ul class="chat">
378 | 						{block:Lines}
379 | 							<li>
380 | 								{block:Label}
381 | 									<span class="chat__label">
382 | 										{Label}
383 | 									</span>
384 | 								{/block:Label}
385 | 								{Line}
386 | 							</li>
387 | 						{/block:Lines}
388 | 					</ul>
389 | 				{/block:Chat}
390 | 
391 | 				{block:Audio}
392 | 					{block:AudioEmbed}
393 | 						<div class="audio-container">
394 | 							{AudioEmbed color="CCCDCE"}
395 | 						</div>
396 | 					{block:AudioEmbed}
397 | 					{block:Caption}
398 | 						<div class="post__content">
399 | 							{Caption}
400 | 						</div>
401 | 					{/block:Caption}
402 | 				{/block:Audio}
403 | 
404 | 				{block:Answer}
405 | 					<ul class="chat chat--answer">
406 | 						<li class="chat__question">
407 | 							<span class="chat__label">
408 | 								{lang:Asker asked}:
409 | 							</span>
410 | 							{Question}
411 | 						</li>
412 | 						<li class="chat__answer">
413 | 							{block:Answerer}
414 | 								<span class="chat__label">
415 | 									{Answerer}:
416 | 								</span>
417 | 							{/block:Answerer}
418 | 							{Answer}
419 | 						</li>
420 | 					</ul>
421 | 				{/block:Answer}
422 | 
423 | 				<aside class="post__meta--aside">
424 | 					<a class="post__meta__item" href="{Permalink}" title="{lang:Posted on Month DayOfMonth Year}">
425 | 						{TimeAgo}
426 | 					</a>
427 | 					{block:NoteCount}
428 | 						<a class="post__meta__item" href="{Permalink}#notes" title="{lang:This post has NoteCount notes}">
429 | 							{NoteCountWithLabel}
430 | 						</a>
431 | 					{/block:NoteCount}
432 | 				</aside>
433 | 
434 | 				<footer class="post__meta--footer">
435 | 					{block:IfShowLikeButton}
436 | 						<div class="post__meta__item">
437 | 							{LikeButton color="CCCDCE" size="20"}
438 | 						</div>
439 | 					{/block:IfShowLikeButton}
440 | 					{block:IfShowReblogButton}
441 | 						<div class="post__meta__item">
442 | 							{ReblogButton color="CCCDCE" size="20"}
443 | 						</div>
444 | 					{/block:IfShowReblogButton}
445 | 					{block:IfDisqusShortname}
446 | 						<a class="post__meta__item" href="{Permalink}#disqus_thread" title="{lang:View comments}">
447 | 							<svg width="32" height="32" viewBox="0 0 32 32"><g><path d="M 5.078,24.482C 4.492,25.996, 3.498,27.976, 1.812,30c 3.198,0, 7.312-0.42, 10.482-2.364 C 13.486,27.866, 14.722,28, 16,28c 8.836,0, 16-5.82, 16-13S 24.836,2, 16,2S0,7.82,0,15C0,18.744, 1.96,22.11, 5.078,24.482z"></path></g></svg>
448 | 						</a>
449 | 					{/block:IfDisqusShortname}
450 | 					{block:IfShowShareButton}
451 | 						<div class="post__meta__item">
452 | 							<svg width="32" height="32" viewBox="0 0 32 32"><g><title>Share</title><path d="M 23.586,9.444c 0.88,0.666, 1.972,1.064, 3.16,1.064C 29.648,10.508, 32,8.156, 32,5.254 C 32,2.352, 29.648,0, 26.746,0c-2.9,0-5.254,2.352-5.254,5.254c0,0.002,0,0.004,0,0.004L 8.524,11.528 C 7.626,10.812, 6.49,10.38, 5.254,10.38C 2.352,10.38,0,12.734,0,15.634s 2.352,5.254, 5.254,5.254c 1.048,0, 2.024-0.312, 2.844-0.84 l 13.396,6.476c0,0.002,0,0.004,0,0.004c0,2.902, 2.352,5.254, 5.254,5.254c 2.902,0, 5.254-2.352, 5.254-5.254 c0-2.902-2.352-5.254-5.254-5.254c-1.188,0-2.28,0.398-3.16,1.064L 10.488,16.006c 0.006-0.080, 0.010-0.158, 0.012-0.238L 23.586,9.444z"></path></g></svg>
453 | 							<div class="share">
454 | 								<a href="https://www.facebook.com/sharer.php?u={Permalink}" title="Share it">
455 | 									<svg width="32" height="32" viewBox="0 0 32 32"><g><title>Facebook</title><path d="M 12.054,32l 5.996,0 l 0.004-16l 5.446-0.002l 0.584-5.514L 18.050,10.484 l 0.008-2.76c0-1.438, 0.098-2.208, 2.162-2.208l 3.812,0 L 24.032,0 L 18.566,0 C 13.268,0, 12.048,2.738, 12.048,7.236l 0.006,3.248L 8.032,10.486L 8.032,16 l 4.022,0 L 12.054,32 z"></path></g></svg>
456 | 								</a>
457 | 								<a href="https://twitter.com/intent/tweet?url={Permalink}" title="Tweet it">
458 | 									<svg width="32" height="32" viewBox="0 0 32 32"><g><title>Twitter</title><path d="M 31.118,3.48c-1.268,0.752-2.674,1.298-4.17,1.594C 25.75,3.796, 24.044,3, 22.156,3 c-3.626,0-6.566,2.94-6.566,6.564c0,0.514, 0.058,1.016, 0.17,1.496c-5.456-0.274-10.294-2.888-13.532-6.86 C 1.662,5.168, 1.34,6.296, 1.34,7.5c0,2.278, 1.16,4.288, 2.92,5.464C 3.184,12.928, 2.172,12.632, 1.286,12.14c0,0.028,0,0.054,0,0.082 c0,3.18, 2.264,5.834, 5.266,6.438C 6.002,18.81, 5.422,18.89, 4.822,18.89c-0.424,0-0.834-0.042-1.236-0.118 c 0.836,2.608, 3.26,4.506, 6.132,4.56c-2.246,1.76-5.078,2.81-8.154,2.81c-0.53,0-1.052-0.032-1.566-0.092 C 2.904,27.912, 6.354,29, 10.062,29c 12.076,0, 18.68-10.004, 18.68-18.68c0-0.284-0.006-0.568-0.020-0.85 c 1.286-0.922, 2.4-2.078, 3.28-3.394c-1.178,0.522-2.442,0.876-3.77,1.034C 29.588,6.298, 30.628,5.010, 31.118,3.48z"></path></g></svg>
459 | 								</a>
460 | 								<a href="https://plus.google.com/share?url={Permalink}" title="Share it">
461 | 									<svg width="32" height="32" viewBox="0 0 32 32"><g><title>Google Plus</title><path d="M 8.572,29.102c 5.3,0, 8.228-3.008, 8.228-6.032c0-2.424-0.716-3.878-2.928-5.442 C 13.116,17.092, 11.668,15.79, 11.668,15.024c0-0.898, 0.256-1.34, 1.608-2.396C 14.66,11.546, 15.64,10.024, 15.64,8.256 c0-2.106-0.938-4.16-2.7-4.836l 2.654,0 l 1.876-1.354c0,0-6.28,0-8.374,0c-3.752,0-7.284,2.844-7.284,6.138 c0,3.366, 2.558,6.084, 6.378,6.084c 0.266,0, 0.524-0.006, 0.776-0.024C 8.718,14.738, 8.54,15.272, 8.54,15.828 c0,0.936, 0.504,1.694, 1.14,2.314c-0.48,0-0.946,0.014-1.452,0.014C 3.578,18.154,0,21.116,0,24.186 C0,27.21, 3.924,29.102, 8.572,29.102z M 9.4,13.434C 7.242,13.37, 5.192,11.020, 4.82,8.188C 4.448,5.354, 5.894,3.186, 8.050,3.25 c 2.156,0.064, 4.208,2.338, 4.58,5.17C 13.004,11.254, 11.556,13.498, 9.4,13.434z M 9.114,18.936c 0.75,0.008, 1.45,0.128, 2.084,0.334 c 1.744,1.21, 2.996,1.896, 3.348,3.28c 0.066,0.28, 0.102,0.568, 0.102,0.864c0,2.444-1.574,4.354-6.092,4.354 c-3.214,0-5.534-2.034-5.534-4.478C 3.022,20.894, 5.9,18.902, 9.114,18.936zM 26,8L 26,2.066L 24,2.066L 24,8L 18,8L 18,10L 24,10L 24,16.066L 26,16.066L 26,10L 32,10L 32,8 z"></path></g></svg>
462 | 								</a>
463 | 							</div>
464 | 						</div>
465 | 					{block:IfShowShareButton}
466 | 				</footer>
467 | 
468 | 			</article>
469 | 
470 | 			{block:PermalinkPage}
471 | 				{block:IfDisqusShortname}
472 | 					<div class="comments" id="disqus_thread"></div>
473 | 					<script type="text/javascript">
474 | 					var disqus_shortname = '{text:Disqus Shortname}';
475 | 					var disqus_url = '{Permalink}';
476 | 					(function() {
477 | 						var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
478 | 						dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
479 | 						(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
480 | 					})();
481 | 					</script>
482 | 				{/block:IfDisqusShortname}
483 | 				{block:PostNotes}
484 | 					<footer id="notes" class="{block:IfNotDisqusShortname}no-disqus{/block:IfNotDisqusShortname}">
485 | 						{PostNotes-64}
486 | 					</footer>
487 | 				{/block:PostNotes}
488 | 			{/block:PermalinkPage}
489 | 		{/block:Posts}
490 | 
491 | 		{block:Pagination}
492 | 			<div class="pagination">
493 | 				{block:PreviousPage}
494 | 					<a class="pagination__link pagination__link--prev" href="{PreviousPage}" title="{lang:Previous page}">
495 | 						<svg class="pagination__arrow" width="32" height="32" viewBox="0 0 32 32"><g><title>Arrow left</title><path d="M 12.3,17.71l 6.486,6.486c 0.39,0.39, 1.024,0.39, 1.414,0c 0.39-0.39, 0.39-1.024,0-1.414L 14.418,17 L 20.2,11.218c 0.39-0.39, 0.39-1.024,0-1.414c-0.39-0.39-1.024-0.39-1.414,0L 12.3,16.29C 12.104,16.486, 12.008,16.742, 12.008,17 C 12.008,17.258, 12.104,17.514, 12.3,17.71z"></path></g></svg>
496 | 						{lang:Prev}
497 | 					</a>
498 | 				{/block:PreviousPage}
499 | 				{block:NextPage}
500 | 					<a class="pagination__link pagination__link--next" href="{NextPage}" title="{lang:Next page}">
501 | 						{lang:Next}
502 | 						<svg class="pagination__arrow" width="32" height="32" viewBox="0 0 32 32"><g><title>Arrow right</title><path d="M 13.8,24.196c 0.39,0.39, 1.024,0.39, 1.414,0l 6.486-6.486c 0.196-0.196, 0.294-0.454, 0.292-0.71 c0-0.258-0.096-0.514-0.292-0.71L 15.214,9.804c-0.39-0.39-1.024-0.39-1.414,0c-0.39,0.39-0.39,1.024,0,1.414L 19.582,17 L 13.8,22.782C 13.41,23.172, 13.41,23.806, 13.8,24.196z"></path></g></svg>
503 | 					</a>
504 | 				{/block:NextPage}
505 | 			</div>
506 | 		{/block:Pagination}
507 | 
508 | 	</main>
509 | 
510 | 	<footer class="footer container" role="contentinfo">
511 | 		<a href="http://darkside-theme.tumblr.com">Dark Side Theme</a> by <a href="http://edmundojr.com" target="_blank">Edmundo Santos</a>
512 | 	</footer>
513 | 
514 | 	{block:IfShowStarsBackground}
515 | 		<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
516 | 		<script src="//static.tumblr.com/fjonrht/tk9o5hesc/starfield.js"></script>
517 | 	{/block:IfShowStarsBackground}
518 | 	<script src="//static.tumblr.com/fjonrht/lHeo5hesc/nav.js"></script>
519 | 
520 | 	{block:IfGoogleAnalyticsID}
521 | 		<script>
522 | 		(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
523 | 		function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
524 | 		e=o.createElement(i);r=o.getElementsByTagName(i)[0];
525 | 		e.src='//www.google-analytics.com/analytics.js';
526 | 		r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
527 | 		ga('create','{text:Google Analytics ID}');ga('send','pageview');
528 | 		</script>
529 | 	{/block:IfGoogleAnalyticsID}
530 | 
531 | </body>
532 | </html>


--------------------------------------------------------------------------------