You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@wayang.apache.org by be...@apache.org on 2021/02/22 20:44:21 UTC
[incubator-wayang-website] 01/02: Correction on the home page
This is an automated email from the ASF dual-hosted git repository.
bertty pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/incubator-wayang-website.git
commit 148a3dc74b40db1e51b10e4557519d7cda2472c1
Author: Bertty Contreras-Rojas <be...@scalytics.io>
AuthorDate: Mon Feb 22 17:43:34 2021 -0300
Correction on the home page
---
_config.yml | 2 +
_includes/header.html | 4 +-
_layouts/home.html | 161 +++++++++++++++++++++++++++----
assets/css/home.css | 12 ++-
assets/img/puzzle-piece.png | Bin 0 -> 9107 bytes
assets/json/particules.conf.poligon.json | 110 +++++++++++++++++++++
6 files changed, 265 insertions(+), 24 deletions(-)
diff --git a/_config.yml b/_config.yml
index dc669eb..e1ca9f7 100644
--- a/_config.yml
+++ b/_config.yml
@@ -12,3 +12,5 @@ asciidoctor:
- idseparator=_
- source-highlighter=coderay
- icons=font
+compress_html:
+ profile: true
diff --git a/_includes/header.html b/_includes/header.html
index 8e091b7..da4f943 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -12,7 +12,7 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top shadow-lg">
<div class="container d-flex justify-content-between w-100">
<div class="mr-auto p-2">
- <a class="navbar-brand" href="{% link index.md %}">Navbar</a>
+ <a class="navbar-brand" href="{% link index.md %}">Wayang</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>
@@ -60,4 +60,4 @@
-</nav>
\ No newline at end of file
+</nav>
diff --git a/_layouts/home.html b/_layouts/home.html
index d5fdd87..030bdf0 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -2,33 +2,32 @@
layout: default
---
<section id="full-screen-2" class="container-fluid p-0">
+ <div id="particules" ></div>
<div class="container h-100">
<div class="row h-100">
<div class="col-md-6 h-100">
</div>
- <div class="col-md-6 h-100" >
- <div class="row h-50">
- <div class="col h-100 d-flex align-content-end flex-wrap" >
- <h1 class="p-2 display-4 tx-shadow">
- {{ page.section-1.title }}
- </h1>
- </div>
- </div>
- <div class="row h-50">
- <div class="col h-100 tx-shadow">
- <p class="lead">
- <strong>
- {{ page.section-1.text }}
- </strong>
- </p>
- </div>
- </div>
+ <div class="col-md-6 h-100 d-flex align-items-center flex-wrap" >
+ <h1 class="p-2 display-4 tx-shadow" style="font-size: 5em">
+ {{ page.section-1.title }}
+ </h1>
</div>
</div>
</div>
-
</section>
+<section class="container-fluid" style="background-color:#f8f9fa !important ">
+ <div class="container">
+ <div class="d-flex justify-content-center">
+ <p class="lead p-2">
+ <strong>
+ {{ page.section-1.text }}
+ </strong>
+ </p>
+ </div>
+ </div>
+</section>
+
<section class="container-fluid p-0">
<div class="d-flex justify-content-center">
<p class="display-4 p-2">
@@ -87,4 +86,128 @@ layout: default
</div>
</div>
</div>
-</section>
\ No newline at end of file
+</section>
+
+<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
+<script>
+ with_image = true;
+ if(with_image) {
+ image_url = '{{ "assets/img/puzzle-piece.png" | absolute_url }}';
+ particlesJS(
+ 'particules',
+ {
+ "particles": {
+ "number": {
+ "value": 50,
+ "density": {
+ "enable": true,
+ "value_area": 800
+ }
+ },
+ "color": {
+ "value": "#1b1e34"
+ },
+ "shape": {
+ "type": "image",
+ "stroke": {
+ "width": 0,
+ "color": "#000"
+ },
+ "polygon": {
+ "nb_sides": 6
+ },
+ "image": {
+ "src": image_url,
+ "width": 1,
+ "height": 1
+ }
+ },
+ "opacity": {
+ "value": 0.8,
+ "random": true,
+ "anim": {
+ "enable": false,
+ "speed": 1,
+ "opacity_min": 0.1,
+ "sync": false
+ }
+ },
+ "size": {
+ "value": 60,
+ "random": true,
+ "anim": {
+ "enable": true,
+ "speed": 10,
+ "size_min": 40,
+ "sync": false
+ }
+ },
+ "line_linked": {
+ "enable": false,
+ "distance": 200,
+ "color": "#ffffff",
+ "opacity": 1,
+ "width": 2
+ },
+ "move": {
+ "enable": true,
+ "speed": 8,
+ "direction": "none",
+ "random": false,
+ "straight": false,
+ "out_mode": "out",
+ "bounce": false,
+ "attract": {
+ "enable": false,
+ "rotateX": 600,
+ "rotateY": 1200
+ }
+ }
+ },
+ "interactivity": {
+ "detect_on": "canvas",
+ "events": {
+ "onhover": {
+ "enable": false,
+ "mode": "grab"
+ },
+ "onclick": {
+ "enable": false,
+ "mode": "push"
+ },
+ "resize": true
+ },
+ "modes": {
+ "grab": {
+ "distance": 400,
+ "line_linked": {
+ "opacity": 1
+ }
+ },
+ "bubble": {
+ "distance": 400,
+ "size": 40,
+ "duration": 2,
+ "opacity": 8,
+ "speed": 3
+ },
+ "repulse": {
+ "distance": 200,
+ "duration": 0.4
+ },
+ "push": {
+ "particles_nb": 4
+ },
+ "remove": {
+ "particles_nb": 2
+ }
+ }
+ },
+ "retina_detect": true
+ }
+ );
+ }else{
+ particlesJS.load('particules', '{{ "assets/json/particules.conf.poligon.json" | absolute_url }}', function() {});
+ }
+</script>
+
diff --git a/assets/css/home.css b/assets/css/home.css
index 4237792..5a884a4 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -5,7 +5,7 @@
{
height: 100vh;
width: 100vw;
- background-image: url('{{ "assets/img/keyword.png" | absolute_url }}');
+ background-image: url('{{ "assets/img/wayang-banner.png" | absolute_url }}');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
@@ -14,12 +14,18 @@
{
height: 100vh;
width: 100vw;
- background-image: url('{{ "assets/img/wayang-banner.png" | absolute_url }}');
background-repeat: no-repeat;
background-size: cover;
- background-attachment: fixed;
+
}
+canvas{
+ position:absolute;
+ left:0;
+ top:0;
+ z-index:-1;
+ position: fixed;
+}
.title-post
{
height: 10em;
diff --git a/assets/img/puzzle-piece.png b/assets/img/puzzle-piece.png
new file mode 100644
index 0000000..a7a4298
Binary files /dev/null and b/assets/img/puzzle-piece.png differ
diff --git a/assets/json/particules.conf.poligon.json b/assets/json/particules.conf.poligon.json
new file mode 100644
index 0000000..66ef335
--- /dev/null
+++ b/assets/json/particules.conf.poligon.json
@@ -0,0 +1,110 @@
+{
+ "particles": {
+ "number": {
+ "value": 50,
+ "density": {
+ "enable": true,
+ "value_area": 800
+ }
+ },
+ "color": {
+ "value": "#1b1e34"
+ },
+ "shape": {
+ "type": "polygon",
+ "stroke": {
+ "width": 0,
+ "color": "#000"
+ },
+ "polygon": {
+ "nb_sides": 6
+ },
+ "image": {
+ "src": "img/github.svg",
+ "width": 100,
+ "height": 100
+ }
+ },
+ "opacity": {
+ "value": 0.8601709293791772,
+ "random": true,
+ "anim": {
+ "enable": false,
+ "speed": 1,
+ "opacity_min": 0.1,
+ "sync": false
+ }
+ },
+ "size": {
+ "value": 19.728691040806815,
+ "random": true,
+ "anim": {
+ "enable": true,
+ "speed": 10,
+ "size_min": 40,
+ "sync": false
+ }
+ },
+ "line_linked": {
+ "enable": false,
+ "distance": 200,
+ "color": "#ffffff",
+ "opacity": 1,
+ "width": 2
+ },
+ "move": {
+ "enable": true,
+ "speed": 8,
+ "direction": "none",
+ "random": false,
+ "straight": false,
+ "out_mode": "out",
+ "bounce": false,
+ "attract": {
+ "enable": false,
+ "rotateX": 600,
+ "rotateY": 1200
+ }
+ }
+ },
+ "interactivity": {
+ "detect_on": "canvas",
+ "events": {
+ "onhover": {
+ "enable": false,
+ "mode": "grab"
+ },
+ "onclick": {
+ "enable": false,
+ "mode": "push"
+ },
+ "resize": true
+ },
+ "modes": {
+ "grab": {
+ "distance": 400,
+ "line_linked": {
+ "opacity": 1
+ }
+ },
+ "bubble": {
+ "distance": 400,
+ "size": 40,
+ "duration": 2,
+ "opacity": 8,
+ "speed": 3
+ },
+ "repulse": {
+ "distance": 200,
+ "duration": 0.4
+ },
+ "push": {
+ "particles_nb": 4
+ },
+ "remove": {
+ "particles_nb": 2
+ }
+ }
+ },
+ "retina_detect": true
+}