Skip to content

Commit 388e38c

Browse files
author
Donovan Muller
committed
Updated to Ghost 0.11.
Basic support for AMP.
1 parent 5a6b556 commit 388e38c

File tree

20 files changed

+645
-15
lines changed

20 files changed

+645
-15
lines changed

app/amp.hbs

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html ⚡>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="description" content="{{meta_description}}"/>
6+
<meta name="HandheldFriendly" content="True"/>
7+
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
8+
9+
<title>{{meta_title}}</title>
10+
11+
{{^if @blog.logo}}
12+
<link rel="shortcut icon" href="{{asset "images/apple-touch-icon.png"}}"/>
13+
<link rel="apple-touch-icon" href="{{asset "images/apple-touch-icon.png"}}"/>
14+
{{/if}}
15+
16+
{{amp_ghost_head}}
17+
18+
<link href="assets/css/amp.css" inline amp-custom>
19+
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
20+
21+
<script async src="https://cdn.ampproject.org/v0.js"></script>
22+
23+
{{amp_components}}
24+
</head>
25+
26+
<body class="amp-template">
27+
{{#post}}
28+
{{^is "home"}}
29+
<nav class="navigation" role="banner">
30+
<div class="navigation-wrapper">
31+
<a href="{{@blog.url}}" class="logo">
32+
<span>{{@blog.title}}</span>
33+
</a>
34+
</div>
35+
</nav>
36+
{{/is}}
37+
38+
<header class="main-header">
39+
<nav class="blog-title">
40+
<a href="{{@blog.url}}">{{@blog.title}}</a>
41+
</nav>
42+
</header>
43+
44+
<main>
45+
46+
<article class="{{post_class}}">
47+
48+
<header class="post-header">
49+
<h1 class="post-title">{{title}}</h1>
50+
<div class="post-meta">
51+
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">
52+
{{date format="DD MMMM YYYY"}}
53+
</time>
54+
<div class="tags">
55+
{{#foreach tags}}
56+
<a href="{{url}}" title="{{name}}"><i class="icon-tags"></i>&nbsp;{{name}}</a>
57+
{{/foreach}}
58+
</div>
59+
</div>
60+
</header>
61+
62+
<section class="post-content">
63+
{{amp_content}}
64+
</section>
65+
66+
<footer class="post-meta">
67+
{{#author}}
68+
by <a href="{{url}}">{{name}}</a>
69+
<p>{{bio}}</p>
70+
{{/author}}
71+
</footer>
72+
73+
</article>
74+
75+
</main>
76+
{{/post}}
77+
<footer class="footer" role="contentinfo">
78+
<section class="legal">
79+
<aside>Brage theme by <a href="http://switchbit.io">Switchbit</a></aside>
80+
</section>
81+
</footer>
82+
</body>
83+
</html>
84+

app/assets/css/amp.css

Lines changed: 240 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

app/assets/scss/amp.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import "grid-settings.scss";
2+
@import "bourbon";
3+
@import "neat";
4+
5+
// Layout based on https://smacss.com
6+
@import "base/colours.scss";
7+
@import "base/amp-typography.scss";
8+
9+
@import "layout/amp-header.scss";
10+
@import "layout/amp-post.scss";
11+
@import "layout/amp-footer.scss";
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
@function headings($from: 1, $to: 6) {
2+
@if $from == $to {
3+
@return 'h#{$from}';
4+
} @else {
5+
@return 'h#{$from},' + headings($from+1, $to);
6+
}
7+
}
8+
9+
html {
10+
font-family: 'Lora', serif;
11+
}
12+
13+
#{headings()} {
14+
font-family: "sans-serif";
15+
color: $primary-colour;
16+
margin-top: 6vh;
17+
18+
a, a:visited {
19+
font-family: "sans-serif";
20+
21+
&:hover {
22+
color: lighten($primary-colour, 10%);
23+
}
24+
}
25+
}
26+
27+
a {
28+
overflow-wrap: break-word;
29+
word-wrap: break-word;
30+
text-decoration: none;
31+
color: $primary-colour;
32+
33+
&:hover {
34+
text-decoration: underline;
35+
}
36+
}
37+
38+
p, li {
39+
line-height: $golden;
40+
font-size: 1.2rem;
41+
color: $black;
42+
}
43+
44+
blockquote {
45+
padding: 20px 40px;
46+
background-color: lighten($code-grey, 2%);
47+
margin: 0;
48+
border-bottom: $secondary-colour 1px solid;
49+
}

0 commit comments

Comments
 (0)