Instantly share code, notes, and snippets.
Last active
August 31, 2018 20:20
-
Save ScottHelme/6ca5a1c8b7c88582965f7e21b4c40b94 to your computer and use it in GitHub Desktop.
My custom amp.hbs template for Ghost v0.10.0
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html ⚡> | |
<head> | |
<meta charset="utf-8"> | |
<title>{{meta_title}}</title> | |
<meta name="description" content="{{meta_description}}" /> | |
<meta name="HandheldFriendly" content="True" /> | |
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | |
<link rel="shortcut icon" href="/assets/images/favicon.ico"> | |
{{amp_ghost_head}} | |
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,600,400" /> | |
<style amp-custom>mark,table th{color:#000}.main-header,.post,.site-footer,sub,sup{position:relative}article,aside,details,figcaption,figure,footer,header,hr,main,menu,nav,section,summary{display:block}amp-img,hr,img,legend{border:0}body,html{max-height:100%;height:100%}body,dl,h1,h2,h3,h4,h5,h6,ol,p,ul{text-rendering:geometricPrecision}dl dt,svg:not(:root){overflow:hidden}body,li li{margin:0}blockquote,hr{margin:1.75em 0}hr,legend,pre code,pre tt,td,th{padding:0}blockquote small,kbd{display:inline-block}a,table{background-color:transparent}pre,textarea{overflow:auto}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{color:#4a4a4a}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,blockquote cite,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#fdffb6}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0}sup{top:-.5em}sub{bottom:-.25em}figure{margin:1em 40px}hr{box-sizing:content-box;height:1px;border-top:#efefef 1px solid}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}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[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}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}html{font-size:62.5%;-webkit-tap-highlight-color:transparent}body{color:#3a4145;background:#f4f8fb;letter-spacing:.01rem;font-family:Merriweather,serif;font-size:1.8rem;line-height:1.75em;-webkit-font-feature-settings:"kern" 1;-moz-font-feature-settings:"kern" 1;-o-font-feature-settings:"kern" 1}::-moz-selection{background:#d6edff}::selection{background:#d6edff}h1,h2,h3,h4,h5,h6{margin:0 0 .3em;color:#2e2e2e;font-family:"Open Sans",sans-serif;line-height:1.15em;-webkit-font-feature-settings:"dlig" 1,"liga" 1,"lnum" 1,"kern" 1;-moz-font-feature-settings:"dlig" 1,"liga" 1,"lnum" 1,"kern" 1;-o-font-feature-settings:"dlig" 1,"liga" 1,"lnum" 1,"kern" 1}code,pre,tt{background:#f7fafb;font-family:Inconsolata,monospace,sans-serif}h1{text-indent:-2px;letter-spacing:-1px;font-size:2.6rem}h2{letter-spacing:0;font-size:2.4rem}h3{letter-spacing:-.6px;font-size:2.1rem}h4{font-size:1.9rem}h5,h6{font-size:1.8rem}a:hover{color:#111}dl,ol,p,ul{margin:0 0 2.5rem;font-size:1.5rem;-webkit-font-feature-settings:"liga" 1,"onum" 1,"kern" 1;-moz-font-feature-settings:"liga" 1,"onum" 1,"kern" 1;-o-font-feature-settings:"liga" 1,"onum" 1,"kern" 1}ol,ul{padding-left:2em}ol ol,ol ul,ul ol,ul ul{margin:0 0 .4em;padding-left:2em}dl dt{float:left;clear:left;margin-bottom:1em;width:180px;text-align:right;text-overflow:ellipsis;white-space:nowrap;font-weight:700}dl dd{margin-bottom:1em;margin-left:200px}li{margin:.4em 0}blockquote{box-sizing:border-box;padding:0 0 0 1.75em;border-left:#4a4a4a .4em solid;-moz-box-sizing:border-box}pre,table{box-sizing:border-box;width:100%}blockquote p{margin:.8em 0;font-style:italic}blockquote small{margin:.8em 0 .8em 1.5em;color:#ccc;font-size:.9em}blockquote small:before{content:"\2014 \00A0"}blockquote cite a{font-weight:400}code,tt{padding:1px 3px;border:1px solid #e3edf3;border-radius:2px;white-space:pre-wrap;font-size:.85em;font-feature-settings:"liga" 0;-webkit-font-feature-settings:"liga" 0;-moz-font-feature-settings:"liga" 0}pre{margin:0 0 1.75em;padding:10px;border:1px solid #e3edf3;border-radius:3px;white-space:pre;font-size:.9em;-moz-box-sizing:border-box}.blog-title a,.post-meta,.site-footer,input,select,textarea{font-family:"Open Sans",sans-serif}pre code,pre tt{border:none;background:0 0;white-space:pre-wrap;font-size:inherit}kbd{margin-bottom:.4em;padding:1px 8px;border:1px solid #ccc;background:#f4f4f4;border-radius:4px;box-shadow:0 1px 0 rgba(0,0,0,.2),0 1px 0 0 #fff inset;color:#666;text-shadow:#fff 0 1px 0;font-size:.9em;font-weight:700}table{border-spacing:0;border-collapse:collapse;margin:1.75em 0;max-width:100%;-moz-box-sizing:border-box}table td,table th{padding:8px;border-top:#efefef 1px solid;vertical-align:top;text-align:left;line-height:20px}table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-top:0}table tbody+tbody{border-top:#efefef 2px solid}table table table{background-color:#fff}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:#f6f6f6}table.plain tbody>tr:nth-child(odd)>td,table.plain tbody>tr:nth-child(odd)>th{background:0 0}.fluid-width-video-wrapper,amp-iframe,iframe{display:block;margin:1.75em 0}.fluid-width-video-wrapper amp-iframe,.fluid-width-video-wrapper iframe{margin:0}input,select,textarea{margin:0 0 5px;padding:6px 9px;width:260px;outline:0;border:1px solid #e7eef2;background:#fff;border-radius:4px;box-shadow:none;font-size:1.6rem;line-height:1.4em;font-weight:100;-webkit-appearance:none}textarea{min-width:250px;min-height:80px;max-width:340px;width:100%;height:auto}input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=url]:focus,input[type=password]:focus,input[type=date]:focus,input[type=month]:focus,input[type=week]:focus,input[type=time]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=number]:focus,input[type=search]:focus,textarea:focus{outline:0;border:1px solid #bbc7cc;background:#fff}select{width:270px;height:30px;line-height:30px}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.clearfix{zoom:1}.main-header{display:table;overflow:hidden;box-sizing:border-box;width:100%;height:50px;background:center center no-repeat #5ba4e5;background-size:cover;text-align:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.content{background:#fff;padding-top:15px}.blog-title,.content{margin:auto;max-width:600px}.blog-title a{display:block;padding-right:16px;padding-left:16px;height:50px;color:#fff;text-decoration:none;font-size:16px;line-height:50px;font-weight:600}.post{margin-top:0;margin-right:16px;margin-left:16px;padding-bottom:0;max-width:100%;border-bottom:#ebf2f6 1px solid;word-wrap:break-word;font-size:.95em;line-height:1.65em}.post-header{margin-bottom:1rem}.post-title{margin-bottom:0}.post-title a{text-decoration:none}.post-meta{display:block;margin:3px 0 0;color:#9eabb3;font-size:1.3rem;line-height:2.2rem}.post-meta a{color:#9eabb3;text-decoration:none}.post-meta a:hover{text-decoration:underline}.footnotes p a:last-child,.site-footer a{text-decoration:none}.post-meta .author{margin:0;font-size:1.3rem;line-height:1.3em}.post-date{display:inline-block;text-transform:uppercase;white-space:nowrap;font-size:1.2rem;line-height:1.2em}.post-image{margin:0;padding-top:3rem;padding-bottom:30px;border-top:1px #E8E8E8 solid}.post-content amp-anim,.post-content amp-img{position:relative;left:50%;display:block;padding:0;min-width:0;max-width:112%;width:calc(100% + 32px);height:auto;transform:translateX(-50%);-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%)}.copyright,.poweredby{display:block;width:45%}.footnotes{font-size:1.3rem;line-height:1.6em;font-style:italic}.footnotes li{margin:.6rem 0}.footnotes p{margin:0}.site-footer{margin:0 auto 20px;padding:1rem 15px;max-width:600px;color:rgba(0,0,0,.5);font-size:1.1rem;line-height:1.75em}.site-footer a{color:rgba(0,0,0,.5);font-weight:700}.site-footer a:hover{border-bottom:#bbc7cc 1px solid}.poweredby{float:right;text-align:right}.copyright{float:left}</style> | |
<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> | |
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> | |
<script async src="https://cdn.ampproject.org/v0.js"></script> | |
{{amp_components}} | |
</head> | |
<body class="amp-template"> | |
{{#post}} | |
<header class="main-header"> | |
<nav class="blog-title"> | |
<a href="{{@blog.url}}">{{@blog.title}}</a> | |
</nav> | |
</header> | |
<main class="content" role="main"> | |
<article class="post"> | |
<header class="post-header"> | |
<h1 class="post-title">{{title}}</h1> | |
<section class="post-meta"> | |
<time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="YYYY-MM-DD"}}</time> - <a href="{{url absolute="true"}}">Desktop Version</a> | |
</section> | |
</header> | |
<section class="post-content"> | |
{{amp_content}} | |
</section> | |
</article> | |
</main> | |
{{/post}} | |
<footer class="site-footer clearfix"> | |
<section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en_GB" target="_blank">CC BY-SA 4.0</a></section> | |
</footer> | |
<amp-analytics type="googleanalytics" id="analytics1"> | |
<script type="application/json">{"vars":{"account":"UA-44469875-1"},"triggers":{"trackPageview":{"on":"visible","request":"pageview"}}}</script> | |
</amp-analytics> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment