From 6030da70378fe67d1adacf08699228a6720f8539 Mon Sep 17 00:00:00 2001 From: Tixie Date: Sat, 29 Feb 2020 00:02:49 +0100 Subject: [PATCH] add about page --- src/assets/img/separator-tentacle.svg | 3 + src/assets/scss/6-pages/context.scss | 113 ++++++++++++++++++++++ src/assets/scss/_colors.scss | 1 + src/assets/scss/style.scss | 2 +- src/components/About.svelte | 32 ++++++ src/components/ContextPage.svelte | 47 +++++++++ src/components/icons/context/close.svelte | 3 + src/components/layout/Header.svelte | 3 +- 8 files changed, 202 insertions(+), 2 deletions(-) create mode 100644 src/assets/img/separator-tentacle.svg create mode 100644 src/assets/scss/6-pages/context.scss create mode 100644 src/components/About.svelte create mode 100644 src/components/ContextPage.svelte create mode 100644 src/components/icons/context/close.svelte diff --git a/src/assets/img/separator-tentacle.svg b/src/assets/img/separator-tentacle.svg new file mode 100644 index 0000000..b94f4a4 --- /dev/null +++ b/src/assets/img/separator-tentacle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/scss/6-pages/context.scss b/src/assets/scss/6-pages/context.scss new file mode 100644 index 0000000..e0a3d95 --- /dev/null +++ b/src/assets/scss/6-pages/context.scss @@ -0,0 +1,113 @@ +/* ----------------------------------------------------------- */ +/* == Context page */ +/* ----------------------------------------------------------- */ + +/* Body +-------------------------------------------------------------- */ + +.contextEnabled { + position: fixed; + right: 0; + left: 0; + overflow: hidden; +} + +/* Context +-------------------------------------------------------------- */ + +.context { + position: fixed; + top: 0; + left: 0; + z-index: 50; + overflow-y: auto; + padding: 2rem 0; + width: 100%; + height: 100%; + background-color: $color-bg; +} + +/* Head +-------------------------------------------------------------- */ + +.context-head { + display: flex; + justify-content: space-between; + align-items: center; + padding: 4rem 0; +} + +.context-name { + margin: 0; + color: $color-primary; + font-weight: bold; + font-size: 2.4rem; + line-height: 1.16em; +} + +.context-close { + margin-right: -.2rem; + padding: .2rem; + border: none; + border-radius: .3rem; + background: none; +} + +.context-close__icon { + padding: 1.1rem; + border-radius: .3rem; + background-color: $color-grey-3; + color: rgba($color-primary, .8); + font-size: 0; +} + +.context-close__label { + margin-top: .4rem; + color: rgba($color-primary, .8); + font-size: 1.2rem; +} + +/* Content +-------------------------------------------------------------- */ + +.context-content { + padding-bottom: 8rem; + color: $color-primary; + font-size: 1.6rem; + line-height: 1.55em; +} + +.context-content a { + text-decoration: underline; +} + +.context-content .txtbig { + font-size: 1.8rem; +} + +.context-content hr { + position: relative; + margin: 4rem 0; + height: .1rem; + border: none; + background: #d8d8d8; +} + +.context-content hr::before { + position: absolute; + top: -1.3rem; + left: calc(50% - 1.5rem); + width: 3rem; + height: 2.7rem; + background: $color-bg no-repeat url("/assets/img/separator-tentacle.svg"); + background-size: 100% 100%; + content: ""; +} + +.context-content h2 { + margin-top: 2.5rem; + margin-bottom: 1rem; + color: $color-secondary; + font-weight: bold; + font-size: 1.6rem; +} diff --git a/src/assets/scss/_colors.scss b/src/assets/scss/_colors.scss index 3a0ae4a..5fd8907 100755 --- a/src/assets/scss/_colors.scss +++ b/src/assets/scss/_colors.scss @@ -27,3 +27,4 @@ $color-link: $color-primary; $color-grey-1: #767676; $color-grey-2: #c4c4c4; +$color-grey-3: #e5e5e5; diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 77dd253..8329491 100755 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -81,7 +81,7 @@ // == pages */ // -------------------------------------------------------------- -// @import '6-pages/...'; +@import "6-pages/context"; // -------------------------------------------------------------- diff --git a/src/components/About.svelte b/src/components/About.svelte new file mode 100644 index 0000000..589d85e --- /dev/null +++ b/src/components/About.svelte @@ -0,0 +1,32 @@ + + + +

This radio is powered by the publications made on the social plateform Mastodon. The goal behind it is to make a place to discover music outside your usual bubble. Hope you enjoy it!

+
+

Where does the music come from?

+

The app get all the publics publications that contains a media link and a music hashtag (you can configure it in the Settings). We support only Youtube links for now but more platforms are planned in the future.
+ We don’t own the musics rights so the songs are played on the original platform player.

+

How can I get my song be played on the radio?

+

You have to make a public toot containing who of the hashtags configured on the app and a Youtube link.

+

Can I use the radio on my phone?

+

It’s a webapp so it should be working, however since the Youtube Player allow us to play a song only when you’re on the web and stop when the screen turn off or when you’re on another app, it’s kind of unusable.
+ It’s kind of shitty but as long the Youtube have this behavior we don’t see a way to make a great experience for the radio on mobile devices.

+

How can i contact you? I’ve detected a problem, an idea, or a kind message.

+ If you’re a developper you can make an issue on the Github repo. For anything else you can contact the maintainers Milia & Tixie on their Mastodon accounts. + + + + \ No newline at end of file diff --git a/src/components/ContextPage.svelte b/src/components/ContextPage.svelte new file mode 100644 index 0000000..6f24359 --- /dev/null +++ b/src/components/ContextPage.svelte @@ -0,0 +1,47 @@ +{#if open} +
+
+
+

{ name }

+ +
+
+ +
+
+
+{/if} + + \ No newline at end of file diff --git a/src/components/icons/context/close.svelte b/src/components/icons/context/close.svelte new file mode 100644 index 0000000..6726aba --- /dev/null +++ b/src/components/icons/context/close.svelte @@ -0,0 +1,3 @@ + + + diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte index b16796e..8ff9022 100644 --- a/src/components/layout/Header.svelte +++ b/src/components/layout/Header.svelte @@ -1,6 +1,6 @@
- +

Eldritch Radio @@ -12,4 +12,5 @@ \ No newline at end of file