_layouts/amp.html

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>{{ page.title }}</title>
    <link rel="canonical" href="{{ doc.url | prepend: site.baseurl | prepend: site.url }}" />
    <link rel="icon" type="image/png" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
    <script type='application/ld+json'>
      {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "mainEntityOfPage":{
          "@type": "WebPage",
          "@id": "{{ doc.url | prepend: site.baseurl | prepend: site.url }}"
        },
        "headline": "{{ page.title }}",
        "image": {
          "@type": "ImageObject",
          "url": "{{ image_src }}",
          "height": {{ image_height }},
          "width": {{ image_width }}
        },
        "datePublished": "{{ page.date }}",
        "dateModified": "{{ page.date }}",
        "author": {
          "@type": "Person",
          "name": "Yegor Bugayenko"
        },
        "publisher": {
          "@type": "Organization",
          "name": "yegor256.com",
          "logo": {
            "@type": "ImageObject",
            "url": "https://www.yegor256.com/images/face-512x512.jpg",
            "width": 512,
            "height": 512
          }
        },
        "description": "{{ page.description }}",
        "keywords": ["{{ page.keywords | join:'", "' }}"]
      }
    </script>
    <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>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500"/>
    <style amp-custom="amp-custom">
      @font-face {
        font-family: 'Cambria';
        src: url('https://www.yegor256.com/fonts/cambria/2EAA54_2_0.ttf');
      }
      body { font-family: 'Cambria', 'Times New Roman', serif; padding: .5em; font-size: 1.2em; }
      article { width: 600px; max-width: 100%; margin-left: auto; margin-right: auto; }
      pre, code { font-family: 'Source Code Pro', 'Courier New', monospace; font-size: .8em; }
      code { padding: 0 .3em; background-color: lightgray; }
      a, a:hover, a:visited { color: inherit; }
      .intro { color: red; font-size: .75em; }
      .photo { border-radius: 50%; }
      pre { overflow-x:scroll; }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <article>
      <p class="intro">
        This is a mobile version, full one is
        <a href="{{ doc.url | prepend: site.baseurl | prepend: site.url }}">here</a>.
      </p>
      <p>
        <amp-img src="/images/face-256x256.jpg" width="80" height="80"
          alt="{{ site.author.name }}" class="photo"></amp-img>
      </p>
      <p>{{ site.author.name }}<br/>{{ page.date | date: "%-d %B %Y" }}</p>
      <h1>{{ page.title }}</h1>
      {{ content }}
    </article>
  </body>
</html>