diff --git a/package.json b/package.json index f248398..7c38831 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "start": "node ./dist/bin/www", "run:all": "npm-run-all build sass start", "watch": "nodemon -e js,scss", - "sass": "npx sass sass/index.scss public/css/main.css -s compressed", + "sass": "npx sass sass/index.scss public/css/main.css -s compressed --color", "prebuild": "rimraf dist", "build": "babel ./src --out-dir dist --copy-files", "test": "jest", diff --git a/sass/ajouter-un-album.scss b/sass/ajouter-un-album.scss index d0a173e..d822e30 100644 --- a/sass/ajouter-un-album.scss +++ b/sass/ajouter-un-album.scss @@ -8,40 +8,7 @@ margin-top: 2rem; .item{ - padding: 0.5rem 0.75rem; - border-bottom: 1px solid #dbdbdb; - - @include respond-to("large") { - &:nth-child(2n) { - background-color: #fafafa; - } - } - @include respond-to("large-up") { - border-left: 1px solid #dbdbdb; - - &:first-child, - &:nth-child(2) { - border-top: 1px solid #dbdbdb; - } - - &:nth-child(2n), - &:last-child { - border-right: 1px solid #dbdbdb; - margin-right: -1px; - } - } - - .title { - font-weight: 800; - font-size: 1.4rem; - } - - .grid { - margin-top: 0.75rem; - } - img { - border: 2px solid #4a4a4a; cursor: pointer; } } diff --git a/sass/global.scss b/sass/global.scss index 8409e52..5130647 100644 --- a/sass/global.scss +++ b/sass/global.scss @@ -13,17 +13,6 @@ font-style: normal; } -@font-face { - font-family: 'icon'; - src: url('/font/icon.eot?52730206'); - src: url('/font/icon.eot?52730206#iefix') format('embedded-opentype'), - url('/font/icon.woff?52730206') format('woff'), - url('/font/icon.ttf?52730206') format('truetype'), - url('/font/icon.svg?52730206#icon') format('svg'); - font-weight: normal; - font-style: normal; - } - html { min-height: 100vh; @@ -45,6 +34,10 @@ html { color: #485fc7; cursor: pointer; } + + h1 { + margin-top: 2rem; + } } } diff --git a/sass/home.scss b/sass/home.scss index b7b2534..d99023a 100644 --- a/sass/home.scss +++ b/sass/home.scss @@ -1,6 +1,5 @@ .home { .header { - margin-bottom: 3.25rem; @include respond-to("small-up") { height: 30vh; background-image: url('/header.jpg'); diff --git a/sass/icons.scss b/sass/icons.scss index 61568bc..ab3cd5f 100644 --- a/sass/icons.scss +++ b/sass/icons.scss @@ -1,6 +1,56 @@ -.icon { - font-family: "icon"; - font-style: normal; - font-weight: normal; - text-decoration: inherit; +@font-face { + font-family: 'icon'; + src: url('/font/icon.eot?80770511'); + src: url('/font/icon.eot?80770511#iefix') format('embedded-opentype'), + url('/font/icon.woff2?80770511') format('woff2'), + url('/font/icon.woff?80770511') format('woff'), + url('/font/icon.ttf?80770511') format('truetype'), + url('/font/icon.svg?80770511#icon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "icon"; + font-style: normal; + font-weight: normal; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + + font-variant: normal; + text-transform: none; + + line-height: 1em; + + margin-left: .2em; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-plus:before { content: '\e800'; } /* '' */ +.icon-user:before { content: '\e801'; } /* '' */ +.icon-search:before { content: '\e802'; } /* '' */ +.icon-mail:before { content: '\e803'; } /* '' */ +.icon-link:before { content: '\e804'; } /* '' */ +.icon-spin:before { content: '\e839'; } /* '' */ +.icon-link-ext:before { content: '\f08e'; } /* '' */ +.icon-trash:before { content: '\f1f8'; } /* '' */ + +.animate-spin { + animation: spin 2s infinite linear; + display: inline-block; +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(359deg); + } } \ No newline at end of file diff --git a/sass/index.scss b/sass/index.scss index ffcb442..99a65af 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -35,6 +35,7 @@ @import './flash'; @import './pagination'; @import './icons'; +@import './list'; @import './error'; @import './home'; diff --git a/sass/list.scss b/sass/list.scss new file mode 100644 index 0000000..7301e7c --- /dev/null +++ b/sass/list.scss @@ -0,0 +1,42 @@ +.list { + margin-top: 2rem; + + .item{ + padding: 0.5rem 0.75rem; + border-bottom: 1px solid #dbdbdb; + + @include respond-to("medium") { + &:nth-child(2n) { + background-color: #fafafa; + } + } + @include respond-to("medium-up") { + border-left: 1px solid #dbdbdb; + + &:first-child, + &:nth-child(2) { + border-top: 1px solid #dbdbdb; + } + + &:nth-child(2n), + &:last-child { + border-right: 1px solid #dbdbdb; + margin-right: -1px; + } + } + + .title { + font-weight: 800; + font-size: 1.4rem; + } + + .grid { + margin-top: 0.75rem; + } + + img { + border: 2px solid #4a4a4a; + max-width: 90%; + } + } +} \ No newline at end of file diff --git a/sass/ma-collection.scss b/sass/ma-collection.scss index 85c0c0a..69eb680 100644 --- a/sass/ma-collection.scss +++ b/sass/ma-collection.scss @@ -24,18 +24,8 @@ } .list{ - padding: 0.5rem 0.75rem; - border-bottom: 1px solid #dbdbdb; - - &:nth-child(2n) { - background-color: #fafafa; - } - .title { - font-weight: 800; - font-size: 1.4rem; - - .icon { + .icon-trash { cursor: pointer; color: #f14668; @@ -44,14 +34,6 @@ } } } - - .grid { - margin-top: 0.75rem; - } - - img { - border: 2px solid #4a4a4a; - } } .total { diff --git a/views/index.ejs b/views/index.ejs index 3a526bc..8472832 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -73,9 +73,7 @@
- -  - + Ajouter un album @@ -92,9 +90,7 @@ <% if ( user ) { %>
- -  - + <%= user.username %> @@ -160,9 +156,9 @@ diff --git a/views/pages/ajouter-un-album.ejs b/views/pages/ajouter-un-album.ejs index 3051172..6ae0700 100644 --- a/views/pages/ajouter-un-album.ejs +++ b/views/pages/ajouter-un-album.ejs @@ -1,18 +1,19 @@ -
+
+

Ajouter un album

+
{{ item.artists_sort }} {{ item.title }} @@ -149,7 +150,7 @@
-
+