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

Add particle effect and installation page

Browse Source
This commit is contained in:
Federico Terzi 2019-09-22 10:39:58 +02:00
parent dab58b97a3
commit 23b6f6ee84
5 changed files with 336 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_sass/_colors.scss
View File

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

29
_sass/_homepage.scss
View File

@ -5,8 +5,12 @@
font-weight: 400; font-weight: 400;
margin: 120px 0 160px 0; 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; font-size: 2.5em;
} }
} }
@ -33,19 +37,19 @@
} }
.hiw { .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; color: white;
@media screen and (max-width: $screen-tablet) { @media screen and (max-width: $screen-tablet) {
padding: 70px 15px 40px 15px; padding: 70px 15px 40px 15px;
} }
h2 { .teaser-text {
font-weight: 700; font-size:1.4em;
} }
.text-example { .text-example {
@ -122,11 +126,4 @@
font-size: 1.3em; font-size: 1.3em;
} }
} }
}
#particles-js {
position: absolute;
width: 100%;
height: 700px;
z-index: -100;
} }

7
_sass/main.scss
View File

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

82
assets/images/background.svg
View File

@ -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> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1018 B

After

Width:  |  Height:  |  Size: 3.0 KiB

533
index.html
View File

@ -1,307 +1,256 @@
<!doctype html> ---
title: Home
layout: default
hideTitle: True
avoidContainer: True
showParticles: True
---
<html lang="en"> <div class="jumbotron text-center">
<head> <h1 class="display-4" id="jumbo-text">Cross-platform Text Expander written in Rust</h1>
<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"> <a class="btn btn-lg" href="#" role="button">Get Started on MacOS</a>
<ul class="navbar-nav ml-auto"> <p class="btn-subtitle">Also available for Windows and Linux</p>
<li class="nav-item active"> </div>
<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"> <div class="container-fluid hiw text-center">
<h1 class="display-4" id="jumbo-text">Cross-platform Text Expander written in Rust</h1> <h2>How it works</h2>
<p class="mt-5 mb-4 teaser-text">espanso detects when you type a <b>keyword</b></p>
<a class="btn btn-lg" href="#" role="button">Get Started on MacOS</a> <p class="text-example" id="text-example-1">Today is <b>:date</b></p>
<p class="btn-subtitle">Also available for Windows and Linux</p> <p class="mt-4 mb-5 teaser-text">and <b>replaces</b> it while you're typing.</p>
</div>
<div class="container features text-center">
<h2>Features</h2>
<div class="row mt-4">
<div class="col-md-4 feature-col">
<img src="assets/images/bolt.svg" />
<h3>Smarter typing</h3>
<p class="description">Avoid typing the same sentences
over and over using the incredible
power of a full blown text expander.</p>
<p class="feature-example" id="feature-1">Best Regards,<br>John Smith</p>
</div>
<div class="col-md-4 feature-col">
<img src="assets/images/chevron-right.svg" />
<h3>Shell support</h3>
<p class="description">With the full power of the shell
at your fingertips, copy-pasting
becomes obsolete.</p>
<p class="feature-example" id="feature-2">Hey John, <br>My IP is 192.168.1.23</p>
</div>
<div class="col-md-4 feature-col">
<img src="assets/images/new.svg" />
<h3>Custom scripts</h3>
<p class="description">Execute custom scripts as you
type and boost your productivity
for any kind of workflow.</p>
<p class="feature-example" id="feature-3">Hello world</p>
</div>
</div>
<div class="row">
<div class="col-md-4 feature-col">
<img src="assets/images/happy-face.svg" />
<h3>Emoji support</h3>
<p class="description">Emojis are now part of our
lives, and with espanso,
using them is a breeze.</p>
<p class="feature-example" id="feature-4">This is so funny 😂</p>
</div>
<div class="col-md-4 feature-col">
<img src="assets/images/calendar-event.svg" />
<h3>Date support</h3>
<p class="description">espanso supports a wide range of date formats and expansions.</p>
<p class="feature-example" id="feature-5">Today is 06/12/2019</p>
</div>
<div class="col-md-4 feature-col">
<img src="assets/images/code-alt.svg" />
<h3>Code snippets</h3>
<p class="description">Bring your favourite code snippets
in every application.</p>
<p class="feature-example" id="feature-6"><a href="#anchor" ></a></p>
</div>
</div>
<h4 class="mt-5 mb-5">And also</h4>
<div class="row">
<div class="col-md-3 extra-feature-col">
<img src="assets/images/apps.svg" />
<h4>System-wide
integration</h4>
<p class="description">espanso works with most
applications, so you can boost
your productivity everywhere.</p>
</div>
<div class="col-md-3 extra-feature-col">
<img src="assets/images/file.svg" />
<h4>File based
configuration</h4>
<p class="description">espanso follows a Unix-like
configuration philosophy,
using simple files.</p>
</div>
<div class="col-md-3 extra-feature-col">
<img src="assets/images/code-alt.svg" />
<h4>Open-source
license</h4>
<p class="description">espanso is open-source,
licensed under the
GPL-3 license.</p>
</div>
<div class="col-md-3 extra-feature-col">
<img src="assets/images/component.svg" />
<h4>Cross-platform
support</h4>
<p class="description">espanso supports Windows,
Linux and macOS.</p>
</div>
</div> </div>
<div class="container-fluid hiw text-center"> <p class="mt-4 mb-3">Do you want to know more?</p>
<h2>How it works</h2> <a class="btn btn-lg" href="#" role="button">Visit Documentation</a>
<h3 class="mt-5 mb-5">espanso detects when you type a <b>keyword</b></h3> </div>
<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>
</div>
<div class="container features text-center"> <script src="/assets/js/typeit.min.js"></script>
<h2>Features</h2>
<div class="row mt-4">
<div class="col-md-4 feature-col">
<img src="assets/images/bolt.svg" />
<h3>Smarter typing</h3>
<p class="description">Avoid typing the same sentences
over and over using the incredible
power of a full blown text expander.</p>
<p class="feature-example" id="feature-1">Best Regards,<br>John Smith</p>
</div>
<div class="col-md-4 feature-col">
<img src="assets/images/chevron-right.svg" />
<h3>Shell support</h3>
<p class="description">With the full power of the shell
at your fingertips, copy-pasting
becomes obsolete.</p>
<p class="feature-example" id="feature-2">Hey John, <br>My IP is 192.168.1.23</p>
</div>
<div class="col-md-4 feature-col">
<img src="assets/images/new.svg" />
<h3>Custom scripts</h3>
<p class="description">Execute custom scripts as you
type and boost your productivity
for any kind of workflow.</p>
<p class="feature-example" id="feature-3">Hello world</p>
</div>
</div>
<div class="row">
<div class="col-md-4 feature-col">
<img src="assets/images/happy-face.svg" />
<h3>Emoji support</h3>
<p class="description">Emojis are now part of our
lives, and with espanso,
using them is a breeze.</p>
<p class="feature-example" id="feature-4">This is so funny 😂</p>
</div>
<div class="col-md-4 feature-col">
<img src="assets/images/calendar-event.svg" />
<h3>Date support</h3>
<p class="description">espanso supports a wide range of date formats and expansions.</p>
<p class="feature-example" id="feature-5">Today is 06/12/2019</p>
</div>
<div class="col-md-4 feature-col">
<img src="assets/images/code-alt.svg" />
<h3>Code snippets</h3>
<p class="description">Bring your favourite code snippets
in every application.</p>
<p class="feature-example" id="feature-6"><a href="#anchor" ></a></p>
</div>
</div>
<h4 class="mt-5 mb-5">And also</h4>
<div class="row">
<div class="col-md-3 extra-feature-col">
<img src="assets/images/apps.svg" />
<h4>System-wide
integration</h4>
<p class="description">espanso works with most
applications, so you can boost
your productivity everywhere.</p>
</div>
<div class="col-md-3 extra-feature-col">
<img src="assets/images/file.svg" />
<h4>File based
configuration</h4>
<p class="description">espanso follows a Unix-like
configuration philosophy,
using simple files.</p>
</div>
<div class="col-md-3 extra-feature-col">
<img src="assets/images/code-alt.svg" />
<h4>Open-source
license</h4>
<p class="description">espanso is open-source,
licensed under the
GPL-3 license.</p>
</div>
<div class="col-md-3 extra-feature-col">
<img src="assets/images/component.svg" />
<h4>Cross-platform
support</h4>
<p class="description">espanso supports Windows,
Linux and macOS.</p>
</div>
</div>
<p class="mt-4 mb-3">Do you want to know more?</p> <script>
<a class="btn btn-lg" href="#" role="button">Visit Documentation</a> function jumboText() {
</div> document.getElementById("jumbo-text").innerText = "";
new TypeIt('#jumbo-text', {
speed: 50,
startDelay: 900
})
.type(':espanso')
.pause(500)
.options({speed: 1, deleteSpeed: 7})
.delete(8)
.type('Cross-platform Text Expander written in Rust')
.go();
}
<script src="assets/js/particles.min.js"></script> function hiw() {
<script src="assets/js/jquery.slim.min.js"></script> document.getElementById("text-example-1").innerText = "";
<script src="assets/js/popper.min.js"></script> new TypeIt('#text-example-1', {
<script src="assets/js/bootstrap.min.js"></script> speed: 50,
<script src="assets/js/typeit.min.js"></script> startDelay: 900,
loop: true,
waitUntilVisible: true,
})
.pause(1000)
.type('Today is <b>:date</b>')
.pause(400)
.options({speed: 1, deleteSpeed: 7})
.delete(5)
.type('<b>09/12/2019</b>')
.pause(1500)
.options({speed: 50, deleteSpeed: 7})
.go();
}
<script> function features() {
function jumboText() { document.getElementById("feature-1").innerText = "";
document.getElementById("jumbo-text").innerText = ""; new TypeIt('#feature-1', {
new TypeIt('#jumbo-text', { speed: 50,
speed: 50, startDelay: 900,
startDelay: 900 loop: true,
}) waitUntilVisible: true,
.type(':espanso') })
.pause(500) .type('<b>:reg</b>')
.options({speed: 1, deleteSpeed: 7}) .pause(400)
.delete(8) .options({speed: 1, deleteSpeed: 7})
.type('Cross-platform Text Expander written in Rust') .delete(4)
.go(); .type('Best Regards,<br>John Smith')
} .pause(1500)
.options({speed: 50, deleteSpeed: 7})
.go();
function hiw() { document.getElementById("feature-2").innerText = "";
document.getElementById("text-example-1").innerText = ""; new TypeIt('#feature-2', {
new TypeIt('#text-example-1', { speed: 50,
speed: 50, startDelay: 900,
startDelay: 900, loop: true,
loop: true, waitUntilVisible: true,
waitUntilVisible: true, })
}) .type('Hey John,<br>My IP is <b>:ip</b>')
.pause(1000) .pause(400)
.type('Today is <b>:date</b>') .options({speed: 1, deleteSpeed: 7})
.pause(400) .delete(3)
.options({speed: 1, deleteSpeed: 7}) .type('192.168.1.23')
.delete(5) .pause(1500)
.type('<b>09/12/2019</b>') .options({speed: 50, deleteSpeed: 7})
.pause(1500) .go();
.options({speed: 50, deleteSpeed: 7})
.go();
}
function features() { document.getElementById("feature-3").innerText = "";
document.getElementById("feature-1").innerText = ""; new TypeIt('#feature-3', {
new TypeIt('#feature-1', { speed: 50,
speed: 50, startDelay: 900,
startDelay: 900, loop: true,
loop: true, waitUntilVisible: true,
waitUntilVisible: true, })
}) .type('<b>:pyscript</b>')
.type('<b>:reg</b>') .pause(400)
.pause(400) .options({speed: 1, deleteSpeed: 7})
.options({speed: 1, deleteSpeed: 7}) .delete(9)
.delete(4) .type('Hello world')
.type('Best Regards,<br>John Smith') .pause(1500)
.pause(1500) .options({speed: 50, deleteSpeed: 7})
.options({speed: 50, deleteSpeed: 7}) .go();
.go();
document.getElementById("feature-2").innerText = ""; document.getElementById("feature-4").innerText = "";
new TypeIt('#feature-2', { new TypeIt('#feature-4', {
speed: 50, speed: 50,
startDelay: 900, startDelay: 900,
loop: true, loop: true,
waitUntilVisible: true, waitUntilVisible: true,
}) })
.type('Hey John,<br>My IP is <b>:ip</b>') .type('This is so funny <b>:lol</b>')
.pause(400) .pause(400)
.options({speed: 1, deleteSpeed: 7}) .options({speed: 1, deleteSpeed: 7})
.delete(3) .delete(4)
.type('192.168.1.23') .type('😂')
.pause(1500) .pause(1500)
.options({speed: 50, deleteSpeed: 7}) .options({speed: 50, deleteSpeed: 7})
.go(); .go();
document.getElementById("feature-3").innerText = ""; document.getElementById("feature-5").innerText = "";
new TypeIt('#feature-3', { new TypeIt('#feature-5', {
speed: 50, speed: 50,
startDelay: 900, startDelay: 900,
loop: true, loop: true,
waitUntilVisible: true, waitUntilVisible: true,
}) })
.type('<b>:pyscript</b>') .type('Today is <b>:date</b>')
.pause(400) .pause(400)
.options({speed: 1, deleteSpeed: 7}) .options({speed: 1, deleteSpeed: 7})
.delete(9) .delete(5)
.type('Hello world') .type('06/12/2019')
.pause(1500) .pause(1500)
.options({speed: 50, deleteSpeed: 7}) .options({speed: 50, deleteSpeed: 7})
.go(); .go();
document.getElementById("feature-4").innerText = ""; document.getElementById("feature-6").innerText = "";
new TypeIt('#feature-4', { new TypeIt('#feature-6', {
speed: 50, speed: 50,
startDelay: 900, startDelay: 900,
loop: true, loop: true,
waitUntilVisible: true, waitUntilVisible: true,
}) })
.type('This is so funny <b>:lol</b>') .type('<b>:link</b>')
.pause(400) .pause(400)
.options({speed: 1, deleteSpeed: 7}) .options({speed: 1, deleteSpeed: 7})
.delete(4) .delete(5)
.type('😂') .type('&lt;a href=&quot;#anchor&quot; &gt;&lt;/a&gt;')
.pause(1500) .pause(1500)
.options({speed: 50, deleteSpeed: 7}) .options({speed: 50, deleteSpeed: 7})
.go(); .go();
}
document.getElementById("feature-5").innerText = ""; jumboText();
new TypeIt('#feature-5', { hiw();
speed: 50, features();
startDelay: 900, </script>
loop: true,
waitUntilVisible: true,
})
.type('Today is <b>:date</b>')
.pause(400)
.options({speed: 1, deleteSpeed: 7})
.delete(5)
.type('06/12/2019')
.pause(1500)
.options({speed: 50, deleteSpeed: 7})
.go();
document.getElementById("feature-6").innerText = "";
new TypeIt('#feature-6', {
speed: 50,
startDelay: 900,
loop: true,
waitUntilVisible: true,
})
.type('<b>:link</b>')
.pause(400)
.options({speed: 1, deleteSpeed: 7})
.delete(5)
.type('&lt;a href=&quot;#anchor&quot; &gt;&lt;/a&gt;')
.pause(1500)
.options({speed: 50, deleteSpeed: 7})
.go();
}
jumboText();
hiw();
features();
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
</script>
</body>
</html>