Merge pull request #51 from safing/feature/kickstarter-launch

Kickstarter Launch

_config.yml

@@ -37,6 +37,7 @@ terms_url: "/terms/"
 privacy_url: "/privacy/"
 whitepaper_url: "/files/whitepaper/"
 company_agreement_url: https://www.firmenmonitor.at/Secure/CompanyDetail.aspx?CID=761761
+kickstarter_url: "https://www.kickstarter.com/projects/safingio/spn" # add the kickstarter url when ready
 
 collections:
   podcasts:

_includes/new/header.html

@@ -1,14 +1,8 @@
 <header class="h-bg">
   <div class="h-l">
     <div class="h-l-v">
-      <!--<img src="{{ site.img_url }}video-placeholder.png" alt="">-->
-      <video playsinline="" preload="auto" src="{{ site.video_url }}interim.mp4" controls></video>
-      <div class="kickstarter">
-          <div>
-              <img src="{{ site.icons_url }}kickstarter.svg" alt="">
-              <span>Kickstarter launch <a href="https://old.reddit.com/r/safing/comments/etia4e/kickstarter_did_not_yet_finish_the_review_of_our/"><s>2nd January</s> in the next days</a> - stay tuned</span>
-          </div>
-      </div>
+      <a href="{{ site.kickstarter_url }}"><img src="{{ site.img_url }}video-kickstarter.png" alt=""></a>
+      <!--<video playsinline="" preload="auto" src="{{ site.video_url }}interim.mp4" controls></video>-->
     </div>
     <span style="opacity: 0.5;">Supported by</span>
     <ul>
@@ -25,8 +19,8 @@
       Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators and VPNs from collecting all your personal [meta] data. Secure your whole computer, not only your web-browser.
     </p>
     <div>
-      <a href="{{ site.reddit_url }}"><button><img src="{{ site.icons_url }}reddit.svg" alt=""><span>Join our reddit</span></button></a>
+      <a href="{{ site.kickstarter_url }}"><button><img src="{{ site.icons_url }}kickstarter.svg" alt=""><span>kickstarter</span></button></a>
       <span>or <a href="{{ site.newsletter_url }}">subscribe to our newsletter</a></span>
     </div>
   </div>
-</header>
+</header>

_sass/new/header.scss

@@ -65,44 +65,15 @@ header .h-l-v button img {
 	padding-left: 0.4rem;
 }
 
-header .h-l-v video{
-    width: 100%;
+header .h-l-v img{
+    width: 95%;
     height: auto;
 	border: 0;
-	border-radius: 10px 10px 0px 0px;
+	border-radius: 10px 10px 10px 10px;
 	font-variant-caps: all-petite-caps;
 	cursor: pointer;
 }
 
-.kickstarter{
-  color: white;
-	background-color: #05ce78;
-	display: flex;
-	border: 0;
-	padding: 10px 25px;
-  border-radius: 0px 0px 10px 10px;
-  margin-top: -0.25rem;
-
-  a {
-    color: white;
-  }
-}
-
-.kickstarter div{
-  height: auto;
-  margin: 0 auto;
-  display: flex;
-}
-
-.kickstarter img{
-    width: 20px;
-    height: auto;
-}
-
-.kickstarter span{
-    padding-left: 1rem;
-}
-
 header .h-l span{
     font-size: 1.1rem;
 }
@@ -175,10 +146,13 @@ header .h-r div{
     display: flex;
     padding-top: 1rem;
 }
+header .h-r div a{
+    text-decoration: none;
+}
 
 header .h-r div button{
 	color: white;
-	background-color: #FF5700;
+	background-color: #05ce78;
 	display: flex;
 	border: 0;
 	padding: 10px 25px;
@@ -190,7 +164,7 @@ header .h-r div button{
 
 header .h-r div button:hover{
     transform: scale(1.1);
-    box-shadow: 2px 2px 30px #FF5700;
+    box-shadow: 2px 2px 30px #05ce77af;
 }
 
 header .h-r div button img{
@@ -287,4 +261,4 @@ header .h-r div a:hover{
     header .h-r div span{
         margin-right: 1.4rem;
     }
-}
+}