how-it-works icons

.gitignore

@@ -1,2 +1,2 @@
-app/assets/media/
+app/assets/media/videos
 node_modules

app/assets/scss/base/_fonts.scss

@@ -16,4 +16,19 @@
 @font-face {
   font-family: "CocogooseExtra";
   src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "BS-regular";
+  src: url("../media/fonts/bahnschrift/BS_Static_Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "BS-light";
+  src: url("../media/fonts/bahnschrift/BS_Static_Light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "BS-bold";
+  src: url("../media/fonts/bahnschrift/BS_Static_Bold.ttf") format("truetype");
 }

app/assets/scss/base/_global.scss

@@ -3,7 +3,7 @@
 }
 
 body {
-	font-family: 'Roboto', sans-serif;
+	font-family: 'roboto', sans-serif;
 	color: #333;
 }
 

app/assets/scss/modules/_headline.scss

@@ -1,9 +1,13 @@
 .headline{
 	margin:auto;
 
+	strong {
+		font-weight: 800;
+	}
+
 	&--lt-margin{
 		margin-left: 55px;
-		margin-top: -18px;
+		margin-top: -5px;
 	}
 
 	&--s-width {
@@ -16,7 +20,7 @@
 	}
 
 	&__title {
-		font-weight: 300;
+		font-weight: 400;
 		font-size: 1.7rem;
 
 		@include atMedium(){
@@ -29,7 +33,7 @@
 		font-size: 1.4rem;
 
 		@include atMedium(){
-			font-size: 1.8rem;
+			font-size: 1.6rem;
 		}
 	}
 	

app/assets/scss/modules/_how-it-works.scss

@@ -1,7 +1,6 @@
 .how-it-works{
 	margin: 50px 0px;
 
-
 	strong {
 		font-weight: 800;
 	}
@@ -48,15 +47,27 @@
 		
 	}
 
-	&__icon--foodcoop{
+	&__icon--1{
-		width: 255px;
+		width: 225px;
 		margin-left: 60px;
 	}
 
-	&__icon--foodcoop2{
+	&__icon--2{
-		width: 100px;
+		width: 130px;
 		margin-right: .8rem;
-		margin-bottom: -20px;
+		margin-bottom: -45px;
 	}
 
+	&__icon--3{
+		width: 130px;
+		margin-right: .8rem;
+		margin-bottom: -35px;
+	}
+
+
+	&__icon--4{
+		width: 100px;
+		margin-bottom: -30px;
+		margin-right: 20px;
+	}
 }

app/assets/scss/modules/_icon.scss

@@ -1,14 +0,0 @@
-.icon{
-	
-	&--foodcoop{
-		width: 255px;
-		margin-left: 60px;
-	}
-
-	&--foodcoop2{
-		float: left;
-		width: 100px;
-		margin-top: -33px;
-		margin-right: 20px;
-	}
-}

app/assets/scss/style.scss

@@ -13,7 +13,6 @@
 @import './modules/_rows';
 @import './modules/_generic-content-container';
 @import './modules/_video-container';
-@import './modules/_icon';
 @import './modules/_how-it-works.scss';
 
 

app/index.html

@@ -99,12 +99,12 @@
 		<div class="wrapper wrapper--t-margins">
 			<div class="row row--gutters">
 				<div class="row__medium-3--larger">
-					<img class="how-it-works__icon how-it-works__icon--foodcoop" src="./assets/media/images/foodcoop.png">
+					<img class="how-it-works__icon how-it-works__icon--1" src="./assets/media/images/foodcoop2.png">
 				</div>
         		<div class="row__medium-9--smaller">
         			<div class="headline headline--lt-margin">
 						<h2 class="headline__title ">What is a <strong>foodcoop?</strong></h2>
-						<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from suppliers of their own choosing. <br> A collective do-it-yourself supermarket.</h2>
+						<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from suppliers of their own choosing. A collective do-it-yourself supermarket.</h2>
 					</div>
 				</div>
 			</div>
@@ -120,7 +120,7 @@
 						<img src="./assets/media/images/pickup_day_short.png">
 					</div>
 					<div class="row__medium-6">
-						<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"> Become a <strong>Member</strong> </h2>
+						<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--2" src="./assets/media/images/membership.png"> Become a <strong>Member</strong> </h2>
 						<p>If you’re a member of our BioBulkBende, you have access to great organic food, straight from the producers, at lower prices than in the supermarket. In return, you pay a one-time non-refundable membership fee of 15 euros, and contribute a bit of your time and energy to keep our co-op running.</p>
 					</div>
 				</div>
@@ -129,7 +129,7 @@
 			<div class="how-it-works">
 				<div class="row row--gutters">
 					<div class="row__medium-6">
-						<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"> Join a <strong>Work Group</strong> </h2>
+						<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/workgroup.png"> Join a <strong>Work Group</strong> </h2>
 						<p>A work group is a group of members who work together and are responsible for a specific need of our food co-op. Some examples of work groups are administration, membership, orders, financial, etc. As a member of our food co-op, you have to join a work group.</p>
 					</div>
 					<div class="row__medium-6">
@@ -144,7 +144,7 @@
 						<img src="./assets/media/images/pickup_day_short.png">
 					</div>
 					<div class="row__medium-6">
-						<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"> Order your <strong>Food</strong> </h2>
+						<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/order.png"> Order your <strong>Food</strong> </h2>
 						<p>Only members can place an order, but anyone can become a member! For food ordering, we use Foodsoft. You can learn more about how to order by joining us at any upcoming pickup day.</p>
 					</div>
 				</div>
@@ -168,7 +168,7 @@
 					<div class="wrapper wrapper--white wrapper--medium">
 						<div class="how-it-works__last-section">
 							<div class="wrapper wrapper--small">
-								<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"><strong>Pick-up day</strong></h2>
+								<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--4" src="./assets/media/images/pickup.png"><strong>Pick-up day</strong></h2>
 								<p>Only members can place an order, but anyone can become a member! For food ordering, we use Foodsoft. You can learn more about how to order by joining us at any upcoming pickup day.</p>
 								<p><a href="#" class="btn btn--large"><b>Join us!</b></a></p>
 							</div>

app/temp/styles/style.css

@@ -320,11 +320,23 @@ template {
   font-family: "CocogooseExtra";
   src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype"); }
 
+@font-face {
+  font-family: "BS-regular";
+  src: url("../media/fonts/bahnschrift/BS_Static_Regular.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "BS-light";
+  src: url("../media/fonts/bahnschrift/BS_Static_Light.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "BS-bold";
+  src: url("../media/fonts/bahnschrift/BS_Static_Bold.ttf") format("truetype"); }
+
 * {
   box-sizing: border-box; }
 
 body {
-  font-family: 'Roboto', sans-serif;
+  font-family: 'roboto', sans-serif;
   color: #333; }
 
 img {
@@ -636,16 +648,18 @@ img {
 
 .headline {
   margin: auto; }
+  .headline strong {
+    font-weight: 800; }
   .headline--lt-margin {
     margin-left: 55px;
-    margin-top: -18px; }
+    margin-top: -5px; }
   .headline--s-width {
     max-width: 500px; }
     @media (min-width: 800px) {
       .headline--s-width {
         max-width: 1000px; } }
   .headline__title {
-    font-weight: 300;
+    font-weight: 400;
     font-size: 1.7rem; }
     @media (min-width: 800px) {
       .headline__title {
@@ -655,7 +669,7 @@ img {
     font-size: 1.4rem; }
     @media (min-width: 800px) {
       .headline__subtitle {
-        font-size: 1.8rem; } }
+        font-size: 1.6rem; } }
   .headline--centered {
     text-align: center; }
   .headline--lightGreen {
@@ -759,16 +773,6 @@ img {
   width: 100%;
   height: 100%; }
 
-.icon--foodcoop {
-  width: 255px;
-  margin-left: 60px; }
-
-.icon--foodcoop2 {
-  float: left;
-  width: 100px;
-  margin-top: -33px;
-  margin-right: 20px; }
-
 .how-it-works {
   margin: 50px 0px; }
   .how-it-works strong {
@@ -802,12 +806,20 @@ img {
       .how-it-works__title {
         margin-top: 10px;
         font-size: 2.1rem; } }
-  .how-it-works__icon--foodcoop {
+  .how-it-works__icon--1 {
-    width: 255px;
+    width: 225px;
     margin-left: 60px; }
-  .how-it-works__icon--foodcoop2 {
+  .how-it-works__icon--2 {
-    width: 100px;
+    width: 130px;
     margin-right: .8rem;
-    margin-bottom: -20px; }
+    margin-bottom: -45px; }
+  .how-it-works__icon--3 {
+    width: 130px;
+    margin-right: .8rem;
+    margin-bottom: -35px; }
+  .how-it-works__icon--4 {
+    width: 100px;
+    margin-bottom: -30px;
+    margin-right: 20px; }
 
 /*# sourceMappingURL=style.css.map */