reorg theme

src/assets/fonts/HKGrotesk/stylesheet.css

@@ -0,0 +1,100 @@
+/*
+Copyright (c) 2015, Alfredo Marco Pradil (hello@hanken.co), with Reserved Font Name HK Grotesk.
+https://hanken.co/product/hk-grotesk/
+
+Licence: SIL Open Font License (OFL)
+*/
+
+
+
+@font-face {
+    font-family: 'hk_groteskbold';
+    src: url('HKGrotesk-Bold.woff2') format('woff2'),
+         url('HKGrotesk-Bold.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'hk_groteskitalic';
+    src: url('HKGrotesk-Italic.woff2') format('woff2'),
+         url('HKGrotesk-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'hk_grotesklight';
+    src: url('HKGrotesk-Light.woff2') format('woff2'),
+         url('HKGrotesk-Light.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'hk_grotesklight_italic';
+    src: url('HKGrotesk-LightItalic.woff2') format('woff2'),
+         url('HKGrotesk-LightItalic.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'hk_groteskmedium';
+    src: url('HKGrotesk-Medium.woff2') format('woff2'),
+         url('HKGrotesk-Medium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'hk_groteskregular';
+    src: url('HKGrotesk-Regular.woff2') format('woff2'),
+         url('HKGrotesk-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'hk_grotesksemibold';
+    src: url('HKGrotesk-SemiBold.woff2') format('woff2'),
+         url('HKGrotesk-SemiBold.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+@font-face {
+    font-family: 'hk_groteskbold';
+    src: url('HKGrotesk-Bold.woff2') format('woff2'),
+         url('HKGrotesk-Bold.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}

src/assets/images/demo/customizable.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="270px" height="270px" viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{fill:none;stroke:#3F5D69;stroke-width:0.5069;stroke-miterlimit:10;}
+	.st2{fill:#4F5764;}
+	.st3{fill:url(#SVGID_1_);}
+	.st4{fill:url(#SVGID_2_);}
+	.st5{fill:url(#SVGID_3_);}
+	.st6{fill:url(#SVGID_4_);}
+</style>
+<g class="st0">
+	<polyline class="st1" points="15.4,124.2 133.9,248.4 208.8,34.2 15.4,124.2 	"/>
+	<polyline class="st1" points="220.2,158.5 137.4,17.4 248.8,115.6 219.4,161.2 	"/>
+	<polyline class="st1" points="248.8,115.6 15.4,124.2 52.4,55.6 137.4,17.4 	"/>
+	<g>
+		<circle class="st2" cx="248.8" cy="115.6" r="4.1"/>
+		<circle class="st2" cx="15.4" cy="124.2" r="4.6"/>
+		<circle class="st2" cx="137.4" cy="17.4" r="4.1"/>
+		<circle class="st2" cx="52.4" cy="55.6" r="3.3"/>
+		<circle class="st2" cx="133.9" cy="248.4" r="3.8"/>
+		<circle class="st2" cx="208.8" cy="34.2" r="4.7"/>
+		<circle class="st2" cx="219.4" cy="161.2" r="5.3"/>
+	</g>
+</g>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="126.3543" y1="93.2575" x2="138.7467" y2="93.2575">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<rect x="126.4" y="80.3" class="st3" width="12.4" height="26"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="96.7949" y1="187.5047" x2="114.2522" y2="97.1009">
+		<stop  offset="0" style="stop-color:#D0D1D3"/>
+		<stop  offset="0.5225" style="stop-color:#CDD2D1"/>
+		<stop  offset="0.994" style="stop-color:#F2F2F2"/>
+	</linearGradient>
+	<rect x="97.4" y="97.1" class="st4" width="16.2" height="90.6"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="80.9993" y1="93.2569" x2="126.3543" y2="93.2569">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<rect x="81" y="85.4" class="st5" width="45.4" height="15.7"/>
+	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="145.8713" y1="185.0645" x2="190.5812" y2="87.2338">
+		<stop  offset="0" style="stop-color:#3D96D2"/>
+		<stop  offset="1" style="stop-color:#069FB0"/>
+	</linearGradient>
+	<path class="st6" d="M181.1,81.2l-2,0.9v10.7l-8.6,5.7l-7.6-5.7V82.2l-1.4-0.7l-8.1,11.6v12.3l9.5,8.5v73.8h16.3v-74.2l9.8-8.9
+		V93.2L181.1,81.2z M171.2,182.4c-1.7,0-3-1.4-3-3c0-1.7,1.4-3,3-3c1.7,0,3,1.4,3,3C174.2,181,172.9,182.4,171.2,182.4z"/>
+</g>
+</svg>

src/assets/images/demo/professional.svg

@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="270px" height="270px" viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.16;}
+	.st1{fill:none;stroke:#26373E;stroke-width:0.6356;stroke-miterlimit:10;}
+	.st2{fill:#4F5764;}
+	.st3{fill:url(#SVGID_1_);}
+	.st4{fill:url(#SVGID_2_);}
+	.st5{fill:url(#SVGID_3_);}
+	.st6{fill:url(#SVGID_4_);}
+	.st7{fill:url(#SVGID_5_);}
+	.st8{fill:url(#SVGID_6_);}
+	.st9{fill:#FFFFFF;}
+	.st10{fill:url(#SVGID_7_);}
+	.st11{fill:url(#SVGID_8_);}
+	.st12{fill:url(#SVGID_9_);}
+	.st13{fill:url(#SVGID_10_);}
+	.st14{fill:url(#SVGID_11_);}
+	.st15{fill:url(#SVGID_12_);}
+	.st16{fill:url(#SVGID_13_);}
+	.st17{fill:url(#SVGID_14_);}
+	.st18{fill:url(#SVGID_15_);}
+	.st19{fill:url(#SVGID_16_);}
+</style>
+<g class="st0">
+	<polyline class="st1" points="14.5,191.2 237.4,214.9 156.5,11.6 14.5,187.7 49.4,38.9 263.3,173.2 109.7,255.8 8.7,77.7 	"/>
+	<polyline class="st1" points="49.4,38.9 156.5,11.6 263.3,173.2 	"/>
+	<g>
+		<circle class="st2" cx="49.4" cy="38.9" r="5.1"/>
+		<circle class="st2" cx="156.5" cy="11.6" r="5.1"/>
+		<circle class="st2" cx="263.3" cy="173.2" r="5.7"/>
+		<circle class="st2" cx="237.4" cy="214.9" r="5.1"/>
+		<circle class="st2" cx="109.7" cy="255.8" r="4.8"/>
+		<circle class="st2" cx="8.7" cy="77.7" r="5.9"/>
+		<circle class="st2" cx="14.5" cy="187.7" r="6.7"/>
+	</g>
+</g>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="89.8471" y1="134.6955" x2="163.2465" y2="134.6955">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<rect x="89.8" y="81.4" class="st3" width="73.4" height="106.6"/>
+	<g>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="90.6335" y1="179.444" x2="156.1698" y2="81.7949">
+			<stop  offset="0" style="stop-color:#D0D1D3"/>
+			<stop  offset="0.4956" style="stop-color:#CDD2D1"/>
+			<stop  offset="0.994" style="stop-color:#F2F2F2"/>
+		</linearGradient>
+		<rect x="89.8" y="81.4" class="st4" width="66.6" height="99.2"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="172.3255" y1="178.4396" x2="190.0203" y2="114.214">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<polygon class="st5" points="186.2,180.6 175.7,180.6 175.7,113.7 180.9,100.8 186.2,113.7 		"/>
+	</g>
+	<g>
+		<path class="st9" d="M111.3,132.4v-17.8h12.6v3.3h-8.8v3.7h8.6v3.3h-8.6v7.4H111.3z"/>
+		<path class="st9" d="M125.7,123.6c0-5.4,3-9.2,8.3-9.2c2.2,0,4,0.7,5.3,1.8l-1.7,2.9c-1-0.9-2-1.4-3.5-1.4c-2.6,0-4.5,2.2-4.5,5
+			c0,0.1,0,0.2,0,0.4c0.8-1.2,2.6-2.3,4.6-2.3c3.2,0,6.1,2,6.1,5.8c0,3.5-2.8,6.1-6.8,6.1C128,132.8,125.7,128.6,125.7,123.6z
+			 M136.4,126.8c0-1.9-1.6-2.7-3.3-2.7c-1.3,0-2.6,0.6-3.5,1.7c0.2,1.7,1.1,3.6,3.6,3.6C135.2,129.4,136.4,128,136.4,126.8z"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="91.6015" x2="95.586" y2="91.6015">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="89.4" class="st6" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="100.4609" x2="95.586" y2="100.4609">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="98.2" class="st7" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="127.0393" x2="95.586" y2="127.0393">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="124.8" class="st8" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="135.8988" x2="95.586" y2="135.8988">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="133.7" class="st10" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="162.4771" x2="95.586" y2="162.4771">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="160.3" class="st11" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="171.3366" x2="95.586" y2="171.3366">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="169.1" class="st12" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="109.3204" x2="95.586" y2="109.3204">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="107.1" class="st13" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="118.1799" x2="95.586" y2="118.1799">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="116" class="st14" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="144.7582" x2="95.586" y2="144.7582">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="142.5" class="st15" width="12" height="4.4"/>
+	</g>
+	<g>
+		<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="83.6214" y1="153.6177" x2="95.586" y2="153.6177">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="83.6" y="151.4" class="st16" width="12" height="4.4"/>
+	</g>
+</g>
+</svg>

src/assets/images/demo/responsive.svg

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="270px" height="270px" viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{fill:none;stroke:#3F5D69;stroke-width:0.5134;stroke-miterlimit:10;}
+	.st2{fill:#4F5764;}
+	.st3{fill:url(#SVGID_1_);}
+	.st4{fill:url(#SVGID_2_);}
+	.st5{fill:url(#SVGID_3_);}
+	.st6{fill:url(#SVGID_4_);}
+	.st7{fill:url(#SVGID_5_);}
+	.st8{fill:url(#SVGID_6_);}
+	.st9{fill:url(#SVGID_7_);}
+</style>
+<g class="st0">
+	<polyline class="st1" points="91.2,27.9 250.6,116.3 13.7,117.1 208.2,54.1 	"/>
+	<polyline class="st1" points="181.5,227.2 258.7,182.9 7.3,179.2 179.2,228.8 	"/>
+	<polyline class="st1" points="7.3,179.2 91.2,27.9 208.2,54.1 258.7,182.9 	"/>
+	<g>
+		<circle class="st2" cx="7.3" cy="179.2" r="4.1"/>
+		<circle class="st2" cx="91.2" cy="27.9" r="4.6"/>
+		<circle class="st2" cx="258.7" cy="182.9" r="4.1"/>
+		<circle class="st2" cx="208.2" cy="54.1" r="3.3"/>
+		<circle class="st2" cx="250.6" cy="116.3" r="3.9"/>
+		<circle class="st2" cx="13.7" cy="117.1" r="4.7"/>
+		<circle class="st2" cx="179.2" cy="228.8" r="5.4"/>
+	</g>
+</g>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="127.1718" y1="187.3774" x2="152.0181" y2="156.8904">
+		<stop  offset="0" style="stop-color:#D0D1D3"/>
+		<stop  offset="0.5225" style="stop-color:#CDD2D1"/>
+		<stop  offset="0.994" style="stop-color:#F2F2F2"/>
+	</linearGradient>
+	<polygon class="st3" points="145.4,169.2 145.4,154.5 133.9,154.5 133.9,169.2 112.5,169.2 112.5,174.9 166.9,174.9 166.9,169.2 	
+		"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="85.0996" y1="118.4856" x2="194.2902" y2="118.4856">
+		<stop  offset="0" style="stop-color:#D0D1D3"/>
+		<stop  offset="0.5225" style="stop-color:#CDD2D1"/>
+		<stop  offset="0.994" style="stop-color:#F2F2F2"/>
+	</linearGradient>
+	<rect x="85.1" y="80.7" class="st4" width="109.2" height="75.6"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="91.1375" y1="149.8817" x2="188.7937" y2="86.7396">
+		<stop  offset="0" style="stop-color:#3D96D2"/>
+		<stop  offset="1" style="stop-color:#069FB0"/>
+	</linearGradient>
+	<rect x="89.9" y="86.4" class="st5" width="99.6" height="64.1"/>
+	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="58.8981" y1="153.359" x2="119.2881" y2="153.359">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<rect x="58.9" y="114.3" class="st6" width="60.4" height="78"/>
+	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="63.3368" y1="184.134" x2="114.438" y2="121.4314">
+		<stop  offset="0" style="stop-color:#3D96D2"/>
+		<stop  offset="1" style="stop-color:#069FB0"/>
+	</linearGradient>
+	<rect x="63.9" y="121.7" class="st7" width="50.4" height="61.6"/>
+	<g>
+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="180.4045" y1="159.832" x2="210.4102" y2="159.832">
+			<stop  offset="0" style="stop-color:#4F5764"/>
+			<stop  offset="0.6682" style="stop-color:#293942"/>
+			<stop  offset="1" style="stop-color:#111C21"/>
+		</linearGradient>
+		<rect x="180.4" y="137.3" class="st8" width="30" height="45.1"/>
+		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="184.9704" y1="174.5269" x2="206.6195" y2="142.2015">
+			<stop  offset="0" style="stop-color:#3D96D2"/>
+			<stop  offset="1" style="stop-color:#069FB0"/>
+		</linearGradient>
+		<rect x="184.9" y="143.5" class="st9" width="21" height="30.9"/>
+	</g>
+</g>
+</svg>

src/assets/images/demo/semantic.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="270px" height="270px" viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{fill:none;stroke:#3F5D69;stroke-width:0.5162;stroke-miterlimit:10;}
+	.st2{fill:#4F5764;}
+	.st3{fill:url(#SVGID_1_);}
+	.st4{fill:url(#SVGID_2_);}
+	.st5{fill:url(#SVGID_3_);}
+</style>
+<g class="st0">
+	<polyline class="st1" points="171,16.5 8.5,102.5 160.1,236.6 173.5,17.8 264.4,151.9 79.7,241.1 248,86.7 90.2,25.6 19.2,186.2 	
+		"/>
+	<polyline class="st1" points="264.4,151.9 160.1,236.6 79.7,241.1 19.2,186.2 8.5,102.5 	"/>
+	<g>
+		<circle class="st2" cx="264.4" cy="151.9" r="4.1"/>
+		<circle class="st2" cx="160.1" cy="236.6" r="4.1"/>
+		<circle class="st2" cx="79.7" cy="241.1" r="4.6"/>
+		<circle class="st2" cx="8.5" cy="102.5" r="4.1"/>
+		<circle class="st2" cx="19.2" cy="186.2" r="3.4"/>
+		<circle class="st2" cx="248" cy="86.7" r="3.9"/>
+		<circle class="st2" cx="90.2" cy="25.6" r="4.8"/>
+		<circle class="st2" cx="173.5" cy="17.8" r="5.4"/>
+	</g>
+</g>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50.9584" y1="135.1361" x2="104.5381" y2="135.1361">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<path class="st3" d="M51,140.7v-11.1l53.6-23.9V117l-42.6,18.3l42.6,18v11.3L51,140.7z"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="112.5123" y1="135" x2="156.683" y2="135">
+		<stop  offset="0" style="stop-color:#3D96D2"/>
+		<stop  offset="1" style="stop-color:#069FB0"/>
+	</linearGradient>
+	<path class="st4" d="M112.5,185.8l33.1-101.5h11.1l-33.1,101.5H112.5z"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="165.4619" y1="135.1361" x2="219.0416" y2="135.1361">
+		<stop  offset="0" style="stop-color:#4F5764"/>
+		<stop  offset="0.6682" style="stop-color:#293942"/>
+		<stop  offset="1" style="stop-color:#111C21"/>
+	</linearGradient>
+	<path class="st5" d="M165.5,164.6v-11.3l42.6-18L165.5,117v-11.3l53.6,23.9v11.1L165.5,164.6z"/>
+</g>
+</svg>

src/assets/images/freifunk_pfeil.svg

@@ -0,0 +1,21 @@
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="9.7919159mm"
+   height="9.3790073mm"
+   viewBox="0 0 9.7919159 9.3790073"
+   version="1.1"
+   id="svg4573">
+  <g
+     id="layer1"
+     transform="translate(-102.99615,-74.523803)">
+    <path
+       transform="matrix(0.58347846,-0.54846595,0.51986949,0.55305645,65.205892,67.191764)"
+       style="fill:#ffcc33;fill-opacity:1"
+       d="m 26,56 h 5 l 6,-6 -6,-6 h -5 l 4,4 h -8 v 4 h 8 z"
+       id="polygon825-8-44-1" />
+  </g>
+</svg>

src/assets/images/hamburg_freifunk_net_logo__modified.svg

@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="45.431267mm"
+   height="27.140495mm"
+   viewBox="0 0 45.431267 27.140495"
+   version="1.1"
+   id="svg871"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="hamburg_freifunk_net_logo__modified.svg">
+  <defs
+     id="defs865" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.0508921"
+     inkscape:cx="196.35409"
+     inkscape:cy="185.96064"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <sodipodi:guide
+       position="39.271552,8.8255844"
+       orientation="0,1"
+       id="guide1434"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="9.0951276,11.223774"
+       orientation="0,1"
+       id="guide1436"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata868">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-35.417432,-54.98366)">
+    <ellipse
+       id="circle819-4"
+       stroke-miterlimit="4"
+       cy="73.799973"
+       cx="43.115986"
+       style="fill:none;stroke:#de2c68;stroke-width:0.45217288;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       rx="8.600956"
+       ry="8.769124"
+       transform="rotate(-0.8801505)" />
+    <ellipse
+       id="circle821-9"
+       stroke-miterlimit="4"
+       cy="69.378296"
+       cx="58.432541"
+       style="fill:none;stroke:#de2c68;stroke-width:0.45217291;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       rx="9.2845058"
+       ry="9.4432859"
+       transform="rotate(-0.8801505)" />
+    <ellipse
+       id="circle823-8"
+       stroke-miterlimit="4"
+       cy="69.378242"
+       cx="58.392929"
+       style="fill:none;stroke:#de2c68;stroke-width:2.44633746;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       rx="12.147201"
+       ry="12.266263"
+       transform="rotate(-0.8801505)" />
+    <polygon
+       id="polygon825-8"
+       transform="matrix(0.3834332,-0.00589058,0.00558345,0.36344137,29.972979,55.091569)"
+       points="26,44 30,48 22,48 22,52 30,52 26,56 31,56 37,50 31,44 "
+       style="fill:#ffcc33;fill-opacity:1" />
+    <polygon
+       id="polygon827-5"
+       transform="matrix(0.40105037,-0.00616123,0.0063765,0.41506269,29.251314,50.562758)"
+       points="73,59 81,59 75,53 88,53 88,47 75,47 81,41 73,41 64,50 "
+       style="fill:#ffcc33;fill-opacity:1" />
+    <polygon
+       style="fill:#ffcc33;fill-opacity:1"
+       points="30,48 22,48 22,52 30,52 26,56 31,56 37,50 31,44 26,44 "
+       transform="matrix(0.3834332,-0.00589057,0.00558345,0.36344137,66.382498,50.728189)"
+       id="polygon825-8-44" />
+  </g>
+</svg>

src/assets/js/app.js

@@ -0,0 +1,11 @@
+import $ from 'jquery';
+import whatInput from 'what-input';
+
+window.$ = $;
+
+import Foundation from 'foundation-sites';
+// If you want to pick and choose which modules to include, comment out the above and uncomment
+// the line below
+//import './lib/foundation-explicit-pieces';
+
+$(document).foundation();

src/assets/js/lib/foundation-explicit-pieces.js

@@ -0,0 +1,103 @@
+import $ from 'jquery';
+import { Foundation } from 'foundation-sites/js/foundation.core';
+import { rtl, GetYoDigits, transitionend } from 'foundation-sites/js/foundation.util.core';
+import { Box } from 'foundation-sites/js/foundation.util.box'
+import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
+import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
+import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
+import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
+import { Nest } from 'foundation-sites/js/foundation.util.nest';
+import { Timer } from 'foundation-sites/js/foundation.util.timer';
+import { Touch } from 'foundation-sites/js/foundation.util.touch';
+import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
+import { Abide } from 'foundation-sites/js/foundation.abide';
+import { Accordion } from 'foundation-sites/js/foundation.accordion';
+import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
+import { Drilldown } from 'foundation-sites/js/foundation.drilldown';
+import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
+import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';
+import { Equalizer } from 'foundation-sites/js/foundation.equalizer';
+import { Interchange } from 'foundation-sites/js/foundation.interchange';
+import { Magellan } from 'foundation-sites/js/foundation.magellan';
+import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas';
+import { Orbit } from 'foundation-sites/js/foundation.orbit';
+import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu';
+import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle';
+import { Reveal } from 'foundation-sites/js/foundation.reveal';
+import { Slider } from 'foundation-sites/js/foundation.slider';
+import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll';
+import { Sticky } from 'foundation-sites/js/foundation.sticky';
+import { Tabs } from 'foundation-sites/js/foundation.tabs';
+import { Toggler } from 'foundation-sites/js/foundation.toggler';
+import { Tooltip } from 'foundation-sites/js/foundation.tooltip';
+import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs';
+
+
+Foundation.addToJquery($);
+
+// Add Foundation Utils to Foundation global namespace for backwards
+// compatibility.
+
+Foundation.rtl = rtl;
+Foundation.GetYoDigits = GetYoDigits;
+Foundation.transitionend = transitionend;
+
+Foundation.Box = Box;
+Foundation.onImagesLoaded = onImagesLoaded;
+Foundation.Keyboard = Keyboard;
+Foundation.MediaQuery = MediaQuery;
+Foundation.Motion = Motion;
+Foundation.Move = Move;
+Foundation.Nest = Nest;
+Foundation.Timer = Timer;
+
+// Touch and Triggers previously were almost purely sede effect driven,
+// so no // need to add it to Foundation, just init them.
+
+Touch.init($);
+
+Triggers.init($, Foundation);
+
+Foundation.plugin(Abide, 'Abide');
+
+Foundation.plugin(Accordion, 'Accordion');
+
+Foundation.plugin(AccordionMenu, 'AccordionMenu');
+
+Foundation.plugin(Drilldown, 'Drilldown');
+
+Foundation.plugin(Dropdown, 'Dropdown');
+
+Foundation.plugin(DropdownMenu, 'DropdownMenu');
+
+Foundation.plugin(Equalizer, 'Equalizer');
+
+Foundation.plugin(Interchange, 'Interchange');
+
+Foundation.plugin(Magellan, 'Magellan');
+
+Foundation.plugin(OffCanvas, 'OffCanvas');
+
+Foundation.plugin(Orbit, 'Orbit');
+
+Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
+
+Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
+
+Foundation.plugin(Reveal, 'Reveal');
+
+Foundation.plugin(Slider, 'Slider');
+
+Foundation.plugin(SmoothScroll, 'SmoothScroll');
+
+Foundation.plugin(Sticky, 'Sticky');
+
+Foundation.plugin(Tabs, 'Tabs');
+
+Foundation.plugin(Toggler, 'Toggler');
+
+Foundation.plugin(Tooltip, 'Tooltip');
+
+Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
+
+module.exports = Foundation;

src/assets/scss/_settings.scss

@@ -0,0 +1,870 @@
+//  FoundationPress settings.
+//  Based on Foundation for Sites v6.4.3
+//  -----------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Breakpoints
+//   3. The Grid
+//   4. Base Typography
+//   5. Typography Helpers
+//   6. Abide
+//   7. Accordion
+//   8. Accordion Menu
+//   9. Badge
+//  10. Breadcrumbs
+//  11. Button
+//  12. Button Group
+//  13. Callout
+//  14. Card
+//  15. Close Button
+//  16. Drilldown
+//  17. Dropdown
+//  18. Dropdown Menu
+//  19. Flexbox Utilities
+//  20. Forms
+//  21. Label
+//  22. Media Object
+//  23. Menu
+//  24. Meter
+//  25. Off-canvas
+//  26. Orbit
+//  27. Pagination
+//  28. Progress Bar
+//  29. Prototype Arrow
+//  30. Prototype Border-Box
+//  31. Prototype Border-None
+//  32. Prototype Bordered
+//  33. Prototype Display
+//  34. Prototype Font-Styling
+//  35. Prototype List-Style-Type
+//  36. Prototype Overflow
+//  37. Prototype Position
+//  38. Prototype Rounded
+//  39. Prototype Separator
+//  40. Prototype Shadow
+//  41. Prototype Sizing
+//  42. Prototype Spacing
+//  43. Prototype Text-Decoration
+//  44. Prototype Text-Transformation
+//  45. Prototype Text-Utilities
+//  46. Responsive Embed
+//  47. Reveal
+//  48. Slider
+//  49. Switch
+//  50. Table
+//  51. Tabs
+//  52. Thumbnail
+//  53. Title Bar
+//  54. Tooltip
+//  55. Top Bar
+//  56. Xy Grid
+
+@import 'util/util';
+@import 'global/colors';
+
+// 1. Global
+// ---------
+
+$global-font-size: 100%;
+$global-width: rem-calc(1200);
+$global-lineheight: 1.5;
+$foundation-palette: (
+  primary: #1779ba,
+  secondary: #767676,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #cc4b37,
+);
+$light-gray: #e6e6e6;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$body-background: $white;
+$body-font-color: $black;
+$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+$body-antialiased: true;
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-position: 1rem;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+$global-radius: 0;
+$global-menu-padding: 0.7rem 1rem;
+$global-menu-nested-margin: 1rem;
+$global-text-direction: ltr;
+$global-flexbox: true;
+$global-prototype-breakpoints: false;
+$global-button-cursor: auto;
+$global-color-pick-contrast-tolerance: 0;
+$print-transparent-backgrounds: true;
+
+@include add-foundation-colors;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
+);
+$print-breakpoint: large;
+$breakpoint-classes: (small medium large);
+
+// 3. The Grid
+// -----------
+
+$grid-row-width: $global-width;
+$grid-column-count: 12;
+$grid-column-gutter: (
+  small: 20px,
+  medium: 30px,
+);
+$grid-column-align-edge: true;
+$grid-column-alias: 'columns';
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: $body-font-family;
+$header-font-weight: $global-weight-normal;
+$header-font-style: normal;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$header-color: inherit;
+$header-lineheight: 1.4;
+$header-margin-bottom: 0.5rem;
+$header-styles: (
+  small: (
+    'h1': ('font-size': 24),
+    'h2': ('font-size': 20),
+    'h3': ('font-size': 19),
+    'h4': ('font-size': 18),
+    'h5': ('font-size': 17),
+    'h6': ('font-size': 16),
+  ),
+  medium: (
+    'h1': ('font-size': 48),
+    'h2': ('font-size': 40),
+    'h3': ('font-size': 31),
+    'h4': ('font-size': 25),
+    'h5': ('font-size': 20),
+    'h6': ('font-size': 16),
+  ),
+);
+$header-text-rendering: optimizeLegibility;
+$small-font-size: 80%;
+$header-small-font-color: $medium-gray;
+$paragraph-lineheight: 1.6;
+$paragraph-margin-bottom: 1rem;
+$paragraph-text-rendering: optimizeLegibility;
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$anchor-color: $primary-color;
+$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
+$hr-width: $global-width;
+$hr-border: 1px solid $medium-gray;
+$hr-margin: rem-calc(20) auto;
+$list-lineheight: $paragraph-lineheight;
+$list-margin-bottom: $paragraph-margin-bottom;
+$list-style-type: disc;
+$list-style-position: outside;
+$list-side-margin: 1.25rem;
+$list-nested-side-margin: 1.25rem;
+$defnlist-margin-bottom: 1rem;
+$defnlist-term-weight: $global-weight-bold;
+$defnlist-term-margin-bottom: 0.3rem;
+$blockquote-color: $dark-gray;
+$blockquote-padding: rem-calc(9 20 0 19);
+$blockquote-border: 1px solid $medium-gray;
+$cite-font-size: rem-calc(13);
+$cite-color: $dark-gray;
+$cite-pseudo-content: '\2014 \0020';
+$keystroke-font: $font-family-monospace;
+$keystroke-color: $black;
+$keystroke-background: $light-gray;
+$keystroke-padding: rem-calc(2 4 0);
+$keystroke-radius: $global-radius;
+$abbr-underline: 1px dotted $black;
+
+// 5. Typography Helpers
+// ---------------------
+
+$lead-font-size: $global-font-size * 1.25;
+$lead-lineheight: 1.6;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$subheader-font-weight: $global-weight-normal;
+$subheader-margin-top: 0.2rem;
+$subheader-margin-bottom: 0.5rem;
+$stat-font-size: 2.5rem;
+
+// 6. Abide
+// --------
+
+$abide-inputs: true;
+$abide-labels: true;
+$input-background-invalid: get-color(alert);
+$form-label-color-invalid: get-color(alert);
+$input-error-color: get-color(alert);
+$input-error-font-size: rem-calc(12);
+$input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+$accordion-background: $white;
+$accordion-plusminus: true;
+$accordion-title-font-size: rem-calc(12);
+$accordion-item-color: $primary-color;
+$accordion-item-background-hover: $light-gray;
+$accordion-item-padding: 1.25rem 1rem;
+$accordion-content-background: $white;
+$accordion-content-border: 1px solid $light-gray;
+$accordion-content-color: $body-font-color;
+$accordion-content-padding: 1rem;
+
+// 8. Accordion Menu
+// -----------------
+
+$accordionmenu-padding: $global-menu-padding;
+$accordionmenu-nested-margin: $global-menu-nested-margin;
+$accordionmenu-submenu-padding: $accordionmenu-padding;
+$accordionmenu-arrows: true;
+$accordionmenu-arrow-color: $white;
+$accordionmenu-item-background: null;
+$accordionmenu-border: null;
+$accordionmenu-submenu-toggle-background: null;
+$accordion-submenu-toggle-border: $accordionmenu-border;
+$accordionmenu-submenu-toggle-width: 40px;
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
+$accordionmenu-arrow-size: 6px;
+
+// 9. Badge
+// --------
+
+$badge-background: $primary-color;
+$badge-color: $white;
+$badge-color-alt: $black;
+$badge-palette: $foundation-palette;
+$badge-padding: 0.3em;
+$badge-minwidth: 2.1em;
+$badge-font-size: 0.6rem;
+
+// 10. Breadcrumbs
+// ---------------
+
+$breadcrumbs-margin: 0 0 $global-margin 0;
+$breadcrumbs-item-font-size: rem-calc(11);
+$breadcrumbs-item-color: $primary-color;
+$breadcrumbs-item-color-current: $black;
+$breadcrumbs-item-color-disabled: $medium-gray;
+$breadcrumbs-item-margin: 0.75rem;
+$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-separator: true;
+$breadcrumbs-item-separator-item: '/';
+$breadcrumbs-item-separator-item-rtl: '\\';
+$breadcrumbs-item-separator-color: $medium-gray;
+
+// 11. Button
+// ----------
+
+$button-font-family: inherit;
+$button-padding: 0.85em 1em;
+$button-margin: 0 0 $global-margin 0;
+$button-fill: solid;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: $white;
+$button-color-alt: $black;
+$button-radius: $global-radius;
+$button-hollow-border-width: 1px;
+$button-sizes: (
+  tiny: 0.6rem,
+  small: 0.75rem,
+  default: 0.9rem,
+  large: 1.25rem,
+);
+$button-palette: $foundation-palette;
+$button-opacity-disabled: 0.25;
+$button-background-hover-lightness: -20%;
+$button-hollow-hover-lightness: -50%;
+$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+
+// 12. Button Group
+// ----------------
+
+$buttongroup-margin: 1rem;
+$buttongroup-spacing: 1px;
+$buttongroup-child-selector: '.button';
+$buttongroup-expand-max: 6;
+$buttongroup-radius-on-each: true;
+
+// 13. Callout
+// -----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-border: 1px solid rgba($black, 0.25);
+$callout-margin: 0 0 1rem 0;
+$callout-padding: 1rem;
+$callout-font-color: $body-font-color;
+$callout-font-color-alt: $body-background;
+$callout-radius: $global-radius;
+$callout-link-tint: 30%;
+
+// 14. Card
+// --------
+
+$card-background: $white;
+$card-font-color: $body-font-color;
+$card-divider-background: $light-gray;
+$card-border: 1px solid $light-gray;
+$card-shadow: none;
+$card-border-radius: $global-radius;
+$card-padding: $global-padding;
+$card-margin-bottom: $global-margin;
+
+// 15. Close Button
+// ----------------
+
+$closebutton-position: right top;
+$closebutton-offset-horizontal: (
+  small: 0.66rem,
+  medium: 1rem,
+);
+$closebutton-offset-vertical: (
+  small: 0.33em,
+  medium: 0.5rem,
+);
+$closebutton-size: (
+  small: 1.5em,
+  medium: 2em,
+);
+$closebutton-lineheight: 1;
+$closebutton-color: $dark-gray;
+$closebutton-color-hover: $black;
+
+// 16. Drilldown
+// -------------
+
+$drilldown-transition: transform 0.15s linear;
+$drilldown-arrows: true;
+$drilldown-padding: $global-menu-padding;
+$drilldown-nested-margin: 0;
+$drilldown-background: $white;
+$drilldown-submenu-padding: $drilldown-padding;
+$drilldown-submenu-background: $white;
+$drilldown-arrow-color: $primary-color;
+$drilldown-arrow-size: 6px;
+
+// 17. Dropdown
+// ------------
+
+$dropdown-padding: 1rem;
+$dropdown-background: $body-background;
+$dropdown-border: 1px solid $medium-gray;
+$dropdown-font-size: 1rem;
+$dropdown-width: 300px;
+$dropdown-radius: $global-radius;
+$dropdown-sizes: (
+  tiny: 100px,
+  small: 200px,
+  large: 400px,
+);
+
+// 18. Dropdown Menu
+// -----------------
+
+$dropdownmenu-arrows: true;
+$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-arrow-size: 6px;
+$dropdownmenu-arrow-padding: 1.5rem;
+$dropdownmenu-min-width: 200px;
+$dropdownmenu-background: $white;
+$dropdownmenu-submenu-background: $dropdownmenu-background;
+$dropdownmenu-padding: $global-menu-padding;
+$dropdownmenu-nested-margin: 0;
+$dropdownmenu-submenu-padding: $dropdownmenu-padding;
+$dropdownmenu-border: 1px solid $medium-gray;
+$dropdown-menu-item-color-active: $light-gray;
+$dropdown-menu-item-background-active: transparent;
+
+// 19. Flexbox Utilities
+// ---------------------
+
+$flex-source-ordering-count: 6;
+$flexbox-responsive-breakpoints: true;
+
+// 20. Forms
+// ---------
+
+$fieldset-border: 1px solid $medium-gray;
+$fieldset-padding: rem-calc(20);
+$fieldset-margin: rem-calc(18 0);
+$legend-padding: rem-calc(0 3);
+$form-spacing: rem-calc(16);
+$helptext-color: $black;
+$helptext-font-size: rem-calc(13);
+$helptext-font-style: italic;
+$input-prefix-color: $black;
+$input-prefix-background: $light-gray;
+$input-prefix-border: 1px solid $medium-gray;
+$input-prefix-padding: 1rem;
+$form-label-color: $black;
+$form-label-font-size: rem-calc(14);
+$form-label-font-weight: $global-weight-normal;
+$form-label-line-height: 1.8;
+$select-background: $white;
+$select-triangle-color: $dark-gray;
+$select-radius: $global-radius;
+$input-color: $black;
+$input-placeholder-color: $medium-gray;
+$input-font-family: inherit;
+$input-font-size: rem-calc(16);
+$input-font-weight: $global-weight-normal;
+$input-line-height: $global-lineheight;
+$input-background: $white;
+$input-background-focus: $white;
+$input-background-disabled: $light-gray;
+$input-border: 1px solid $medium-gray;
+$input-border-focus: 1px solid $dark-gray;
+$input-padding: $form-spacing / 2;
+$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: 0 0 5px $medium-gray;
+$input-cursor-disabled: not-allowed;
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-number-spinners: true;
+$input-radius: $global-radius;
+$form-button-radius: $global-radius;
+
+// 21. Label
+// ---------
+
+$label-background: $primary-color;
+$label-color: $white;
+$label-color-alt: $black;
+$label-palette: $foundation-palette;
+$label-font-size: 0.8rem;
+$label-padding: 0.33333rem 0.5rem;
+$label-radius: $global-radius;
+
+// 22. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 23. Menu
+// --------
+
+$menu-margin: 0;
+$menu-nested-margin: $global-menu-nested-margin;
+$menu-items-padding: $global-menu-padding;
+$menu-simple-margin: 1rem;
+$menu-item-color-active: $white;
+$menu-item-background-active: get-color(primary);
+$menu-icon-spacing: 0.25rem;
+$menu-item-background-hover: $light-gray;
+$menu-state-back-compat: true;
+$menu-centered-back-compat: true;
+$menu-icons-back-compat: true;
+
+// 24. Meter
+// ---------
+
+$meter-height: 1rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 25. Off-canvas
+// --------------
+
+$offcanvas-sizes: (
+  small: 250px,
+);
+$offcanvas-vertical-sizes: (
+  small: 250px,
+);
+$offcanvas-background: $dark-nav-color;
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+$offcanvas-inner-shadow-size: 20px;
+$offcanvas-inner-shadow-color: rgba($black, 0.25);
+$offcanvas-overlay-zindex: 11;
+$offcanvas-push-zindex: 12;
+$offcanvas-overlap-zindex: 13;
+$offcanvas-reveal-zindex: 12;
+$offcanvas-transition-length: 0.5s;
+$offcanvas-transition-timing: ease;
+$offcanvas-fixed-reveal: true;
+$offcanvas-exit-background: rgba($white, 0.25);
+$maincontent-class: 'off-canvas-content';
+
+// 26. Orbit
+// ---------
+
+$orbit-bullet-background: $medium-gray;
+$orbit-bullet-background-active: $dark-gray;
+$orbit-bullet-diameter: 1.2rem;
+$orbit-bullet-margin: 0.1rem;
+$orbit-bullet-margin-top: 0.8rem;
+$orbit-bullet-margin-bottom: 0.8rem;
+$orbit-caption-background: rgba($black, 0.5);
+$orbit-caption-padding: 1rem;
+$orbit-control-background-hover: rgba($black, 0.5);
+$orbit-control-padding: 1rem;
+$orbit-control-zindex: 10;
+
+// 27. Pagination
+// --------------
+
+$pagination-font-size: rem-calc(14);
+$pagination-margin-bottom: $global-margin;
+$pagination-item-color: $black;
+$pagination-item-padding: rem-calc(3 10);
+$pagination-item-spacing: rem-calc(1);
+$pagination-radius: $global-radius;
+$pagination-item-background-hover: $light-gray;
+$pagination-item-background-current: $primary-color;
+$pagination-item-color-current: $white;
+$pagination-item-color-disabled: $medium-gray;
+$pagination-ellipsis-color: $black;
+$pagination-mobile-items: false;
+$pagination-mobile-current-item: false;
+$pagination-arrows: true;
+
+// 28. Progress Bar
+// ----------------
+
+$progress-height: 1rem;
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 29. Prototype Arrow
+// -------------------
+
+$prototype-arrow-directions: (
+  down,
+  up,
+  right,
+  left
+);
+$prototype-arrow-size: 0.4375rem;
+$prototype-arrow-color: $black;
+
+// 30. Prototype Border-Box
+// ------------------------
+
+$prototype-border-box-breakpoints: $global-prototype-breakpoints;
+
+// 31. Prototype Border-None
+// -------------------------
+
+$prototype-border-none-breakpoints: $global-prototype-breakpoints;
+
+// 32. Prototype Bordered
+// ----------------------
+
+$prototype-bordered-breakpoints: $global-prototype-breakpoints;
+$prototype-border-width: rem-calc(1);
+$prototype-border-type: solid;
+$prototype-border-color: $medium-gray;
+
+// 33. Prototype Display
+// ---------------------
+
+$prototype-display-breakpoints: $global-prototype-breakpoints;
+$prototype-display: (
+  inline,
+  inline-block,
+  block,
+  table,
+  table-cell
+);
+
+// 34. Prototype Font-Styling
+// --------------------------
+
+$prototype-font-breakpoints: $global-prototype-breakpoints;
+$prototype-wide-letter-spacing: rem-calc(4);
+$prototype-font-normal: $global-weight-normal;
+$prototype-font-bold: $global-weight-bold;
+
+// 35. Prototype List-Style-Type
+// -----------------------------
+
+$prototype-list-breakpoints: $global-prototype-breakpoints;
+$prototype-style-type-unordered: (
+  disc,
+  circle,
+  square
+);
+$prototype-style-type-ordered: (
+  decimal,
+  lower-alpha,
+  lower-latin,
+  lower-roman,
+  upper-alpha,
+  upper-latin,
+  upper-roman
+);
+
+// 36. Prototype Overflow
+// ----------------------
+
+$prototype-overflow-breakpoints: $global-prototype-breakpoints;
+$prototype-overflow: (
+  visible,
+  hidden,
+  scroll
+);
+
+// 37. Prototype Position
+// ----------------------
+
+$prototype-position-breakpoints: $global-prototype-breakpoints;
+$prototype-position: (
+  static,
+  relative,
+  absolute,
+  fixed
+);
+$prototype-position-z-index: 975;
+
+// 38. Prototype Rounded
+// ---------------------
+
+$prototype-rounded-breakpoints: $global-prototype-breakpoints;
+$prototype-border-radius: rem-calc(3);
+
+// 39. Prototype Separator
+// -----------------------
+
+$prototype-separator-breakpoints: $global-prototype-breakpoints;
+$prototype-separator-align: center;
+$prototype-separator-height: rem-calc(2);
+$prototype-separator-width: 3rem;
+$prototype-separator-background: $primary-color;
+$prototype-separator-margin-top: $global-margin;
+
+// 40. Prototype Shadow
+// --------------------
+
+$prototype-shadow-breakpoints: $global-prototype-breakpoints;
+$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
+                       0 2px 10px 0 rgba(0,0,0,.12);
+
+// 41. Prototype Sizing
+// --------------------
+
+$prototype-sizing-breakpoints: $global-prototype-breakpoints;
+$prototype-sizing: (
+  width,
+  height
+);
+$prototype-sizes: (
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
+);
+
+// 42. Prototype Spacing
+// ---------------------
+
+$prototype-spacing-breakpoints: $global-prototype-breakpoints;
+$prototype-spacers-count: 3;
+
+// 43. Prototype Text-Decoration
+// -----------------------------
+
+$prototype-decoration-breakpoints: $global-prototype-breakpoints;
+$prototype-text-decoration: (
+  overline,
+  underline,
+  line-through,
+);
+
+// 44. Prototype Text-Transformation
+// ---------------------------------
+
+$prototype-transformation-breakpoints: $global-prototype-breakpoints;
+$prototype-text-transformation: (
+  lowercase,
+  uppercase,
+  capitalize
+);
+
+// 45. Prototype Text-Utilities
+// ----------------------------
+
+$prototype-utilities-breakpoints: $global-prototype-breakpoints;
+$prototype-text-overflow: ellipsis;
+
+// 46. Responsive Embed
+// --------------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratios: (
+  default: 4 by 3,
+  widescreen: 16 by 9,
+);
+
+// 47. Reveal
+// ----------
+
+$reveal-background: $white;
+$reveal-width: 600px;
+$reveal-max-width: $global-width;
+$reveal-padding: $global-padding;
+$reveal-border: 1px solid $medium-gray;
+$reveal-radius: $global-radius;
+$reveal-zindex: 1005;
+$reveal-overlay-background: rgba($black, 0.45);
+
+// 48. Slider
+// ----------
+
+$slider-width-vertical: 0.5rem;
+$slider-transition: all 0.2s ease-in-out;
+$slider-height: 0.5rem;
+$slider-background: $light-gray;
+$slider-fill-background: $medium-gray;
+$slider-handle-height: 1.4rem;
+$slider-handle-width: 1.4rem;
+$slider-handle-background: $primary-color;
+$slider-opacity-disabled: 0.25;
+$slider-radius: $global-radius;
+
+// 49. Switch
+// ----------
+
+$switch-background: $medium-gray;
+$switch-background-active: $primary-color;
+$switch-height: 2rem;
+$switch-height-tiny: 1.5rem;
+$switch-height-small: 1.75rem;
+$switch-height-large: 2.5rem;
+$switch-radius: $global-radius;
+$switch-margin: $global-margin;
+$switch-paddle-background: $white;
+$switch-paddle-offset: 0.25rem;
+$switch-paddle-radius: $global-radius;
+$switch-paddle-transition: all 0.25s ease-out;
+
+// 50. Table
+// ---------
+
+$table-background: $white;
+$table-color-scale: 5%;
+$table-border: 1px solid smart-scale($table-background, $table-color-scale);
+$table-padding: rem-calc(8 10 10);
+$table-hover-scale: 2%;
+$table-row-hover: darken($table-background, $table-hover-scale);
+$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-is-striped: true;
+$table-striped-background: smart-scale($table-background, $table-color-scale);
+$table-stripe: even;
+$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+$table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+$table-head-font-color: $body-font-color;
+$table-foot-font-color: $body-font-color;
+$show-header-for-stacked: false;
+$table-stack-breakpoint: medium;
+
+// 51. Tabs
+// --------
+
+$tab-margin: 0;
+$tab-background: $white;
+$tab-color: $primary-color;
+$tab-background-active: $light-gray;
+$tab-active-color: $primary-color;
+$tab-item-font-size: rem-calc(12);
+$tab-item-background-hover: $white;
+$tab-item-padding: 1.25rem 1.5rem;
+$tab-expand-max: 6;
+$tab-content-background: $white;
+$tab-content-border: $light-gray;
+$tab-content-color: $body-font-color;
+$tab-content-padding: 1rem;
+
+// 52. Thumbnail
+// -------------
+
+$thumbnail-border: solid 4px $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+
+// 53. Title Bar
+// -------------
+
+$titlebar-background: $dark-nav-color;
+$titlebar-color: $white;
+$titlebar-padding: 0.5rem;
+$titlebar-text-font-weight: bold;
+$titlebar-icon-color: $white;
+$titlebar-icon-color-hover: $medium-gray;
+$titlebar-icon-spacing: 0.25rem;
+
+// 54. Tooltip
+// -----------
+
+$has-tip-cursor: help;
+$has-tip-font-weight: $global-weight-bold;
+$has-tip-border-bottom: dotted 1px $dark-gray;
+$tooltip-background-color: $black;
+$tooltip-color: $white;
+$tooltip-padding: 0.75rem;
+$tooltip-max-width: 10rem;
+$tooltip-font-size: $small-font-size;
+$tooltip-pip-width: 0.75rem;
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+$tooltip-radius: $global-radius;
+
+// 55. Top Bar
+// -----------
+
+$topbar-padding: 0;
+$topbar-background: $dark-nav-color;
+$topbar-submenu-background: $topbar-background;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
+$topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;
+
+// 56. Xy Grid
+// -----------
+
+$xy-grid: true;
+$grid-container: $global-width;
+$grid-columns: 12;
+$grid-margin-gutters: (
+  small: 20px,
+  medium: 30px
+);
+$grid-padding-gutters: $grid-margin-gutters;
+$grid-container-padding: $grid-padding-gutters;
+$grid-container-max: $global-width;
+$xy-block-grid-max: 8;

src/assets/scss/app.scss

@@ -0,0 +1,84 @@
+@charset 'utf-8';
+
+
+@import 'settings';
+@import 'foundation';
+@import 'motion-ui';
+
+@include foundation-global-styles;
+//@include foundation-grid;
+//@include foundation-flex-grid;
+
+@include foundation-xy-grid-classes;
+@include foundation-typography;
+@include foundation-button;
+@include foundation-forms;
+// @include foundation-range-input;
+@include foundation-accordion;
+@include foundation-accordion-menu;
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-button-group;
+@include foundation-callout;
+@include foundation-card;
+@include foundation-close-button;
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-drilldown-menu;
+@include foundation-dropdown;
+@include foundation-dropdown-menu;
+@include foundation-responsive-embed;
+@include foundation-label;
+@include foundation-media-object;
+@include foundation-off-canvas;
+@include foundation-orbit;
+@include foundation-pagination;
+@include foundation-progress-bar;
+@include foundation-slider;
+@include foundation-sticky;
+@include foundation-reveal;
+@include foundation-switch;
+@include foundation-table;
+@include foundation-tabs;
+@include foundation-thumbnail;
+@include foundation-title-bar;
+@include foundation-tooltip;
+@include foundation-top-bar;
+@include foundation-visibility-classes;
+// @include foundation-float-classes;
+@include foundation-flex-classes;
+
+// @include foundation-prototype-classes;
+
+@include motion-ui-transitions;
+@include motion-ui-animations;
+
+/*
+  My custom styles:
+  Add your scss files below to structure your project styles
+*/
+
+// Global
+@import "global/accessibility";
+@import "global/colors";
+@import "global/wp-admin";
+@import "global/wp-overrides";
+
+// Modules
+@import "modules/navigation";
+@import "modules/content";
+@import "modules/footer";
+@import "modules/editor-style";
+
+// Components
+@import "components/buttons";
+@import "components/cards";
+@import "components/featured-image";
+@import "components/dividers";
+@import "components/links";
+
+// Templates
+@import "templates/front";
+@import "templates/kitchen-sink";
+@import "templates/freifunk";
+@import "templates/freifunk-all-in-one-event-calendar";

src/assets/scss/components/_buttons.scss

@@ -0,0 +1,8 @@
+.sites-button {
+  background: $primary-color;
+  font-size: 1.25rem;
+  font-weight: bold;
+  box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
+  border-radius: 3px;
+  border: none;
+}

src/assets/scss/components/_cards.scss

@@ -0,0 +1,21 @@
+.cards-container {
+
+  @include xy-grid;
+
+  .card {
+    @include breakpoint(small) {
+      @include xy-cell(12);
+
+      .card-content {
+        padding: 1rem;
+      }
+
+    }
+
+    @include breakpoint(medium) {
+      @include xy-cell(1 of 3, true, 0.7rem );
+
+    }
+
+  }
+}

src/assets/scss/components/_dividers.scss

@@ -0,0 +1,4 @@
+.dotted {
+  border-style: dashed;
+  margin: 2rem 0;
+}

src/assets/scss/components/_featured-image.scss

@@ -0,0 +1,14 @@
+.featured-hero {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: rem-calc(100);
+
+  @include breakpoint(medium) {
+    height: rem-calc(200);
+  }
+
+  @include breakpoint(xlarge) {
+    height: rem-calc(400);
+  }
+}

src/assets/scss/components/_links.scss

@@ -0,0 +1,8 @@
+// Apply outline styles only when input method is keyboard
+// remove :focus style via What Input using progressive enhancement
+// so :focus isn't left broken if JavaScript fails
+
+[data-whatinput="mouse"] a:focus, button:focus
+[data-whatinput="touch"] a:focus, button:focus {
+  outline: none;
+}

src/assets/scss/global/_accessibility.scss

@@ -0,0 +1,29 @@
+// Text meant only for screen readers. Addresses part of theme-check issue #840.
+// https://github.com/Automattic/_s/blob/master/style.css
+.screen-reader-text {
+  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}
+
+.screen-reader-text:focus {
+  background-color: #f1f1f1;
+  border-radius: 3px;
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+  clip: auto !important;
+  color: #21759b;
+  display: block;
+  font-size: 14px;
+  font-size: 0.875rem;
+  font-weight: bold;
+  height: auto;
+  left: 5px;
+  line-height: normal;
+  padding: 15px 23px 14px;
+  text-decoration: none;
+  top: 5px;
+  width: auto;
+  z-index: 100000; // Above WP toolbar.
+}

src/assets/scss/global/_colors.scss

@@ -0,0 +1 @@
+$dark-nav-color: #2C3840;

src/assets/scss/global/_wp-admin.scss

@@ -0,0 +1,23 @@
+// Fix the issue where the WP admin-bar overlaps the mobile menu
+#wpadminbar {
+  position: fixed !important;
+}
+
+// Make sure that the WP admin-bar does not overlap Foundation components
+body.admin-bar {
+  // Offset sticky top bar
+  &.f-topbar-fixed {
+    .sticky.fixed {
+      margin-top: rem-calc(32);
+    }
+  }
+  // Offset mobile off-canvas menu
+  &.offcanvas {
+    .off-canvas.is-open {
+      top: rem-calc(46);
+      @include breakpoint(783) {
+        top: rem-calc(32);
+      }
+    }
+  }
+}

src/assets/scss/global/_wp-overrides.scss

@@ -0,0 +1,57 @@
+.wp-caption > figcaption {
+  max-width: 100%;
+  font-size: 0.8rem;
+  color: #999;
+  padding: 0.25rem 0;
+}
+
+p.wp-caption-text{
+  font-size:90%;
+  color: #666;
+  padding:rem-calc(10) 0;
+}
+
+.alignleft {
+  float: left;
+  padding-right: 1rem;
+  margin: 0;
+}
+
+.alignright {
+  float: right;
+  padding-left: 1rem;
+  margin: 0;
+}
+
+.aligncenter {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.gallery {
+  @include xy-grid;
+  @include xy-gutters($negative: true);
+  @for $i from 1 through 9 {
+    &.gallery-columns-#{$i} {
+      @include xy-grid-layout(2, '.gallery-item', true);
+    }
+    @include breakpoint(medium){
+      &.gallery-columns-#{$i} {
+        @include xy-grid-layout(4, '.gallery-item', true, (small: 30px));
+      }
+    }
+    @include breakpoint(large) {
+      &.gallery-columns-#{$i} {
+        @include xy-grid-layout($i, '.gallery-item', true, (small: 30px));
+      }
+    }
+  }
+  .gallery-icon > a {
+    @include thumbnail;
+    @include thumbnail-link;
+  }
+  .gallery-icon > img {
+    @include thumbnail;
+  }
+}

src/assets/scss/modules/_content.scss

@@ -0,0 +1,54 @@
+.main-container {
+  @include xy-grid-container;
+}
+
+.main-grid {
+  @include xy-grid();
+  margin-top: 1rem;
+
+  @include breakpoint(medium) {
+    margin-top: 3rem;
+  }
+
+  &.sidebar-left {
+    // Place the sidebar below main content on small screens ...
+    @include breakpoint(small) {
+      .main-content { order: 1; }
+      .sidebar { order: 2; }
+    }
+
+    // ... and to the left on medium-up screens, when using the sidebar-left template
+    @include breakpoint(medium) {
+      .main-content { order: 2; }
+      .sidebar { order: 1; }
+    }
+  }
+
+  // Full width template
+  .main-content-full-width {
+    @include xy-cell(12);
+  }
+
+  // Default template
+  .main-content {
+    @include breakpoint(small) {
+      @include xy-cell(12);
+    }
+
+    @include breakpoint(medium) {
+      @include xy-cell(8);
+    }
+  }
+
+  .sidebar {
+    @include breakpoint(small) {
+      @include xy-cell(12);
+    }
+
+    @include breakpoint(medium) {
+      @include xy-cell(4);
+      margin-top: 1rem;
+    }
+
+  }
+}

src/assets/scss/modules/_editor-style.scss

@@ -0,0 +1,5 @@
+body#tinymce{
+  height: auto; // Fix editor style bug
+  max-width: $grid-row-width; // Give the editor a max-width
+  padding: rem-calc(20) !important;
+}

src/assets/scss/modules/_footer.scss

@@ -0,0 +1,23 @@
+.footer-container {
+  @include xy-grid-container;
+  border-top: 1px solid $medium-gray;
+  margin-top: rem-calc(60);
+}
+
+.footer-grid {
+  @include xy-grid;
+  padding: rem-calc(30) 0;
+
+  section {
+    @include xy-cell();
+    @include breakpoint(large) {
+      @include xy-cell(auto);
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+}

src/assets/scss/modules/_navigation.scss

@@ -0,0 +1,105 @@
+// Navigation breakpoints
+.mobile-menu,
+.site-title-bar {
+  @include hide-for(medium);
+}
+
+.desktop-menu,
+.site-navigation .top-bar-left {
+  @include show-for(medium);
+}
+
+// Site title
+.site-desktop-title a {
+  font-weight: bold;
+}
+
+// Mobile menu
+.mobile-menu {
+  display: none; // prevents repaint caused by JS hiding menu onload
+}
+
+.off-canvas {
+  > ul.menu {
+    height: 100vh;
+    padding: 1rem;
+
+    a {
+      color: $white;
+      font-weight: 600;
+      font-size: rem-calc(15);
+    }
+  }
+
+  .menu .active > a { background-color: #ccc; }
+
+}
+
+.title-bar-title {
+  a {
+    font-size: 1rem;
+    color: #B9B9B9;
+  }
+}
+
+.mobile-menu,
+.mobile-off-canvas-menu {
+
+  .menu .is-active > a {
+    background-color: lighten($dark-nav-color, 5%);
+  }
+}
+
+// Tablet and desktop menu
+
+.top-bar {
+
+  .top-bar-title a {
+    font-size: 1rem;
+    color: #B9B9B9;
+    padding-left: 1rem;
+    line-height: 1.8;
+  }
+
+  .menu a {
+    color: #e6e6e6;
+    padding-top: 0;
+    padding-bottom: 0;
+    font-weight: bold;
+    font-size: 0.8rem;
+    line-height: 1;
+
+    &:hover:not(.button) {
+      background-color: #42525D;
+    }
+  }
+
+  .menu .active > a { background-color: #ccc; }
+
+  .menu>li:not(.menu-text)>a { padding: 1rem; }
+  .menu li:not(:last-child) { border-right: 1px solid #4e4e4e; }
+
+  .dropdown.menu .submenu { border: 0; }
+  .dropdown.menu .has-submenu.is-down-arrow a { padding-right: 1rem; }
+  .dropdown.menu .has-submenu.is-down-arrow > a::after { border: 0; }
+  .dropdown.menu:first-child > li.is-dropdown-submenu-parent > a::after { display: none; }
+}
+
+.site-navigation {
+  @include breakpoint(small only) {
+    padding: 0; // prevents container visibility on small screens
+  }
+}
+
+// WP post navigation
+.post-navigation {
+  @include clearfix;
+}
+
+.nav-previous {
+  float:left;
+}
+
+.nav-next {
+  float:right;
+}

src/assets/scss/templates/_front.scss

@@ -0,0 +1,201 @@
+// Page header
+.front-hero {
+  .marketing {
+    @include xy-grid-container(55rem);
+    @include xy-grid;
+  }
+
+  @include breakpoint(small) {
+    background: url('../images/demo/hero-bg-foundation-6-small.svg') bottom center;
+    background-size: cover;
+    background-position: bottom;
+    padding: rem-calc(65%) 0;
+    margin: 0 0 rem-calc(32);
+    height: auto;
+    position: relative;
+    text-align: left;
+  }
+
+  @include breakpoint(medium) {
+    background: url('../images/demo/hero-bg-foundation-6-large.svg') bottom center;
+    background-size: cover;
+    background-position: center;
+    height: rem-calc(685);
+    margin: 0 0 rem-calc(72);
+  }
+
+  .watch {
+    @include breakpoint(small) {
+      @include xy-cell(7);
+    }
+
+    @include breakpoint(medium) {
+      @include xy-cell(12);
+    }
+
+    a {
+      color: #B4C9D1;
+      cursor: pointer;
+      font-weight: 400;
+      margin-right: rem-calc(20);
+    }
+
+    a:hover {
+      color: #fff;
+    }
+
+    #stargazers {
+      :before {
+        content: "\f09b";
+        font-family: FontAwesome;
+        font-style: normal;
+        font-weight: normal;
+        text-decoration: inherit;
+        color: #B4C9D1;
+        margin-right: rem-calc(8);
+      }
+    }
+
+    #twitter {
+      :before {
+        content: "\f099";
+        font-family: FontAwesome;
+        font-style: normal;
+        font-weight: normal;
+        text-decoration: inherit;
+        color: #B4C9D1;
+        margin-right: rem-calc(8);
+      }
+    }
+
+  }
+
+  .tagline {
+    @include breakpoint(small) {
+      @include xy-cell(8);
+    }
+
+    @include breakpoint(medium) {
+      @include xy-cell(5);
+      padding-top: 6rem;
+    }
+  }
+
+  h1 {
+    color: #fff;
+    font-weight: 500;
+
+    @include breakpoint(small) {
+      font-size: 2.2rem;
+    }
+
+    @include breakpoint(medium) {
+      font-size: 2.875rem;
+    }
+  }
+
+  h4 {
+    color: #fefefe;
+    font-weight: 300;
+    font-size: 1.3125rem;
+  }
+
+  .download {
+    margin-top: rem-calc(20);
+  }
+}
+
+// Intro
+.intro {
+  @include xy-grid-container;
+  @include xy-grid;
+
+  .fp-intro {
+    @include breakpoint(small) {
+      @include xy-cell(12);
+    }
+
+    @include breakpoint(medium) {
+      @include xy-cell(10);
+      @include xy-cell-offset(1);
+
+      h2 {
+        font-weight: 300;
+        margin-bottom: 1.5rem;
+      }
+
+      h4 {
+        font-size: 1.125rem;
+        line-height: 1.6;
+        color: #777;
+        margin-bottom: 2rem;
+      }
+    }
+  }
+}
+
+// Section divider
+.section-divider {
+  @include xy-grid-container;
+  @include xy-grid;
+
+  hr {
+    @include xy-cell(12);
+    @extend .dotted;
+    box-sizing: border-box;
+  }
+}
+
+// Benefits
+.benefits {
+  @include xy-grid-container;
+  @include xy-grid;
+  text-align: center;
+
+  header {
+    @include xy-cell(12);
+
+    h2 {
+      font-weight: 300;
+    }
+
+    h4 {
+      font-size: 1.125rem;
+      line-height: 1.6;
+      color: #777;
+    }
+  }
+
+  .semantic,
+  .responsive,
+  .customizable,
+  .professional {
+    @include breakpoint(small) {
+      @include xy-cell(12);
+    }
+
+    @include breakpoint(medium) {
+      @include xy-cell(3);
+    }
+
+    img {
+      padding: 1.25rem;
+      margin: 1rem auto 0 auto;
+    }
+
+    h3 {
+      color: #0a0a0a;
+      font-weight: 300;
+      font-size: 1.75rem;
+    }
+
+    p {
+      font-size: 0.9375rem;
+    }
+  }
+
+  .why-foundation {
+    @include xy-cell(12);
+    margin-top: 4rem;
+  }
+}

src/assets/scss/templates/_kitchen-sink.scss

@@ -0,0 +1,84 @@
+.kitchen-sink-header {
+  @include xy-cell(12);
+}
+
+
+.kitchen-sink-components {
+  hr {
+    margin: 3rem 0;
+  }
+
+  @include breakpoint(small) {
+    @include xy-cell(12);
+  }
+
+  @include breakpoint(large) {
+    @include xy-cell(9);
+  }
+}
+
+.kitchen-sink-nav {
+  @include breakpoint(small) {
+    display: none;
+  }
+
+  @include breakpoint(large) {
+    @include xy-cell(3);
+    display: block;
+    float: right;
+
+    .docs-sub-menu {
+      font-size: 0.85rem;
+      margin-top: 1rem;
+    }
+
+    .docs-menu-title {
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      color: $dark-gray;
+      font-weight: bold;
+      line-height: 1;
+      padding-left: 0.9rem;
+      margin-bottom: 0.5rem;
+      border-top: 1px solid $medium-gray;
+      margin-top: 1rem;
+      padding-top: 1.5rem;
+    }
+
+    .docs-toc {
+      width: 100%;
+      padding-left: 4rem;
+      padding-right: 1rem;
+    }
+
+    .docs-toc .active {
+      background: #2199e8;
+      color: white;
+    }
+
+    .docs-toc .docs-sub-menu:first-child .docs-menu-title {
+      margin-top: 0;
+      border-top: 0;
+      padding-top: 0;
+    }
+  }
+}
+
+.kitchen-sink-grid {
+  .grid-x {
+    background: #d6ecfa;
+    font-size: 12px;
+    line-height: 2rem;
+    margin-bottom: 1.5rem;
+    
+    .cell,:nth-child(odd) {
+      background: #7bc1ef;
+      color: #0a0a0a;
+    }
+
+    .cell:nth-child(even) {
+      background: #1779ba;
+      color: #fefefe;
+    }
+  }
+}

src/assets/scss/templates/freifunk-all-in-one-event-calendar.scss

@@ -0,0 +1,80 @@
+/* hamburg-freifunk-wp-theme: adaption/overrides of all-in-one-event-calendar theme (2018) */
+
+$freifunk-color-magenta: rgb(220,0,103);
+$freifunk-color-yellow:  rgb(255,180,0);
+$freifunk-color-blue: rgb(0,158,224);
+
+.main-container {
+
+  .ai1ec-agenda-widget-view {
+
+    margin-bottom: 25px;
+
+  }
+  .ai1ec-agenda-widget-view .ai1ec-date,
+  .ai1ec-agenda-view .ai1ec-date {
+    border-top: 0px solid #e5e5e5;
+    background: none;
+  }
+  .ai1ec-agenda-widget-view .ai1ec-date-title, .ai1ec-agenda-view .ai1ec-date-title {
+
+      border: 1px solid #888;
+      border-top: none;
+      border-radius: 5px;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      color: #525252;
+      float: left;
+      font-weight: bold !important;
+      background-image: none;
+      filter: none;
+      line-height: 1.2em;
+      margin: 6.5px 0.75em;
+      overflow: hidden;
+      text-align: center;
+      text-shadow: 0 1px 0 #fff;
+      width: 4em;
+
+  }
+  .ai1ec-agenda-widget-view .ai1ec-event > a {
+      background: transparent;
+      border: 0px solid #ccc;
+      color: #333;
+  }
+
+  .ai1ec-agenda-widget-view .ai1ec-month, .ai1ec-agenda-view .ai1ec-month {
+
+    background: #dc0067;
+    border-radius: 0;
+    color: #fff;
+    font-size: inherit;
+    letter-spacing: 0.2em;
+    padding: 0.2em 0.2em;
+    text-transform: inherit;
+    text-shadow: none;
+
+  }
+  .ai1ec-subscribe-buttons-widget {
+    padding: 0 0 0 0;
+  }
+  .timely .ai1ec-btn {
+    border: 1px solid transparent;
+  }
+  .timely .ai1ec-btn-default:hover, .timely .ai1ec-btn-default:focus, .timely .ai1ec-btn-default:active, .timely .ai1ec-btn-default.ai1ec-active, .ai1ec-open .ai1ec-dropdown-toggle.timely .ai1ec-btn-default {
+    color: #333;
+    background-color: #fff;
+  }
+
+  /* index view */
+  .ai1ec-agenda-view .ai1ec-event {
+    background: #fff;
+    border: none;
+    .ai1ec-event-title {
+       color: #333;
+    }
+  }
+
+}

src/assets/scss/templates/freifunk.scss

@@ -0,0 +1,311 @@
+/* hamburg-freifunk-wp-theme (2018) */
+
+$freifunk-color-magenta: rgb(220,0,103);
+$freifunk-color-yellow:  rgb(255,180,0);
+$freifunk-color-blue: rgb(0,158,224);
+
+body {
+    font-family: hk_groteskmedium, "Helvetica Neue", sans-serif;
+    font-weight: normal;
+    line-height: 1.5;
+    color: #0a0a0a;
+
+}
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
+  font-family: hk_groteskbold, "Helvetica Neue", sans-serif;
+}
+h6 {
+  font-family: hk_groteskbold, "Helvetica Neue", sans-serif;
+  text-transform: uppercase;
+  font-weight: normal;
+}
+p, li, blockquote {
+    margin-bottom: 1rem;
+    font-size: inherit;
+    line-height: 1.6;
+    text-rendering: optimizeLegibility;
+    font-size: 17px;
+    @media screen and (max-width: 39.9375em) {
+      line-height: 1.5;
+      font-size: 18px;
+    }
+}
+
+
+/* header/topbar */
+
+.title-bar-left {
+    padding-left: 10px;
+
+    .menu-icon {
+      width: 18px;
+    }
+    a {
+     font-size: 1.2rem;
+    }
+}
+.title-bar-title {
+    padding-left: 5px;
+}
+
+.top-bar-outer {
+  background-color: #2C3840;
+  nav.top-bar {
+
+    max-width: 90rem;
+
+    margin: 0 auto;
+
+    max-height: 75px;
+
+    .top-bar-left {
+      min-width: 48rem;
+      margin-top: 50px;
+      .site-desktop-title.top-bar-title {
+
+        font-size: 18px;
+
+        a {
+          color: #e6e6e6;
+          font-size: inherit;
+        }
+
+        #logo {
+          float: left;
+          border: 1px solid white;
+
+          #logo-inner {
+
+            margin-left: 74px;
+
+            margin-top: 0;
+
+            position: absolute;
+            -webkit-transform: rotate(34deg);
+            -ms-transform: rotate(34deg);
+            transform: rotate(34deg);
+            display: block;
+
+
+            img {
+              transform: scale(2.4);
+            }
+          }
+
+        }
+        #title {
+          float: left;
+          margin-left: 330px;
+          h1 {
+            margin: 0;
+            font-size: 2.5rem;
+            a {
+              padding: 0;
+              font-weight: normal;
+            }
+          }
+          h2 {
+            font-size: 1.8rem;
+            margin: 0;
+          }
+        }
+
+
+      }
+    }
+    .top-bar-right {
+      background-color: #2C3840;
+      margin-top: 30px;
+     .menu  {
+        margin-right: 1rem;
+        li, li:not(:last-child), li:not(.menu-text) {
+          border-right: 0px solid #4e4e4e;
+          margin: 0;
+
+          a {
+            color: #e6e6e6;
+            padding: 0rem 0.7rem 0;
+            font-weight: normal;
+            font-size: 18px;
+            line-height: 1;
+            background: transparent;
+          }
+          a:hover  {
+            background-color: #42525D;
+          }
+          a::before {
+            content: url('../images/freifunk_pfeil.svg');
+            display: inline-block;
+            color: #ffb400;
+            line-height: 0;
+            transform: scale(0.6);
+            vertical-align: -10px;
+            width: 38px;
+            @media screen and (max-width: 39.9375em) {
+              transform: scale(0.5);
+              vertical-align: -10px;
+              width: 42px;
+            }
+          }
+        }
+      }
+    }
+
+
+
+  }
+}
+/* banner image */
+
+#banner {
+    height: 300px;
+    overflow: hidden;
+    width: 100%;
+
+
+    img {
+      width: 120%;
+      max-width: 200%;
+    }
+}
+
+/* main content */
+
+.main-container {
+
+  margin-top: 235px;
+
+  @media screen and (max-width: 39.9375em) {
+    margin-top: 20px;
+  }
+  .entry-content {
+    margin-bottom: 50px;
+  }
+  a {
+    color: $freifunk-color-magenta;
+    border-bottom: 2px solid $freifunk-color-magenta;
+  }
+  a:hover, a:focus {
+    color: darken($freifunk-color-magenta,8%);
+    border-bottom: 4px solid darken($freifunk-color-magenta,8%);
+  }
+  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
+    a {
+      border-bottom: 0;
+    }
+  }
+  h1.entry-title, h2.entry-title {
+    margin-left: -16px;
+    color: $freifunk-color-magenta;
+    @media screen and (max-width: 39.9375em) {
+      font-size: 1.55rem;
+      margin-left: -8px;
+    }
+  }
+  h1.entry-title::before,
+  h2.entry-title::before {
+    content: url('../images/freifunk_pfeil.svg');
+    display: inline-block;
+    color: #ffb400;
+    line-height: 0;
+    transform: scale(0.82);
+    vertical-align: -5px;
+    width: 48px;
+    @media screen and (max-width: 39.9375em) {
+      transform: scale(0.55);
+      vertical-align: -10px;
+      width: 42px;
+    }
+
+
+  }
+
+
+
+  article p {
+    margin-left: 32px;
+    margin-right: 65px;
+
+    @media screen and (max-width: 39.9375em) {
+      margin-left: 0;
+      margin-right: 0;
+
+    }
+
+  }
+  p.edit-link,
+  p.byline.author {
+    color: #644;
+    font-size: 15px;
+
+    @media screen and (max-width: 39.9375em) {
+      font-size: 15px;
+    }
+    a {
+      color: #644;
+      border-bottom: 2px solid #644;
+    }
+    a:hover {
+      color: #644;
+      border-bottom: 4px solid #644;
+    }
+  }
+
+  aside.sidebar .menu,
+  aside.sidebar .widget
+  {
+    -webkit-flex-wrap: unset;
+    -ms-flex-wrap: unset;
+    flex-wrap: unset;
+    -webkit-flex-direction: unset;
+    -ms-flex-direction: unset;
+    flex-direction: unset;
+    display: block;
+    ul {
+      list-style-type: none;
+      margin: 0 0 3.5rem -1.5rem;
+      li {
+        margin: 1.5rem 0;
+      }
+      a  {
+        padding: 1rem;
+        border-bottom: none;
+      }
+      a:hover {
+        background-color: #e0e0f0;
+        background-color: #e6e6f0;
+      }
+      a::before {
+        content: url('../images/freifunk_pfeil.svg');
+        display: inline-block;
+        color: #ffb400;
+        line-height: 0;
+        transform: scale(0.6);
+        vertical-align: -10px;
+        width: 38px;
+        @media screen and (max-width: 39.9375em) {
+          transform: scale(0.5);
+          vertical-align: -10px;
+          width: 42px;
+        }
+      }
+    }
+    li::beforeX {
+        content: "➜";
+        display: inline-block;
+        padding-left: 0;
+        height: 10px;
+        width: 23px;
+        color: rgb(255,180,0);
+        transform: rotate(-45deg);
+        line-height: 0.7;
+
+    }
+    a {
+      line-height: 1;
+      text-decoration: none;
+      display: inline;
+      padding: 0;
+    }
+  }
+}