_layouts/collection.html

<!DOCTYPE html>
<html class="is-collection" data-template="collection">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>{{page.collection_name}} - {{site.title}}</title>
    <meta name="description" content="Learn how {{page.collection_name}} works in CSS.">
    <link rel="stylesheet" type="text/css" href="{{site.url}}/css/website.css?v={{ site.time | date: "%Y%m%d%H%M" }}">

    <meta property="og:url" content="{{site.url}}{{page.url}}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{page.collection_name}} - {{site.title}}">
    <meta property="og:image" content="{{site.url}}/images/css-reference-share.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:description" content="Learn how {{page.collection_name}} works in CSS.">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@jgthms">
    <meta name="twitter:creator" content="@jgthms">
    <meta name="twitter:title" content="{{page.collection_name}} - {{site.title}}">
    <meta name="twitter:image" content="{{site.url}}/images/css-reference-share.png">
    <meta name="twitter:description" content="Learn how {{page.collection_name}} works in CSS.">

    {% include favicons.html %}
  </head>
  <body>
    {% include menu.html %}
    <main class="main">
      <header class="heading">
        <div class="heading-content">
          <h1 class="heading-title">
            <strong>{{page.collection_name}}</strong> in CSS
          </h1>
          <p class="heading-description">The CSS properties that allow you to {{page.description}}</p>
        </div>
        <p class="heading-share">
          <strong class="heading-share-label">Share this page</strong>
          <a class="heading-share-button is-twitter"
            data-social-network="Twitter"
            data-social-action="tweet"
            data-social-target="{{site.url}}{{page.url}}"
            href="https://twitter.com/intent/tweet?url={{site.url | url_encode}}{{page.url | url_encode}}&text={{page.collection_name | prepend: 'Learn how ' | append: ' works in CSS' | url_encode}}"
            rel="external nofollow"
            target="_blank">
            {% include svg/twitter.html %}
          </a>
          <a class="heading-share-button is-facebook"
            href="https://www.facebook.com/sharer.php?u={{site.url | url_encode}}{{page.url | url_encode}}"
            rel="external nofollow"
            target="_blank">
            {% include svg/facebook.html %}
          </a>
        </p>
      </header>
      {% include ff.html %}
      <div id="alo" class="alo">
        {% include bsa.html %}
      </div>
      <section class="properties">
        {{content}}
      </section>
    </main>
    {% include modals/share.html %}
    {% include google-fonts.html %}
    <script src="{{site.url}}/javascript/clipboard.min.js"></script>
    <script src="{{site.url}}/javascript/main.js"></script>
    <script src="{{site.url}}/javascript/collection.js"></script>
    {% include noscript.html %}
  </body>
</html>