{WIP} Bulma => Knacss

package.json

@@ -44,7 +44,6 @@
   },
   "dependencies": {
     "axios": "^0.26.0",
-    "bulma": "^0.9.3",
     "connect-ensure-login": "^0.1.1",
     "connect-flash": "^0.1.1",
     "connect-mongo": "^4.6.0",
@@ -54,6 +53,7 @@
     "ejs": "^3.1.6",
     "express": "^4.17.2",
     "express-session": "^1.17.2",
+    "knacss": "^8.0.4",
     "moment": "^2.29.1",
     "mongoose": "^6.2.1",
     "mongoose-unique-validator": "^3.0.0",

sass/global.scss

@@ -0,0 +1,19 @@
+html,
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    padding-top: 3.25rem;
+    font-family: BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
+    font-weight: 400;
+
+    footer {
+        margin-top: auto;
+        padding: 2rem 0 1.5rem;
+        background-color: #fafafa;
+    }
+
+    a {
+        color: #485fc7;
+    }
+}

sass/home.scss

@@ -1,17 +1,8 @@
 .header {
+    margin-bottom: 3.25rem;
+    @include respond-to("small-up") {
         height: 30vh;
         background-image: url('/header.jpg');
         background-size: cover;
-  margin-bottom: 3.25rem;
     }
-
-html,
-body {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-body > footer {
-  margin-top: auto;
 }

sass/index.scss

@@ -1,4 +1,30 @@
-@use './bulma.scss';
+// @use '../node_modules/knacss/sass/knacss.scss';
-@use './toast.scss';
+
-@use './pagination.scss';
+// NOYAU
-@use './home.scss';
+@import "../node_modules/knacss/sass/abstracts/variables-sass";
+@import "../node_modules/knacss/sass/abstracts/mixins-sass";
+
+@import "../node_modules/knacss/sass/base/reset-base";
+@import "../node_modules/knacss/sass/base/reset-accessibility";
+@import "../node_modules/knacss/sass/base/reset-forms";
+@import "../node_modules/knacss/sass/base/reset-print";
+@import "../node_modules/knacss/sass/base/layout";
+
+// UTILITAIRES
+@import "../node_modules/knacss/sass/utils/utils-global";
+@import "../node_modules/knacss/sass/utils/utils-font-sizes";
+@import "../node_modules/knacss/sass/utils/utils-spacers";
+@import "../node_modules/knacss/sass/utils/grillade";
+
+// COMPOSANTS (à ajouter au besoin)
+// @import "../node_modules/knacss/sass/components/button";
+// @import "components/burger";
+// @import "components/checkbox";
+// @import "components/radio";
+// @import "components/select";
+// @import "components/quote";
+
+// SPÉCIFIQUE AU SITE
+@import './global';
+@import './navbar';
+@import './home';

sass/navbar.scss

@@ -0,0 +1,325 @@
+.navbar {
+    min-height: 3.25rem;
+    background-color: #f5f5f5;
+    color: rgba(0,0,0,.7);
+    position: fixed;
+    z-index: 30;
+    top: 0;
+    right: 0;
+    left: 0;
+
+    @include respond-to("medium-up") {
+        min-height: 3.25rem;
+        align-items: stretch;
+        display: flex;
+    }
+
+    .navbar-brand {
+        align-items: stretch;
+        display: flex;
+        min-height: 3.25rem;
+
+        .navbar-item {
+            align-items: center;
+            display: flex;
+
+            @include respond-to("medium-up") {
+                // display: block;
+            }
+            
+            img { 
+                max-height: 1.75rem;
+            }
+
+            span {
+                word-break: break-word;
+                color: #363636;
+                font-size: 2rem;
+                font-weight: 600;
+                line-height: 1.125;
+                margin-left: .5rem !important;
+            }
+        }
+    }
+
+    .navbar-burger {
+        padding: 0;
+        margin: 0;
+        font-size: 1em;
+        appearance: none;
+        background: none;
+        border: none;
+        cursor: pointer;
+        display: block;
+        height: 3.25rem;
+        position: relative;
+        width: 3.25rem;
+        margin-left: auto;
+        color: rgba(0,0,0,.7);
+
+        @include respond-to("medium-up") {
+            display: none;
+        }
+
+        span {
+            background-color: currentColor;
+            display: block;
+            height: 1px;
+            left: calc(50% - 8px);
+            position: absolute;
+            transform-origin: center;
+            transition-duration: 86ms;
+            transition-property: background-color,opacity,transform;
+            transition-timing-function: ease-out;
+            width: 16px;
+
+            &:nth-child(1) {
+                top: calc(50% - 6px);
+            }
+            &:nth-child(2) {
+                top: calc(50% - 1px);
+            }
+            &:nth-child(3) {
+                top: calc(50% + 4px);
+            }
+        }
+
+        &.is-active {
+            span {
+                &:nth-child(1) {
+                    transform: translateY(5px) rotate(45deg);
+                }
+                &:nth-child(2) {
+                    opacity: 0;
+                }
+                &:nth-child(3) {
+                    transform: translateY(-5px) rotate(-45deg);
+                }
+            }
+        }
+    }
+
+    .navbar-item {
+        line-height: 1.5;
+        padding: .5rem .75rem;
+        position: relative;
+        flex-grow: 0;
+        flex-shrink: 0;
+        color: #4a4a4a;
+        display: block;
+
+        &.has-dropdown {
+            padding: 0;
+
+            @include respond-to("medium-up") {
+                display: flex;
+                align-items: stretch;
+                color: rgba(0,0,0,.7);
+
+                .navbar-dropdown {
+                    background-color: #fff;
+                    border-bottom-left-radius: 6px;
+                    border-bottom-right-radius: 6px;
+                    border-top: 2px solid #dbdbdb;
+                    box-shadow: 0 8px 8px rgba(10,10,10,.1);
+                    display: none;
+                    font-size: .875rem;
+                    left: 0;
+                    min-width: 100%;
+                    position: absolute;
+                    top: 100%;
+                    z-index: 20;
+                }
+
+                &:hover {
+                    .navbar-link {
+                        background-color: #e8e8e8;
+                        color: rgba(0,0,0,.7);
+                    }
+
+                    .navbar-dropdown {
+                        display: block;
+                    }
+                }
+            }
+        }
+
+        @include respond-to("medium-up") {
+            align-items: center;
+            display: flex;
+        }
+    }
+
+    .navbar-link {
+        color: #4a4a4a;
+        display: block;
+        line-height: 1.5;
+        padding: .5rem .75rem;
+        position: relative;
+        cursor: pointer;
+        padding-right: 2.5em;
+
+        @include respond-to("medium-up") {
+            display: flex;
+            align-items: center;
+        }
+
+        .icon {
+            align-items: center;
+            display: inline-flex;
+            justify-content: center;
+            height: 1.5rem;
+            width: 1.5rem;
+        }
+
+        &::after {
+            border: 3px solid transparent;
+            border-radius: 2px;
+            border-right: 0;
+            border-top: 0;
+            content: " ";
+            display: block;
+            height: .625em;
+            pointer-events: none;
+            position: absolute;
+            top: 50%;
+            transform: rotate(-45deg);
+            transform-origin: center;
+            width: .625em;
+            border-color: #485fc7;
+            margin-top: -0.375em;
+            right: 1.125em;
+
+            @include respond-to("medium-up") {
+                border-color: rgba(0,0,0,.7);
+            }
+        }
+    }
+
+    .navbar-menu {
+        display: none;
+        background-color: #fff;
+        box-shadow: 0 8px 16px rgba(10,10,10,.1);
+        padding: .5rem 0;
+
+        @include respond-to("medium") {
+            max-height: calc(100vh - 3.25rem);
+            overflow: auto;
+        }
+
+        @include respond-to("medium-up") {
+            flex-grow: 1;
+            flex-shrink: 0;
+            align-items: stretch;
+            display: flex;
+
+            background-color: initial;
+            box-shadow: none;
+            padding: 0;
+        }
+
+        &.is-active {
+            display: block;
+        }
+
+        @include respond-to("medium-up") {
+            .navbar-start {
+                justify-content: flex-start;
+                margin-right: auto;
+                align-items: stretch;
+                display: flex;
+
+                .navbar-item {
+                    color: rgba(0,0,0,.7);
+                    align-items: center;
+                    display: flex;
+                }
+            }
+
+            .navbar-end {
+                justify-content: flex-end;
+                margin-left: auto;
+                align-items: stretch;
+                display: flex;
+            }
+        }
+    }
+
+    .navbar-dropdown {
+        font-size: .875rem;
+        padding-bottom: .5rem;
+        padding-top: .5rem;
+
+        .navbar-item {
+            cursor: pointer;
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+        }
+
+        @include respond-to("medium-up") {
+            background-color: #fff;
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
+            border-top: 2px solid #dbdbdb;
+            box-shadow: 0 8px 8px rgba(10,10,10,.1);
+            display: none;
+            font-size: .875rem;
+            left: 0;
+            min-width: 100%;
+            position: absolute;
+            top: 100%;
+            z-index: 20;
+
+            .navbar-item {
+                white-space: nowrap;
+                padding: .375rem 1rem;
+                padding-right: 3rem;
+            }
+        }
+    }
+
+    img {
+        height: auto;
+        max-width: 100%;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    .buttons {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+
+        &:last-child {
+            margin-bottom: -0.5rem;
+        }
+
+        .button {
+            cursor: pointer;
+            justify-content: center;
+            padding-bottom: calc(0.5em - 1px);
+            padding-left: 1em;
+            padding-right: 1em;
+            padding-top: calc(0.5em - 1px);
+            text-align: center;
+            white-space: nowrap;
+            border-width: 1px;
+            margin-bottom: .5rem;
+
+            &.is-danger {
+                background-color: #f14668;
+                border-color: transparent;
+                color: #fff;
+            }
+
+            &.is-link {
+                background-color: #485fc7;
+                border-color: transparent;
+                color: #fff;
+            }
+        }
+    }
+}

views/index.ejs

@@ -51,26 +51,26 @@
             });
         </script>
     </head>
-    <body class="has-navbar-fixed-top">
+    <body>
-        <nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
+        <nav class="navbar" role="navigation" aria-label="main navigation">
             <div class="navbar-brand">
                 <a class="navbar-item" href="/">
                     <img src="/logo.png" alt="Logo">
-                    <h1 class="title ml-2">My Music Library</h1>
+                    <span>My Music Library</span>
                 </a>
           
-                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">
                     <span aria-hidden="true"></span>
                     <span aria-hidden="true"></span>
                     <span aria-hidden="true"></span>
                 </a>
             </div>
           
-            <div id="navbarBasicExample" class="navbar-menu">
+            <div id="navbar" class="navbar-menu">
                 <% if ( user ) { %>
                 <div class="navbar-start">
                     <div class="navbar-item">
-                        <p class="control">
+                        <div class="buttons">
                             <a class="button is-link" href="/ajouter-un-album">
                                 <span class="icon">
                                     <i class="fa-solid fa-plus"></i>
@@ -79,14 +79,14 @@
                                     Ajouter un album
                                 </span>
                             </a>
-                        </p>
+                        </div>
                     </div>
                 </div>
                 <% } %>
           
                 <div class="navbar-end">
                     <% if ( user ) { %>
-                    <div class="navbar-item has-dropdown is-hoverable">
+                    <div class="navbar-item has-dropdown">
                         <a class="navbar-link">
                             <span class="icon">
                                 <i class="fa-solid fa-user"></i>
@@ -120,13 +120,12 @@
             </div>
         </nav>
 
-
+        <!-- <div id="toastr" class="notification is-danger">
-        <div id="toastr" class="notification is-danger">
             <button class="delete"></button>
             <span></span>
-        </div>
+        </div> -->
 
-        <main class="mt-4 mb-5">
+        <!-- <main class="layout-maxed">
             <% if ( page.failureFlash || (error && error.length > 0 ) ) {%>
                 <div class="columns is-mobile">
                     <div class="
@@ -166,16 +165,16 @@
                     </div>
                 </div>
             <% } %>
+        </main> -->
+        <main class="layout-maxed">
             <%- include(viewname) %>
         </main>
-        <footer class="footer">
+        <footer class="footer layout-hero">
-            <div class="content has-text-centered">
             <p>
                 <strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>. 
                 Fait avec ❤ à Bordeaux.
                 Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU GPL-3.0-or-later</a>.
             </p>
-            </div>
         </footer>
     </body>
 </html>