diff --git a/package.json b/package.json index 22ac824..f248398 100644 --- a/package.json +++ b/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", diff --git a/sass/global.scss b/sass/global.scss new file mode 100644 index 0000000..0dd5561 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/sass/home.scss b/sass/home.scss index f1a4b96..459f28f 100644 --- a/sass/home.scss +++ b/sass/home.scss @@ -1,17 +1,8 @@ .header { - 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; + margin-bottom: 3.25rem; + @include respond-to("small-up") { + height: 30vh; + background-image: url('/header.jpg'); + background-size: cover; + } } diff --git a/sass/index.scss b/sass/index.scss index d4603c9..6e7d9af 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -1,4 +1,30 @@ -@use './bulma.scss'; -@use './toast.scss'; -@use './pagination.scss'; -@use './home.scss'; \ No newline at end of file +// @use '../node_modules/knacss/sass/knacss.scss'; + +// NOYAU +@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'; \ No newline at end of file diff --git a/sass/navbar.scss b/sass/navbar.scss new file mode 100644 index 0000000..fa04531 --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index cb99a5c..d1ada46 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -51,26 +51,26 @@ }); - -