City of Ghent Style Guide

No notes defined.

Preview 

{% 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 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/checkbox_dynamic.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/checkbox_dynamic.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 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/checkbox_dynamic.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/checkbox_dynamic.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. */