add designed layout

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",

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": "**"
+  }
 }

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");
+}

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

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

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::before {
-.footer li {
+  position: absolute;
-  margin: 0;
+  top: 0;
-  padding: 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;
 }

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

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
 // --------------------------------------------------------------

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

src/assets/scss/style.scss

@@ -61,7 +61,7 @@
 // == modules */
 // --------------------------------------------------------------
 
-//@import '5-modules/...';
+@import "5-modules/player-big";
 
 
 // --------------------------------------------------------------

src/components/App.svelte

@@ -2,10 +2,8 @@
     <title>{`${ $current ? `${$current.metadata.title} ∴ ` : ''}Eldritch Radio`}</title>
 </svelte:head>
 
-<main class="app">
+<div class="app container">
-    <header class="header">
+    <Header></Header>
-        <h1>Eldritch Radio</h1>
-    </header>
 
     <section class="viewer">
         {#if $current}
@@ -17,13 +15,18 @@
     <section class="queue">
         <Queue></Queue>
     </section>
-</main>
+
+    <Footer></Footer>
+</div>
 
 
 <script>
+
     import { onMount, onDestroy } from 'svelte'
     import { get } from 'svelte/store'
 
+    import Header from '/components/layout/Header.svelte'
+    import Footer from '/components/layout/Footer.svelte'
     import Controls from '/components/Controls.svelte'
     import Queue from '/components/Queue.svelte'
     import Viewer from '/components/Viewer.svelte'
@@ -87,10 +90,3 @@
         }
     })
 </script>
-
-<style>
-    .app {
-        min-width: 100%;
-        min-height: 100%;
-    }
-</style>

src/components/Controls.svelte

@@ -56,12 +56,14 @@
 
 <style>
     .controls {
-        display: flex;
         width: 100%;
+        display: flex;
+        flex-wrap: wrap;
     }
 
     .controls-group {
         margin: 0 1rem;
+
     }
 
     .cant {

src/components/Viewer.svelte

@@ -1,7 +1,8 @@
 <div>
-    <div class="embed-container">
+    <div class="playerBig__player">
         <YoutubePlayer
             id={$current ? $current.data.id : null}
+            class="playerBig__iframe"
             paused={$paused}
             muted={$muted}
             volume={$volume}
@@ -13,7 +14,7 @@
             bind:seek={seek}
         ></YoutubePlayer>
 
-        <div class="embed-overlay" on:click={() => $paused = !$paused}></div>
+        <div class="playerBig__overlay" on:click={() => $paused = !$paused}></div>
     </div>
 
     {#if !ready}
@@ -63,21 +64,3 @@
         currentTime = seconds
     }
 </script>
-
-<style>
-    .hidden {
-        display: none;
-    }
-
-    .embed-container {
-        position: relative;
-    }
-
-    .embed-overlay {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-</style>

src/components/layout/Footer.svelte

@@ -0,0 +1,8 @@
+<footer class="footer">
+    <img class="footer__illu" src="{ eldritchSky }" alt="">
+    <div>by Eldritch Café - <a href="https://github.com/EldritchCafe/radio" target="_blank">source code</a></div>
+</footer>
+
+<script>
+    import eldritchSky from '/assets/img/eldritch-sky.svg'
+</script>

src/components/layout/Header.svelte

@@ -0,0 +1,15 @@
+<header class="header">
+    <div class="header__side">
+        <button class="header__sideBtn">About</button>
+    </div>
+    <h1 class="header__title">
+        <img src="{ logo }" alt="Eldritch Radio">
+    </h1>
+    <div class="header__side txtright">
+        <button class="header__sideBtn">Settings</button>
+    </div>
+</header>
+
+<script>
+    import logo from '/assets/img/logo.svg'
+</script>