Skip to content

Instantly share code, notes, and snippets.

@benaubin

benaubin/__Skyline.md

Last active October 23, 2017 05:15
Show Gist options
  • Save benaubin/a2ca0c438c63ac597fea0ac68365ef35 to your computer and use it in GitHub Desktop.
Save benaubin/a2ca0c438c63ac597fea0ac68365ef35 to your computer and use it in GitHub Desktop.
Download ZIP
Some sample files from Skyline - my refreshingly beautiful modern Ghost Theme.
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

Screen-Shot-2017-10-03-at-4.20.13-PM-1

Screen-Shot-2017-10-03-at-4.20.17-PM

Screen-Shot-2017-10-03-at-4.20.51-PM

Screen-Shot-2017-10-03-at-4.21.26-PM-1

Screen-Shot-2017-10-03-at-4.24.02-PM

Screen-Shot-2017-10-03-at-4.24.58-PM-1

Screen-Shot-2017-10-03-at-4.23.48-PM

Raw
_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;
}
Raw
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>
Raw
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);
})
Raw
post.hbs
{{!< default }}
{{#with post}}
{{#> cover cover_image=feature_image [email protected]}}{{/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}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment