Merge pull request #5 from nhsevidence/feature/content

Some content work
nice-digital · Jul 25, 2016 · 57f846a · 57f846a
2 parents 99cfc59 + 17bb5e6
commit 57f846a
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 35 deletions.
diff --git a/web/client/stylesheets/components/_swatch.scss b/web/client/stylesheets/components/_swatch.scss
@@ -1,10 +1,11 @@
 .swatch {
 	border-radius: 999px;
-	display: block;
+	display: none;
 	float: left;
 	height: 100px;
 	line-height: 100px;
-	margin: 0 8px 8px;
+	margin: 0 8px 28px;
+	position: relative;
     text-align: center;
 	width: 100px;
 
@@ -13,11 +14,20 @@
 		@each $key, $hex in $palette {
 			&--#{$name}-#{$key} {
 				background: $hex;
+				display: block;
+
+				&:before {
+					content: '#{$name}-#{$key}';
+					left: 0;
+					line-height: 1;
+					position: absolute;
+					top: 100%;
+					width: 100%;
+				}
 
 				&:after {
 					color: invert($hex);
 					content: '#{$hex}';
-					// TODO: Change colour based on hex
 				}
 			}
 		}

diff --git a/web/server/views/index.njk b/web/server/views/index.njk
@@ -50,8 +50,6 @@
 
 			{{ item("Colour", "/style-guide/colour", "Colour contrast, SASS variables, colour palettes") }}
 
-			{{ item("Buttons", "/style-guide/buttons", "Button text, button blocks") }}
-
 		</div>
 
 		<div class="panel">
@@ -73,36 +71,17 @@
 		<p>We use SASS as our CSS pre-processor</p>
 
 		<div class="grid">
-			<div class="grid__item one-whole tablet--one-third desktop--one-quarter">
-				<h4><a href="/sass/syntax">Syntax</a></h4>
-				<p>
-					Syntax and formatting
-				</p>
-			</div>
-			<div class="grid__item one-whole tablet--one-third desktop--one-quarter">
-				<h4><a href="/sass/naming">Naming</a></h4>
-				<p>
-					Variable naming and BEM convention
-				</p>
-			</div>
-			<div class="grid__item one-whole tablet--one-third desktop--one-quarter">
-				<h4><a href="/style-guide/layout">Layout</a></h4>
-				<p>
-					Grid unit proportions, gutters and spacing.
-				</p>
-			</div>
-			<div class="grid__item one-whole tablet--one-third desktop--one-quarter">
-				<h4><a href="/style-guide/colour">Colour</a></h4>
-				<p>
-					Colour contrast, Sass variables, colour palettes.
-				</p>
-			</div>
-			<div class="grid__item one-whole tablet--one-third desktop--one-quarter">
-				<h4><a href="/style-guide/colour">Colour</a></h4>
-				<p>
-					Colour contrast, Sass variables, colour palettes.
-				</p>
-			</div>
+
+			{{ item("Syntax", "/sass/syntax", "Syntax, formatting, conventions and code structure") }}
+
+			{{ item("Naming", "/sass/naming", "Variable naming and BEM convention") }}
+
+			{{ item("Layout", "/sass/grid", "Grid unit proportions, gutters and spacing") }}
+
+			{{ item("Colour", "/sass/colour", "Colour contrast, Sass variables, colour palettes") }}
+
+			{{ item("Documentation", "/sass/docs", "Auto-generated SASS code documentation") }}
+
 		</div>
 
 	</div>

diff --git a/web/server/views/style-guide/colour.njk b/web/server/views/style-guide/colour.njk
@@ -28,20 +28,75 @@
 	<section id="groups">
 		<h2>Palettes</h2>
 
+		<h3>Greys</h3>
+
+		<div class="swatch swatch--grey-x-light"></div>
+		<div class="swatch swatch--grey-light"></div>
+		<div class="swatch swatch--grey-mid-light"></div>
+		<div class="swatch swatch--grey-base"></div>
+		<div class="swatch swatch--grey-mid-dark"></div>
+		<div class="swatch swatch--grey-dark"></div>
+		<div class="swatch swatch--grey-x-dark"></div>
+
+		<h3>Greens</h3>
+
+		<div class="swatch swatch--green-x-light"></div>
+		<div class="swatch swatch--green-light"></div>
+		<div class="swatch swatch--green-mid-light"></div>
+		<div class="swatch swatch--green-base"></div>
+		<div class="swatch swatch--green-mid-dark"></div>
+		<div class="swatch swatch--green-dark"></div>
+		<div class="swatch swatch--green-x-dark"></div>
+
 		<h3>Oranges</h3>
 
+		<div class="swatch swatch--orange-x-light"></div>
+		<div class="swatch swatch--orange-light"></div>
+		<div class="swatch swatch--orange-mid-light"></div>
 		<div class="swatch swatch--orange-base"></div>
+		<div class="swatch swatch--orange-mid-dark"></div>
+		<div class="swatch swatch--orange-dark"></div>
+		<div class="swatch swatch--orange-x-dark"></div>
 
 		<h3>Blues</h3>
 
 		<div class="swatch swatch--blue-x-light"></div>
 		<div class="swatch swatch--blue-light"></div>
+		<div class="swatch swatch--blue-mid-light"></div>
 		<div class="swatch swatch--blue-base"></div>
+		<div class="swatch swatch--blue-mid-dark"></div>
 		<div class="swatch swatch--blue-dark"></div>
+		<div class="swatch swatch--blue-x-dark"></div>
 
 		<h3>Purples</h3>
 
+		<div class="swatch swatch--purple-x-light"></div>
+		<div class="swatch swatch--purple-light"></div>
+		<div class="swatch swatch--purple-mid-light"></div>
 		<div class="swatch swatch--purple-base"></div>
+		<div class="swatch swatch--purple-mid-dark"></div>
+		<div class="swatch swatch--purple-dark"></div>
+		<div class="swatch swatch--purple-x-dark"></div>
+
+		<h3>Reds</h3>
+
+		<div class="swatch swatch--red-x-light"></div>
+		<div class="swatch swatch--red-light"></div>
+		<div class="swatch swatch--red-mid-light"></div>
+		<div class="swatch swatch--red-base"></div>
+		<div class="swatch swatch--red-mid-dark"></div>
+		<div class="swatch swatch--red-dark"></div>
+		<div class="swatch swatch--red-x-dark"></div>
+
+		<h3>Pinks</h3>
+
+		<div class="swatch swatch--pink-x-light"></div>
+		<div class="swatch swatch--pink-light"></div>
+		<div class="swatch swatch--pink-mid-light"></div>
+		<div class="swatch swatch--pink-base"></div>
+		<div class="swatch swatch--pink-mid-dark"></div>
+		<div class="swatch swatch--pink-dark"></div>
+		<div class="swatch swatch--pink-x-dark"></div>
 
 	</section>