{WIP} Bulma => Knacss (signin/signup)

sass/bulma.scss

@@ -1,5 +0,0 @@
-@use '../node_modules/bulma/bulma.sass';
-
-.modal-content {
-  width: 80%;
-}

sass/connexion.scss

@@ -0,0 +1,28 @@
+.connexion,
+.inscription {
+    background-color: #fff;
+    border-radius: 6px;
+    box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
+    color: #4a4a4a;
+    display: block;
+    padding: 1.25rem; 
+    width: calc(100% - 2rem);
+    margin: auto;
+
+    @include respond-to("small-up") {
+       width: 65%;
+    }
+    @include respond-to("medium-up") {
+       width: 35%;
+    }
+
+    button {
+        background-color: #485fc7;
+        border-color: transparent;
+        color: #fff;
+
+        &:hover {
+            background-color: #3e56c4;
+        }
+    }
+}

sass/forms.scss

@@ -0,0 +1,51 @@
+.field {
+    padding-top: .6rem;
+    label {
+        font-weight: 800;
+    }
+    input {
+        box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
+        max-width: 100%;
+        width: 100%;
+        background-color: #fff;
+        border: 1px solid #dbdbdb !important;
+        color: #363636;
+    }
+}
+
+.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;
+
+        &:hover {
+            background-color: #f03a5f;
+            border-color: transparent;
+            color: #fff;
+        }
+    }
+
+    &.is-link {
+        background-color: #485fc7;
+        border-color: transparent;
+        color: #fff;
+
+        &:hover {
+            background-color: #3e56c4;
+            border-color: transparent;
+            color: #fff;
+        }
+    }
+}

sass/global.scss

@@ -1,6 +1,6 @@
 html,
 body {
-    min-height: 100vh;
+    min-height: calc(100vh - 3.25rem);
     display: flex;
     flex-direction: column;
     padding-top: 3.25rem;

sass/index.scss

@@ -27,4 +27,6 @@
 // SPÉCIFIQUE AU SITE
 @import './global';
 @import './navbar';
+@import './forms';
 @import './home';
+@import './connexion';

sass/navbar.scss

@@ -23,10 +23,6 @@
             align-items: center;
             display: flex;
             
-            @include respond-to("medium-up") {
-                // display: block;
-            }
-            
             img { 
                 max-height: 1.75rem;
             }
@@ -296,30 +292,5 @@
         &: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

@@ -166,9 +166,9 @@
                 </div>
             <% } %>
         </main> -->
-        <main class="layout-maxed">
+        
         <%- include(viewname) %>
-        </main>
+        
         <footer class="footer layout-hero">
             <p>
                 <strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>. 

views/pages/connexion.ejs

@@ -1,32 +1,24 @@
-<div class="container">
+<div class="connexion">
-    <div class="columns is-mobile">
+    <form method="POST">
-        <div class="column is-10-mobile is-offset-1-mobile is-8-tablet is-offset-2-tablet is-6-desktop is-offset-3-desktop is-4-widescreen is-offset-4-widescreen">
+        <div class="text-center">
-            <form class="box" method="POST">
+            <img src="/img/logo.png" alt="DarKou">
-                <div class="has-text-centered">
-                    <img class="mb-4" src="/img/logo.png" alt="DarKou">
         </div>
-                <div class="is-size-3">
+        <h2>
             Connexion
+        </h2>
+        <div class="field">
+            <label for="email">Adresse e-mail</label>
+            <input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
         </div>              
         <div class="field">
-                    <label class="label" for="email">Adresse e-mail</label>
+            <label for="password">Mot de passe</label>
-                    <div class="control">
+            <input type="password" name="password" id="password" placeholder="********">
-                        <input class="input" type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
-                    </div>
-                </div>              
-                <div class="field">
-                    <label class="label" for="password">Mot de passe</label>
-                    <div class="control">
-                        <input class="input" type="password" name="password" id="password" placeholder="********">
-                    </div>
         </div>
 
-                <div class="has-text-right mb-3">
+        <div class="text-right mt-10">
             <p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
         </div>
       
-                <button class="button is-link">Connexion</button>
+        <button type="submit" class="button">Connexion</button>
     </form>
 </div>
-    </div>
-</div>

views/pages/home.ejs

@@ -1,3 +1,4 @@
+<main class="layout-maxed">
     <div class="header layout-hero"></div>
     <h1>
         My Music Library
@@ -29,3 +30,4 @@
             <li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss</a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS</a>.</li>
         </ul>
     </p>
+</main>

views/pages/inscription.ejs

@@ -1,38 +1,28 @@
-<div class="container">
+<div class="connexion">
-    <div class="columns is-mobile">
+    <form method="POST">
-        <div class="column is-10-mobile is-offset-1-mobile is-8-tablet is-offset-2-tablet is-6-desktop is-offset-3-desktop is-4-widescreen is-offset-4-widescreen">
+        <div class="text-center">
-            <form class="box" method="POST">
+            <img src="/img/logo.png" alt="DarKou">
-                <div class="has-text-centered">
-                    <img class="mb-4" src="/img/logo.png" alt="DarKou">
         </div>
-                <div class="is-size-3">
+        <h2>
             Inscription
+        </h2>
+        <div class="field">
+            <label for="email">Nom d'utilisateur</label>
+            <input type="text" name="username" id="username" placeholder="ex : darkou">
         </div>  
         <div class="field">
-                    <label class="label" for="email">Nom d'utilisateur</label>
+            <label for="email">Adresse e-mail</label>
-                    <div class="control">
+            <input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
-                        <input class="input" type="text" name="username" id="username" placeholder="ex : darkou">
-                    </div>
         </div>              
         <div class="field">
-                    <label class="label" for="email">Adresse e-mail</label>
+            <label for="password">Mot de passe</label>
-                    <div class="control">
+            <input type="password" name="password" id="password" placeholder="********">
-                        <input class="input" type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
-                    </div>
-                </div>              
-                <div class="field">
-                    <label class="label" for="password">Mot de passe</label>
-                    <div class="control">
-                        <input class="input" type="password" name="password" id="password" placeholder="********">
-                    </div>
         </div>
 
-                <div class="has-text-right mb-3">
+        <div class="text-right mt-10">
             <p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p>
         </div>
       
-                <button class="button is-link">Inscription</button>
+        <button type="submit" class="button">Inscription</button>
     </form>
 </div>
-    </div>
-</div>