Add particle effect and installation page

_sass/_colors.scss

@@ -2,3 +2,4 @@ $mainColor: #00b894;
 $lightGrayColor: #b2bec3;
 $grayColor: #636e72;
 $blackColor: #2d3436;
+$greenDark: #00372c;

_sass/_homepage.scss

@@ -5,8 +5,12 @@
         font-weight: 400;
         margin: 120px 0 160px 0;
 
-        @media screen and (max-width: $screen-tablet) {
+        @media screen and (max-width: $screen-desktop) {
-            margin: 60px 0 90px 0;
+            margin: 80px 0 100px 0;
+        }
+
+        @media screen and (max-width: $screen-phone) {
+            margin: 35px 0 70px 0;
             font-size: 2.5em;
         }
     }
@@ -33,19 +37,19 @@
 }
 
 .hiw {
-    background-image: url("/assets/images/background.svg");
+    background-image: url("/assets/images/background_up.svg"), url("/assets/images/background_down.svg");
-    background-position: center top;
+    background-position: center top, center bottom;
-    background-size: cover;
+    background-size: cover, cover;
-    background-repeat:no-repeat;
+    background-repeat:no-repeat, no-repeat;
-    padding: 90px 10px 40px 10px;
+    padding: 80px 0px 40px 0px;
     color: white;
 
     @media screen and (max-width: $screen-tablet) {
         padding: 70px 15px 40px 15px;
     }
 
-    h2 {
+    .teaser-text {
-        font-weight: 700;
+        font-size:1.4em;
     }
 
     .text-example {
@@ -123,10 +127,3 @@
         }
     }
 }
-
-#particles-js {
-    position: absolute;
-    width: 100%;
-    height: 700px;
-    z-index: -100;
-}

_sass/main.scss

@@ -1,8 +1,7 @@
 @import '_sizes';
 @import '_colors';
+@import '_default';
 @import '_header';
 @import '_homepage';
-
+@import '_syntax';
-body {
+@import '_install';
-    font-family: 'Raleway', sans-serif;
-}

assets/images/background.svg

@@ -1,7 +1,79 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="700" viewBox="0 0 1920 700">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-  <g id="Sfondo" transform="translate(-8 -1090.601)">
+<svg
-    <path id="Path_3" data-name="Path 3" d="M-26,586.724s293.051-4.48,514.1-4.48,128.9-14.625,460.481-13.59S1894,641.884,1894,641.884v603.037s-614.081,32.78-1044.141,21.205c-265.915-7.157-409.746-21.205-459.039-21.205-167.368,0-416.82,16.413-416.82,16.413Z" transform="translate(34 522)" fill="#00b894"/>
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
-    <path id="Path_2" data-name="Path 2" d="M-14,565.1s281.051,15.608,502.1,15.608,646.881-16.623,978.46-15.608S1906,570.565,1906,570.565v660.266s-261.844-38.8-587.107-40.827-745.371,30.017-912.739,30.017S-14,1204.062-14,1204.062Z" transform="translate(22 557)" fill="#00755e"/>
+   xmlns:cc="http://creativecommons.org/ns#"
-    <path id="Path_1" data-name="Path 1" d="M12,581.9s84.525-31.431,425.788-33.3,668.22,41.229,1012.43,48.378S1932,571.741,1932,571.741v643.072s-19.471,14.987-426.839,12.944-904.7-50.275-1195.822-44.728S12,1192.119,12,1192.119Z" transform="translate(-4 553)" fill="#00372c"/>
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1920"
+   height="520"
+   viewBox="0 0 1920 520"
+   version="1.1"
+   id="svg917"
+   sodipodi:docname="background.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata923">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs921" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1676"
+     inkscape:window-height="993"
+     id="namedview919"
+     showgrid="false"
+     inkscape:zoom="0.47140452"
+     inkscape:cx="743.93795"
+     inkscape:cy="466.1607"
+     inkscape:window-x="1280"
+     inkscape:window-y="36"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg917" />
+  <g
+     id="Sfondo"
+     transform="translate(-8,-1086.601)">
+    <path
+       id="Path_3"
+       data-name="Path 3"
+       d="m -26,586.724 c 0,0 293.051,-4.48 514.1,-4.48 221.049,0 128.9,-14.625 460.481,-13.59 331.581,1.035 945.419,73.23 945.419,73.23 v 417.037 c 0,0 -614.081,32.78 -1044.141,21.205 -265.915,-7.157 -409.746,-21.205 -459.039,-21.205 -167.368,0 -416.82,16.413 -416.82,16.413 z"
+       transform="translate(34,522)"
+       inkscape:connector-curvature="0"
+       style="fill:#00b894"
+       sodipodi:nodetypes="cssccsscc" />
+    <path
+       id="Path_2"
+       data-name="Path 2"
+       d="m -14,565.1 c 0,0 281.051,15.608 502.1,15.608 221.049,0 646.881,-16.623 978.46,-15.608 331.579,1.015 439.44,5.465 439.44,5.465 v 474.266 c 0,0 -261.844,-38.8 -587.107,-40.827 -325.263,-2.027 -745.371,30.017 -912.739,30.017 -167.368,0 -420.154,-15.959 -420.154,-15.959 z"
+       transform="translate(22,557)"
+       inkscape:connector-curvature="0"
+       style="fill:#00755e"
+       sodipodi:nodetypes="cssccsscc" />
+    <path
+       id="Path_1"
+       data-name="Path 1"
+       d="m 12,581.9 c 0,0 84.525,-31.431 425.788,-33.3 341.263,-1.869 668.22,41.229 1012.43,48.378 344.21,7.149 481.782,-25.237 481.782,-25.237 v 457.072 c 0,0 -19.471,14.987 -426.839,12.944 -407.368,-2.043 -904.7,-50.275 -1195.822,-44.728 C 18.217,1002.576 12,1006.119 12,1006.119 Z"
+       transform="translate(-4,553)"
+       inkscape:connector-curvature="0"
+       style="fill:#00372c"
+       sodipodi:nodetypes="cssccsscc" />
   </g>
 </svg>

index.html

@@ -1,67 +1,26 @@
-<!doctype html>
+---
+title: Home
+layout: default
+hideTitle: True
+avoidContainer: True
+showParticles: True
+---
 
-<html lang="en">
+<div class="jumbotron text-center">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <title>espanso - Cross-platform Text Expander written in Rust</title>
-  <meta name="description" content="espanso - Cross-platform Text Expander written in Rust">
-  <meta name="author" content="Federico Terzi">
-
-  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
-  <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
-
-  <link href="https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap" rel="stylesheet">
-</head>
-
-<body>
-  <div id="particles-js"></div>
-
-  <nav class="navbar navbar-expand-lg navbar-light">
-    <a class="navbar-brand" href="#">
-      <img src="assets/images/espanso.svg" class="logo-img">
-    </a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-  
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav ml-auto">
-        <li class="nav-item active">
-          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Installation</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Documentation</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" target="_blank" href="https://github.com/federico-terzi/espanso">GitHub</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link btn" href="#">Donate</a>
-        </li>
-      </ul>
-    </div>
-  </nav>
-
-  <div class="jumbotron text-center">
   <h1 class="display-4" id="jumbo-text">Cross-platform Text Expander written in Rust</h1>
   
   <a class="btn btn-lg" href="#" role="button">Get Started on MacOS</a>
   <p class="btn-subtitle">Also available for Windows and Linux</p>
-  </div>
+</div>
 
-  <div class="container-fluid hiw text-center">
+<div class="container-fluid hiw text-center">
   <h2>How it works</h2>
-    <h3 class="mt-5 mb-5">espanso detects when you type a <b>keyword</b></h3>
+  <p class="mt-5 mb-4 teaser-text">espanso detects when you type a <b>keyword</b></p>
   <p class="text-example" id="text-example-1">Today is <b>:date</b></p>
-    <h3 class="mt-5 mb-5">and <b>replaces</b> it while you're typing.</h3>
+  <p class="mt-4 mb-5 teaser-text">and <b>replaces</b> it while you're typing.</p>
-  </div>
+</div>
 
-  <div class="container features text-center">
+<div class="container features text-center">
   <h2>Features</h2>
   <div class="row mt-4">
     <div class="col-md-4 feature-col">
@@ -155,15 +114,11 @@
 
   <p class="mt-4 mb-3">Do you want to know more?</p>
   <a class="btn btn-lg" href="#" role="button">Visit Documentation</a>
-  </div>
+</div>
 
-  <script src="assets/js/particles.min.js"></script>
+<script src="/assets/js/typeit.min.js"></script>
-  <script src="assets/js/jquery.slim.min.js"></script>
-  <script src="assets/js/popper.min.js"></script>
-  <script src="assets/js/bootstrap.min.js"></script>
-  <script src="assets/js/typeit.min.js"></script>
 
-  <script>
+<script>
   function jumboText() {
     document.getElementById("jumbo-text").innerText = "";
     new TypeIt('#jumbo-text', {
@@ -298,10 +253,4 @@
   jumboText();
   hiw();
   features();
-
+</script>
-    particlesJS.load('particles-js', 'assets/particles.json', function() {
-      console.log('callback - particles.js config loaded');
-    });
-  </script>
-</body>
-</html>