Demo overview

Author: cornae

_layouts/landing-demos.html

@@ -2,4 +2,21 @@
 layout: landing
 ---
 
-{{ content }}
+<div class="swim-lane type-patterns">
+	<div class="pat-container">
+		{% for item in site.demos %}
+			{% if item.layout == 'demo' %}
+			    <a href="{{ item.url }}" 
+			       title="{{ item.description }}" 
+			       class="pattern-tile cat-{{ item.category }}">
+					<figure>
+						<img src="/assets/placeholders/placeholder-1x1.png"
+						     style="background-image: url(/media/icons/{{ item.title | slugify }}.svg)" 
+						     alt="" />
+						<figcaption>{{ item.title }}</figcaption>
+					</figure>
+			    </a>
+			{% endif %}
+		{% endfor %}
+	</div>
+</div>

_layouts/landing-documentation.html

@@ -2,5 +2,26 @@
 layout: landing
 ---
 
-{{ content }}
-
+{% if page.groups %}
+	<div class="pat-container">
+		<div class="wells">
+			{% for group in page.groups %}
+				<div class="pat-well pat-rich">
+					<h2>{{ group.name }}</h2>
+					<p>
+						{{ group.summary }}
+					</p>
+					<ul class="link-list">
+						{% for item in site.documentation %}
+							{% if item.parent == group.name %}
+								<li>
+									<a href="{{ item.url }}">{{ item.title }}</a>
+								</li>
+							{% endif %}
+						{% endfor %}
+					</ul>
+				</div>
+			{% endfor %}
+		</div>
+	</div>
+{% endif %}

_layouts/landing.html

@@ -17,38 +17,4 @@ <h1>{{ page.title }}</h1>
 	</div>
 </div>
 
-{% assign article_content = page.content | strip_newlines %}
-
-{% unless page.content == empty or article_content == '' %}
-	<div class="swim-lane type-body-text">
-		<div class="pat-container">
-			<article class="pat-rich">
-				{{ content }}
-			</article>
-		</div>
-	</div>
-{% endunless %}
-
-{% if page.groups %}
-	<div class="pat-container">
-		<div class="wells">
-			{% for group in page.groups %}
-				<div class="pat-well pat-rich">
-					<h2>{{ group.name }}</h2>
-					<p>
-						{{ group.summary }}
-					</p>
-					<ul class="link-list">
-						{% for item in site.documentation %}
-							{% if item.parent == group.name %}
-								<li>
-									<a href="{{ item.url }}">{{ item.title }}</a>
-								</li>
-							{% endif %}
-						{% endfor %}
-					</ul>
-				</div>
-			{% endfor %}
-		</div>
-	</div>
-{% endif %}
+{{ content }}

_sass/_settings.scss

@@ -50,6 +50,7 @@ $osc-width: 500px;
 @import "components/main-content";
 @import "components/long-read";
 @import "components/osc";
+@import "components/pattern-tile";
 @import "components/rich";
 @import "components/site-header";
 @import "components/swim-lane";

_sass/assets/_colours.scss

@@ -12,4 +12,11 @@ $colour-download: darkgoldenrod;
 
 $colour-link: blue;
 
-$colour-osc: #215021;
+$colour-osc: #215021;
+
+// Categories
+$cat-behavioural: #717dd7;
+$cat-fancy-stuff: #bf9230;
+$cat-form: #9e80a1;
+$cat-layout: #80a4a7;
+$cat-navigation: #b6c16e;

_sass/components/_main-content.scss

@@ -1,6 +1,7 @@
 #main-content {
   padding: 155px 0;
   transition: transform $header-animation-speed;
+  @include clear;
 
   @include screen-size(small) {
   	padding: 100px 0;

_sass/components/_pattern-tile.scss

@@ -0,0 +1,53 @@
+.pattern-tile {
+	float: left;
+	width: 20%;
+	margin-bottom: 30px;
+	text-decoration: none;
+	font-size: 25px;
+	padding: 0 20px;
+	box-sizing: border-box;
+
+	&.cat-behavioural img {
+		background-color: $cat-behavioural;
+	}
+
+	&.cat-form img {
+		background-color: $cat-form;
+	}
+
+	&.cat-layout img {
+		background-color: $cat-layout;
+	}
+
+	&.cat-navigation img {
+		background-color: $cat-navigation;
+	}
+
+	&.cat-fancy-stuff img {
+		background-color: $cat-fancy-stuff;
+	}
+
+	&:hover {
+		img {
+			transform: scale(1.02);
+		}
+	}
+
+	img {
+		width: 100%;
+		display: block;
+		background-color: silver;
+		background-size: cover;
+		border-radius: 50%;
+		margin: 0 0 15px;
+		transition: 0.1s all;
+	}
+
+	figcaption {
+		height: 40px;
+		overflow: hidden;
+		text-align: center;
+		color: black;
+		margin: 0 -20px;
+	}
+}