benaubin/__Skyline.md

## __Skyline.md

      
    Raw
  

              __Skyline.md
            
          
    Skyline is a refreshlingly-beautiful Ghost theme.
Defined by the images that cover the top of your home page, Skyline leaves a great impression on your vistors that starts the instance they open your site. Your posts are layed out as fabulous cards that tile down the page.
I paid an amazing amount of detail as I designed Skyline. Every option in Ghost's markdown processor supports looks amazing in Skyline. Beautiful fonts add to the artistry of the theme. Full-bleed images and videos take up the full width of the screen. Authors are recognized with their picture and bio after each of their posts. Skyline has great built in support for Facebook, Disqus and Carnival and can be easily extended to support others. Even subscriptions and error pages are custom designed to match the atmosphere of your site. We love it so much, it's the theme we use for this very site!
To recap, Skyline has:

Beautiful cover images
Amazing index layouts
Full markdown support
Support for any comment system, including built-in support for Facebook, Disqus, and Medium-style comments with Carnival.
Beautifully designed error pages
Support for Ghost Labs, such as subscriptions
Author details
Tag pages
Great navigation
And a ton more

We're so confident you'll love it, we provide a no-questions asked 30 day refund pollicy[^2] and 3 months of updates and support. A theme like this normally costs upwards of $40, but by cutting out the middleman, we're able to offer it for a price of $19.
The license allows ==unlimited uses== for you or a single client.
Purchase Skyline
Images


## _subscribe.scss
@import "typography";

.subscribe form {
  padding-top: 5rem;
  margin: 0 auto;

  width: 80%;
  @media (min-width: 750px) {
    padding-top: 0;
    width: 50%;
  }

  display: flex;
  .form-group {
    flex-grow: 1;
  }
}

.success {
  text-align: center;

  width: 30rem;
  margin: 0 auto;
}

.return-home {
  margin-top: 1rem;
  text-align: center;
}

## default.hbs
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>{{meta_title}}</title>

  <meta name="viewport" content="width=device-width, user-scalable=no" />

  <link rel="stylesheet" type="text/css" href="{{asset "vendor/prismjs/prism-okaidia.css"}}" />
  <link rel="stylesheet" type="text/css" href="{{asset "styles/base.css"}}" />

  {{{ghost_head}}}
</head>
<body class="{{body_class}}">
  {{{body}}}

  <script src={{asset "scripts/main.js"}}></script>
  {{{ghost_foot}}}
</body>
</html>

## main.js
let $ = require("jquery");
let Prism = require('prismjs');

window.jQuery = $;
window.Prism = Prism;

$(function(){
  let navbar = $(".navbar");

  let cover = navbar.hasClass('cover');

  let scroll = function(){
    let nextCover = !(navbar.offset().top - $(document).scrollTop() == 0);
    if(nextCover == cover) return;
    cover = nextCover;
    if(cover) {
      navbar.addClass("cover");
    } else {
      navbar.removeClass("cover");
    }
  };
  scroll();
  $(window).scroll(scroll);
})

## post.hbs
{{!< default }}

{{#with post}}

{{#> cover cover_image=feature_image title=@blog.title}}{{/cover}}

<div class="content">
  <article>
    <div class="post-header">
      <h1 class="post-title">{{title}}</h1>
      <div class="post-top-meta">
        {{author}} -
        <time datetime="{{date published_at format="YYYY-MM-DD"}}">
          {{date published_at format="MMMM DD, YYYY"}}
        </time>
      </div>
    </div>
    <div class="post-body">
      {{content}}
    </div>
    <div class="post-footer">
      {{> author }}
      {{> comments page-id=id author-name=author.name}}
    </div>
  </article>
</div>

{{/with}}
	@import "typography";

	.subscribe form {
	padding-top: 5rem;
	margin: 0 auto;

	width: 80%;
	@media (min-width: 750px) {
	padding-top: 0;
	width: 50%;
	}

	display: flex;
	.form-group {
	flex-grow: 1;
	}
	}

	.success {
	text-align: center;

	width: 30rem;
	margin: 0 auto;
	}

	.return-home {
	margin-top: 1rem;
	text-align: center;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>{{meta_title}}</title>

	<meta name="viewport" content="width=device-width, user-scalable=no" />

	<link rel="stylesheet" type="text/css" href="{{asset "vendor/prismjs/prism-okaidia.css"}}" />
	<link rel="stylesheet" type="text/css" href="{{asset "styles/base.css"}}" />

	{{{ghost_head}}}
	</head>
	<body class="{{body_class}}">
	{{{body}}}

	<script src={{asset "scripts/main.js"}}></script>
	{{{ghost_foot}}}
	</body>
	</html>
	let $ = require("jquery");
	let Prism = require('prismjs');

	window.jQuery = $;
	window.Prism = Prism;

	$(function(){
	let navbar = $(".navbar");

	let cover = navbar.hasClass('cover');

	let scroll = function(){
	let nextCover = !(navbar.offset().top - $(document).scrollTop() == 0);
	if(nextCover == cover) return;
	cover = nextCover;
	if(cover) {
	navbar.addClass("cover");
	} else {
	navbar.removeClass("cover");
	}
	};
	scroll();
	$(window).scroll(scroll);
	})
	{{!< default }}

	{{#with post}}

	{{#> cover cover_image=feature_image title=@blog.title}}{{/cover}}

	<div class="content">
	<article>
	<div class="post-header">
	<h1 class="post-title">{{title}}</h1>
	<div class="post-top-meta">
	{{author}} -
	<time datetime="{{date published_at format="YYYY-MM-DD"}}">
	{{date published_at format="MMMM DD, YYYY"}}
	</time>
	</div>
	</div>
	<div class="post-body">
	{{content}}
	</div>
	<div class="post-footer">
	{{> author }}
	{{> comments page-id=id author-name=author.name}}
	</div>
	</article>
	</div>

	{{/with}}