add designed layout

This commit is contained in:
Tixie 2020-02-15 20:13:33 +01:00
parent baa0951409
commit 2ff9ba0e89
20 changed files with 219 additions and 47 deletions

63
package-lock.json generated
View File

@ -4673,6 +4673,25 @@
"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
"dev": true "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": { "file-uri-to-path": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", "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" "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": { "parcel-plugin-svelte": {
"version": "4.0.5", "version": "4.0.5",
"resolved": "https://registry.npmjs.org/parcel-plugin-svelte/-/parcel-plugin-svelte-4.0.5.tgz", "resolved": "https://registry.npmjs.org/parcel-plugin-svelte/-/parcel-plugin-svelte-4.0.5.tgz",
@ -6979,6 +7009,33 @@
"integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=", "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
"dev": true "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": { "path-browserify": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
@ -9035,6 +9092,12 @@
"object.getownpropertydescriptors": "^2.0.3" "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": { "uuid": {
"version": "3.3.3", "version": "3.3.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz", "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",

View File

@ -16,6 +16,7 @@
"@babel/preset-env": "^7.8.3", "@babel/preset-env": "^7.8.3",
"autoprefixer": "^9.7.4", "autoprefixer": "^9.7.4",
"parcel": "^1.12.4", "parcel": "^1.12.4",
"parcel-plugin-static-files-copy": "^2.3.1",
"parcel-plugin-svelte": "^4.0.5", "parcel-plugin-svelte": "^4.0.5",
"sass": "^1.25.0", "sass": "^1.25.0",
"svelte": "^3.16.7" "svelte": "^3.16.7"
@ -28,5 +29,9 @@
}, },
"browserslist": [ "browserslist": [
"last 1 chrome versions" "last 1 chrome versions"
] ],
"staticFiles": {
"staticPath": "public",
"watcherGlob": "**"
}
} }

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 13 KiB

3
src/assets/img/logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.4 KiB

View File

@ -1,3 +1,27 @@
/* ----------------------------------------------------------- */ /* ----------------------------------------------------------- */
/* == custom fonts */ /* == 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");
}

View File

@ -3,7 +3,7 @@
/* ----------------------------------------------------------- */ /* ----------------------------------------------------------- */
body { body {
background-color: #fff; background-color: #f9f9f7;
color: $color-dark-text; color: $color-dark-text;
font-family: $fontstack1; font-family: $fontstack1;
@ -16,7 +16,7 @@ body {
margin-left: auto; margin-left: auto;
padding-right: 1rem; padding-right: 1rem;
padding-left: 1rem; padding-left: 1rem;
max-width: 102.4rem; max-width: 54rem;
} }
/* titles /* titles

View File

@ -3,4 +3,39 @@
/* ----------------------------------------------------------- */ /* ----------------------------------------------------------- */
.header { .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;
} }

View File

@ -3,17 +3,32 @@
/* ----------------------------------------------------------- */ /* ----------------------------------------------------------- */
.footer { .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,
.footer a:hover, .footer a:hover,
.footer a:visited { .footer a:visited {
color: $color-link; color: rgba($color-primary, .4);
text-decoration: underline;
}
.footer__illu {
margin-bottom: 2rem;
} }

View File

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

View File

@ -5,7 +5,7 @@
// palette // palette
// -------------------------------------------------------------- // --------------------------------------------------------------
$color-primary: #3498db; $color-primary: #635776;
$color-secondary: #1abc9c; $color-secondary: #1abc9c;
$color-tertiary: #34495e; $color-tertiary: #34495e;
$color-info: #2185d0; $color-info: #2185d0;
@ -14,7 +14,7 @@ $color-info: #2185d0;
// -------------------------------------------------------------- // --------------------------------------------------------------
$color-light-text: #fcfcfc; $color-light-text: #fcfcfc;
$color-dark-text: #000; $color-dark-text: $color-primary;
// links // links
// -------------------------------------------------------------- // --------------------------------------------------------------

View File

@ -7,7 +7,7 @@
$base-font: 14; // px value (without unit), will be converted in em $base-font: 14; // px value (without unit), will be converted in em
$line-height: 1.5; $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; $fontstack2: Georgia, Times, "Times New Roman", serif;
// responsive // responsive

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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