dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

!19 Ajout du thème Nord Polar Night et Snow Storm

Browse source
This commit is contained in:
Damien Broqua 2022-02-23 22:38:50 +01:00
parent bb533c3412
commit 369123d050
21 changed files with 148 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
sass/box.scss Normal file
View file

@ -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;
}
}

1
sass/button.scss
View file

@ -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);

53
sass/colors.scss Normal file
View file

@ -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);
}

18
sass/connexion.scss
View file

@ -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%;
}
}

3
sass/flash.scss
View file

@ -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;

6
sass/forms.scss
View file

@ -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 {

49
sass/global.scss
View file

@ -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);
}

7
sass/index.scss
View file

@ -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';
@import './ma-collection';

13
sass/list.scss
View file

@ -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;
}
}

1
sass/ma-collection.scss
View file

@ -28,6 +28,7 @@
.icon-trash {
cursor: pointer;
color: var(--danger-bg-color);
@include transition() {}
&:hover {
color: var(--danger-bg-hl-color);

4
sass/mixin.scss Normal file
View file

@ -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;
}

9
sass/modal.scss
View file

@ -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;

7
sass/navbar.scss
View file

@ -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);

15
sass/nous-contacter.scss
View file

@ -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;
}
}

36
sass/pagination.scss
View file

@ -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;
}

2
views/index.ejs
View file

@ -209,7 +209,7 @@
<% } %>
<div class="navbar-item apparence">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>

4
views/pages/ajouter-un-album.ejs
View file

@ -15,12 +15,12 @@
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 list">
<div class="grid grid-cols-1 md:grid-cols-2 list">
<div class="item" v-if="!loading" v-for="item in items">
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
<div class="grid grid-cols-2 md:grid-cols-4">
<div>
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;" @click="loadDetails(item.id)"/>
<img :src="item.thumb" :alt="item.title" @click="loadDetails(item.id)"/>
</div>
<div class="md:col-span-3">
<span><strong>Année :</strong> {{ item.year }}</span>

2
views/pages/connexion.ejs
View file

@ -1,4 +1,4 @@
<div class="connexion">
<div class="box">
<form method="POST">
<h1>
Connexion

2
views/pages/inscription.ejs
View file

@ -1,4 +1,4 @@
<div class="connexion">
<div class="box">
<form method="POST">
<h1>
Inscription

6
views/pages/mon-compte/ma-collection.ejs
View file

@ -55,7 +55,7 @@
<span>
<strong>Format : </strong>
<span v-for="(format, index) in item.formats">
{{ format.name }}
{{ format.name }}
<template v-if="format.descriptions">
(<template v-for="(description, j) in format.descriptions">
{{description}}<template v-if="j < format.descriptions.length - 1">, </template>
@ -70,7 +70,7 @@
<span><strong>Style :</strong> <template v-for="(style, index) in item.styles">{{ style }}<template v-if="index < item.styles.length - 1">, </template></template></span>
</div>
</div>
</div>
</div>
</div>
<div class="total">
<strong>Nombre total d'éléments : </strong>{{total}}
@ -118,7 +118,7 @@
total: 0,
page: 1,
totalPages: 1,
limit: 10,
limit: 2,
artist: '',
format: '',
sortOrder: 'artists_sort-asc',

6
views/pages/nous-contacter.ejs
View file

@ -1,4 +1,4 @@
<section class="nous-contacter">
<section class="box">
<h1>Nous contacter</h1>
<form action="https://formspree.io/f/<%= config.formspreeId %>" method="POST">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
@ -11,12 +11,12 @@
<input type="text" name="name" id="name" />
</div>
</div>
<div class="field">
<label for="message">Message*</label>
<textarea name="message" id="message" rows="6" required ></textarea>
</div>
<button type="submit" class="button is-primary">Envoyer</button>
</form>
</section>