feat: add banner brand (logo) (#157)

* feat: add mobile brand * feat: fully implement brand * fix: tablet and desktop logo sizes
platform-coop-toolkit · Jan 16, 2020 · ab756af · ab756af
1 parent fd5b17f
commit ab756af
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 6 deletions.
diff --git a/src/assets/styles/components/_menu.scss b/src/assets/styles/components/_menu.scss
@@ -49,11 +49,13 @@ nav {
 .menu {
 	background: $dark-mint-400;
 	display: block;
+	left: 0;
 	list-style: none;
 	margin: 0;
 	padding-left: 0;
 	padding-top: rem(70);
-	position: relative;
+	position: absolute;
+	width: 100vw;
 	z-index: 1;
 
 	li {
@@ -220,7 +222,7 @@ nav {
 
 @include breakpoint-up(md) {
 	nav {
-		height: rem(109.5);
+		height: rem(80);
 	}
 
 	.menu-toggle {
@@ -233,9 +235,10 @@ nav {
 		display: flex;
 		flex-direction: row;
 		float: right;
-		height: rem(109.5);
+		height: rem(80);
 		padding-top: 0;
 		position: relative;
+		width: auto;
 
 		li {
 			border-top: 0;
@@ -252,7 +255,7 @@ nav {
 		font-size: 1rem;
 		font-weight: $font-weight-normal;
 		min-height: 0;
-		padding: rem(17) rem(16);
+		padding: rem(26) rem(16);
 
 		&::after {
 			background: transparent;
@@ -283,7 +286,7 @@ nav {
 			box-shadow: none;
 			color: $off-white;
 			outline: 0;
-			padding: rem(17) rem(16);
+			padding: rem(26) rem(16);
 		}
 
 		svg {
@@ -355,7 +358,7 @@ nav {
 
 		.menu__item {
 			background-color: $white;
-			padding-left: rem(16);
+			padding: rem(17) rem(16);
 
 			&::after {
 				display: none;

diff --git a/src/assets/styles/layouts/_header.scss b/src/assets/styles/layouts/_header.scss
@@ -8,6 +8,50 @@
 	background-color: $blue-500;
 }
 
+[role="banner"] .container {
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+[role="banner"] .brand {
+	color: $blue-500;
+	height: rem(70);
+	padding: rem(22) rem(12);
+	width: rem(50);
+
+	svg {
+		height: rem(26);
+		width: rem(26);
+	}
+
+	&:hover {
+		color: $black;
+	}
+
+	&:focus,
+	&:active {
+		background-color: $blue-500;
+		color: $off-white;
+	}
+}
+
+.home [role="banner"] .brand {
+	color: $off-white;
+
+	&:hover {
+		color: $white;
+	}
+
+	&:focus,
+	&:active {
+		background-color: $off-white;
+		color: $blue-500;
+		outline: 0;
+	}
+}
+
 .page-header {
 	padding-bottom: rem(100);
 	padding-top: rem(100);
@@ -17,6 +61,16 @@
 }
 
 @include breakpoint-up(sm) {
+	[role="banner"] .brand {
+		padding: rem(20) rem(23);
+		width: rem(74);
+
+		svg {
+			height: rem(28);
+			width: rem(28);
+		}
+	}
+
 	.page-header {
 		@include grid-column-span(6, 8, 2);
 
@@ -29,6 +83,17 @@
 	[role="banner"] {
 		padding-left: rem(30);
 		padding-right: rem(120);
+
+		.container {
+			justify-content: space-between;
+		}
+
+		.brand {
+			height: rem(80);
+			margin-left: rem(0);
+			padding: rem(26);
+			width: rem(80);
+		}
 	}
 }
 

diff --git a/src/components/02-molecules/00-menu/menu.njk b/src/components/02-molecules/00-menu/menu.njk
@@ -1,3 +1,4 @@
+{% render '@brand' %}
 <nav aria-labelledby="menu-primary-label">
 	<button class="menu-toggle" aria-expanded="false">
 		{% render '@svg', {svg:'menu', class:'open'}, true %}

diff --git a/src/components/02-molecules/_brand/brand.config.js b/src/components/02-molecules/_brand/brand.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+	title: 'Brand',
+	status: 'wip',
+	context: {
+		title: 'Platform Cooperativism Consortium',
+		visuallyHiddenTitle: true,
+	}
+};
diff --git a/src/components/02-molecules/_brand/brand.njk b/src/components/02-molecules/_brand/brand.njk
@@ -0,0 +1,4 @@
+<a href="/" class="brand">
+	{% render '@svg', {svg: 'pcc', viewBox: '0 0 32 32'}, true %}
+	<span class="brand__title{% if visuallyHiddenTitle %} screen-reader-text{% endif %}">{{ title }}</span>
+</a>