open.source/espanso
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix flickering

Browse Source
This commit is contained in:
Federico Terzi 2019-09-22 13:01:02 +02:00
parent 225ceede13
commit 602f17ad27
5 changed files with 57 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/donate.html
View File

@ -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>

5
_includes/footer.html
View File

@ -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>

4
_sass/_donate.scss
View File

@ -18,6 +18,10 @@
font-size: 1.2em;
}
a {
color: $grayColor;
}
.btn {
font-weight: 700;
font-size: 1.2em;

4
_sass/_homepage.scss
View File

@ -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;

51
index.html
View File

@ -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();