File: /var/www/tana/frontend/node_modules/michelangelo/kss_styleguide/custom-template/index.hbs
<!DOCTYPE html>
<html>
<head>
<title>{{options.title}}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="generator" content="kss-node">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,300">
<link rel="stylesheet" href="kss-assets/vendor/prism.css">
<link rel="stylesheet" href="kss-assets/css/kss.css">
{{{styles}}}
</head>
<body class="kss-body">
<!-- header. -->
<header class="kss-header">
<section class="kss-header__inner">
<a class="kss-header__hamburger-trigger">
<div class="kss-header__hamburger"></div>
</a>
<h1 class="kss-header__title kss-title">{{options.title}}</h1>
</section>
</header>
<!-- /header. -->
<!-- navigation. -->
<section class="kss-navigation">
<h1 class="kss-navigation__title kss-title">{{options.title}}</h1>
<ul class="kss-nav">
<li class="kss-nav__item">
<a href="index.html">
<span class="kss-nav__ref">0</span>
<span class="kss-nav__name">Introduction</span>
</a>
</li>
{{#each menu}}
<li class="kss-nav__item">
<a class="{{#if isActive}}kss-state-active{{/if}}" href="section-{{referenceURI}}.html">
<span class="kss-nav__ref">{{referenceNumber}}</span>
<span class="kss-nav__name">{{header}}</span>
</a>
{{#if isActive}}
{{#if children}}
<ul class="kss-nav__subnav">
{{#each children}}
<li class="kss-nav__item {{#if isGrandChild}}kss-nav__item--grandchild{{/if}}">
<a href="section-{{../referenceURI}}.html#kssref-{{referenceURI}}">
<span class="kss-nav__ref">{{referenceNumber}}</span>
<span class="kss-nav__name">{{header}}</span>
</a>
</li>
{{/each}}
</ul>
{{/if}}
{{/if}}
</li>
{{/each}}
</ul>
</section>
<!-- /navigation. -->
<!-- documentation. -->
<section class="kss-documentation">
{{#if homepage}}
<article class="kss-markdown">
{{{homepage}}}
</article>
{{else}}
<!--
display each section, in order.
the "root" element comes first in this loop, and can be detected using
the "#if @first" block as seen below.
-->
{{#each sections}}
{{#if @first}}
<header class="kss-section kss-section--depth-{{depth}}" id="kssref-{{referenceURI}}">
{{else}}
<section class="kss-section kss-section--depth-{{depth}}" id="kssref-{{referenceURI}}">
{{/if}}
<article class="kss-section__content">
{{#if source.filename}}
<p class="kss-section__source">Source: <span>{{source.filename}}</span>, line <span>{{source.line}}</span></p>
{{/if}}
<a class="kss-section__permalink" href="#kssref-{{referenceURI}}">
<h{{depth}} class="kss-section__item kss-section__item--depth-{{depth}}">
<span class="kss-section__ref">{{referenceNumber}}</span>
<span class="kss-section__name">{{header}}</span>
</h{{depth}}>
</a>
{{#if description}}
<div class="kss-section__description{{#if deprecated}} state-deprecated{{/if}}{{#if experimental}} state-experimental{{/if}}">{{{description}}}</div>
{{/if}}
{{#if parameters}}
<ul class="kss-parameters">
{{#each parameters}}
<li class="kss-parameters__item">
<p class="kss-parameters__description">
{{{description}}}
{{#if defaultValue}}
Defaults to: <code>{{defaultValue}}</code>
{{/if}}
</p>
<code class="kss-parameters__name">{{name}}</code>
</li>
{{/each}}
</ul>
{{/if}}
</article>
{{#if example}}
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example{{#if modifiers}}s{{/if}}</h1>
{{#if modifiers}}
<h2 class="kss-modifiers__name">Default styling</h2>
{{/if}}
<div class="kss-modifiers__example">{{{markup}}}</div>
{{#each modifiers}}
<article class="kss-modifiers__modifier">
<h2 class="kss-modifiers__name">{{name}}</h2>
<p class="kss-modifiers__description">{{{description}}}</p>
<div class="kss-modifiers__example">{{{markup}}}</div>
</article>
{{/each}}
</article>
{{#if example}}
<article class="kss-section__markup">
<pre><code class="language-markup">{{markup}}</code></pre>
</article>
{{/if}}
{{/if}}
{{#if @first}}
</header>
{{else}}
</section>
{{/if}}
{{/each}}
{{/if}}
</section>
<!-- /documentation. -->
<!-- scripts. -->
<script src="kss-assets/vendor/jquery.js"></script>
<script src="kss-assets/vendor/prism.js"></script>
<script src="kss-assets/js/kss.js"></script>
{{{scripts}}}
<!-- /scripts. -->
</body>
</html>