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 <[email protected]> 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/[email protected]/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 +}
