amp.hbs

   1 <!DOCTYPE html>
   2 <html ⚡>
   3 <head>
   4     {{!-- Document Settings --}}
   5     <meta charset="utf-8">
   6
   7     {{!-- Page Meta --}}
   8     <title>{{meta_title}}</title>
   9
  10     {{!-- Mobile Meta --}}
  11     <meta name="HandheldFriendly" content="True" />
  12     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  13
  14     {{!-- Brand icon --}}
  15     <link rel="shortcut icon" href="{{asset "favicon.ico"}}">
  16
  17     {{amp_ghost_head}}
  18
  19     {{!-- Styles'n'Scripts --}}
  20     <link href="https://fonts.googleapis.com/css?family=Lora:700%7CCabin:400,700" rel="stylesheet">
  21     <style amp-custom>
  22         /* ==========================================================================
  23            Table of Contents
  24            ========================================================================== */
  25
  26         /*
  27
  28             0. Normalize
  29             1. General
  30             2. Utilities
  31             3. AMP Post
  32             4. Footer
  33
  34         */
  35
  36         /* ==========================================================================
  37            0. normalize.css v3.0.3 | MIT License | git.io/normalize | (minified)
  38            ========================================================================== */
  39
  40         html {
  41             font-family: sans-serif;
  42
  43             -ms-text-size-adjust: 100%;
  44             -webkit-text-size-adjust: 100%;
  45         }
  46         body {
  47             margin: 0;
  48         }
  49         article,
  50         aside,
  51         details,
  52         figcaption,
  53         figure,
  54         footer,
  55         header,
  56         main,
  57         menu,
  58         nav,
  59         section,
  60         summary {
  61             display: block;
  62         }
  63         audio,
  64         canvas,
  65         progress,
  66         video {
  67             display: inline-block;
  68             vertical-align: baseline;
  69         }
  70         audio:not([controls]) {
  71             display: none;
  72             height: 0;
  73         }
  74         [hidden],
  75         template {
  76             display: none;
  77         }
  78         a {
  79             text-decoration: none;
  80             background-color: transparent;
  81         }
  82         a:active,
  83         a:hover {
  84             outline: 0;
  85         }
  86         abbr[title] {
  87             border-bottom: 1px dotted;
  88         }
  89         b,
  90         strong {
  91             font-weight: bold;
  92         }
  93         dfn {
  94             font-style: italic;
  95         }
  96         h1 {
  97             margin: 0.67em 0;
  98             font-size: 2em;
  99         }
 100         mark {
 101             background: #ff0;
 102             color: #000;
 103         }
 104         small {
 105             font-size: 80%;
 106         }
 107         sub,
 108         sup {
 109             position: relative;
 110             vertical-align: baseline;
 111             font-size: 75%;
 112             line-height: 0;
 113         }
 114         sup {
 115             top: -0.5em;
 116         }
 117         sub {
 118             bottom: -0.25em;
 119         }
 120         img {
 121             border: 0;
 122         }
 123         amp-img {
 124             border: 0;
 125         }
 126         svg:not(:root) {
 127             overflow: hidden;
 128         }
 129         figure {
 130             margin: 1em 40px;
 131         }
 132         hr {
 133             box-sizing: content-box;
 134             height: 0;
 135         }
 136         pre {
 137             overflow: auto;
 138         }
 139         code,
 140         kbd,
 141         pre,
 142         samp {
 143             font-family: monospace, monospace;
 144             font-size: 1em;
 145         }
 146         button,
 147         input,
 148         optgroup,
 149         select,
 150         textarea {
 151             margin: 0;
 152             color: inherit;
 153             font: inherit;
 154         }
 155         button {
 156             overflow: visible;
 157         }
 158         button,
 159         select {
 160             text-transform: none;
 161         }
 162         button,
 163         html input[type="button"],
 164         input[type="reset"],
 165         input[type="submit"] {
 166             cursor: pointer;
 167
 168             -webkit-appearance: button;
 169         }
 170         button[disabled],
 171         html input[disabled] {
 172             cursor: default;
 173         }
 174         button::-moz-focus-inner,
 175         input::-moz-focus-inner {
 176             padding: 0;
 177             border: 0;
 178         }
 179         input {
 180             line-height: normal;
 181         }
 182         input[type="checkbox"],
 183         input[type="radio"] {
 184             box-sizing: border-box;
 185             padding: 0;
 186         }
 187         input[type="number"]::-webkit-inner-spin-button,
 188         input[type="number"]::-webkit-outer-spin-button {
 189             height: auto;
 190         }
 191         input[type="search"] {
 192             -webkit-appearance: textfield;
 193         }
 194         input[type="search"]::-webkit-search-cancel-button,
 195         input[type="search"]::-webkit-search-decoration {
 196             -webkit-appearance: none;
 197         }
 198         fieldset {
 199             margin: 0 2px;
 200             padding: 0.35em 0.625em 0.75em;
 201             border: 1px solid #c0c0c0;
 202         }
 203         legend {
 204             padding: 0;
 205             border: 0;
 206         }
 207         textarea {
 208             overflow: auto;
 209         }
 210         optgroup {
 211             font-weight: bold;
 212         }
 213         table {
 214             border-spacing: 0;
 215             border-collapse: collapse;
 216         }
 217         td,
 218         th {
 219             padding: 0;
 220         }
 221
 222
 223         /* ==========================================================================
 224            1. General - Setting up some base styles
 225            ========================================================================== */
 226
 227         html {
 228             max-height: 100%;
 229             height: 100%;
 230             font-size: 62.5%;
 231
 232             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 233         }
 234
 235         body {
 236             max-height: 100%;
 237             height: 100%;
 238             color: #646464;
 239             background: #fff;
 240             letter-spacing: 0.01rem;
 241             font-family: "Cabin", serif;
 242             font-size: 16px;
 243             line-height: 24px;
 244             text-rendering: geometricPrecision;
 245
 246             -webkit-font-feature-settings: "kern" 1;
 247             -moz-font-feature-settings: "kern" 1;
 248             -o-font-feature-settings: "kern" 1;
 249         }
 250
 251         ::-moz-selection {
 252             background: #d6edff;
 253         }
 254
 255         ::selection {
 256             background: #d6edff;
 257         }
 258
 259         h1,
 260         h2,
 261         h3,
 262         h4,
 263         h5,
 264         h6 {
 265             margin: 0 0 30px 0;
 266             color: #333333;
 267             font-family: "Lora", sans-serif;
 268             line-height: 1.15em;
 269             text-rendering: geometricPrecision;
 270
 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;
 274         }
 275
 276         h1 {
 277             text-indent: -2px;
 278             letter-spacing: -1px;
 279             font-size: 2.6rem;
 280         }
 281
 282         h2 {
 283             letter-spacing: 0;
 284             font-size: 2.4rem;
 285         }
 286
 287         h3 {
 288             letter-spacing: -0.6px;
 289             font-size: 2.1rem;
 290         }
 291
 292         h4 {
 293             font-size: 1.9rem;
 294         }
 295
 296         h5 {
 297             font-size: 1.8rem;
 298         }
 299
 300         h6 {
 301             font-size: 1.8rem;
 302         }
 303
 304         a {
 305             color: #000000;
 306         }
 307
 308         a:hover {
 309             color: #555555;
 310         }
 311
 312         p,
 313         ul,
 314         ol,
 315         dl {
 316             margin: 0 0 20px 0;
 317             font-size: 16px;
 318             line-height: 24px;
 319             text-rendering: geometricPrecision;
 320
 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;
 324         }
 325
 326         ol,
 327         ul {
 328             padding-left: 2em;
 329         }
 330
 331         ol ol,
 332         ul ul,
 333         ul ol,
 334         ol ul {
 335             margin: 0 0 0.4em 0;
 336             padding-left: 2em;
 337         }
 338
 339         dl dt {
 340             float: left;
 341             clear: left;
 342             overflow: hidden;
 343             margin-bottom: 1em;
 344             width: 180px;
 345             text-align: right;
 346             text-overflow: ellipsis;
 347             white-space: nowrap;
 348             font-weight: 700;
 349         }
 350
 351         dl dd {
 352             margin-bottom: 1em;
 353             margin-left: 200px;
 354         }
 355
 356         li {
 357             margin: 0;
 358         }
 359
 360         li li {
 361             margin: 0;
 362         }
 363
 364         hr {
 365             display: block;
 366             margin: 1.75em 0;
 367             padding: 0;
 368             height: 1px;
 369             border: 0;
 370             border-top: #efefef 1px solid;
 371         }
 372
 373         figure{
 374             margin: 30px 0;
 375         }
 376
 377         blockquote {
 378             box-sizing: border-box;
 379             margin: 0;
 380             border-left: 10px solid #FFF100;
 381             padding-left: 20px;
 382             font-style: italic;
 383
 384             -moz-box-sizing: border-box;
 385         }
 386
 387         blockquote p {
 388             margin: 0.8em 0;
 389             font-style: italic;
 390         }
 391
 392         blockquote small {
 393             display: inline-block;
 394             margin: 0.8em 0 0.8em 1.5em;
 395             color: #ccc;
 396             font-size: 0.9em;
 397         }
 398
 399         blockquote small:before {
 400             content: "\2014 \00A0";
 401         }
 402
 403         blockquote cite {
 404             font-weight: 700;
 405         }
 406
 407         blockquote cite a {
 408             font-weight: normal;
 409         }
 410
 411         mark {
 412             background-color: #fdffb6;
 413         }
 414
 415         code,
 416         tt {
 417             padding: 1px 3px;
 418             border: #e3edf3 1px solid;
 419             background: #f7fafb;
 420             border-radius: 2px;
 421             white-space: pre-wrap;
 422             font-family: monospace;
 423             background-color: #f7f7f7;
 424             display: inline-block;
 425             line-height: 24px;
 426             vertical-align: top;
 427             border: 1px solid #f7f7f7;
 428             padding: 0px 7px;
 429             margin: 0 5px;
 430             font-size: 14px;
 431             line-height: 25px;
 432             white-space: pre;
 433             color: #555555;
 434             max-width: calc(100% - 30px);
 435             overflow: auto;
 436             font-feature-settings: "liga" 0;
 437
 438             -webkit-font-feature-settings: "liga" 0;
 439             -moz-font-feature-settings: "liga" 0;
 440         }
 441
 442         pre {
 443             overflow: auto;
 444             box-sizing: border-box;
 445             margin: 0 0 1.75em 0;
 446             width: 100%;
 447             border-radius: 3px;
 448             font-family: Inconsolata, monospace, sans-serif;
 449
 450             background-color: #FFFDF8;
 451             display: block;
 452             border: 1px solid #F7F2E7;
 453             padding: 22px 25px;
 454             font-size: 14px;
 455             line-height: 25px;
 456             white-space: pre;
 457             color: #995F32;
 458             -moz-box-sizing: border-box;
 459         }
 460
 461         pre code,
 462         pre tt {
 463             padding: 0;
 464             border: none;
 465             background: transparent;
 466             white-space: pre-wrap;
 467             font-size: inherit;
 468         }
 469
 470         kbd {
 471             display: inline-block;
 472             margin-bottom: 0.4em;
 473             padding: 1px 8px;
 474             border: #ccc 1px solid;
 475             background: #f4f4f4;
 476             border-radius: 4px;
 477             box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),
 478             0 1px 0 0 #fff inset;
 479             color: #666;
 480             text-shadow: #fff 0 1px 0;
 481             font-size: 0.9em;
 482             font-weight: 700;
 483         }
 484
 485         table {
 486             box-sizing: border-box;
 487             margin: 1.75em 0;
 488             max-width: 100%;
 489             width: 100%;
 490             background-color: transparent;
 491
 492             -moz-box-sizing: border-box;
 493         }
 494
 495         table th,
 496         table td {
 497             padding: 8px;
 498             border-top: #efefef 1px solid;
 499             vertical-align: top;
 500             text-align: left;
 501             line-height: 20px;
 502         }
 503
 504         table th {
 505             color: #000;
 506         }
 507
 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 {
 514             border-top: 0;
 515         }
 516
 517         table tbody + tbody {
 518             border-top: #efefef 2px solid;
 519         }
 520
 521         table table table {
 522             background-color: #fff;
 523         }
 524
 525         table tbody > tr:nth-child(odd) > td,
 526         table tbody > tr:nth-child(odd) > th {
 527             background-color: #f6f6f6;
 528         }
 529
 530         table.plain tbody > tr:nth-child(odd) > td,
 531         table.plain tbody > tr:nth-child(odd) > th {
 532             background: transparent;
 533         }
 534
 535         iframe,
 536         amp-iframe,
 537         .fluid-width-video-wrapper {
 538             display: block;
 539             margin: 1.75em 0;
 540         }
 541
 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 {
 546             margin: 0;
 547         }
 548
 549         textarea,
 550         select,
 551         input {
 552             margin: 0 0 5px 0;
 553             padding: 6px 9px;
 554             width: 260px;
 555             outline: 0;
 556             border: #e7eef2 1px solid;
 557             background: #fff;
 558             border-radius: 4px;
 559             box-shadow: none;
 560             font-family: "Cabin", sans-serif;
 561             font-size: 1.6rem;
 562             line-height: 1.4em;
 563             font-weight: 100;
 564
 565             -webkit-appearance: none;
 566         }
 567
 568         textarea {
 569             min-width: 250px;
 570             min-height: 80px;
 571             max-width: 340px;
 572             width: 100%;
 573             height: auto;
 574         }
 575
 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,
 589         textarea:focus {
 590             outline: none;
 591             outline-width: 0;
 592             border: #bbc7cc 1px solid;
 593             background: #fff;
 594         }
 595
 596         select {
 597             width: 270px;
 598             height: 30px;
 599             line-height: 30px;
 600         }
 601
 602         /* ==========================================================================
 603            2. Utilities
 604            ========================================================================== */
 605
 606         /* Clears shit */
 607         .clearfix:before,
 608         .clearfix:after {
 609             content: " ";
 610             display: table;
 611         }
 612         .clearfix:after {
 613             clear: both;
 614         }
 615         .clearfix {
 616             zoom: 1;
 617         }
 618
 619         /* ==========================================================================
 620            3. AMP Post
 621            ========================================================================== */
 622
 623
 624
 625         .main-header {
 626             position: relative;
 627             display: table;
 628             overflow: hidden;
 629             box-sizing: border-box;
 630             width: 100%;
 631             height: 50px;
 632             background-size: cover;
 633             text-align: left;
 634             background-color: #FFF100;
 635
 636             -webkit-box-sizing: border-box;
 637             -moz-box-sizing: border-box;
 638         }
 639
 640         .content {
 641             padding-top: 25px;
 642         }
 643         .blog-title,
 644         .content {
 645             margin: auto;
 646             max-width: 600px;
 647         }
 648
 649         .blog-title a {
 650             display: block;
 651             padding-right: 16px;
 652             padding-left: 16px;
 653             height: 50px;
 654             text-decoration: none;
 655             font-family: "Cabin", sans-serif;
 656             font-size: 16px;
 657             line-height: 50px;
 658             color: #333333;
 659             font-weight: bold;
 660             position: relative;
 661             text-align: center;
 662         }
 663
 664         .post {
 665             position: relative;
 666             margin-top: 0;
 667             margin-right: 16px;
 668             margin-left: 16px;
 669             padding-bottom: 0;
 670             max-width: 100%;
 671             border-bottom: #ebf2f6 1px solid;
 672             word-wrap: break-word;
 673             font-size: 0.95em;
 674             line-height: 1.65em;
 675         }
 676
 677         .post-header {
 678             margin-bottom: 1rem;
 679         }
 680
 681         .post-title {
 682             color: #000000;
 683             font-size: 32px;
 684             line-height: 38px;
 685             text-align: center;
 686             margin-top: 20px;
 687             margin-bottom: 35px;
 688         }
 689
 690         .post-title a {
 691             color: #FF4400;
 692             text-decoration: none;
 693         }
 694
 695         .content-holder{
 696             margin-bottom: 20px;
 697         }
 698
 699         time {
 700             color: #000000;
 701             font-weight: bold;
 702             font-size: 14px;
 703             line-height: 20px;
 704             text-align: center;
 705             display: inline-block;
 706             padding: 2px 7px;
 707             background-color: #FFF100;
 708             text-transform: uppercase;
 709         }
 710
 711         .post-meta{
 712             text-align: center;
 713         }
 714
 715         .post-meta .author {
 716             margin: 0;
 717             font-size: 1.3rem;
 718             line-height: 1.3em;
 719             display: inline-block;
 720         }
 721
 722         .post-image {
 723             margin: 2.5rem 0 0 0;
 724             padding-top: 3rem;
 725             padding-bottom: 30px;
 726             border-top: 1px #E8E8E8 solid;
 727         }
 728
 729         .post .tags{
 730             margin-top: 10px;
 731         }
 732
 733         .post .tags a {
 734             color: #B7B7B7;
 735             font-size: 14px;
 736             line-height: 20px;
 737             text-transform: uppercase;
 738             text-decoration: none;
 739         }
 740
 741         .post .tags a:hover{
 742             color: #000;
 743         }
 744
 745         .post .tags a:before {
 746             content: '#';
 747         }
 748
 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. */
 757             position: relative;
 758             left: 50%;
 759             display: block;
 760             padding: 0;
 761             min-width: 0;
 762             width: 100%; /* expand with to image + margins */
 763             height: auto;
 764             transform: translateX(-50%);
 765
 766             -webkit-transform: translateX(-50%); /* for Safari and iOS */
 767             -ms-transform: translateX(-50%); /* for IE9 */
 768         }
 769
 770         .post-content a{
 771             border-bottom: 1px solid #000;
 772         }
 773
 774         .footnotes {
 775             font-size: 1.3rem;
 776             line-height: 1.6em;
 777             font-style: italic;
 778         }
 779
 780         .footnotes li {
 781             margin: 0.6rem 0;
 782         }
 783
 784         .footnotes p {
 785             margin: 0;
 786         }
 787
 788         .footnotes p a:last-child {
 789             text-decoration: none;
 790         }
 791
 792         .editor-content figcaption{
 793             padding: 10px 15px;
 794             font-size: 14px;
 795             border-bottom: 1px solid #cccccc;
 796         }
 797
 798         /* ==========================================================================
 799            4. Footer - The bottom the AMP Post
 800            ========================================================================== */
 801
 802         .site-footer {
 803             position: relative;
 804             padding: 2rem 0;
 805             max-width: 600px;
 806             color: #fff;
 807             font-family: "Cabin", sans-serif;
 808             font-size: 16px;
 809             line-height: 24px;
 810             margin: 2.5rem auto 0 auto;
 811         }
 812
 813         .site-footer a {
 814             text-decoration: none;
 815         }
 816
 817         .site-footer a:hover {
 818             border-bottom: #000000 1px solid;
 819         }
 820
 821         .poweredby {
 822             display: block;
 823             float: right;
 824             width: 45%;
 825             text-align: right;
 826         }
 827
 828         .copyright {
 829             display: block;
 830             text-align: center;
 831         }
 832
 833     </style>
 834
 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>
 838
 839     {{amp_components}}
 840
 841 </head>
 842
 843 <body class="amp-template">
 844     {{#post}}
 845     <header class="main-header">
 846         <nav class="blog-title">
 847             <a href="{{@site.url}}">{{@site.title}}</a>
 848         </nav>
 849     </header>
 850
 851     <main class="content" role="main">
 852         <article class="post">
 853
 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>
 857             </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>
 863                     </a>
 864                 {{/if}}
 865             </div>
 866             <section class="post-content">
 867
 868                 <div class="editor-content">{{amp_content}}</div>
 869
 870             </section>
 871
 872         </article>
 873     </main>
 874     {{/post}}
 875     <footer class="site-footer clearfix">
 876         <div class="copyright">{{t "Copyright"}} &copy; {{date format="YYYY"}}, <a href="{{@site.url}}">{{@site.title}}</a>. {{t "All Right Reserved"}}.</div>
 877     </footer>
 878 </body>
 879 </html>