Preview

There are no notes for this item.

{% if scheme is empty %}
   {% set scheme = {
     color: 'cyan',
     hex: '#009DE0',
   } %}
{% endif %}

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{% block title %}Preview Layout{% endblock %}</title>

    <link media="all" rel="stylesheet" href="{{ '/styleguide/vendor/baguettebox/dist/baguetteBox.min.css'| path }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.2.0/css/ol.css" type="text/css">
    <link media="all" rel="stylesheet" href="{{ '/css/main.css' | path }}">
    <link media="all" rel="stylesheet" href="{{ '/css/styleguide.css'| path }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ ('/styleguide/img/favicon/build/' ~ scheme.color ~'/apple-touch-icon.png') | path }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ ('/styleguide/img/favicon/build/' ~ scheme.color ~ '/favicon-32x32.png') | path }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ ('/styleguide/img/favicon/build/' ~ scheme.color ~ '/favicon-16x16.png') | path }}">
    <link rel="manifest" href="{{ ('/styleguide/img/favicon/build/' ~ scheme.color ~ '/site.webmanifest') | path }}">
    <link rel="mask-icon" href="{{ ('/styleguide/img/favicon/build/' ~ scheme.color ~ '/safari-pinned-tab.svg') | path }}" color="{{ scheme.hex }}">
    <meta name="msapplication-TileColor" content="{{ scheme.hex }}">
    <meta name="theme-color" content="{{ scheme.hex }}">

    <!-- webfontLoader -->
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <script>
      WebFont.load({
        google: {
          families: ['Fira Sans:400,600,700']
        }
      });
    </script>

    <!-- gradually move all scripts to bottom! -->
    <script type="text/javascript" src="{{ '/styleguide/js/base-min.js' | path }}"></script>

    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body class="cs--{{ scheme.color }}">
    {% include '@skiplink' %}

    <div id="main-content">
      {% block content %}
        <div class="container">
          <div class="preview-container">
            {% if _target.isCollated %}
              <dl class="styleguide">
                {{ yield | raw }}
              </dl>
            {% else %}
              <div class="content-container">
                {{ yield | raw }}
              </div>
            {% endif %}
          </div>
        </div>
      {% endblock %}
    </div>

    <!-- hidden fields for screenreaders -->
    <span hidden id="image-gallery__open-gallery">open gallery</span>



    <!--  scripts -->
    <script type="text/javascript" src="{{ '/styleguide/vendor/baguettebox/src/baguetteBox.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/vendor/imagesloaded/imagesloaded.pkgd.min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/vendor/masonry-layout/dist/masonry.pkgd.min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/vendor/allietabs/allieTabs.min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/js/accordion.functions-min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/js/menu.functions-min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/js/checkbox_filter.functions-min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/js/modal.functions-min.js' | path }}"></script>

    <!--  JS bindings -->
    <script type="text/javascript" src="{{ '/styleguide/js/image-collections.bindings-min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/js/image-wall.bindings-min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/js/accordion.bindings-min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/js/menu.bindings-min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/js/checkbox_filter.bindings-min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/js/filter.bindings-min.js' | path }}"></script>
    <script type="text/javascript" src="{{ '/styleguide/js/modal.bindings-min.js' | path }}"></script>

  </body>
</html>
<!DOCTYPE html>

   <html lang="en">

   <head>
       <meta charset="utf-8">
       <title>Preview Layout</title>

       <link media="all" rel="stylesheet" href="../../styleguide/vendor/baguettebox/dist/baguetteBox.min.css">
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.2.0/css/ol.css" type="text/css">
       <link media="all" rel="stylesheet" href="../../css/main.css">
       <link media="all" rel="stylesheet" href="../../css/styleguide.css">
       <link rel="apple-touch-icon" sizes="180x180" href="../../styleguide/img/favicon/build/cyan/apple-touch-icon.png">
       <link rel="icon" type="image/png" sizes="32x32" href="../../styleguide/img/favicon/build/cyan/favicon-32x32.png">
       <link rel="icon" type="image/png" sizes="16x16" href="../../styleguide/img/favicon/build/cyan/favicon-16x16.png">
       <link rel="manifest" href="../../styleguide/img/favicon/build/cyan/site.webmanifest">
       <link rel="mask-icon" href="../../styleguide/img/favicon/build/cyan/safari-pinned-tab.svg" color="#009DE0">
       <meta name="msapplication-TileColor" content="#009DE0">
       <meta name="theme-color" content="#009DE0">

       <!-- webfontLoader -->
       <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
       <script>
           WebFont.load({
               google: {
                   families: ['Fira Sans:400,600,700']
               }
           });
       </script>

       <!-- gradually move all scripts to bottom! -->
       <script type="text/javascript" src="../../styleguide/js/base-min.js"></script>

       <meta name="MobileOptimized" content="320">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>

   <body class="cs--cyan">
       <a href="#main-content" class="skiplink">
           Skip to main content
       </a>

       <div id="main-content">
           <div class="container">
               <div class="preview-container">
                   <div class="content-container">

                   </div>
               </div>
           </div>
       </div>

       <!-- hidden fields for screenreaders -->
       <span hidden id="image-gallery__open-gallery">open gallery</span>

       <!--  scripts -->
       <script type="text/javascript" src="../../styleguide/vendor/baguettebox/src/baguetteBox.js"></script>
       <script type="text/javascript" src="../../styleguide/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
       <script type="text/javascript" src="../../styleguide/vendor/masonry-layout/dist/masonry.pkgd.min.js"></script>
       <script type="text/javascript" src="../../styleguide/vendor/allietabs/allieTabs.min.js"></script>
       <script type="text/javascript" src="../../styleguide/js/accordion.functions-min.js"></script>
       <script type="text/javascript" src="../../styleguide/js/menu.functions-min.js"></script>
       <script type="text/javascript" src="../../styleguide/js/checkbox_filter.functions-min.js"></script>
       <script type="text/javascript" src="../../styleguide/js/modal.functions-min.js"></script>

       <!--  JS bindings -->
       <script type="text/javascript" src="../../styleguide/js/image-collections.bindings-min.js"></script>
       <script type="text/javascript" src="../../styleguide/js/image-wall.bindings-min.js"></script>
       <script type="text/javascript" src="../../styleguide/js/accordion.bindings-min.js"></script>
       <script type="text/javascript" src="../../styleguide/js/menu.bindings-min.js"></script>
       <script type="text/javascript" src="../../styleguide/js/checkbox_filter.bindings-min.js"></script>
       <script type="text/javascript" src="../../styleguide/js/filter.bindings-min.js"></script>
       <script type="text/javascript" src="../../styleguide/js/modal.bindings-min.js"></script>

   </body>

   </html>
/* No context defined for this component. */