changeset 3e480c70cab1 in www.tryton.org:default
details: https://hg.tryton.org/www.tryton.org?cmd=changeset;node=3e480c70cab1
description:
Replace wow and animate.css by custom style
diffstat:
gulpfile.js | 2 -
js/wow.js | 3 -
package.json | 4 +-
sass/_animation.scss | 54 ++++++++++++++++++++++++++++++++++
sass/content/_component.scss | 12 +++++++
sass/content/_section.scss | 5 +++
sass/main.scss | 2 +-
templates/contribute.html | 14 ++++----
templates/develop.html | 2 +-
templates/donate_thanks.html | 2 +-
templates/events/layout.html | 2 +-
templates/index.html | 30 +++++++++---------
templates/layout.html | 16 +++++-----
templates/service_providers.html | 2 +-
templates/service_providers_start.html | 8 ++--
templates/success_stories/layout.html | 4 +-
templates/supporters.html | 2 +-
templates/utils.html | 4 +-
18 files changed, 115 insertions(+), 53 deletions(-)
diffs (531 lines):
diff -r cd9979d6ff12 -r 3e480c70cab1 gulpfile.js
--- a/gulpfile.js Sat Oct 05 13:24:10 2019 +0200
+++ b/gulpfile.js Sat Oct 05 16:00:45 2019 +0200
@@ -16,9 +16,7 @@
'node_modules/jquery/dist/jquery.slim.js',
'node_modules/popper.js/dist/umd/popper.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
- 'node_modules/wowjs/dist/wow.js',
'node_modules/loading-attribute-polyfill/loading-attribute-polyfill.js',
- 'js/wow.js',
'js/highlight.pack.js',
'js/highlight.js'])
.pipe(sourcemaps.init())
diff -r cd9979d6ff12 -r 3e480c70cab1 js/wow.js
--- a/js/wow.js Sat Oct 05 13:24:10 2019 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,3 +0,0 @@
-$(document).ready(function(){
- new WOW().init();
-});
diff -r cd9979d6ff12 -r 3e480c70cab1 package.json
--- a/package.json Sat Oct 05 13:24:10 2019 +0200
+++ b/package.json Sat Oct 05 16:00:45 2019 +0200
@@ -5,7 +5,6 @@
"description": "NPM Tryton",
"author": "Pierre Gomba",
"dependencies": {
- "animate.css": "^3.7.2",
"bootstrap": "^4.3.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
@@ -23,8 +22,7 @@
"loading-attribute-polyfill": "^1.1.0",
"material-icons": "^0.3.1",
"node-sass-package-importer": "^5.3.2",
- "popper.js": "^1.15.0",
- "wowjs": "^1.1.3"
+ "popper.js": "^1.15.0"
},
"devDependencies": {
"sass-lint": "^1.13.1"
diff -r cd9979d6ff12 -r 3e480c70cab1 sass/_animation.scss
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/sass/_animation.scss Sat Oct 05 16:00:45 2019 +0200
@@ -0,0 +1,54 @@
+@keyframes zoomIn {
+ from {
+ opacity: 0;
+ transform: scale(0);
+ }
+
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes fadeInDown {
+ from {
+ opacity: 0;
+ transform: translate3d(0, -100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes bounce {
+ from,
+ 6%,
+ 10%,
+ 12%,
+ to {
+ transform: translateY(0);
+ }
+
+ 2%,
+ 5% {
+ transform: translateY(-30px);
+ }
+
+ 9% {
+ transform: translateY(-15px);
+ }
+
+ 11% {
+ transform: translateY(-4px);
+ }
+}
+
+.bounce {
+ animation: bounce 8s ease-in-out 5s infinite;
+
+ &:hover {
+ animation-play-state: paused;
+ }
+}
diff -r cd9979d6ff12 -r 3e480c70cab1 sass/content/_component.scss
--- a/sass/content/_component.scss Sat Oct 05 13:24:10 2019 +0200
+++ b/sass/content/_component.scss Sat Oct 05 16:00:45 2019 +0200
@@ -6,6 +6,7 @@
// PICTOS
.picto-container {
align-items: center;
+ animation: zoomIn 1s ease-out;
display: flex;
flex-direction: column;
text-align: center;
@@ -80,3 +81,14 @@
}
}
}
+
+.socials {
+ a {
+ opacity: .5;
+
+ &:hover {
+ opacity: 1;
+ transition: .5s ease;
+ }
+ }
+}
diff -r cd9979d6ff12 -r 3e480c70cab1 sass/content/_section.scss
--- a/sass/content/_section.scss Sat Oct 05 13:24:10 2019 +0200
+++ b/sass/content/_section.scss Sat Oct 05 16:00:45 2019 +0200
@@ -29,6 +29,7 @@
// SECTION HEADER
.section-header {
+ animation: fadeInDown 2s ease-out;
margin-bottom: $h2-margin-bottom;
position: relative;
@@ -95,4 +96,8 @@
background-position: center;
background-repeat: no-repeat;
background-size: cover;
+
+ & .container {
+ animation: fadeInDown 1s ease-out;
+ }
}
diff -r cd9979d6ff12 -r 3e480c70cab1 sass/main.scss
--- a/sass/main.scss Sat Oct 05 13:24:10 2019 +0200
+++ b/sass/main.scss Sat Oct 05 16:00:45 2019 +0200
@@ -1,11 +1,11 @@
@import 'font';
@import 'variables';
+@import 'animation';
@import 'bootstrap/override';
@import '~bootstrap/scss/bootstrap';
@import 'material-icons/override';
@import '~material-icons/iconfont/material-icons';
@import 'material-icons/utils';
-@import '~animate.css/animate.css';
@import 'base';
@import 'content/content';
@import 'header/header';
diff -r cd9979d6ff12 -r 3e480c70cab1 templates/contribute.html
--- a/templates/contribute.html Sat Oct 05 13:24:10 2019 +0200
+++ b/templates/contribute.html Sat Oct 05 16:00:45 2019 +0200
@@ -32,7 +32,7 @@
<div class="card mb-5 shadow w-100">
<div class="card-body d-inline-flex">
<div class="picto-container mr-3 d-none d-sm-flex">
- <div class="picto bg-dark text-white wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto bg-dark text-white">
<span class="material-icons md-48">monetization_on</span>
</div>
</div>
@@ -50,7 +50,7 @@
<div class="card mb-5 shadow w-100">
<div class="card-body d-inline-flex">
<div class="picto-container mr-3 d-none d-sm-flex">
- <div class="picto bg-dark text-white wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto bg-dark text-white">
<span class="material-icons md-48">live_help</span>
</div>
</div>
@@ -70,7 +70,7 @@
<div class="card mb-5 shadow w-100">
<div class="card-body d-inline-flex">
<div class="picto-container mr-3 d-none d-sm-flex">
- <div class="picto bg-dark text-white wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto bg-dark text-white">
<span class="material-icons md-48">share</span>
</div>
</div>
@@ -98,7 +98,7 @@
<div class="card mb-5 shadow w-100">
<div class="card-body d-inline-flex">
<div class="picto-container mr-3 d-none d-sm-flex">
- <div class="picto bg-dark text-white wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto bg-dark text-white">
<span class="material-icons md-48">bug_report</span>
</div>
</div>
@@ -116,7 +116,7 @@
<div class="card mb-5 shadow w-100">
<div class="card-body d-inline-flex">
<div class="picto-container mr-3 d-none d-sm-flex">
- <div class="picto bg-dark text-white wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto bg-dark text-white">
<span class="material-icons md-48">build</span>
</div>
</div>
@@ -135,7 +135,7 @@
<div class="card mb-5 shadow w-100">
<div class="card-body d-inline-flex">
<div class="picto-container mr-3 d-none d-sm-flex">
- <div class="picto bg-dark text-white wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto bg-dark text-white">
<span class="material-icons md-48">translate</span>
</div>
</div>
@@ -157,7 +157,7 @@
<div class="card mb-5 shadow w-100">
<div class="card-body d-inline-flex">
<div class="picto-container mr-3 d-none d-sm-flex">
- <div class="picto bg-dark text-white wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto bg-dark text-white">
<span class="material-icons md-48">description</span>
</div>
</div>
diff -r cd9979d6ff12 -r 3e480c70cab1 templates/develop.html
--- a/templates/develop.html Sat Oct 05 13:24:10 2019 +0200
+++ b/templates/develop.html Sat Oct 05 16:00:45 2019 +0200
@@ -21,7 +21,7 @@
{% block content %}
<div class="section bg-primary">
<div class="container">
- <div class="section-header text-center text-white bg-primary mb1 wow
fadeInDown">
+ <div class="section-header text-center text-white bg-primary mb1">
<h1 class="pl-3 pr-3">{{ title }}</h1>
</div>
</div>
diff -r cd9979d6ff12 -r 3e480c70cab1 templates/donate_thanks.html
--- a/templates/donate_thanks.html Sat Oct 05 13:24:10 2019 +0200
+++ b/templates/donate_thanks.html Sat Oct 05 16:00:45 2019 +0200
@@ -4,7 +4,7 @@
{{ super() }}
<div class="section bg-light">
<div class="container">
- <section class="section-header text-center bg-light mb1 wow
fadeInDown">
+ <section class="section-header text-center bg-light mb1">
<h1 class="pl-3 pr-3">{{ heart | safe }}Thanks You!</h1>
</section>
</div>
diff -r cd9979d6ff12 -r 3e480c70cab1 templates/events/layout.html
--- a/templates/events/layout.html Sat Oct 05 13:24:10 2019 +0200
+++ b/templates/events/layout.html Sat Oct 05 16:00:45 2019 +0200
@@ -30,7 +30,7 @@
</div>
<section class="section" id="schedule">
<div class="container">
- <div class="section-header bg-white text-primary text-center wow
fadeInDown">
+ <div class="section-header bg-white text-primary text-center">
<h2 class="pl-3 pr-3 text-uppercase"><span
class="material-icons">timer</span> Schedule</h2>
</div>
{% block schedule %}
diff -r cd9979d6ff12 -r 3e480c70cab1 templates/index.html
--- a/templates/index.html Sat Oct 05 13:24:10 2019 +0200
+++ b/templates/index.html Sat Oct 05 16:00:45 2019 +0200
@@ -93,7 +93,7 @@
{% endblock header %}
{% block content %}
-<div class="section wow fadeIn">
+<div class="section">
<div class="container text-center">
<h1 class="lead mb-4">
<strong>TRYTON</strong> is business software, ideal for companies of
any size, easy to use, complete and 100% Open Source.
@@ -104,7 +104,7 @@
<section class="section bg-light text-center" id="features">
<div class="container">
- <section class="section-header bg-light text-primary wow fadeInDown">
+ <section class="section-header bg-light text-primary">
<h2 class="pl-3 pr-3 text-uppercase">All you need to run your
business</h2>
</section>
<h3 class="lead">
@@ -115,7 +115,7 @@
<div class="col-xxl-9 col-xl-10">
<div class="row">
<div class="col-4">
- <div class="picto-container wow zoomIn">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">account_balance</span>
</div>
@@ -124,7 +124,7 @@
</div>
</div>
<div class="col-4">
- <div class="picto-container wow zoomIn"
data-wow-delay=".2s">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">store_mall_directory</span>
</div>
@@ -133,7 +133,7 @@
</div>
</div>
<div class="col-4">
- <div class="picto-container wow zoomIn"
data-wow-delay=".3s">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">local_convenience_store</span>
</div>
@@ -144,7 +144,7 @@
</div>
<div class="row mt-5">
<div class="col-4">
- <div class="picto-container wow zoomIn"
data-wow-delay=".4s">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">account_balance_wallet</span>
</div>
@@ -153,7 +153,7 @@
</div>
</div>
<div class="col-4">
- <div class="picto-container wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">person</span>
</div>
@@ -162,7 +162,7 @@
</div>
</div>
<div class="col-4">
- <div class="picto-container wow zoomIn"
data-wow-delay=".6s">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">shopping_cart</span>
</div>
@@ -173,7 +173,7 @@
</div>
<div class="row mt-5">
<div class="col-4">
- <div class="picto-container wow zoomIn"
data-wow-delay=".7s">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">equalizer</span>
</div>
@@ -182,7 +182,7 @@
</div>
</div>
<div class="col-4">
- <div class="picto-container wow zoomIn"
data-wow-delay=".8s">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">build</span>
</div>
@@ -191,7 +191,7 @@
</div>
</div>
<div class="col-4">
- <div class="picto-container wow zoomIn"
data-wow-delay=".9s">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">local_shipping</span>
</div>
@@ -202,7 +202,7 @@
</div>
<div class="row mt-5">
<div class="col-4">
- <div class="picto-container wow zoomIn"
data-wow-delay="1s">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">work</span>
</div>
@@ -211,7 +211,7 @@
</div>
</div>
<div class="col-4">
- <div class="picto-container wow zoomIn"
data-wow-delay="1.1s">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">repeat</span>
</div>
@@ -220,7 +220,7 @@
</div>
</div>
<div class="col-4">
- <div class="picto-container wow zoomIn"
data-wow-delay="1.2s">
+ <div class="picto-container">
<div class="picto bg-primary text-white">
<span class="material-icons
md-48">group_work</span>
</div>
@@ -264,7 +264,7 @@
<div class="row">
<div class="col-lg-4">
<div class="picto-container">
- <div class="picto bg-dark text-white wow
zoomIn" data-wow-delay=".5s" aria-hidden="true">
+ <div class="picto bg-dark text-white"
aria-hidden="true">
<span class="material-icons
md-48">event</span>
</div>
<h3 class="text-white mt-3 mb-3">Events</h3>
diff -r cd9979d6ff12 -r 3e480c70cab1 templates/layout.html
--- a/templates/layout.html Sat Oct 05 13:24:10 2019 +0200
+++ b/templates/layout.html Sat Oct 05 16:00:45 2019 +0200
@@ -89,7 +89,7 @@
<footer id="footer">
{% block footer %}
<noscript class="loading-lazy">
- <img class="img-fluid wow fadeIn" src="{{ url_for('static',
filename='images/placeholder-large.jpg') }}" sizes="100vw" srcset="{{
url_for('static', filename='images/placeholder-large.jpg') }} 1920w, {{
url_for('static', filename='images/placeholder-large-800px.jpg') }} 800w, {{
url_for('static', filename='images/placeholder-large-400px.jpg') }} 400w"
alt="" loading="lazy"/>
+ <img class="img-fluid" src="{{ url_for('static',
filename='images/placeholder-large.jpg') }}" sizes="100vw" srcset="{{
url_for('static', filename='images/placeholder-large.jpg') }} 1920w, {{
url_for('static', filename='images/placeholder-large-800px.jpg') }} 800w, {{
url_for('static', filename='images/placeholder-large-400px.jpg') }} 400w"
alt="" loading="lazy"/>
</noscript>
<section class="topfooter">
<div class="container">
@@ -115,7 +115,7 @@
<div class="offset-lg-1 col-md-5 col-lg-4">
<div class="footer-right">
<noscript class="loading-lazy">
- <img class="img-fluid wow fadeIn" src="{{
url_for('static', filename='images/tryton-white.png') }}" width="110"
height="32" alt="Tryton" loading="lazy"/>
+ <img class="img-fluid" src="{{
url_for('static', filename='images/tryton-white.png') }}" width="110"
height="32" alt="Tryton" loading="lazy"/>
</noscript>
<hr/>
<p class="lead">Modularity, scalability &
security for your business</p>
@@ -124,12 +124,12 @@
</p>
<div class="socials">
<h2>Follow us</h2>
- <a href="{{ url_for('news_rss') }}"
class="mr-3 wow zoomIn icon icon-rss-box i-36" data-wow-delay=".2s"><span
class="sr-only">RSS</span></a>
- <a
href="https://twitter.com/TrytonSoftware"; target="_blank" rel="noopener"
class="mr-3 wow zoomIn icon icon-twitter-box i-36" data-wow-delay=".2s"><span
class="sr-only">Twitter</span></a>
- <a
href="https://www.facebook.com/TrytonSoftware/"; target="_blank" rel="noopener"
class="mr-3 wow zoomIn icon icon-facebook-box i-36" data-wow-delay=".1s"><span
class="sr-only">Facebook</span></a>
- <a
href="https://www.linkedin.com/groups/1313967"; target="_blank" rel="noopener"
class="mr-3 wow zoomIn icon icon-linkedin-box i-36" data-wow-delay=".3s"><span
class="sr-only">LinkedIn</span></a>
- <a
href="https://www.youtube.com/c/TrytonSoftware"; target="_blank" rel="noopener"
class="mr-3 wow zoomIn icon icon-youtube i-36" data-wow-delay=".4s"><span
class="sr-only">YouTube</span></a>
- <a href="https://vimeo.com/groups/tryton";
target="_blank" rel="noopener" class="mr-3 wow zoomIn icon icon-vimeo i-36"
data-wow-delay=".5s"><span class="sr-only">Vimeo</span></a>
+ <a href="{{ url_for('news_rss') }}"
class="mr-3 icon icon-rss-box i-36"><span class="sr-only">RSS</span></a>
+ <a
href="https://twitter.com/TrytonSoftware"; target="_blank" rel="noopener"
class="mr-3 icon icon-twitter-box i-36"><span class="sr-only">Twitter</span></a>
+ <a
href="https://www.facebook.com/TrytonSoftware/"; target="_blank" rel="noopener"
class="mr-3 icon icon-facebook-box i-36"><span
class="sr-only">Facebook</span></a>
+ <a
href="https://www.linkedin.com/groups/1313967"; target="_blank" rel="noopener"
class="mr-3 icon icon-linkedin-box i-36"><span
class="sr-only">LinkedIn</span></a>
+ <a
href="https://www.youtube.com/c/TrytonSoftware"; target="_blank" rel="noopener"
class="mr-3 icon icon-youtube i-36"><span class="sr-only">YouTube</span></a>
+ <a href="https://vimeo.com/groups/tryton";
target="_blank" rel="noopener" class="mr-3 icon icon-vimeo i-36"><span
class="sr-only">Vimeo</span></a>
</div>
</div>
</div>
diff -r cd9979d6ff12 -r 3e480c70cab1 templates/service_providers.html
--- a/templates/service_providers.html Sat Oct 05 13:24:10 2019 +0200
+++ b/templates/service_providers.html Sat Oct 05 16:00:45 2019 +0200
@@ -6,7 +6,7 @@
{{ super() }}
<div class="section bg-primary">
<div class="container">
- <section class="section-header text-center text-white bg-primary mb1
wow fadeInDown">
+ <section class="section-header text-center text-white bg-primary mb1">
<h1 class="pl-3 pr-3">{{ title }}</h1>
</section>
<div class="d-none d-sm-block mx-auto col-md-6 card">
diff -r cd9979d6ff12 -r 3e480c70cab1 templates/service_providers_start.html
--- a/templates/service_providers_start.html Sat Oct 05 13:24:10 2019 +0200
+++ b/templates/service_providers_start.html Sat Oct 05 16:00:45 2019 +0200
@@ -38,7 +38,7 @@
<div class="card mb-5 shadow w-100">
<div class="card-body d-inline-flex">
<div class="picto-container mr-3 d-none d-sm-flex">
- <div class="picto bg-dark text-white wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto bg-dark text-white">
<span class="material-icons md-48">build</span>
</div>
</div>
@@ -55,7 +55,7 @@
<div class="card mb-5 shadow w-100">
<div class="card-body d-inline-flex">
<div class="picto-container mr-3 d-none d-sm-flex">
- <div class="picto bg-dark text-white wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto bg-dark text-white">
<span class="material-icons md-48">send</span>
</div>
</div>
@@ -72,7 +72,7 @@
<div class="card mb-5 shadow w-100">
<div class="card-body d-inline-flex">
<div class="picto-container mr-3 d-none d-sm-flex">
- <div class="picto bg-dark text-white wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto bg-dark text-white">
<span class="material-icons md-48">create</span>
</div>
</div>
@@ -89,7 +89,7 @@
<div class="card mb-5 shadow w-100">
<div class="card-body d-inline-flex">
<div class="picto-container mr-3 d-none d-sm-flex">
- <div class="picto bg-dark text-white wow zoomIn"
data-wow-delay=".5s">
+ <div class="picto bg-dark text-white">
<span class="material-icons md-48">update</span>
</div>
</div>
diff -r cd9979d6ff12 -r 3e480c70cab1 templates/success_stories/layout.html
--- a/templates/success_stories/layout.html Sat Oct 05 13:24:10 2019 +0200
+++ b/templates/success_stories/layout.html Sat Oct 05 16:00:45 2019 +0200
@@ -50,8 +50,6 @@
</div>
</div>
<div class="section bg-light text-center">
- <div class="wow bounce" data-wow-offset="10" data-wow-iteration="2">
- {{ case_card(next_case) }}
- </div>
+ {{ case_card(next_case, classes='bounce') }}
</div>
{% endblock content %}
diff -r cd9979d6ff12 -r 3e480c70cab1 templates/supporters.html
--- a/templates/supporters.html Sat Oct 05 13:24:10 2019 +0200
+++ b/templates/supporters.html Sat Oct 05 16:00:45 2019 +0200
@@ -6,7 +6,7 @@
{{ super() }}
<div class="section bg-primary">
<div class="container">
- <section class="section-header text-center text-white bg-primary mb1
wow fadeInDown">
+ <section class="section-header text-center text-white bg-primary mb1">
<h1 class="pl-3 pr-3">{{ title }}</h1>
</section>
</div>
diff -r cd9979d6ff12 -r 3e480c70cab1 templates/utils.html
--- a/templates/utils.html Sat Oct 05 13:24:10 2019 +0200
+++ b/templates/utils.html Sat Oct 05 16:00:45 2019 +0200
@@ -16,8 +16,8 @@
</style>
{% endmacro %}
-{% macro case_card(case) %}
-<div class="card mx-auto shadow d-flex flex-column" style="width: 18rem;
height: 100%">
+{% macro case_card(case, classes='') %}
+<div class="card mx-auto shadow d-flex flex-column {{ classes }}"
style="width: 18rem; height: 100%">
{% if case.logo %}
<noscript class="loading-lazy">
<img class="card-img-top" src="{{ url_for('static',
filename=case.logo) }}" style="height: 180px" alt="" loading="lazy"/>
