add about page

src/assets/img/separator-tentacle.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="27" viewBox="0 0 11 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.7659 26.5436C8.74833 26.5403 8.74126 26.529 8.73793 26.5191L8.49817 25.6027C8.47747 25.5349 8.39465 25.5124 8.34391 25.4904C7.88601 25.2945 7.39128 25.1917 6.99411 25.1673C6.79756 25.1661 6.81382 25.1922 6.76414 25.2575L6.38981 25.8815C6.35331 25.9141 6.3737 25.9192 6.28362 25.9047C5.1438 25.6827 4.7793 25.4788 4.17349 24.6451C4.08567 24.4347 4.0849 24.4929 4.13791 24.3419L4.36139 23.6851C4.38269 23.5405 4.3201 23.4776 4.25464 23.3854C3.95625 22.9652 3.29814 22.0091 3.09784 21.9951C3.05631 21.9922 3.02156 21.9754 2.98911 21.9812L2.23302 22.2736C2.18621 22.2848 2.18263 22.2823 2.1553 22.2598C1.66338 21.7302 1.25022 20.9876 1.07085 20.2937C1.05217 20.2221 1.05626 20.2223 1.08427 20.1765L1.61084 19.5318C1.63487 19.5093 1.68339 19.4824 1.65981 19.4161C1.58159 19.1178 1.35555 18.5057 1.20637 18.2954C1.17432 18.2388 1.16729 18.2586 1.13577 18.257L0.62377 18.3607C0.553845 18.3763 0.548179 18.3824 0.488046 18.2726C-0.0509073 17.2168 -0.0391927 15.8185 0.0904808 14.9603C0.092566 14.928 0.0956711 14.9254 0.130335 14.9161L0.645184 14.7597C0.667961 14.7554 0.686945 14.739 0.703674 14.6825C0.73214 14.5864 0.754767 14.3351 0.774498 14.0534C0.775957 13.8205 0.804135 13.5007 0.74544 13.2879C0.735156 13.2506 0.730754 13.243 0.708353 13.2369L0.220958 13.153C0.147512 13.1409 0.153892 13.1535 0.140334 13.0654C0.0700484 12.2496 0.286524 11.3774 0.581944 10.6259C0.608371 10.5641 0.587467 10.5717 0.671558 10.5944L1.10906 10.6911C1.19641 10.716 1.20883 10.6878 1.23586 10.6334C1.32066 10.462 1.47633 10.1372 1.66692 9.70267C1.83644 9.31615 2.1806 8.57329 2.43172 8.05188C3.60832 5.60889 3.85193 5.02114 3.98838 4.29621C4.17471 2.89082 3.82138 2.57111 2.81682 2.27403C2.26152 2.07358 2.26357 2.02324 2.6681 1.5655C3.94983 0.455026 5.90015 1.10041 6.60506 2.24398C7.20936 3.4036 7.05006 5.79427 5.76888 9.82278C3.84562 15.8739 6.72496 18.8606 9.63307 18.5973C11.5217 18.4262 9.39743 26.6993 8.7659 26.5436Z" fill="#D8D8D8"/>
+</svg>

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

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;

src/assets/scss/style.scss

@@ -81,7 +81,7 @@
 // == pages */
 // --------------------------------------------------------------
 
-// @import '6-pages/...';
+@import "6-pages/context";
 
 
 // --------------------------------------------------------------

src/components/About.svelte

@@ -0,0 +1,32 @@
+<button class="header__sideBtn" on:click={() => openPage()}>About</button>
+<Portal target="{document.body}">
+    <ContextPage name="About" open={open} on:close={closePage}>
+        <p class="txtbig">This radio is powered by the publications made on the social plateform <a href="">Mastodon</a>. The goal behind it is to make a place to discover music outside your usual bubble. Hope you enjoy it!</p>
+        <hr>
+        <h2>Where does the music come from?</h2>
+        <p>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.<br>
+        We don’t own the musics rights so the songs are played on the original platform player.</p>
+        <h2>How can I get my song be played on the radio?</h2>
+        <p>You have to make a public toot containing who of the hashtags configured on the app and a Youtube link.</p>
+        <h2>Can I use the radio on my phone?</h2>
+        <p>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.<br>
+        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.</p>
+        <h2>How can i contact you? I’ve detected a problem, an idea, or a kind message.</h2>
+        If you’re a developper you can make an issue on the <a href="">Github repo</a>. For anything else you can contact the maintainers <a href="">Milia</a> & <a href="">Tixie</a> on their Mastodon accounts.
+    </ContextPage>
+</Portal>
+
+<script>
+    import Portal from 'svelte-portal'
+    import ContextPage from '/components/ContextPage'
+
+    let open = false
+
+    let openPage = () => {
+        open = true
+    }
+
+    let closePage = () => {
+        open = false
+    }
+</script>

src/components/ContextPage.svelte

@@ -0,0 +1,47 @@
+{#if open}
+    <div class="context">
+        <div class="container">
+            <div class="context-head">
+                <h1 class="context-name">{ name }</h1>
+                <button class="context-close" on:click={() => close()}>
+                    <div class="context-close__icon"><Close></Close></div>
+                    <div class="context-close__label">Close</div>
+                </button>
+            </div>
+            <div class="context-content">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<script>
+	import { createEventDispatcher } from 'svelte'
+    import Close from '/components/icons/context/close'
+
+	const dispatch = createEventDispatcher();
+
+    export let open
+    export let name
+
+    // Scroll position recover
+    $: {
+        if (open) {
+            const scrollPosition = window.scrollY
+            document.body.setAttribute('data-scroll', scrollPosition)
+            document.body.classList.add('contextEnabled')            
+        } else {
+            document.body.classList.remove('contextEnabled')
+            const scrollPosition = document.body.getAttribute('data-scroll')
+            window.scrollTo({
+                top: scrollPosition,
+                behavior: 'instant'
+            })
+            document.body.removeAttribute('data-scroll')
+        }
+    }
+
+    let close = () => {
+        dispatch('close')
+    }
+</script>

src/components/icons/context/close.svelte

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L7.58601 9.00023L0.293373 16.2929C-0.097151 16.6834 -0.0971503 17.3166 0.293374 17.7071C0.683899 18.0976 1.31706 18.0976 1.70759 17.7071L9.00023 10.4144L16.2929 17.7071C16.6834 18.0976 17.3166 18.0976 17.7071 17.7071C18.0976 17.3166 18.0976 16.6834 17.7071 16.2929L10.4144 9.00023L17.7075 1.70716C18.098 1.31663 18.098 0.683469 17.7075 0.292945C17.317 -0.0975794 16.6838 -0.0975788 16.2933 0.292946L9.00022 7.58601L1.70711 0.292893Z"/>
+</svg>

src/components/layout/Header.svelte

@@ -1,6 +1,6 @@
 <header class="header">
     <div class="header__side">
-        <button class="header__sideBtn">About</button>
+        <About></About>
     </div>
     <h1 class="header__title">
         <a class="header__titleLink" href="/"><img src="{ logo }" alt="Eldritch Radio"></a>
@@ -12,4 +12,5 @@
 
 <script>
     import logo from '/assets/img/logo.svg'
+    import About from '/components/About'
 </script>