diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 661bf1d..617ba44 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -11,6 +11,8 @@ * It is generally better to create a new file per style scope. * */ + $app-z-index: 35; // Navbar: 30 + $primary-gradient: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%); @import "bulma"; // https://bulma.io/documentation/ @import "./devise"; @@ -30,5 +32,38 @@ html { } .notifications-container { - padding: $size-7; + padding-top: $size-7; + z-index: $app-z-index; + position: absolute; + + .columns { + margin-bottom: 0 !important; + } +} + +.navbar { + background-image: $primary-gradient; +} + +.footer { + background-image: $primary-gradient; + color: $white; + + h3, a { + color: $white; + } + + .fa-anti-list { + .fa-ban { + color: $danger; + } + } + + .privacy-policy, .cookie-policy { + padding: $size-7; + } +} + +.fa5-text { + padding-left: $size-7; } diff --git a/app/javascript/packs/bulma/navbar.js b/app/javascript/packs/bulma/navbar.js new file mode 100644 index 0000000..8fc40e0 --- /dev/null +++ b/app/javascript/packs/bulma/navbar.js @@ -0,0 +1,8 @@ +/* +** @see https://bulma.io/documentation/components/navbar/#navbarJsExample +*/ +$(function(){ + $('.navbar-burger').on('click', function() { + $('.navbar-menu, .navbar-burger').toggleClass('is-active'); + }); +}); diff --git a/app/javascript/packs/bulma/notification.js b/app/javascript/packs/bulma/notification.js index 9804c1e..563dac5 100644 --- a/app/javascript/packs/bulma/notification.js +++ b/app/javascript/packs/bulma/notification.js @@ -1,14 +1,6 @@ -// https://bulma.io/documentation/elements/notification/#javascript-example -// document.addEventListener('DOMContentLoaded', () => { -// (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => { -// $notification = $delete.parentNode; -// -// $delete.addEventListener('click', () => { -// $notification.parentNode.removeChild($notification); -// }); -// }); -// }); - +/* +** @ see https://bulma.io/documentation/elements/notification/#javascript-example +*/ $(function(){ $('.notification .delete').on('click', function(){ $(this).parent().hide(); diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index bede0bb..f051e86 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -5,7 +5,7 @@
- My first website with Bulma! -
+