Correct links for facebook/github/twitter/mailto

Author: emilbaehr

_config.yml

@@ -36,6 +36,8 @@ features                      :
 
 # Theme Settings
 accent_color                             : "#1d63ea"
+primary_text_color                       : "#000000"
+secondary_text_color                     : "#666666"
 
 header_color                             : "#000000"
 header_transparency                      : 0.1

_includes/features.html

@@ -10,9 +10,9 @@
             </span>
         </div>
         <div class="featureText">
-            <h4>
+            <h3>
                 {{ feature.title }}
-            </h4>
+            </h3>
             <p>
                 {{ feature.description }}
             </p>

_includes/footer.html

@@ -3,7 +3,7 @@
 	<div class="footerIcons">
 
 		{% if site.facebook_username %}
-			<a href="https://">
+			<a href="https://facebook.com/{{ site.facebook_username }}">
 				<span class="fa-stack fa-1x">
 					<i class="socialIconBack fas fa-circle fa-stack-2x"></i>
 					<i class="socialIconTop fab fa-facebook fa-stack-1x"></i>
@@ -21,7 +21,7 @@
 		{% endif %}
 
 		{% if site.github_username %}
-			<a href="https://">
+			<a href="https://github.com/{{ site.github_username }}">
 				<span class="fa-stack fa-1x">
 					<i class="socialIconBack fas fa-circle fa-stack-2x"></i>
 					<i class="socialIconTop fab fa-github fa-stack-1x"></i>
@@ -30,7 +30,7 @@
 		{% endif %}
 
 		{% if site.email_address %}
-			<a href="https://">
+			<a href="mailto:{{ site.email_address }}">
 				<span class="fa-stack fa-1x">
 					<i class="socialIconBack fas fa-circle fa-stack-2x"></i>
 					<i class="socialIconTop fas fa-envelope fa-stack-1x"></i>

_includes/header.html

@@ -11,7 +11,7 @@
 			</svg>
 			<img class="headerIcon" src="/assets/appicon-1024px.png">
 		</div>
-		<h4>Your App</h4>
+		<p>{{ site.app_name }}</p>
 	</div>
 	<nav>
 		<ul>

_sass/base.scss

@@ -8,6 +8,7 @@ $primary-text-color: #000;
 html {
 	font-size: 62.5%;
 	font-family: $font;
+	line-height: 1;
 }
 
 body {
@@ -19,14 +20,10 @@ h1 {
 }
 
 h2 {
-	font-size: 4rem;
+	font-size: 2rem;
 }
 
 h3 {
-	font-size: 3rem;
-}
-
-h4 {
     font-size: 2rem;
 }
 
@@ -41,6 +38,7 @@ a:hover,
 a:visited,
 a:active {
 	color: $accent-color;
+	text-decoration: none;
 }
 
 // Shadows

_sass/layout.scss

@@ -38,20 +38,24 @@
 
 header {
 	grid-area: h;
-	display: grid;
-	grid-template-columns: repeat(12, 1fr);
-	grid-template-rows: 115px;
+	display: flex;
 }
 
 .logo {
-	grid-column: 1 / span 6;
+	width: 50%;
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
-	color: #fff;
 	height: 115px;
 }
 
+.logo > p {
+	color: #fff;
+	display: flex;
+	font-weight: bold;
+	padding-bottom: 1px;
+}
+
 .headerIcon {
 	width: 50px;
 	height: 50px;
@@ -61,15 +65,15 @@ header {
 }
 
 nav {
-	grid-column: 7 / span 6;
+	width: 50%;
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
-	color: #fff;
 	height: 115px;
 }
 
 nav > ul {
+	color: #fff;
 	display: flex;
 	list-style-type: none;
 }
@@ -82,9 +86,16 @@ nav > ul li:first-child {
 	padding-left: 0px;
 }
 
-nav > ul li a {
+nav > ul li a:link,
+nav > ul li a:visited {
 	text-decoration: none;
-	color: #fff;
+	color: rgba(#fff, 0.6);
+}
+
+nav > ul li a:hover,
+nav > ul li a:active {
+	text-decoration: none;
+	color: rgba(#fff, 1);
 }
 
 .appInfo {
@@ -96,7 +107,6 @@ nav > ul li a {
 }
 
 .appIconShadow {
-	display: flex;
 	filter: $drop-shadow;
 }
 
@@ -109,21 +119,19 @@ nav > ul li a {
 }
 
 .appNamePriceContainer {
+	display: flex;
 	height: 120px;
 	flex: 0 1 auto;
-	align-items: flex-center;
-	align-content: center;
+	align-items: center;
 }
 
 .appName {
 	color: #fff;
-	margin-top: -4px;
 }
 
 .appPrice {
 	color: #fff;
 	font-weight: normal;
-	padding-top: 8px;
 }
 
 .appDescriptionContainer {
@@ -135,7 +143,6 @@ nav > ul li a {
 
 .appDescription {
 	color: #fff;
-	font-weight: normal;
 }
 
 .downloadButtonsContainer {
@@ -225,7 +232,12 @@ nav > ul li a {
 	margin-left: 18px;
 }
 
+.featureText > h3 {
+	color: $primary-text-color;
+}
+
 .featureText > p {
+	color: $secondary-text-color;
 	margin-top: 8px;
 	line-height: 1.5;
 }
@@ -239,6 +251,7 @@ footer {
 }
 
 .footerText {
+	color: $secondary-text-color;
 	display: block;
 	width: 100%;
 	text-align: center;

css/main.scss

@@ -3,6 +3,8 @@
 ---
 
 $header-image: '{{ site.header_image }}';
+$primary-text-color: {{ site.primary_text_color }};
+$secondary-text-color: {{ site.secondary_text_color }};
 
 $accent-color: {{ site.accent_color }};
 

index.html

@@ -21,7 +21,7 @@
 					</svg>
 					{% if site.app_video %}
 						<div class="videoContainer">
-							<video controls="controls">
+							<video poster="/assets/Screenshot.png" autoplay="autoplay" controls="controls">
 								<source src="{{ site.app_video }}" type="video/mp4">
 							</video>
 						</div>
@@ -44,14 +44,14 @@
 						<h1 class="appName">
 							{{ site.app_name }}
 						</h1>
-						<h3 class="appPrice">
+						<h2 class="appPrice">
 							${{ site.app_price }}
-						</h3>
+						</h2>
 					</div>
 					<div class="appDescriptionContainer">
-						<h4 class ="appDescription">
+						<p class ="appDescription">
 							{{ site.app_description }}
-						</h4>
+						</p>
 					</div>
 					<div class="downloadButtonsContainer">
 						<a href="https://"><img class="playStore" src="/assets/playstore.png"></a>