Change colors via config file

Author: emilbaehr

_config.yml

@@ -34,8 +34,8 @@ features                      :
     fontawesome_icon_name     : adjust
 
 # Theme Settings
-accent_color                  : #000000
-image_overlay_color           : #000000
+accent_color                  : "#1d63ea"
+image_overlay_color           : "#363b3d"
 
 
 # Analytics 

_sass/base.scss

@@ -1,21 +1,10 @@
 // Layout and grids
 $content-width: 1170px;
 
-// Colors
-$accent-color: #00ff33;
-
 // Fonts and sizes
 $font: 'Helvetica Neue', sans-serif;
 $primary-text-color: #000;
 
-*,
-*::before,
-*::after {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
 html {
     font-size: 62.5%;
 }
@@ -40,7 +29,24 @@ h4 {
     font-size: 2rem;
 }
 
+// Better font rendering
 body {
-	-webkit-font-smoothing: antialiased; // Better font rendering
+	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+}
+
+// Shadows
+$drop-shadow: drop-shadow(0px 5px 10px rgba(#000, 0.1)) drop-shadow(0px 1px 1px rgba(#000, 0.2));
+
+
+// Various resets
+*,
+*::before,
+*::after {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+
+	margin: 0;
+	padding: 0;
 }

_sass/layout.scss

@@ -1,6 +1,5 @@
 body {
 	box-sizing: border-box;
-	margin: 0;
 	font-family: $font;
 }
 
@@ -9,10 +8,10 @@ body {
 	height: 768px;
 	background: 
 		linear-gradient(
-		rgba(#363b3d, 0.6), 
-		rgba(#363b3d, 0.6)
-   		),
-		/* bottom, image */
+		rgba($image-overlay-color, 0.6), 
+		rgba($image-overlay-color, 0.6)
+		   ),
+		
 		url("/assets/headerimage.png");
 
 	background-repeat: no-repeat;
@@ -24,7 +23,7 @@ body {
 .headerBackground {
 	width: 100%;
 	height: 115px;
-	background-color: rgba(#000000, 0.1);
+	background-color: rgba(#000, 0.1);
 }
 
 .container {
@@ -96,10 +95,6 @@ nav > ul li a {
 	color: #fff;
 }
 
-.iphonePreview {
-	grid-area: p;
-}
-
 .appInfo {
 	grid-area: i;
 	display: flex;
@@ -109,10 +104,8 @@ nav > ul li a {
 }
 
 .appIconShadow {
-	margin: 0px;
-	padding: 0px;
 	display: flex;
-	filter: drop-shadow(0px 5px 10px rgba(#000, 0.1)) drop-shadow(0px 1px 1px rgba(#000, 0.2));
+	filter: $drop-shadow;
 }
 
 .appIconLarge {
@@ -129,14 +122,12 @@ nav > ul li a {
 }
 
 .appName {
-	margin: 0px;
 	margin-top: -5px;
 	color: #fff;
 }
 
 .appPrice {
 	color: #fff;
-	margin: 0px;
 	margin-top: 8px;
 	font-weight: normal;
 }
@@ -149,23 +140,22 @@ nav > ul li a {
 }
 
 .appDescription {
-	margin: 0px;
 	color: #fff;
 	font-weight: normal;
 }
 
 .downloadButtonsContainer {
 	margin-top: 42px;
-}
-
-.appStore {
-	margin-left: 24px;
+	filter: $drop-shadow;
 }
 
 .playStore {
+	margin-right: 25px;
+	margin-bottom: 25px;
 }
 
 .iphonePreview {
+	grid-area: p;
 	background-image: url(/assets/Blue.png);
 	background-repeat: no-repeat;
 	margin-top: 68px;
@@ -226,7 +216,7 @@ nav > ul li a {
 }
 
 .iconTop {
-	color: #1d63ea;
+	color: $accent-color;
 }
 
 .socialIconBack {
@@ -247,11 +237,6 @@ nav > ul li a {
 	line-height: 1.5;
 }
 
-.featureText * {
-	margin: 0px;
-	padding: 0px;
-}
-
 footer {
 	grid-area: f;
 	display: flex;
@@ -266,7 +251,6 @@ footer {
 	text-align: center;
 	padding-top: 100px;
 	padding-bottom: 100px;
-	margin: 0px;
 }
 
 .footerIcons {

css/main.scss

@@ -2,6 +2,9 @@
 # Front matter comment to ensure Jekyll properly reads file.
 ---
 
+$accent-color: {{ site.accent_color }};
+$image-overlay-color: {{ site.image_overlay_color }};
+
 @import 
     "base",
     "layout"

index.html

@@ -50,12 +50,12 @@ <h3 class="appPrice">
 					</div>
 					<div class="appDescriptionContainer">
 						<h4 class ="appDescription">
-							Wherever some that and kiwi that well dolphin alas this the mindfully jeepers one aside canny one preparatory up less therefore hello oh amid goodness checked.
+							{{ site.app_description }}
 						</h4>
 					</div>
 					<div class="downloadButtonsContainer">
-						<a href=""><img class="playStore" src="/assets/playstore.png"></a>
-						<a href=""><img class="appStore" src="/assets/appstore.png"></a>
+						<a href="https://"><img class="playStore" src="/assets/playstore.png"></a>
+						<a href="https://"><img class="appStore" src="/assets/appstore.png"></a>
 					</div>
 				</div>
 				{% include features.html %}