{% set htmlParameters = {
		'isStyleguide' : true,
		'bodyClass': 'styleguide ',
		'rootPath' : '/',
		'pageName' : 'Styleguide',
		'specificStyleguide': 'go-pro'
	}
%}

{% include "general/_includes/_html_head.njk" %}

<div class="js-scroll-nav">



	<!-- CONTENT ///////////////////////////////////////////////////// -->


	<section class="styleguide">
		<div class="styleguide__container">
			<main>


				<!-- INTRO //////////////////////////////////////// -->


				<h1 class="styleguide__title js-scroll-nav__title">{{ CONFIG.PROJECT_TITLE}}  - {{htmlParameters.specificStyleguide}} Styleguide</h1><br/>
				<p class="styleguide__p">
					Welcome to the {{ CONFIG.PROJECT_TITLE}}  - {{htmlParameters.specificStyleguide}} styleguide – an internal guide &amp; code repository for designing
					and coding projects for {{ CONFIG.PROJECT_TITLE}}  - {{htmlParameters.specificStyleguide}}.
				</p>
				<div class="a-alert is-information">
				    <p class="icon-alert">
				       This styleguide has dependecies on the general styleguide
				    </p>
				</div>
				<br/>
				<a href="../general/index.html" class="a-button">Go to general styleguide</a>

			</main>
		</div>
	</section>

	<!-- ATOMS ////////////////////////////////////////// -->
	<h1 class="styleguide__section-title js-scroll-nav__title">Atoms</h1>


	<section class="styleguide">
		<div class="styleguide__container">
			<main>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Logo</h1>
				<small>/sass/go-pro/atoms/_logo.scss</small>
				<p>
				</p>

				{% include "go-pro/atoms/logo.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/atoms/logo.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Search</h1>
				<small>/sass/go-pro/atoms/_search.scss</small>
				<p>
				</p>

				{% include "go-pro/atoms/search.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/atoms/search.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Date</h1>
				<small>/sass/go-pro/atoms/_date.scss</small>
				<p>
				</p>

				{% include "go-pro/atoms/date.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/atoms/date.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Location</h1>
				<small>/sass/go-pro/atoms/_location.scss</small>
				<p>
				</p>

				{% include "go-pro/atoms/location.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/atoms/location.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Avatar</h1>
				<small>/sass/go-pro/atoms/_avatar.scss</small>
				<p>
					Custom avatar component to display user images.<br/>
					Use <b>the background-image property on .a-avatar__img</b> to show a custom image.<br/>
					If no custom image shas been provied, we'll show a placeholder icon.
				</p>

				{% include "go-pro/atoms/avatar.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/atoms/avatar.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Link</h1>
				<small>/sass/go-pro/atoms/_link.scss</small>
				<p>
				</p>

				{% include "go-pro/atoms/link.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/atoms/link.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Topic</h1>
				<small>/sass/go-pro/atoms/_topic.scss</small>
				<p>
				</p>

				{% include "go-pro/atoms/topic.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/atoms/topic.njk" %}
					</code>
				</div>


				<h1 class="styleguide__title js-scroll-nav__sub-title">Card</h1>
				<small>/sass/go-pro/atoms/_card.scss</small>
				<p>Cards can be used to make certain actions stand out from the rest of the UI, without going so far as to use a button. Cards can also be used with elements other than <code>a</code>, but if you need the responsive wrapping behaviour, wrap the cards in a container element with the class <code>m-cards</code></p>

				{% include "go-pro/atoms/card.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/atoms/card.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Favorite button</h1>
				<small>/sass/go-pro/atoms/_favoritebutton.scss</small>

				<p>Simple button to toggle favorite status. Add <code>a-button--favorite-added</code> class to change appearance.</p>

				{% include "go-pro/atoms/favoritebutton.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/atoms/favoritebutton.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Topbar</h1>
				<small>/sass/go-pro/atoms/_topbar.scss</small>

				<p>Bar fixed at the top of the screen. Simple click to dismiss behaviour can be added with javascript.</p>
				<p>(in this case, a simple jquery <code>$('.a-topbar').fadeOut('slow')</code>)</p>

				{% include "go-pro/atoms/topbar.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/atoms/topbar.njk" %}
					</code>
				</div>

			</main>
		</div>
	</section>

	<!-- MOLECULES ////////////////////////////////////////// -->
	<h1 class="styleguide__section-title js-scroll-nav__title">Molecules</h1>


	<section class="styleguide">
		<div class="styleguide__container">
			<main>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Sections</h1>
				<small>/sass/go-pro/molecules/_section.scss</small>
				<p>
					Sections are used to group content &amp; consists of 3 parts.
				</p>
				<ul>
					<li>
						<b>.m-section</b> is the wrapping element.
					</li>
					<li>
						<b>.m-section__content</b> is used to wrap the content and give it padding.
					</li>
					<li>
						<b>.m-section__sidebar</b> (optional) can be used to add a sidebar to a section
					</li>
				</ul>
				<p>
				We also provide a few modifiers to add variation to these sections:</p>
				<ul>
					<li>
						<b>.m-section--sidebar-right</b> moves the sidebar to the right <u>on desktop</u>
					</li>
					<li>
						<b>.m-section--sidebar-up</b> moves the sidebar up a notch <u>on desktop</u>
					</li>
				</ul>

				<p>
					You can easily use multiple sections on a page and can easily dictate the order of the sidebar &amp; content on mobile by simply putting them in the correct order in the HTML.
				</p>

				<br/>
				<a href="/go-pro/pages/general-layout.html" class="a-button">View demo</a>

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						<section class="m-section">
							<div class="m-section__sidebar">
								<!-- this optional element holds the sidebar -->
							</div>
							<div class="m-section__content">
								<!-- this element holds the main content -->
							</div>
						</section>
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Content Block</h1>
				<small>/sass/go-pro/molecules/_content-block.scss</small>
				<p>
					These content-block molecules are the main building blocks of our website, most content can be grouped in these elements. Content-blocks consists of the following elements:
				</p>
				<ul>
					<li>
						<b>.m-content-block__header</b>
					</li>
					<li>
						<b>.m-content-block__content</b>
					</li>
					<li>
						<b>.m-content-block__list</b>
					</li>
					<li>
						<b>.m-content-block__footer</b>
					</li>
				</ul>
				<p>
					We also offer them in 3 extra flavours, depending on how much you want to make them stand out:
				</p>
				<ul>
					<li>
						<b>.m-content-block--classic</b> wraps the content in a border and puts some emphasize on the header.</li>
					<li>
						<b>.m-content-block--subtle</b> wraps the content in a light grey background and ads some padding.
					</li>
					<li>
						<b>.m-content-block--highlight</b> gives it a bright red background colour and white text to make it really stand out. <u>Use this one with caution!</u>
					</li>
				</ul>

				<br/>
				{% include "go-pro/molecules/content-block.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/content-block.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Heading</h1>
				<small>/sass/go-pro/molecules/_heading.scss</small>
				<p>

				</p>

				{% include "go-pro/molecules/heading.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/heading.njk" %}
					</code>
				</div>


				<h1 class="styleguide__title js-scroll-nav__sub-title">Breadcrumb</h1>
				<small>/sass/go-pro/molecules/_breadcrumb.scss</small>
				<p>
					Use <b>.m-breadcrumb--light</b> to display the light version. Best used on a colored background.
				</p>

				{% include "go-pro/molecules/breadcrumb.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/breadcrumb.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Main Navigation</h1>
				<small>/sass/go-pro/molecules/_main-navigation.scss</small>
				<p>
				</p>

				{% include "go-pro/molecules/main-navigation.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/main-navigation.njk" %}
					</code>
				</div>


				<h1 class="styleguide__title js-scroll-nav__sub-title">Profile Menu</h1>
				<small>/sass/go-pro/molecules/_profile-menu.scss</small>
				<p>
				</p>

				{% include "go-pro/molecules/profile-menu.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/profile-menu.njk" %}
					</code>
				</div>


				<h1 class="styleguide__title js-scroll-nav__sub-title">Event</h1>
				<small>/sass/go-pro/molecules/_event.scss</small>
				<p>
				</p>

				{% include "go-pro/molecules/event.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/event.njk" %}
					</code>
				</div>


				<h1 class="styleguide__title js-scroll-nav__sub-title">News</h1>
				<small>/sass/go-pro/molecules/_news.scss</small>
				<p>
				</p>

				{% include "go-pro/molecules/news.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/news.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Shares</h1>
				<small>/sass/go-pro/molecules/_shares.scss</small>

				<p>Shares block, change the links and icons as needed.</p>

				{% include "go-pro/molecules/shares.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/shares.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Social feeds</h1>
				<small>/sass/go-pro/molecules/_social-feeds.scss</small>

				<p>Social feeds block, usable in both a horizontal or vertical orientation. Switch between the two modes by adding the class <code>m-social-feeds--horizontal</code> or <code>m-social-feeds--vertical</code> to the container, respectively. Content will be provided by the social platform's embed functionality, so here we just provide an appropriately sized container.</p>

				{% include "go-pro/molecules/social-feeds.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/social-feeds.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Contact fiche</h1>
				<small>/sass/go-pro/molecules/_contact-fiche.scss</small>

				<p>Contact fiches can be used on their own, or wrapped inside a Content Block.</p>

				{% include "go-pro/molecules/contact-fiche.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/contact-fiche.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Newsletter</h1>
				<small>/sass/go-pro/molecules/_newsletter.scss</small>

				<p>Newsletter block.</p>

				{% include "go-pro/molecules/newsletter.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/newsletter.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Related News</h1>
				<small>/sass/go-pro/molecules/_related-news.scss</small>

				<p>Related news block.</p>

				{% include "go-pro/molecules/related-news.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/related-news.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Popup</h1>
				<small>/sass/go-pro/molecules/_popup.scss</small>

				<p>
				</p>

				{% include "go-pro/molecules/popup.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/molecules/popup.njk" %}
					</code>
				</div>


			</main>
		</div>
	</section>


	<!-- ORGANISMS ////////////////////////////////////////// -->
	<h1 class="styleguide__section-title js-scroll-nav__title">Organisms</h1>


	<section class="styleguide">
		<div class="styleguide__container">
			<main>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Main</h1>
				<small>/sass/go-pro/organisms/_main.scss</small>
				<p>
					The main organism wraps the entire site, including the header and footer, &amp; adds a container around it.
				</p>
				<br/>
				<a href="/go-pro/pages/general-layout.html" class="a-button">View demo</a>

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						<main class="o-main">
							<header>
								<!-- header goes here -->
							</header>
							<div class="o-main__content">
								<!-- this element holds the main content -->
							</div>
							<footer>
								<!-- footer goes here -->
							</footer>
						</main>
					</code>
				</div>


				<h1 class="styleguide__title js-scroll-nav__sub-title">Header</h1>
				<small>/sass/go-pro/organisms/_header.scss</small>

				<p></p>

				{% include "go-pro/organisms/header.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/organisms/header.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Categories</h1>
				<small>/sass/go-pro/organisms/_categories.scss</small>

				<p>Collapsing behaviour is toggled via javascript by adding or removing the class <code>o-category--active</code> to the category item. Add the relevant javascript listeners to the <code>o-category__header</code> and <code>o-category__close</code> elements for each <code>o-category</code> element. <i>(see source code for simple jquery proof of concept)</i></p>

				{% include "go-pro/organisms/categories.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/organisms/categories.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Category Header</h1>
				<small>/sass/go-pro/organisms/_category-header.scss</small>

				<p>Top header for category pages. Will scale up to fit any number of tags. Background photo is set using inline styles, this should be integrated into the backend. Make sure to use high-resolution photos in either square (1:1) or 4:3 aspect ratios for optimal display across devices. Avoid using widescreen (16:9) or non-standard ratios, as it might leave the image looking blurry or stretched on mobile devices. <code>h1</code> to <code>h4</code> headings are supported, and are automatically given a slight amount of text-shadow to ensure readability against an unpredictable background.</p>

				{% include "go-pro/organisms/category-header.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/organisms/category-header.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Sidebar Navigation</h1>
				<small>/sass/go-pro/organisms/_sidebar-nav.scss</small>

				<p>Sidebar navigation with support for up to two levels of indented links. Add the class <code>o-sidebar-nav__item--active</code> to the containing <code>&lt;li&gt;</code> to show active page. Add class <code>o-sidebar-nav__item--expanded</code> to expand child nodes.</p>

				{% include "go-pro/organisms/sidebar-nav.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/organisms/sidebar-nav.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Footer</h1>
				<small>/sass/go-pro/organisms/_footer.scss</small>

				<p>Footer organism. On mobile, certain columns behave like collapsible components by toggling the class <code>o-footer__collapsible_column--open</code> on the containing column.</p>

				{% include "go-pro/organisms/footer.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/organisms/footer.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">News List</h1>
				<small>/sass/go-pro/organisms/_news-list.scss</small>

				<p>A list of news molecules. Featured news molecules will always be full width. Normal news molecules will be split into columns on tablet &amp; desktop.</p>

				{% include "go-pro/organisms/news-list.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "go-pro/organisms/news-list.njk" %}
					</code>
				</div>


			</main>
		</div>
	</section>



</div>

{% include "general/_includes/_html_footer.njk" %}