Add footer and donate section

_includes/donate.html

@@ -0,0 +1,16 @@
+<div class="container donate">
+    <a name="donate"></a>
+    <h2 class="text-center mt-5 mb-4">Donate</h2>
+    <div class="row">
+        <div class="col-md-3">
+            <img src="/assets/images/profile.png" class="mb-3"/>
+        </div>
+        <div class="col-md-8">
+            <p>Hi! I'm Federico, the creator of espanso. I developed espanso in my (little) spare time
+                and I decided to make it open source because I thought it could be useful to many people.
+            </p>
+            <p class="bigger">If you liked the project, please consider making a small donation, it really helps :)</p>
+            <a class="btn btn-lg" target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=FHNLR5DRS267E&source=url" role="button">Donate with PayPal</a>
+        </div>
+    </div>
+</div>

_includes/footer.html

@@ -0,0 +1,13 @@
+<div class="footer-section">
+    <div class="contrib-box">
+        <h2 class="mb-4">Contributing</h2>
+        <p><b>espanso</b> is open source and <a href="https://github.com/federico-terzi/espanso">hosted on GitHub</a>.</p>
+        <!-- Place this tag where you want the button to render. -->
+<a class="github-button" href="https://github.com/federico-terzi/espanso" data-size="large" data-show-count="true" aria-label="Star federico-terzi/espanso on GitHub">Star</a>
+        <p>If you find a bug or have an idea for a new feature, 
+            please <a href="https://github.com/federico-terzi/espanso/issues">open an issue on GitHub</a>.</p>
+    </div>
+    <div class="copy-box">
+        <p class="bottom-paragraph">Designed and created by Federico Terzi. Copyright © Federico Terzi 2019</p>
+    </div>
+</div>

_includes/navigation.html

@@ -13,7 +13,7 @@
             </li>
             {% endfor %}
         <li class="nav-item">
-            <a class="nav-link btn" href="/donate/">Donate</a>
+            <a class="nav-link btn" href="#donate">Donate</a>
         </li>
         </ul>
     </div>

_layouts/default.html

@@ -58,11 +58,14 @@ If you want to see more interesting projects, visit my website: https://federico
     </div>
     {% endunless %}
 
+    {% include donate.html %}
+
     {% include footer.html %}
 
     <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 async defer src="https://buttons.github.io/buttons.js"></script>
 
     {% if page.showParticles %}
     <script src="/assets/js/particles.min.js"></script>

_sass/_colors.scss

@@ -2,4 +2,7 @@ $mainColor: #00b894;
 $lightGrayColor: #b2bec3;
 $grayColor: #636e72;
 $blackColor: #2d3436;
-$greenDark: #00372c;
+$veryBlackColor: #202426;
+$greenDark: #00372c;
+$yellowColor: #fdcb6e;
+$orangeColor: #e17055;

_sass/_default.scss

@@ -1,7 +1,12 @@
 body {
+    margin: 0;
     font-family: 'Raleway', sans-serif;
 }
 
+html {
+    margin: 0;
+}
+
 h1, h2, h3, h4 {
     font-weight: 700;
 }

_sass/_donate.scss

@@ -0,0 +1,34 @@
+.donate {
+    margin-top: 60px;
+    img {
+        height: 150px;
+        display: block;
+        margin-left: auto;
+
+        @media screen and (max-width: $screen-tablet) {
+            margin-right: auto;
+        }
+    }
+
+    @media screen and (max-width: $screen-tablet) {
+        text-align: center;
+    }
+
+    .bigger {
+        font-size: 1.2em;
+    }
+
+    .btn {
+        font-weight: 700;
+        font-size: 1.2em;
+        background-color: $orangeColor;
+        color: white !important;
+        padding: 10px 25px 10px 25px;
+        border-radius: 40px;
+        border: 0;
+
+        @media screen and (max-width: $screen-tablet) {
+            font-size: 1.3em;
+        }
+    }
+}

_sass/_footer.scss

@@ -0,0 +1,25 @@
+.footer-section {
+    color: white;
+    text-align: center;
+
+    .contrib-box {
+        background-image: url("/assets/images/footerback.svg");
+        background-position: center top;
+        background-size: cover;
+        margin: 60px 0 0 0;
+        padding: 50px 0 10px 0;
+    }
+
+    .copy-box {
+        padding: 15px 0 0 0;
+        background-color: $veryBlackColor;
+        height: 100%;
+        p {
+            line-height: 1em;
+        }
+    }
+
+    a {
+        color: $lightGrayColor;
+    }
+}

_sass/_homepage.scss

@@ -30,8 +30,10 @@
     }
 
     .btn-subtitle {
+        display: block;
         font-size: 1em;
         margin: 10px;
+        text-decoration: none;
         color: $grayColor;
     }
 }

_sass/_install.scss

@@ -1,6 +1,6 @@
 .install {
     @media screen and (min-width: $screen-laptop) {
-        margin-top: 80px;
+        margin-top: 30px;
     }
 
     img {

_sass/main.scss

@@ -4,4 +4,6 @@
 @import '_header';
 @import '_homepage';
 @import '_syntax';
-@import '_install';
+@import '_install';
+@import '_donate';
+@import '_footer';

assets/images/footerback.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="574.297" viewBox="0 0 1920 574.297">
+  <path id="Path_23" data-name="Path 23" d="M8,581.512s88.525-31.123,429.788-32.919,668.22,39.538,1012.43,46.393S1928,576.283,1928,576.283v546.55H8Z" transform="translate(-8 -548.536)" fill="#2d3436"/>
+</svg>

index.html

@@ -9,8 +9,8 @@ showParticles: True
 <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>
+  <a class="btn btn-lg" href="/install/mac/" role="button" id="get-started-btn">Get Started on MacOS</a>
-  <p class="btn-subtitle">Also available for Windows and Linux</p>
+  <p><a class="btn-subtitle" href="/install/" id="get-started-other">Also available for Windows and Linux</a></p>
 </div>
 
 <div class="container-fluid hiw text-center">
@@ -119,7 +119,40 @@ showParticles: True
 <script src="/assets/js/typeit.min.js"></script>
 
 <script>
+  function getOS() {
+    var userAgent = window.navigator.userAgent,
+        platform = window.navigator.platform,
+        macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
+        windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
+        iosPlatforms = ['iPhone', 'iPad', 'iPod'],
+        os = null;
+
+    if (macosPlatforms.indexOf(platform) !== -1) {
+      os = 'mac';
+    } else if (windowsPlatforms.indexOf(platform) !== -1) {
+      os = 'win';
+    } else if (!os && /Linux/.test(platform)) {
+      os = 'linux';
+    }
+
+    return os;
+  }
+
   function jumboText() {
+    // Setup get started button
+    var os = getOS();
+    var btn = document.getElementById("get-started-btn");
+    var btnother = document.getElementById("get-started-other");
+    if (os == "win") {
+      btn.innerText = "Get Started on Windows";
+      btn.href = "/install/win/";
+      btnother.innerText = "Also available for macOS and Linux";
+    }else if(os == "linux") {
+      btn.innerText = "Get Started on Linux";
+      btn.href = "/install/linux/";
+      btnother.innerText = "Also available for macOS and Windows";
+    }
+    
     document.getElementById("jumbo-text").innerText = "";
     new TypeIt('#jumbo-text', {
       speed: 50,