Browse Source

Initial commit

master
Sagi Dayan 2 years ago
commit
b0c00098b4
  1. 22
      LICENSE
  2. 100
      README.md
  3. BIN
      assets/404-face.png
  4. 2
      assets/built/casper.js
  5. 1
      assets/built/casper.js.map
  6. 2
      assets/built/global.css
  7. 1
      assets/built/global.css.map
  8. 2
      assets/built/screen.css
  9. 1
      assets/built/screen.css.map
  10. 240
      assets/css/csscomb.json
  11. 487
      assets/css/global.css
  12. 104
      assets/css/momokai_theme.css
  13. 3032
      assets/css/screen.css
  14. 24
      assets/js/gallery-card.js
  15. 112
      assets/js/infinite-scroll.js
  16. 89
      assets/js/lib/jquery.fitvids.js
  17. 61
      assets/js/sticky-nav-title.js
  18. BIN
      assets/screenshot-desktop.jpg
  19. BIN
      assets/screenshot-mobile.jpg
  20. 59
      author.hbs
  21. 160
      default.hbs
  22. 38
      error-404.hbs
  23. 66
      error.hbs
  24. 47
      feed/rss.hbs
  25. 216
      gulpfile.js
  26. 98
      index.hbs
  27. 127
      landing-page.hbs
  28. 92
      package.json
  29. 65
      page.hbs
  30. 47
      partials/header-background.hbs
  31. 1
      partials/icons/avatar.hbs
  32. 1
      partials/icons/facebook.hbs
  33. 11
      partials/icons/loader.hbs
  34. 1
      partials/icons/rss.hbs
  35. 1
      partials/icons/twitter.hbs
  36. 69
      partials/post-card.hbs
  37. 5
      partials/site-header.hbs
  38. 41
      partials/site-nav.hbs
  39. 19
      partials/subscribe-form.hbs
  40. 214
      post.hbs
  41. 8
      renovate.json
  42. 14
      routes.yaml
  43. 32
      tag.hbs
  44. 5136
      yarn.lock

22
LICENSE

@ -0,0 +1,22 @@
Copyright (c) 2013-2020 Ghost Foundation
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

100
README.md

@ -0,0 +1,100 @@
> See section [Modifications](#modifications)
# Casper
The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper! If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.
 
![screenshot-desktop](https://user-images.githubusercontent.com/353959/66987533-40eae100-f0c1-11e9-822e-cbaf38fb8e3f.png)
 
# Modifications
A few things added/removed:
- Code block syntax highlight (Using [prism](https://prismjs.com/) and [monokai](https://github.com/Swaagie/prismjs-monokai) theme)
- [Fork Awesome fonts](https://forkaweso.me/Fork-Awesome/)
- Landing page with icon links
- To use the links head over to your settings/code injection
- in site header add your links as such:
```
<script>
// Link {service: service-name (fork awesome icon (i.e for an icon 'fa fa-github' just put 'github')), href: url}
const landing_page_links = [
{service: 'envelope', href:'[email protected]'},
{service: 'github', href:'https://www.github.com/username'},
....
];
</script>
```
you can add as many links as you want. but the larger the list, it might not be responsive.
- 404 page. to change the image in the 404 page - overwrite the file in `assets/404-face.png` (The name matters)
- A custom rss page (no feedly)
- removed the default social links
- custom routs.yaml - Go to settings/Labs and upload the routs.yaml file from this repo. (All blog posts will be under route /writings)
### How do i use this theme?
Download/clone the repo and just compress it into a zip file. Then under Settings/Design Upload your new theme.
> **Note:** You must upload the routes.yaml included in order for this theme to work properly
### Demo
Check out [Here](https://www.sagidayan.com).
# First time using a Ghost theme?
Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.
This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/api/handlebars-themes/) which explains every possible Handlebars helper and template.
**The main files are:**
- `default.hbs` - The parent template file, which includes your global header/footer
- `index.hbs` - The main template to generate a list of posts, usually the home page
- `post.hbs` - The template used to render individual posts
- `page.hbs` - Used for individual pages
- `tag.hbs` - Used for tag archives, eg. "all posts tagged with `news`"
- `author.hbs` - Used for author archives, eg. "all posts written by Jamie"
One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example:
- `page-about.hbs` - Custom template for an `/about/` page
- `tag-news.hbs` - Custom template for `/tag/news/` archive
- `author-ali.hbs` - Custom template for `/author/ali/` archive
# Development
Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:
```bash
# install dependencies
yarn install
# run development server
yarn dev
```
Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
```bash
# create .zip file
yarn zip
```
# PostCSS Features Used
- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
- Variables - Simple pure CSS variables
- [Color Function](https://github.com/postcss/postcss-color-function)
# SVG Icons
Casper uses inline SVG icons, included via Handlebars partials. You can find all icons inside `/partials/icons`. To use an icon just include the name of the relevant file, eg. To include the SVG icon in `/partials/icons/rss.hbs` - use `{{> "icons/rss"}}`.
You can add your own SVG icons in the same manner.
# Copyright & License
Copyright (c) 2013-2020 Ghost Foundation - Released under the [MIT license](LICENSE).

BIN
assets/404-face.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

2
assets/built/casper.js

@ -0,0 +1,2 @@
!function(n){"use strict";n.fn.fitVids=function(e){var i={customSelector:null,ignore:null};if(!document.getElementById("fit-vids-style")){var t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("div");r.innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',t.appendChild(r.childNodes[1])}return e&&n.extend(i,e),this.each(function(){var e=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];i.customSelector&&e.push(i.customSelector);var r=".fitvidsignore";i.ignore&&(r=r+", "+i.ignore);var t=n(this).find(e.join(","));(t=(t=t.not("object object")).not(r)).each(function(){var e=n(this);if(!(0<e.parents(r).length||"embed"===this.tagName.toLowerCase()&&e.parent("object").length||e.parent(".fluid-width-video-wrapper").length)){e.css("height")||e.css("width")||!isNaN(e.attr("height"))&&!isNaN(e.attr("width"))||(e.attr("height",9),e.attr("width",16));var t=("object"===this.tagName.toLowerCase()||e.attr("height")&&!isNaN(parseInt(e.attr("height"),10))?parseInt(e.attr("height"),10):e.height())/(isNaN(parseInt(e.attr("width"),10))?e.width():parseInt(e.attr("width"),10));if(!e.attr("name")){var i="fitvid"+n.fn.fitVids._count;e.attr("name",i),n.fn.fitVids._count++}e.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*t+"%"),e.removeAttr("height").removeAttr("width")}})})},n.fn.fitVids._count=0}(window.jQuery||window.Zepto),function(e,t){t.addEventListener("DOMContentLoaded",function(){t.querySelectorAll(".kg-gallery-image img").forEach(function(e){var t=e.closest(".kg-gallery-image"),i=e.attributes.width.value/e.attributes.height.value;t.style.flex=i+" 1 0%"})})}(window,document),function(t,i){var r=i.querySelector("link[rel=next]");if(r){var n=i.querySelector(".post-feed");if(n){var o=300,s=!1,a=!1,d=t.scrollY,l=t.innerHeight,c=i.documentElement.scrollHeight;t.addEventListener("scroll",f,{passive:!0}),t.addEventListener("resize",v),h()}}function u(){if(404===this.status)return t.removeEventListener("scroll",f),void t.removeEventListener("resize",v);this.response.querySelectorAll(".post-card").forEach(function(e){n.appendChild(i.importNode(e,!0))});var e=this.response.querySelector("link[rel=next]");e?r.href=e.href:(t.removeEventListener("scroll",f),t.removeEventListener("resize",v)),c=i.documentElement.scrollHeight,a=s=!1}function e(){if(!a)if(d+l<=c-o)s=!1;else{a=!0;var e=new t.XMLHttpRequest;e.responseType="document",e.addEventListener("load",u),e.open("GET",r.href),e.send(null)}}function h(){s||t.requestAnimationFrame(e),s=!0}function f(){d=t.scrollY,h()}function v(){l=t.innerHeight,c=i.documentElement.scrollHeight,h()}}(window,document),function(s,a){s.Casper||(s.Casper={}),s.Casper.stickyNavTitle=function(e){var t=a.querySelector(e.navSelector),i=a.querySelector(e.titleSelector),r=s.scrollY,n=!1;function o(){i.getBoundingClientRect().top+s.scrollY+(i.offsetHeight+35)<=r?t.classList.add(e.activeClass):t.classList.remove(e.activeClass),n=!1}s.addEventListener("scroll",function(){r=s.scrollY,function(){n||requestAnimationFrame(o);n=!0}()},{passive:!0}),o()}}(window,document);
//# sourceMappingURL=casper.js.map

1
assets/built/casper.js.map

File diff suppressed because one or more lines are too long

2
assets/built/global.css

@ -0,0 +1,2 @@
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}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]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#313b3f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e3e9ed}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:.5em solid #e5eff5}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5.5rem;font-weight:600}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2.2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}
/*# sourceMappingURL=global.css.map */

1
assets/built/global.css.map

File diff suppressed because one or more lines are too long

2
assets/built/screen.css

File diff suppressed because one or more lines are too long

1
assets/built/screen.css.map

File diff suppressed because one or more lines are too long

240
assets/css/csscomb.json

@ -0,0 +1,240 @@
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "double",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": "\n",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": 4,
"unitless-zero": true,
"sort-order": [ [
"content",
"visibility",
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"order",
"flex",
"flex-grow",
"flex-shrink",
"flex-basis",
"align-self",
"display",
"flex-flow",
"flex-direction",
"justify-content",
"align-items",
"align-content",
"flex-wrap",
"flex-order",
"flex-pack",
"flex-align",
"float",
"clear",
"box-sizing",
"width",
"height",
"min-width",
"min-height",
"max-width",
"max-height",
"overflow",
"overflow-x",
"overflow-y",
"clip",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"border",
"border-spacing",
"border-collapse",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"border-image",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat",
"border-top-image",
"border-right-image",
"border-bottom-image",
"border-left-image",
"border-corner-image",
"border-top-left-image",
"border-top-right-image",
"border-bottom-right-image",
"border-bottom-left-image",
"table-layout",
"caption-side",
"empty-cells",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image",
"quotes",
"counter-increment",
"counter-reset",
"vertical-align",
"stroke",
"fill",
"stroke-width",
"stroke-opacity",
"color",
"font",
"font-family",
"font-size",
"line-height",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"text-rendering",
"font-feature-settings",
"letter-spacing",
"hyphens",
"text-align",
"text-align-last",
"text-decoration",
"text-emphasis",
"text-emphasis-position",
"text-emphasis-style",
"text-emphasis-color",
"text-indent",
"text-justify",
"text-outline",
"text-transform",
"text-wrap",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"text-shadow",
"white-space",
"word-spacing",
"word-wrap",
"word-break",
"tab-size",
"user-select",
"src",
"resize",
"cursor",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-size",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"background-clip",
"background-origin",
"background-repeat",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"box-decoration-break",
"box-shadow",
"opacity",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"filter",
"transition",
"transition-delay",
"transition-timing-function",
"transition-duration",
"transition-property",
"transform",
"transform-origin",
"animation",
"animation-name",
"animation-duration",
"animation-play-state",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"animation-fill-mode",
"pointer-events",
"unicode-bidi",
"direction",
"columns",
"column-span",
"column-width",
"column-count",
"column-fill",
"column-gap",
"column-rule",
"column-rule-width",
"column-rule-style",
"column-rule-color",
"break-before",
"break-inside",
"break-after",
"page-break-before",
"page-break-inside",
"page-break-after",
"orphans",
"widows",
"zoom",
"max-zoom",
"min-zoom",
"user-zoom",
"orientation",
"-webkit-overflow-scrolling",
"-ms-overflow-scrolling"
] ]
}

487
assets/css/global.css

@ -0,0 +1,487 @@
/* Variables
/* ---------------------------------------------------------- */
:root {
/* Colours */
--blue: #3eb0ef;
--green: #a4d037;
--purple: #ad26b4;
--yellow: #fecd35;
--red: #f05230;
--darkgrey: #15171A;
--midgrey: #738a94;
--lightgrey: #c5d2d9;
--whitegrey: #e5eff5;
--pink: #fa3a57;
--brown: #a3821a;
--darkmode: color(var(--darkgrey) l(+2%));
}
/* Reset
/* ---------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
img {
max-width: 100%;
}
html {
box-sizing: border-box;
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
b,
strong {
font-weight: bold;
}
i,
em,
dfn {
font-style: italic;
}
h1 {
margin: 0.67em 0;
font-size: 2em;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
mark {
background-color: #fdffb6;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0; /* 3 */
color: inherit; /* 1 */
font: inherit; /* 2 */
}
button {
overflow: visible;
border: none;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
/* 1 */
input[type="reset"],
input[type="submit"] {
cursor: pointer; /* 3 */
-webkit-appearance: button; /* 2 */
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input:focus {
outline: none;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
box-sizing: content-box; /* 2 */
-webkit-appearance: textfield; /* 1 */
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
legend {
padding: 0; /* 2 */
border: 0; /* 1 */
}
textarea {
overflow: auto;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
overflow-x: hidden;
overflow-y: scroll;
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
overflow-x: hidden;
color: color(var(--midgrey) l(-30%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1.6rem;
line-height: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
text-rendering: optimizeLegibility;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
}
::selection {
text-shadow: none;
background: color(var(--blue) lightness(+30%));
}
hr {
position: relative;
display: block;
width: 100%;
margin: 2.5em 0 3.5em;
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid color(var(--lightgrey) l(+10%));
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
textarea {
resize: vertical;
}
p,
ul,
ol,
dl,
blockquote {
margin: 0 0 1.5em 0;
}
ol,
ul {
padding-left: 1.3em;
padding-right: 1.5em;
}
ol ol,
ul ul,
ul ol,
ol ul {
margin: 0.5em 0 1em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
ul,
ol {
max-width: 100%;
}
li {
margin: 0.5em 0;
padding-left: 0.3em;
line-height: 1.6em;
}
dt {
float: left;
margin: 0 20px 0 0;
width: 120px;
color: var(--darkgrey);
font-weight: 500;
text-align: right;
}
dd {
margin: 0 0 5px 0;
text-align: left;
}
blockquote {
margin: 1.5em 0;
padding: 0 1.6em 0 1.6em;
border-left: var(--whitegrey) 0.5em solid;
}
blockquote p {
margin: 0.8em 0;
font-size: 1.2em;
font-weight: 300;
}
blockquote small {
display: inline-block;
margin: 0.8em 0 0.8em 1.5em;
font-size: 0.9em;
opacity: 0.8;
}
/* Quotation marks */
blockquote small:before {
content: "\2014 \00A0";
}
blockquote cite {
font-weight: bold;
}
blockquote cite a {
font-weight: normal;
}
a {
color: color(var(--blue) l(-5%));
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
line-height: 1.15;
font-weight: 600;
text-rendering: optimizeLegibility;
}
h1 {
margin: 0 0 0.5em 0;
font-size: 5.5rem;
font-weight: 600;
}
@media (max-width: 500px) {
h1 {
font-size: 2.2rem;
}
}
h2 {
margin: 1.5em 0 0.5em 0;
font-size: 2.2rem;
}
@media (max-width: 500px) {
h2 {
font-size: 1.8rem;
}
}
h3 {
margin: 1.5em 0 0.5em 0;
font-size: 1.8rem;
font-weight: 500;
}
@media (max-width: 500px) {
h3 {
font-size: 1.7rem;
}
}
h4 {
margin: 1.5em 0 0.5em 0;
font-size: 1.6rem;
font-weight: 500;
}
h5 {
margin: 1.5em 0 0.5em 0;
font-size: 1.4rem;
font-weight: 500;
}
h6 {
margin: 1.5em 0 0.5em 0;
font-size: 1.4rem;
font-weight: 500;
}

104
assets/css/momokai_theme.css

@ -0,0 +1,104 @@
/**
* Monokai theme for Prism.JS
*
* @author Martijn Swaagman
* @license MIT 2015
*/
code[class*="language-"], pre[class*="language-"] {
color: #f8f8f2;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre)>code[class*="language-"], pre[class*="language-"] {
background: #272822;
}
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment, .token.prolog, .token.doctype, .token.cdata {
color: #778090;
}
.token.punctuation {
color: #F8F8F2;
}
.namespace {
opacity: .7;
}
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
color: #F92672;
}
.token.boolean, .token.number {
color: #AE81FF;
}
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
color: #A6E22E;
}
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {
color: #F8F8F2;
}
.token.atrule, .token.attr-value, .token.function {
color: #E6DB74;
}
.token.keyword {
color: #F92672;
}
.token.regex, .token.important {
color: #FD971F;
}
.token.important, .token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
div.code-toolbar {
width: 100%;
}
pre[class*=language-] {
margin: 1.75em 0;
font-size: 1.4rem;
background: #111;
}

3032
assets/css/screen.css

File diff suppressed because it is too large

24
assets/js/gallery-card.js

@ -0,0 +1,24 @@
/* eslint-env browser */
/**
* Gallery card support
* Used on any individual post/page
*
* Detects when a gallery card has been used and applies sizing to make sure
* the display matches what is seen in the editor.
*/
(function (window, document) {
var resizeImagesInGalleries = function resizeImagesInGalleries() {
var images = document.querySelectorAll('.kg-gallery-image img');
images.forEach(function (image) {
var container = image.closest('.kg-gallery-image');
var width = image.attributes.width.value;
var height = image.attributes.height.value;
var ratio = width / height;
container.style.flex = ratio + ' 1 0%';
});
};
document.addEventListener('DOMContentLoaded', resizeImagesInGalleries);
})(window, document);

112
assets/js/infinite-scroll.js

@ -0,0 +1,112 @@
/* eslint-env browser */
/**
* Infinite Scroll
* Used on all pages where there is a list of posts (homepage, tag index, etc).
*
* When the page is scrolled to 300px from the bottom, the next page of posts
* is fetched by following the the <link rel="next" href="..."> that is output
* by {{ghost_head}}.
*
* The individual post items are extracted from the fetched pages by looking for
* a wrapper element with the class "post-card". Any found elements are appended
* to the element with the class "post-feed" in the currently viewed page.
*/
(function (window, document) {
// next link element
var nextElement = document.querySelector('link[rel=next]');
if (!nextElement) {
return;
}
// post feed element
var feedElement = document.querySelector('.post-feed');
if (!feedElement) {
return;
}
var buffer = 300;
var ticking = false;
var loading = false;
var lastScrollY = window.scrollY;
var lastWindowHeight = window.innerHeight;
var lastDocumentHeight = document.documentElement.scrollHeight;
function onPageLoad() {
if (this.status === 404) {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onResize);
return;
}
// append contents
var postElements = this.response.querySelectorAll('.post-card');
postElements.forEach(function (item) {
// document.importNode is important, without it the item's owner
// document will be different which can break resizing of
// `object-fit: cover` images in Safari
feedElement.appendChild(document.importNode(item, true));
});
// set next link
var resNextElement = this.response.querySelector('link[rel=next]');
if (resNextElement) {
nextElement.href = resNextElement.href;
} else {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onResize);
}
// sync status
lastDocumentHeight = document.documentElement.scrollHeight;
ticking = false;
loading = false;
}
function onUpdate() {
// return if already loading
if (loading) {
return;
}
// return if not scroll to the bottom
if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
ticking = false;
return;
}
loading = true;
var xhr = new window.XMLHttpRequest();
xhr.responseType = 'document';
xhr.addEventListener('load', onPageLoad);
xhr.open('GET', nextElement.href);
xhr.send(null);
}
function requestTick() {
ticking || window.requestAnimationFrame(onUpdate);
ticking = true;
}
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
function onResize() {
lastWindowHeight = window.innerHeight;
lastDocumentHeight = document.documentElement.scrollHeight;
requestTick();
}
window.addEventListener('scroll', onScroll, {passive: true});
window.addEventListener('resize', onResize);
requestTick();
})(window, document);

89
assets/js/lib/jquery.fitvids.js

@ -0,0 +1,89 @@
/*jshint browser:true */
/*!
* FitVids 1.3
*
*
* Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation
* This is an unofficial release, ported by John O'Nolan
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the MIT license
*
*/
;(function( $ ){
'use strict';
$.fn.fitVids = function( options ) {
var settings = {
customSelector: null,
ignore: null
};
if(!document.getElementById('fit-vids-style')) {
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
var head = document.head || document.getElementsByTagName('head')[0];
var css = '.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
var div = document.createElement("div");
div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
head.appendChild(div.childNodes[1]);
}
if ( options ) {
$.extend( settings, options );
}
return this.each(function(){
var selectors = [
'iframe[src*="player.vimeo.com"]',
'iframe[src*="youtube.com"]',
'iframe[src*="youtube-nocookie.com"]',
'iframe[src*="kickstarter.com"][src*="video.html"]',
'object',
'embed'
];
if (settings.customSelector) {
selectors.push(settings.customSelector);
}
var ignoreList = '.fitvidsignore';
if(settings.ignore) {
ignoreList = ignoreList + ', ' + settings.ignore;
}
var $allVideos = $(this).find(selectors.join(','));
$allVideos = $allVideos.not('object object'); // SwfObj conflict patch
$allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
$allVideos.each(function(){
var $this = $(this);
if($this.parents(ignoreList).length > 0) {
return; // Disable FitVids on this video.
}
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))
{
$this.attr('height', 9);
$this.attr('width', 16);
}
var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
aspectRatio = height / width;
if(!$this.attr('name')){
var videoName = 'fitvid' + $.fn.fitVids._count;
$this.attr('name', videoName);
$.fn.fitVids._count++;
}
$this.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
$this.removeAttr('height').removeAttr('width');
});
});
};
// Internal counter for unique video names.
$.fn.fitVids._count = 0;
// Works with either jQuery or Zepto
})( window.jQuery || window.Zepto );

61
assets/js/sticky-nav-title.js

@ -0,0 +1,61 @@
/* eslint-env browser */
/**
* Nav/Title replacement
* Used on invividual post pages, displays the post title in place of the nav
* bar when scrolling past the title
*
* Usage:
* ```
* Casper.stickyTitle({
* navSelector: '.site-nav-main',
* titleSelector: '.post-full-title',
* activeClass: 'nav-post-title-active'
* });
* ```
*/
(function (window, document) {
// set up Casper as a global object
if (!window.Casper) {
window.Casper = {};
}
window.Casper.stickyNavTitle = function stickyNavTitle(options) {
var nav = document.querySelector(options.navSelector);
var title = document.querySelector(options.titleSelector);
var lastScrollY = window.scrollY;
var ticking = false;
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
function requestTick() {
if (!ticking) {
requestAnimationFrame(update);
}
ticking = true;
}
function update() {
var trigger = title.getBoundingClientRect().top + window.scrollY;
var triggerOffset = title.offsetHeight + 35;
// show/hide post title
if (lastScrollY >= trigger + triggerOffset) {
nav.classList.add(options.activeClass);
} else {
nav.classList.remove(options.activeClass);
}
ticking = false;
}
window.addEventListener('scroll', onScroll, {passive: true});
update();
};
})(window, document);

BIN
assets/screenshot-desktop.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

BIN
assets/screenshot-mobile.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

59
author.hbs

@ -0,0 +1,59 @@
{{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
{{#author}}
{{!-- Everything inside the #author tags pulls data from the author --}}
<header class="site-archive-header">
{{> site-header}}
{{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
<div class="inner">
<div class="site-header-content author-header">
{{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
{{/if}}
<div class="author-header-content">
<h1 class="site-title">{{name}}</h1>
{{#if bio}}
<h2 class="author-bio">{{bio}}</h2>
{{/if}}
<div class="author-meta">
{{#if location}}
<div class="author-location">{{location}}</div>
{{/if}}
<div class="author-stats">
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
</div>
{{#if website}}
<span class="author-social-link"><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
{{/if}}
{{#if twitter}}
<span class="author-social-link"><a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a></span>
{{/if}}
{{#if facebook}}
<span class="author-social-link"><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</header>
{{/author}}
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
<div class="inner posts">
<div class="post-feed">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
</div>
</main>

160
default.hbs

@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="{{@site.lang}}">
<head>
{{!-- Document Settings --}}
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
{{!-- Base Meta --}}
<title>{{@site.title}}</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/fork-awesome.min.css"
integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
{{!-- Code highlight - prism + monokai --}}
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/plugins/line-numbers/prism-line-numbers.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/plugins/toolbar/prism-toolbar.min.css" />
<link rel="stylesheet" href="/assets/css/momokai_theme.css">
{{!-- This tag outputs SEO meta+structured data and other important settings --}}
{{ghost_head}}
</head>
<body class="{{body_class}}">
<div class="site-wrapper">
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
{{{body}}}
{{!-- The footer at the very bottom of the screen --}}
<footer class="site-footer outer">
<div class="site-footer-content inner">
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a>
<i class="fa fa-fw fa-copyright"></i>
{{date format="YYYY"}}
</section>
<nav class="site-footer-nav">
<a href="{{@site.url}}/writings">Writings</a>
<a href="https://git.sagidayan.com/sagi/casper-with-landing-page">Modified Casper Theme</a>
{{!-- {{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank"
rel="noopener">Facebook</a>{{/if}}
{{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank"
rel="noopener">Twitter</a>{{/if}} --}}
<a href="https://ghost.org" target="_blank" rel="noopener">Published with Ghost</a>
</nav>
</div>
</footer>
</div>
{{!-- The big email subscribe modal content --}}
{{#if @labs.members}}
<div class="subscribe-success-message">
<a class="subscribe-close" href="javascript:;"></a>
You've successfully subscribed to {{@site.title}}!
</div>
<div id="subscribe" class="subscribe-overlay">
<a class="subscribe-close" href="#"></a>
<div class="subscribe-overlay-content">
{{#if @site.logo}}
<img class="subscribe-overlay-logo" src="{{@site.logo}}" alt="{{@site.title}}" />
{{/if}}
<div class="subscribe-form">
<h1 class="subscribe-overlay-title">Subscribe to {{@site.title}}</h1>
<p class="subscribe-overlay-description">Stay up to date! Get all the latest & greatest posts delivered
straight to your inbox</p>
<form data-members-form="subscribe">
<div class="form-group">
<input class="subscribe-email" data-members-email placeholder="[email protected]"
autocomplete="false" />
<button class="button primary" type="submit">
<span class="button-content">Subscribe</span>
<span class="button-loader">{{> "icons/loader"}}</span>
</button>
</div>
<div class="message-success">
<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.
</div>
<div class="message-error">
Please enter a valid email address!
</div>
</form>
</div>
</div>
</div>
{{/if}}
{{!-- jQuery, required for fitvids --}}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
{{!-- Fitvids (for responsive video embeds), infinite scroll, floating header, and gallery card support --}}
<script src="{{asset "built/casper.js"}}"></script>
{{!-- Scripts for Members subscription --}}
<script>
// Parse the URL parameter
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var action = getParameterByName('action');
$(document).ready(function () {
if (action == 'subscribe') {
$('body').addClass("subscribe-success");
}
$('.subscribe-success-message .subscribe-close').click(function () {
$('.subscribe-success-message').addClass('close');
});
// Reset form on opening subscrion overlay
$('.subscribe-button').click(function () {
$('.subscribe-overlay form').removeClass();
$('.subscribe-email').val('');
});
});
</script>
{{!-- Code Highlight --}}
<script>
window.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre[class*=language-]').forEach(function (node) {
node.classList.add('line-numbers');
});
Prism.highlightAll();
});
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/toolbar/prism-toolbar.min.js"></script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/line-numbers/prism-line-numbers.min.js"></script>
{{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
{{{block "scripts"}}}
{{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
{{ghost_foot}}
</body>
</html>

38
error-404.hbs

@ -0,0 +1,38 @@
{{!--
This error template is used for all 404 errors, which might occur on your site.
It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
--}}
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
<header class="site-header">
{{> site-header}}
</header>
<main id="site-main" class="site-main outer error-content">
<div class="inner">
<section class="error-message">
<img class="face404" src="/assets/404-face.png" alt="404-face" />
{{!-- <h1 class="error-code">{{statusCode}}</h1> --}}
<p class="error-description">{{statusCode}} - {{message}}</p>
<a class="error-link" href="{{@site.url}}">Take me home →</a>
</section>
{{#get "posts" limit="3" include="authors,tags"}}
<div class="post-feed">
{{#foreach posts}}
{{> "post-card"}}
{{/foreach}}
</div>
{{/get}}
</div>
</main>
<style>
.face404 {
max-width: 265px;
width: 265px;
}
</style>

66
error.hbs

@ -0,0 +1,66 @@
{{!--
This error template is used for all 400/500 errors, except 404, which might occur on your site.
It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
You'll notice that we *don't* use any JavaScript, or ghost_head / ghost_foot in this file.
--}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>{{meta_title}}</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
</head>
<body>
<div class="site-wrapper">
<header class="site-header no-image">
<div class="site-nav-main outer">
<div class="inner">
<nav class="site-nav-center">