diff --git a/package-lock.json b/package-lock.json index a431aa2..760ba22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4673,6 +4673,25 @@ "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", "dev": true }, + "file-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/file-match/-/file-match-1.0.2.tgz", + "integrity": "sha1-ycrSZdLIrfOoFHWw30dYWQafrvc=", + "dev": true, + "requires": { + "utils-extend": "^1.0.6" + } + }, + "file-system": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/file-system/-/file-system-2.2.2.tgz", + "integrity": "sha1-fWWDPjojR9zZVqgTxncVPtPt2Yc=", + "dev": true, + "requires": { + "file-match": "^1.0.1", + "utils-extend": "^1.0.4" + } + }, "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -6928,6 +6947,17 @@ "ws": "^5.1.1" } }, + "parcel-plugin-static-files-copy": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/parcel-plugin-static-files-copy/-/parcel-plugin-static-files-copy-2.3.1.tgz", + "integrity": "sha512-yqB1bhSK+hbfxSjc1y/gBc+Fm6bedNrofx75wgnI0sP+6oEBqjyN51tlJVLu6pZhBLi11ZFwAM2XubCUh2G0+A==", + "dev": true, + "requires": { + "file-system": "2.2.2", + "minimatch": "3.0.4", + "path": "0.12.7" + } + }, "parcel-plugin-svelte": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/parcel-plugin-svelte/-/parcel-plugin-svelte-4.0.5.tgz", @@ -6979,6 +7009,33 @@ "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=", "dev": true }, + "path": { + "version": "0.12.7", + "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", + "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=", + "dev": true, + "requires": { + "process": "^0.11.1", + "util": "^0.10.3" + }, + "dependencies": { + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + }, + "util": { + "version": "0.10.4", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", + "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", + "dev": true, + "requires": { + "inherits": "2.0.3" + } + } + } + }, "path-browserify": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz", @@ -9035,6 +9092,12 @@ "object.getownpropertydescriptors": "^2.0.3" } }, + "utils-extend": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/utils-extend/-/utils-extend-1.0.8.tgz", + "integrity": "sha1-zP17ZFQPjpDuIe7Fd2nQZRyril8=", + "dev": true + }, "uuid": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz", diff --git a/package.json b/package.json index 687a218..f96a454 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@babel/preset-env": "^7.8.3", "autoprefixer": "^9.7.4", "parcel": "^1.12.4", + "parcel-plugin-static-files-copy": "^2.3.1", "parcel-plugin-svelte": "^4.0.5", "sass": "^1.25.0", "svelte": "^3.16.7" @@ -28,5 +29,9 @@ }, "browserslist": [ "last 1 chrome versions" - ] + ], + "staticFiles": { + "staticPath": "public", + "watcherGlob": "**" + } } diff --git a/src/assets/fonts/roboto-bold.woff2 b/src/assets/fonts/roboto-bold.woff2 new file mode 100755 index 0000000..9617b62 Binary files /dev/null and b/src/assets/fonts/roboto-bold.woff2 differ diff --git a/src/assets/fonts/roboto-medium.woff2 b/src/assets/fonts/roboto-medium.woff2 new file mode 100755 index 0000000..a082664 Binary files /dev/null and b/src/assets/fonts/roboto-medium.woff2 differ diff --git a/src/assets/fonts/roboto-regular.woff2 b/src/assets/fonts/roboto-regular.woff2 new file mode 100755 index 0000000..229c18b Binary files /dev/null and b/src/assets/fonts/roboto-regular.woff2 differ diff --git a/src/assets/img/eldritch-sky.svg b/src/assets/img/eldritch-sky.svg new file mode 100644 index 0000000..4e162d8 --- /dev/null +++ b/src/assets/img/eldritch-sky.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/logo.svg b/src/assets/img/logo.svg new file mode 100644 index 0000000..7b0a3e6 --- /dev/null +++ b/src/assets/img/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/scss/4-base/_01-fonts.scss b/src/assets/scss/4-base/_01-fonts.scss index 3d037dd..e745ff1 100755 --- a/src/assets/scss/4-base/_01-fonts.scss +++ b/src/assets/scss/4-base/_01-fonts.scss @@ -1,3 +1,27 @@ /* ----------------------------------------------------------- */ /* == custom fonts */ /* ----------------------------------------------------------- */ + +@font-face { + font-display: swap; + font-weight: normal; + font-style: normal; + font-family: "Roboto"; + src: local("Roboto Regular"), local("Roboto"), url("/assets/fonts/roboto-regular.woff2") format("woff2"), + ; +} + +@font-face { + font-display: swap; + font-weight: 600; + font-style: normal; + font-family: "Roboto"; + src: local("Roboto Medium"), local("Roboto"), url("/assets/fonts/roboto-medium.woff2") format("woff2"); +} +@font-face { + font-display: swap; + font-weight: bold; + font-style: normal; + font-family: "Roboto"; + src: local("Roboto Bold"), local("Roboto"), url("/assets/fonts/roboto-bold.woff2") format("woff2"); +} diff --git a/src/assets/scss/4-base/_04-main.scss b/src/assets/scss/4-base/_04-main.scss index de84051..ba41847 100755 --- a/src/assets/scss/4-base/_04-main.scss +++ b/src/assets/scss/4-base/_04-main.scss @@ -3,7 +3,7 @@ /* ----------------------------------------------------------- */ body { - background-color: #fff; + background-color: #f9f9f7; color: $color-dark-text; font-family: $fontstack1; @@ -16,7 +16,7 @@ body { margin-left: auto; padding-right: 1rem; padding-left: 1rem; - max-width: 102.4rem; + max-width: 54rem; } /* titles diff --git a/src/assets/scss/4-base/_06-header.scss b/src/assets/scss/4-base/_06-header.scss index 3e586d2..e6e0549 100755 --- a/src/assets/scss/4-base/_06-header.scss +++ b/src/assets/scss/4-base/_06-header.scss @@ -3,4 +3,39 @@ /* ----------------------------------------------------------- */ .header { + display: flex; + justify-content: space-between; + align-items: flex-end; + padding-top: 5.7rem; + padding-bottom: 6rem; +} + +.header__title { + margin: 0; + text-align: center; + font-size: 2rem; +} + +/* Side +-------------------------------------------------------------- */ + +.header__side { + padding-bottom: .7rem; +} + +.header__sideBtn, +.header__sideBtn:visited { + padding: 0; + border: none; + background: none; + color: $color-primary; + font-weight: bold; + font-size: 1.4rem; + line-height: 1.14em; + cursor: pointer; +} + +.header__sideBtn:hover, +.header__sideBtn:active { + text-decoration: underline; } diff --git a/src/assets/scss/4-base/_09-footer.scss b/src/assets/scss/4-base/_09-footer.scss index f380232..dc49d10 100755 --- a/src/assets/scss/4-base/_09-footer.scss +++ b/src/assets/scss/4-base/_09-footer.scss @@ -3,17 +3,32 @@ /* ----------------------------------------------------------- */ .footer { - padding: 2rem 0; + position: relative; + margin-top: 6rem; + padding-top: 2.4rem; + padding-bottom: 4rem; + color: rgba($color-primary, .4); + text-align: center; + font-size: 1.3rem; } -.footer ul, -.footer li { - margin: 0; - padding: 0; +.footer::before { + position: absolute; + top: 0; + left: calc(50% - 1rem); + width: 2rem; + height: .2rem; + background-color: rgba($color-primary, .15); + content: ""; } .footer a, .footer a:hover, .footer a:visited { - color: $color-link; + color: rgba($color-primary, .4); + text-decoration: underline; +} + +.footer__illu { + margin-bottom: 2rem; } diff --git a/src/assets/scss/5-modules/player-big.scss b/src/assets/scss/5-modules/player-big.scss new file mode 100644 index 0000000..4246441 --- /dev/null +++ b/src/assets/scss/5-modules/player-big.scss @@ -0,0 +1,20 @@ +/* ----------------------------------------------------------- */ +/* == Big player */ +/* ----------------------------------------------------------- */ + +.playerBig__player { + position: relative; + padding-bottom: calc(100% / (16/9)); +} + +.playerBig__player > iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.playerBig__overlay { + cursor: default; +} diff --git a/src/assets/scss/_colors.scss b/src/assets/scss/_colors.scss index bdf4921..53f483e 100755 --- a/src/assets/scss/_colors.scss +++ b/src/assets/scss/_colors.scss @@ -5,7 +5,7 @@ // palette // -------------------------------------------------------------- -$color-primary: #3498db; +$color-primary: #635776; $color-secondary: #1abc9c; $color-tertiary: #34495e; $color-info: #2185d0; @@ -14,7 +14,7 @@ $color-info: #2185d0; // -------------------------------------------------------------- $color-light-text: #fcfcfc; -$color-dark-text: #000; +$color-dark-text: $color-primary; // links // -------------------------------------------------------------- diff --git a/src/assets/scss/_config.scss b/src/assets/scss/_config.scss index 29d60af..099e601 100755 --- a/src/assets/scss/_config.scss +++ b/src/assets/scss/_config.scss @@ -7,7 +7,7 @@ $base-font: 14; // px value (without unit), will be converted in em $line-height: 1.5; -$fontstack1: "Helvetica Neue", Helvetica, Arial, sans-serif; +$fontstack1: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; $fontstack2: Georgia, Times, "Times New Roman", serif; // responsive diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 95037a3..18d97c4 100755 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -61,7 +61,7 @@ // == modules */ // -------------------------------------------------------------- -//@import '5-modules/...'; +@import "5-modules/player-big"; // -------------------------------------------------------------- diff --git a/src/components/App.svelte b/src/components/App.svelte index 15e0c5d..3cee635 100644 --- a/src/components/App.svelte +++ b/src/components/App.svelte @@ -2,10 +2,8 @@ {`${ $current ? `${$current.metadata.title} ∴ ` : ''}Eldritch Radio`} -
-
-

Eldritch Radio

-
+
+
{#if $current} @@ -17,13 +15,18 @@
-
+ + + - - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/Controls.svelte b/src/components/Controls.svelte index e1ecc4a..a311da4 100644 --- a/src/components/Controls.svelte +++ b/src/components/Controls.svelte @@ -56,12 +56,14 @@ \ No newline at end of file diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte new file mode 100644 index 0000000..01d2b87 --- /dev/null +++ b/src/components/layout/Footer.svelte @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte new file mode 100644 index 0000000..1b47d1c --- /dev/null +++ b/src/components/layout/Header.svelte @@ -0,0 +1,15 @@ +
+
+ +
+

+ Eldritch Radio +

+
+ +
+
+ + \ No newline at end of file