From 369123d0500ec436859d0abaf6089c19a5255875 Mon Sep 17 00:00:00 2001 From: dbroqua Date: Wed, 23 Feb 2022 22:38:50 +0100 Subject: [PATCH] =?UTF-8?q?!19=20Ajout=20du=20th=C3=A8me=20Nord=20Polar=20?= =?UTF-8?q?Night=20et=20Snow=20Storm?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sass/box.scss | 30 ++++++++++++++ sass/button.scss | 1 + sass/colors.scss | 53 ++++++++++++++++++++++++ sass/connexion.scss | 18 -------- sass/flash.scss | 3 +- sass/forms.scss | 6 ++- sass/global.scss | 49 ++-------------------- sass/index.scss | 7 ++-- sass/list.scss | 13 +++--- sass/ma-collection.scss | 1 + sass/mixin.scss | 4 ++ sass/modal.scss | 9 ++-- sass/navbar.scss | 7 +++- sass/nous-contacter.scss | 15 ------- sass/pagination.scss | 36 ++++++++-------- views/index.ejs | 2 +- views/pages/ajouter-un-album.ejs | 4 +- views/pages/connexion.ejs | 2 +- views/pages/inscription.ejs | 2 +- views/pages/mon-compte/ma-collection.ejs | 6 +-- views/pages/nous-contacter.ejs | 6 +-- 21 files changed, 148 insertions(+), 126 deletions(-) create mode 100644 sass/box.scss create mode 100644 sass/colors.scss delete mode 100644 sass/connexion.scss create mode 100644 sass/mixin.scss delete mode 100644 sass/nous-contacter.scss diff --git a/sass/box.scss b/sass/box.scss new file mode 100644 index 0000000..4eff418 --- /dev/null +++ b/sass/box.scss @@ -0,0 +1,30 @@ +.box { + background-color: var(--form-bg-color); + border-radius: 6px; + box-shadow: var(--form-box-color) 0px 3px 6px 0px; + color: var(--font-color); + display: block; + padding: 1.25rem; + width: calc(100% - 2rem); + margin: auto; + @include transition() {} + + @include respond-to("small-up") { + width: 65%; + } + @include respond-to("medium-up") { + width: 35%; + } + + h1 { + margin-top: 0; + } + + input { + box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05); + } + + button { + margin-top: 2rem; + } +} \ No newline at end of file diff --git a/sass/button.scss b/sass/button.scss index 78fc884..b1ab827 100644 --- a/sass/button.scss +++ b/sass/button.scss @@ -12,6 +12,7 @@ background-color: var(--default-color); border-color: var(--default-hl-color); border-radius: 0.375rem; + @include transition() {} &.is-danger { background-color: var(--danger-bg-color); diff --git a/sass/colors.scss b/sass/colors.scss new file mode 100644 index 0000000..db5334f --- /dev/null +++ b/sass/colors.scss @@ -0,0 +1,53 @@ +:root { + /* Couleurs globales */ + --primary-bg-color: rgb(136, 192, 208); + --primary-bg-hl-color: rgb(121, 184, 202); + --primary-font-color: rgb(59, 66, 82); + --danger-bg-color: rgb(191, 97, 106); + --danger-bg-hl-color: rgb(176, 89, 100); + --danger-font-color: rgb(4, 4, 4); + + /* Couleurs du thème */ + --default-color: rgb(255, 255, 255); + --bg-color: rgb(242, 244, 248); + --font-color: rgb(76, 86, 106); + --footer-color: rgb(251, 251, 252); + --link-colink-color: rgb(59, 66, 82); + --link-hover-color: rgb(76, 86, 106); + --input-color: rgb(76, 86, 106); + --input-active-color: rgb(229, 233, 240); + --navbar-color: rgb(242, 244, 248); + + --form-bg-color: rgb(255, 255, 255); + --form-box-color: rgba(184, 194, 215, 0.35); + + --border-color: rgb(229, 233, 240); + + --pagination-text-color: rgb(76, 86, 106); + --pagination-border-color: rgb(76, 86, 106); + --pagination-text-hover-color: rgb(115, 151, 186); + --pagination-border-hover-color: rgb(115, 151, 186); +} + +[data-theme="dark"] { + --default-color: rgb(76, 86, 106); + --bg-color: rgb(36, 41, 51); + --font-color: rgb(236, 239, 244); + --footer-color: rgb(59, 66, 82); + --link-color: rgb(171, 185, 207); + --link-hover-color: rgb(236, 239, 244); + --input-color: rgb(236, 239, 244); + --input-active-color: rgb(36, 41, 51); + --navbar-color: rgb(59, 66, 82); + + --form-bg-color: rgb(46, 52, 64); + --form-box-color: rgba(15, 17, 21, 0.2); + + --border-color: rgb(59, 66, 82); + + + --pagination-text-color: rgb(236, 239, 244); + --pagination-border-color: rgb(76, 86, 106); + --pagination-text-hover-color: rgb(115, 151, 186); + --pagination-border-hover-color: rgb(115, 151, 186); +} \ No newline at end of file diff --git a/sass/connexion.scss b/sass/connexion.scss deleted file mode 100644 index 01cc027..0000000 --- a/sass/connexion.scss +++ /dev/null @@ -1,18 +0,0 @@ -.connexion, -.inscription { - background-color: var(--navbar-color); - border-radius: 6px; - box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02); - color: var(--font-color); - 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%; - } -} \ No newline at end of file diff --git a/sass/flash.scss b/sass/flash.scss index 5ff5b38..3d676b9 100644 --- a/sass/flash.scss +++ b/sass/flash.scss @@ -4,9 +4,10 @@ box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02); color: var(--default-color); display: block; - padding: 1.25rem; + padding: 1.25rem; width: calc(100% - 6rem); margin: 2rem auto; + @include transition() {} .header { font-weight: 800; diff --git a/sass/forms.scss b/sass/forms.scss index 989ce29..5b8d5bb 100644 --- a/sass/forms.scss +++ b/sass/forms.scss @@ -27,15 +27,14 @@ textarea, select { border-radius: 4px; - box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05); max-width: 100%; width: 100%; background-color: var(--default-color); border: 1px solid transparent !important; color: var(--input-color); + @include transition() {} &:focus-visible { - // border: 1px solid var(--font-color) !important; outline: unset; border-color: var(--input-active-color) !important; } @@ -81,6 +80,7 @@ right: 0; top: 0; transition: .4s; + @include transition() {} } .slider:before { @@ -106,12 +106,14 @@ input:checked + .slider { background-color: var(--primary-bg-color); + @include transition() {} } input:checked + .slider:before { transform: translateX(26px); content: '\f186'; background-color: var(--input-active-color); + @include transition() {} } .slider.round { diff --git a/sass/global.scss b/sass/global.scss index a27ec37..f53ad46 100644 --- a/sass/global.scss +++ b/sass/global.scss @@ -10,6 +10,7 @@ html { font-weight: 400; min-height: 100vh; color: var(--font-color); + @include transition() {} &.is-accessible { font-family: 'lucioleregular'; @@ -19,11 +20,13 @@ html { margin-top: auto; padding: 2rem 0.7rem 1.5rem; background-color: var(--footer-color); + @include transition() {} } a { color: var(--link-color); cursor: pointer; + @include transition() {} &:hover { color: var(--link-hover-color); @@ -53,50 +56,4 @@ html { .is-hidden { display: none; -} - -:root { - /* Couleurs globales */ - --primary-bg-color: rgb(136, 192, 208); - --primary-bg-hl-color: rgb(121, 184, 202); - --primary-font-color: rgb(59, 66, 82); - --danger-bg-color: rgb(191, 97, 106); - --danger-bg-hl-color: rgb(176, 89, 100); - --danger-font-color: rgb(4, 4, 4); - - /* Couleurs du thème */ - --default-color: rgb(255, 255, 255); - --bg-color: rgb(242, 244, 248); - --font-color: rgb(76, 86, 106); - --footer-color: rgb(251, 251, 252); - --link-color: rgb(123, 136, 161); - --link-hover-color: rgb(76, 86, 106); - --input-color: rgb(76, 86, 106); - --input-active-color: rgb(229, 233, 240); - --navbar-color: rgb(242, 244, 248); - - - - --default-hl-color: #dbdbdb; - --secondary-color: #485fc7; - --secondary-hl-color: #3e56c4; - --danger-color: #d73455; - --danger-hl-color: #d70933; - --bg-light-color: #fafafa; - --disabled-color: #7a7a7a; - - - --heading-color: #292922; -} - -[data-theme="dark"] { - --default-color: rgb(76, 86, 106); - --bg-color: rgb(36, 41, 51); - --font-color: rgb(236, 239, 244); - --footer-color: rgb(59, 66, 82); - --link-color: rgb(171, 185, 207); - --link-hover-color: rgb(236, 239, 244); - --input-color: rgb(236, 239, 244); - --input-active-color: rgb(36, 41, 51); - --navbar-color: rgb(59, 66, 82); } \ No newline at end of file diff --git a/sass/index.scss b/sass/index.scss index 2cb8d50..a2d268e 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -26,6 +26,8 @@ // SPÉCIFIQUE AU SITE @import './fonts'; +@import './colors'; +@import './mixin'; @import './global'; @import './navbar'; @import './forms'; @@ -36,10 +38,9 @@ @import './pagination'; @import './icons'; @import './list'; +@import './box'; @import './error'; @import './home'; -@import './connexion'; @import './ajouter-un-album'; -@import './ma-collection'; -@import './nous-contacter'; \ No newline at end of file +@import './ma-collection'; \ No newline at end of file diff --git a/sass/list.scss b/sass/list.scss index b11b25f..7bfd283 100644 --- a/sass/list.scss +++ b/sass/list.scss @@ -1,26 +1,27 @@ .list { - margin-top: 2rem; + margin: 2rem 0; .item{ padding: 0.5rem 0.75rem; - border-bottom: 1px solid var(--default-hl-color); + border-bottom: 1px solid var(--border-color); + @include transition() {} @include respond-to("medium") { &:nth-child(2n) { - background-color: var(--bg-light-color); + background-color: var(--default-color); } } @include respond-to("medium-up") { - border-left: 1px solid var(--default-hl-color); + border-left: 1px solid var(--border-color); &:first-child, &:nth-child(2) { - border-top: 1px solid var(--default-hl-color); + border-top: 1px solid var(--border-color); } &:nth-child(2n), &:last-child { - border-right: 1px solid var(--default-hl-color); + border-right: 1px solid var(--border-color); margin-right: -1px; } } diff --git a/sass/ma-collection.scss b/sass/ma-collection.scss index 357819a..8e83211 100644 --- a/sass/ma-collection.scss +++ b/sass/ma-collection.scss @@ -28,6 +28,7 @@ .icon-trash { cursor: pointer; color: var(--danger-bg-color); + @include transition() {} &:hover { color: var(--danger-bg-hl-color); diff --git a/sass/mixin.scss b/sass/mixin.scss new file mode 100644 index 0000000..7d74137 --- /dev/null +++ b/sass/mixin.scss @@ -0,0 +1,4 @@ +@mixin transition() { + transition: background-color 200ms ease-in 0s, border-color 200ms ease-in 0s, box-shadow 200ms ease-in 0s, color 200ms ease-in 0s; + @content; +} diff --git a/sass/modal.scss b/sass/modal.scss index 99f42ef..ffe0571 100644 --- a/sass/modal.scss +++ b/sass/modal.scss @@ -46,20 +46,22 @@ header, footer { align-items: center; - background-color: var(--bg-light-color); + background-color: var(--navbar-color); display: flex; flex-shrink: 0; justify-content: flex-start; padding: 0.75rem; position: relative; + @include transition() {} } header { - border-bottom: 1px solid var(--default-hl-color); + border-bottom: 1px solid var(--border-color); border-top-left-radius: 6px; border-top-right-radius: 6px; justify-content: space-between; font-size: 1.5rem; + @include transition() {} button { user-select: none; @@ -108,11 +110,12 @@ flex-shrink: 1; overflow: auto; padding: 20px; + @include transition() {} } footer { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; - border-top: 1px solid var(--default-hl-color); + border-top: 1px solid var(--border-color); .button:not(:last-child) { margin-right: .5em; diff --git a/sass/navbar.scss b/sass/navbar.scss index 306e09f..6b01d03 100644 --- a/sass/navbar.scss +++ b/sass/navbar.scss @@ -8,8 +8,7 @@ top: 0; right: 0; left: 0; - - + @include transition() {} @include respond-to("medium-up") { min-height: 3.25rem; @@ -37,6 +36,7 @@ font-weight: 600; line-height: 1.125; margin-left: .5rem !important; + @include transition() {} } } } @@ -106,6 +106,7 @@ flex-shrink: 0; color: var(--font-color); display: block; + @include transition() {} &.has-dropdown { padding: 0; @@ -157,6 +158,7 @@ position: relative; cursor: pointer; padding-right: 2.5em; + @include transition() {} @include respond-to("medium-up") { display: flex; @@ -200,6 +202,7 @@ background-color: var(--default-color); box-shadow: 0 8px 16px rgba(10,10,10,.1); padding: .5rem 0; + @include transition() {} @include respond-to("medium") { max-height: calc(100vh - 3.25rem); diff --git a/sass/nous-contacter.scss b/sass/nous-contacter.scss deleted file mode 100644 index 1021eb0..0000000 --- a/sass/nous-contacter.scss +++ /dev/null @@ -1,15 +0,0 @@ -.nous-contacter { - width: calc(100% - 2rem); - margin: 2rem auto; - - @include respond-to("small-up") { - width: 55%; - } - @include respond-to("medium-up") { - width: 35%; - } - - button { - margin-top: 2rem; - } -} \ No newline at end of file diff --git a/sass/pagination.scss b/sass/pagination.scss index 5b4d719..9e3b83b 100644 --- a/sass/pagination.scss +++ b/sass/pagination.scss @@ -25,10 +25,25 @@ position: relative; vertical-align: top; text-decoration: none; + user-select: none; + text-align: center; + font-size: 1em; + justify-content: center; + margin: .25rem; + border-color: var(--pagination-border-color); + color: var(--pagination-text-color); + min-width: 2.5em; + padding-left: .75em; + padding-right: .75em; + white-space: nowrap; + margin-bottom: 0; + margin-top: 0; + + @include transition() {} &:hover { - border-color: var(--font-color); - color: var(--font-color); + border-color: var(--pagination-border-hover-color); + color: var(--pagination-text-hover-color); } &.is-disabled { @@ -40,23 +55,6 @@ } } - .pagination-previous, - .pagination-next, - .pagination-link { - user-select: none; - text-align: center; - font-size: 1em; - justify-content: center; - margin: .25rem; - border-color: var(--primary-bg-color); - color: var(--primary-font-color); - min-width: 2.5em; - padding-left: .75em; - padding-right: .75em; - white-space: nowrap; - margin-bottom: 0; - margin-top: 0; - } .pagination-previous { order: 2; } diff --git a/views/index.ejs b/views/index.ejs index ab3ffce..8ec39a7 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -209,7 +209,7 @@ <% } %>
-
-
+
{{ item.artists_sort }} {{ item.title }}
- +
Année : {{ item.year }} diff --git a/views/pages/connexion.ejs b/views/pages/connexion.ejs index 75aa112..ae162fa 100644 --- a/views/pages/connexion.ejs +++ b/views/pages/connexion.ejs @@ -1,4 +1,4 @@ -
+

Connexion diff --git a/views/pages/inscription.ejs b/views/pages/inscription.ejs index 7590ff9..877b471 100644 --- a/views/pages/inscription.ejs +++ b/views/pages/inscription.ejs @@ -1,4 +1,4 @@ -
+

Inscription diff --git a/views/pages/mon-compte/ma-collection.ejs b/views/pages/mon-compte/ma-collection.ejs index 8c10b20..994c2e8 100644 --- a/views/pages/mon-compte/ma-collection.ejs +++ b/views/pages/mon-compte/ma-collection.ejs @@ -55,7 +55,7 @@ Format : - {{ format.name }} + {{ format.name }}