(Update) Layout: Spacing Home (#10)

* (Update) Logo-collection: Adjust spacing / add maxheight / use BEM

* (Update) Home: Adjust spacing between h1 + slogan /  Adjust space between image at the bottom

* (Fix) Home: Replace secure icon with correctly retraced one

* [Chore] Layout: Whitespace / unused inline javascript

* (Update) Home: More Spacing

* (Fix) Currency: execute js onload

* (Update) Layout: Add class for latest news section

_layouts/default.html

@@ -9,9 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
     <link rel="icon" type="image/png" sizes="16x16" href="{{ base }}/assets/img/favicon/favicon-16x16.png">
-    
     <meta name="msapplication-TileColor" content="#ffffff">
-    
     <meta name="theme-color" content="#ffffff">
 
     <link rel="stylesheet" type="text/css" href="{{ base }}/assets/css/style.css">
@@ -47,43 +45,9 @@ function formatNumber (num) {
       function formatCurrency (num,decimal) {
           var _decimal;
           _decimal = typeof decimal !== "undefined" ? decimal : 2;
-    return num.toFixed(_decimal).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
+          return parseFloat(num).toFixed(_decimal).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
       }
-
-function windowPopup(url, width, height) {
-  // Calculate the position of the popup so
-  // it’s centered on the screen.
-  var left = (screen.width / 2) - (width / 2),
-      top = (screen.height / 2) - (height / 2);
-
-  window.open(
-    url,
-    "",
-    "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
-  );
-}
-
-//jQuery
-$(".js-social-share").on("click", function(e) {
-  e.preventDefault();
-
-  windowPopup($(this).attr("href"), 500, 300);
-});
-
-// Vanilla JavaScript
-var jsSocialShares = document.querySelectorAll(".js-social-share");
-if (jsSocialShares) {
-  [].forEach.call(jsSocialShares, function(anchor) {
-    anchor.addEventListener("click", function(e) {
-      e.preventDefault();
-
-      windowPopup(this.href, 500, 300);
-    });
-  });
-}
-
     </script>
 
-    
   </body>
 </html>

_sass/_header.scss

@@ -14,6 +14,7 @@
 		}
 		> h1 {
 			margin-top: 2.5em;
+			margin-bottom: 8px; /*optical*/
 			font-size: 56px;
 			line-height: 1.2;
 		}

_sass/_home.scss

@@ -22,7 +22,7 @@ $homeSectionPaddingTop: 40px;
 		}
 
 		p {
-			max-width: 60em;
+			max-width: 50em;
 			margin: 20px auto;
 		}
 
@@ -137,6 +137,7 @@ $homeSectionPaddingTop: 40px;
 		}
 
 		img {
+			margin-top: 30px;
 			vertical-align: text-top;
 		}
 
@@ -144,6 +145,12 @@ $homeSectionPaddingTop: 40px;
 			color: $blue;
 		}
 	}
+
+	.home-latest-news {
+		.btn-blue {
+			margin-top: 20px;
+		}
+	}
 }
 
 .logo-collection {
@@ -152,10 +159,15 @@ $homeSectionPaddingTop: 40px;
 	justify-content: space-between;
 	flex-wrap: wrap;
 
-	> .logo {
+	margin-bottom: 20px;
+
+	&__logo {
 		flex: 1 1 auto;
 		margin: 20px 10px;
 	}
+	&__image {
+		max-height: 100%;
+	}
 }
 
 .news-post {

assets/img/home/secure.svg

@@ -1 +1 @@
-<svg width="101" height="86" viewBox="0 0 101 86" xmlns="http://www.w3.org/2000/svg"><title>private</title><g stroke="#1C75BC" stroke-width="3" fill="none" fill-rule="evenodd"><path d="M92.25 1.474l-82 82.333M33.083 74.64c41 12.168 65.5-25.333 65.5-29.833 0-2.775-7.667-13.167-15.112-19.51" stroke-linecap="round"/><path d="M24.305 69.695C11.085 60.975 1.75 48.975 1.75 44.14c0-4.833 30.404-48.264 73.368-25.465"/><path d="M47.05 59.822c.877.154 1.78.234 2.7.234 8.56 0 15.498-6.938 15.498-15.498" stroke-linecap="round"/><path d="M38.432 55.146c-2.593-2.77-4.18-6.493-4.18-10.587 0-8.56 6.94-15.5 15.498-15.5 4.163 0 7.942 1.642 10.727 4.313"/></g></svg>
+<svg width="68" height="99" viewBox="0 0 68 99" xmlns="http://www.w3.org/2000/svg"><title>secure</title><g stroke="#1C75BC" stroke-width="3" fill="none" fill-rule="evenodd"><path d="M8.325 39.06v-12c0-14.058 11.502-25.56 25.56-25.56h.136c13.96 0 25.38 11.42 25.38 25.38v12.18"/><path d="M15.295 39.002V27.277c0-10.22 8.363-18.584 18.584-18.584h.099c10.149 0 18.453 8.304 18.453 18.453v11.856"/><path d="M33.863 96.715c-17.8 0-32.363-14.563-32.363-32.363v-19.01c0-3.566 2.917-6.483 6.482-6.483h51.762c3.565 0 6.482 2.917 6.482 6.482v19.011c0 17.8-14.563 32.363-32.363 32.363z"/><path d="M36.99 67.6c1.972-1.107 3.321-3.125 3.321-5.548 0-3.57-2.886-6.417-6.456-6.417-3.57 0-6.46 2.917-6.46 6.487 0 2.427 1.34 4.365 3.316 5.471l-1.473 10.78h9.625L36.99 67.6z" stroke-linejoin="round"/></g></svg>

currency/index.html

@@ -67,6 +67,7 @@ description: pages.currency.description
 </div>
 
 <script type="text/javascript">
+	window.onload = function () {
 		$( document ).ready(function(){
 
 			// Get the exchange data
@@ -154,6 +155,6 @@ $( document ).ready(function(){
 				});
 			});
 
-
 		});
+	}
 </script>

index.html

@@ -61,17 +61,17 @@ description: pages.home.description
             </div>
 
             <div class="logo-collection">
-                <div class="logo">
+                <div class="logo-collection__logo">
-                    <img src="/assets/img/home/bolehvpn.png">
+                    <img src="/assets/img/home/bolehvpn.png" class="logo-collection__image">
                 </div>
-                <div class="logo">
+                <div class="logo-collection__logo">
-                    <img src="/assets/img/home/node40.png">
+                    <img src="/assets/img/home/node40.png" class="logo-collection__image">
                 </div>
-                <div class="logo">
+                <div class="logo-collection__logo">
-                    <img src="/assets/img/home/protonmail.png">
+                    <img src="/assets/img/home/protonmail.png" class="logo-collection__image">
                 </div>
-                <div class="logo">
+                <div class="logo-collection__logo">
-                    <img src="/assets/img/home/qhoster.png">
+                    <img src="/assets/img/home/qhoster.png" class="logo-collection__image">
                 </div>
             </div>
 
@@ -161,7 +161,7 @@ description: pages.home.description
     <!--
         LATEST NEWS
     -->
-    <section>
+    <section class="home-latest-news">
         <div class="content">
             <h2>{% t pages.home.news-heading %}</h2>