There are no notes for this item.
{% if _target.meta.cs is empty %}
{% set scheme = {
color: 'cyan',
hex: '#009DE0',
} %}
{% else %}
{% set scheme = _target.meta.cs %}
{% 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>
<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/vendor/modal/index.js' | path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/accordion.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/table.functions-min.js' | path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/file.functions-min.js' | path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/breadcrumbs.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>
<script type="text/javascript" src="{{ '/styleguide/js/table.bindings-min.js' | path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/file.bindings-min.js' | path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/breadcrumbs.bindings-min.js' | path }}"></script>
<script>
var cs = getCookie('cs');
if (cs) {
document.body.className = cs;
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return null;
}
</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>
<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/vendor/modal/index.js"></script>
<script type="text/javascript" src="../../styleguide/js/accordion.functions-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/checkbox_filter.functions-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/table.functions-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/file.functions-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/breadcrumbs.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>
<script type="text/javascript" src="../../styleguide/js/table.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/file.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/breadcrumbs.bindings-min.js"></script>
<script>
var cs = getCookie('cs');
if (cs) {
document.body.className = cs;
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return null;
}
</script>
</body>
</html>
/* No context defined for this component. */