4 {{!-- Document Settings --}}
8 <title>{{meta_title}}</title>
10 {{!-- Mobile Meta --}}
11 <meta name="HandheldFriendly" content="True" />
12 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
15 <link rel="shortcut icon" href="{{asset "favicon.ico"}}">
19 {{!-- Styles'n'Scripts --}}
20 <link href="https://fonts.googleapis.com/css?family=Lora:700%7CCabin:400,700" rel="stylesheet">
22 /* ==========================================================================
24 ========================================================================== */
36 /* ==========================================================================
37 0. normalize.css v3.0.3 | MIT License | git.io/normalize | (minified)
38 ========================================================================== */
41 font-family: sans-serif;
43 -ms-text-size-adjust: 100%;
44 -webkit-text-size-adjust: 100%;
67 display: inline-block;
68 vertical-align: baseline;
70 audio:not([controls]) {
79 text-decoration: none;
80 background-color: transparent;
87 border-bottom: 1px dotted;
110 vertical-align: baseline;
133 box-sizing: content-box;
143 font-family: monospace, monospace;
160 text-transform: none;
163 html input[type="button"],
165 input[type="submit"] {
168 -webkit-appearance: button;
171 html input[disabled] {
174 button::-moz-focus-inner,
175 input::-moz-focus-inner {
182 input[type="checkbox"],
183 input[type="radio"] {
184 box-sizing: border-box;
187 input[type="number"]::-webkit-inner-spin-button,
188 input[type="number"]::-webkit-outer-spin-button {
191 input[type="search"] {
192 -webkit-appearance: textfield;
194 input[type="search"]::-webkit-search-cancel-button,
195 input[type="search"]::-webkit-search-decoration {
196 -webkit-appearance: none;
200 padding: 0.35em 0.625em 0.75em;
201 border: 1px solid #c0c0c0;
215 border-collapse: collapse;
223 /* ==========================================================================
224 1. General - Setting up some base styles
225 ========================================================================== */
232 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
240 letter-spacing: 0.01rem;
241 font-family: "Cabin", serif;
244 text-rendering: geometricPrecision;
246 -webkit-font-feature-settings: "kern" 1;
247 -moz-font-feature-settings: "kern" 1;
248 -o-font-feature-settings: "kern" 1;
267 font-family: "Lora", sans-serif;
269 text-rendering: geometricPrecision;
271 -webkit-font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
272 -moz-font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
273 -o-font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
278 letter-spacing: -1px;
288 letter-spacing: -0.6px;
319 text-rendering: geometricPrecision;
321 -webkit-font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
322 -moz-font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
323 -o-font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
346 text-overflow: ellipsis;
370 border-top: #efefef 1px solid;
378 box-sizing: border-box;
380 border-left: 10px solid #FFF100;
384 -moz-box-sizing: border-box;
393 display: inline-block;
394 margin: 0.8em 0 0.8em 1.5em;
399 blockquote small:before {
400 content: "\2014 \00A0";
412 background-color: #fdffb6;
418 border: #e3edf3 1px solid;
421 white-space: pre-wrap;
422 font-family: monospace;
423 background-color: #f7f7f7;
424 display: inline-block;
427 border: 1px solid #f7f7f7;
434 max-width: calc(100% - 30px);
436 font-feature-settings: "liga" 0;
438 -webkit-font-feature-settings: "liga" 0;
439 -moz-font-feature-settings: "liga" 0;
444 box-sizing: border-box;
445 margin: 0 0 1.75em 0;
448 font-family: Inconsolata, monospace, sans-serif;
450 background-color: #FFFDF8;
452 border: 1px solid #F7F2E7;
458 -moz-box-sizing: border-box;
465 background: transparent;
466 white-space: pre-wrap;
471 display: inline-block;
472 margin-bottom: 0.4em;
474 border: #ccc 1px solid;
477 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),
478 0 1px 0 0 #fff inset;
480 text-shadow: #fff 0 1px 0;
486 box-sizing: border-box;
490 background-color: transparent;
492 -moz-box-sizing: border-box;
498 border-top: #efefef 1px solid;
508 table caption + thead tr:first-child th,
509 table caption + thead tr:first-child td,
510 table colgroup + thead tr:first-child th,
511 table colgroup + thead tr:first-child td,
512 table thead:first-child tr:first-child th,
513 table thead:first-child tr:first-child td {
517 table tbody + tbody {
518 border-top: #efefef 2px solid;
522 background-color: #fff;
525 table tbody > tr:nth-child(odd) > td,
526 table tbody > tr:nth-child(odd) > th {
527 background-color: #f6f6f6;
530 table.plain tbody > tr:nth-child(odd) > td,
531 table.plain tbody > tr:nth-child(odd) > th {
532 background: transparent;
537 .fluid-width-video-wrapper {
542 /* When a video is inside the fitvids wrapper, drop the
543 margin on the iframe, cause it breaks stuff. */
544 .fluid-width-video-wrapper iframe,
545 .fluid-width-video-wrapper amp-iframe {
556 border: #e7eef2 1px solid;
560 font-family: "Cabin", sans-serif;
565 -webkit-appearance: none;
576 input[type="text"]:focus,
577 input[type="email"]:focus,
578 input[type="search"]:focus,
579 input[type="tel"]:focus,
580 input[type="url"]:focus,
581 input[type="password"]:focus,
582 input[type="number"]:focus,
583 input[type="date"]:focus,
584 input[type="month"]:focus,
585 input[type="week"]:focus,
586 input[type="time"]:focus,
587 input[type="datetime"]:focus,
588 input[type="datetime-local"]:focus,
592 border: #bbc7cc 1px solid;
602 /* ==========================================================================
604 ========================================================================== */
619 /* ==========================================================================
621 ========================================================================== */
629 box-sizing: border-box;
632 background-size: cover;
634 background-color: #FFF100;
636 -webkit-box-sizing: border-box;
637 -moz-box-sizing: border-box;
654 text-decoration: none;
655 font-family: "Cabin", sans-serif;
671 border-bottom: #ebf2f6 1px solid;
672 word-wrap: break-word;
692 text-decoration: none;
705 display: inline-block;
707 background-color: #FFF100;
708 text-transform: uppercase;
719 display: inline-block;
723 margin: 2.5rem 0 0 0;
725 padding-bottom: 30px;
726 border-top: 1px #E8E8E8 solid;
737 text-transform: uppercase;
738 text-decoration: none;
745 .post .tags a:before {
749 /* Keep images centered, and allow images wider than the main
750 text column to break out. */
751 .post-content amp-img,
752 .post-content amp-anim {
753 /* Centers an image by (1) pushing its left edge to the
754 center of its container and (2) shifting the entire image
755 in the opposite direction by half its own width.
756 Works for images that are larger than their containers. */
762 width: 100%; /* expand with to image + margins */
764 transform: translateX(-50%);
766 -webkit-transform: translateX(-50%); /* for Safari and iOS */
767 -ms-transform: translateX(-50%); /* for IE9 */
771 border-bottom: 1px solid #000;
788 .footnotes p a:last-child {
789 text-decoration: none;
792 .editor-content figcaption{
795 border-bottom: 1px solid #cccccc;
798 /* ==========================================================================
799 4. Footer - The bottom the AMP Post
800 ========================================================================== */
807 font-family: "Cabin", sans-serif;
810 margin: 2.5rem auto 0 auto;
814 text-decoration: none;
817 .site-footer a:hover {
818 border-bottom: #000000 1px solid;
835 {{!-- The AMP boilerplate --}}
836 <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>
837 <script async src="https://cdn.ampproject.org/v0.js"></script>
843 <body class="amp-template">
845 <header class="main-header">
846 <nav class="blog-title">
847 <a href="{{@site.url}}">{{@site.title}}</a>
851 <main class="content" role="main">
852 <article class="post">
854 <div class="post-meta">
855 <time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
856 <div class="tags">{{tags}}</div>
858 <h1 class="post-title">{{title}}</h1>
859 <div class="content-holder">
860 {{#if feature_image}}
861 <a href="{{img_url feature_image}}">
862 <amp-img src="{{img_url feature_image absolute="true"}}" width="600" height="400" layout="responsive"></amp-img>
866 <section class="post-content">
868 <div class="editor-content">{{amp_content}}</div>
875 <footer class="site-footer clearfix">
876 <div class="copyright">{{t "Copyright"}} © {{date format="YYYY"}}, <a href="{{@site.url}}">{{@site.title}}</a>. {{t "All Right Reserved"}}.</div>