From 602f17ad279cdc40c0cca67ae6e74eb0d9f40e44 Mon Sep 17 00:00:00 2001
From: Federico Terzi <federicoterzi96@gmail.com>
Date: Sun, 22 Sep 2019 13:01:02 +0200
Subject: [PATCH] Fix flickering

---
 _includes/donate.html |  6 +++--
 _includes/footer.html |  5 ++---
 _sass/_donate.scss    |  4 ++++
 _sass/_homepage.scss  |  4 +++-
 index.html            | 51 +++++++++++++++++++++++++++++++++++++------
 5 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/_includes/donate.html b/_includes/donate.html
index 4ec936f..b1d3891 100644
--- a/_includes/donate.html
+++ b/_includes/donate.html
@@ -3,10 +3,12 @@
     <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"/>
+            <a href="https://federicoterzi.com" target="_blank">
+                <img src="/assets/images/profile.png" class="mb-3"/>
+            </a>
         </div>
         <div class="col-md-8">
-            <p>Hi! I'm Federico, the creator of espanso. I developed espanso in my (little) spare time
+            <p>Hi! I'm <a href="https://federicoterzi.com" target="_blank">Federico</a>, 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>
diff --git a/_includes/footer.html b/_includes/footer.html
index 23ef2fb..782e520 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -2,12 +2,11 @@
     <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>
+        <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>
+        <p class="bottom-paragraph">Designed and created by <a href="https://federicoterzi.com" target="_blank">Federico Terzi</a>. Copyright © <a href="https://federicoterzi.com" target="_blank">Federico Terzi</a> 2019</p>
     </div>
 </div>
\ No newline at end of file
diff --git a/_sass/_donate.scss b/_sass/_donate.scss
index 37d5005..16f1e7a 100644
--- a/_sass/_donate.scss
+++ b/_sass/_donate.scss
@@ -18,6 +18,10 @@
         font-size: 1.2em;
     }
 
+    a {
+        color: $grayColor;
+    }
+
     .btn {
         font-weight: 700;
         font-size: 1.2em;
diff --git a/_sass/_homepage.scss b/_sass/_homepage.scss
index 5e4723b..bcdd555 100644
--- a/_sass/_homepage.scss
+++ b/_sass/_homepage.scss
@@ -3,7 +3,7 @@
 
     h1 {
         font-weight: 400;
-        margin: 120px 0 160px 0;
+        margin: 100px 0 130px 0;
 
         @media screen and (max-width: $screen-desktop) {
             margin: 80px 0 100px 0;
@@ -12,6 +12,7 @@
         @media screen and (max-width: $screen-phone) {
             margin: 35px 0 70px 0;
             font-size: 2.5em;
+            height: 150px;
         }
     }
 
@@ -99,6 +100,7 @@
         background-color: $blackColor;
         color: white;
         height: 90px;
+        width: 100%;
         padding: 10px 20px 10px 20px;
         border-radius: 5px;
         margin: auto;
diff --git a/index.html b/index.html
index 212ebf5..279afb7 100644
--- a/index.html
+++ b/index.html
@@ -113,7 +113,7 @@ showParticles: True
   </div>
 
   <p class="mt-4 mb-3">Do you want to know more?</p>
-  <a class="btn btn-lg" href="#" role="button">Visit Documentation</a>
+  <a class="btn btn-lg" href="/docs/" role="button">Visit Documentation</a>
 </div>
 
 <script src="/assets/js/typeit.min.js"></script>
@@ -138,6 +138,24 @@ showParticles: True
     return os;
   }
 
+    
+  function isVisible(element) {
+    var coordinates = element.getBoundingClientRect();
+
+    if (
+      coordinates.right > window.innerWidth ||
+      coordinates.bottom > window.innerHeight
+    ) {
+      return false;
+    }
+
+    if (coordinates.top < 0 || coordinates.left < 0) {
+      return false;
+    }
+
+    return true;
+  }
+
   function jumboText() {
     // Setup get started button
     var os = getOS();
@@ -186,8 +204,10 @@ showParticles: True
   }
 
   function features() {
+    var examples = [];
+
     document.getElementById("feature-1").innerText = "";
-    new TypeIt('#feature-1', {
+    var instance = new TypeIt('#feature-1', {
       speed: 50,
       startDelay: 900,
       loop: true,
@@ -201,9 +221,10 @@ showParticles: True
     .pause(1500)
     .options({speed: 50, deleteSpeed: 7})
     .go();
+    examples.push({typeit: instance, element: document.getElementById("feature-1")});
 
     document.getElementById("feature-2").innerText = "";
-    new TypeIt('#feature-2', {
+    var instance = new TypeIt('#feature-2', {
       speed: 50,
       startDelay: 900,
       loop: true,
@@ -217,9 +238,10 @@ showParticles: True
     .pause(1500)
     .options({speed: 50, deleteSpeed: 7})
     .go();
+    examples.push({typeit: instance, element: document.getElementById("feature-2")});
 
     document.getElementById("feature-3").innerText = "";
-    new TypeIt('#feature-3', {
+    var instance = new TypeIt('#feature-3', {
       speed: 50,
       startDelay: 900,
       loop: true,
@@ -233,9 +255,10 @@ showParticles: True
     .pause(1500)
     .options({speed: 50, deleteSpeed: 7})
     .go();
+    examples.push({typeit: instance, element: document.getElementById("feature-3")});
 
     document.getElementById("feature-4").innerText = "";
-    new TypeIt('#feature-4', {
+    var instance = new TypeIt('#feature-4', {
       speed: 50,
       startDelay: 900,
       loop: true,
@@ -249,9 +272,10 @@ showParticles: True
     .pause(1500)
     .options({speed: 50, deleteSpeed: 7})
     .go();
+    examples.push({typeit: instance, element: document.getElementById("feature-4")});
 
     document.getElementById("feature-5").innerText = "";
-    new TypeIt('#feature-5', {
+    var instance = new TypeIt('#feature-5', {
       speed: 50,
       startDelay: 900,
       loop: true,
@@ -265,9 +289,10 @@ showParticles: True
     .pause(1500)
     .options({speed: 50, deleteSpeed: 7})
     .go();
+    examples.push({typeit: instance, element: document.getElementById("feature-5")});
 
     document.getElementById("feature-6").innerText = "";
-    new TypeIt('#feature-6', {
+    var instance = new TypeIt('#feature-6', {
       speed: 50,
       startDelay: 900,
       loop: true,
@@ -281,6 +306,18 @@ showParticles: True
     .pause(1500)
     .options({speed: 50, deleteSpeed: 7})
     .go();
+    examples.push({typeit: instance, element: document.getElementById("feature-6")});
+
+    // Fix page flickering
+    setInterval(function() {
+      for (var i = 0; i<examples.length; i++) {
+        if (!isVisible(examples[i].element)) {
+          examples[i].typeit.freeze();
+        }else{
+          examples[i].typeit.unfreeze();
+        }
+      }
+    }, 300);
   }
 
   jumboText();