From e05f92b726ad3ae015945c421fe33caf4535cdcc Mon Sep 17 00:00:00 2001 From: ArthurBeaulieu Date: Mon, 30 Oct 2023 14:01:24 +0100 Subject: [PATCH] feat: upgrade to 1.1.0 support for lang switch and misc fixes --- README.md | 2 +- assets/dist/BW.bundle.css | 5 +- assets/dist/BW.bundle.js | 108 +--------------------------------- assets/html/seemoremodal.html | 5 +- assets/json/band.json | 18 ------ assets/json/de.json | 8 ++- assets/json/en.json | 8 ++- assets/json/es.json | 8 ++- assets/json/fr.json | 8 ++- index.html | 6 ++ listen.html | 6 ++ package.json | 2 +- src/bw.js | 80 ++++++++++++++++--------- src/bw.scss | 7 +++ src/scss/_listen.scss | 9 ++- tree.html | 7 +++ 16 files changed, 118 insertions(+), 169 deletions(-) diff --git a/README.md b/README.md index a26f264..fb53ce6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # BandWebsite -![](https://badgen.net/badge/version/1.0.0/blue) +![](https://badgen.net/badge/version/1.1.0/blue) [![License](https://img.shields.io/github/license/MesseBasseProduction/BandWebsite.svg)](https://github.com/MesseBasseProduction/BandWebsite/blob/main/LICENSE) A band's website template with a description, a page to listen tracks and finally, a link tree to share all of the band's links! Translated in FR, EN, ES, DE. diff --git a/assets/dist/BW.bundle.css b/assets/dist/BW.bundle.css index 29623f1..0315b1c 100644 --- a/assets/dist/BW.bundle.css +++ b/assets/dist/BW.bundle.css @@ -1,4 +1 @@ -/*!********************************************************************************************************************************************************************************************************!*\ - !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/bw.scss ***! - \********************************************************************************************************************************************************************************************************/ -:root{--mg-lg:3.6rem;--mg:2.6rem;--transition:.2s;--mainColor:#56d45b;--gradientStart:#374737;--gradientEnd:#70ca72;--imageFilter:invert(27%) sepia(28%) saturate(5861%) hue-rotate(138.3deg) brightness(120%) contrast(70%)}*{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body,html{font-size:62.5%;height:100%;overflow:hidden;width:100%}body{background:-webkit-gradient(linear,left top,left bottom,from(#181818),to(#383838));background:linear-gradient(#181818,#383838);color:#d4d4d4;font-family:sans-serif}a{color:#56d45b;color:var(--mainColor);display:block;font-size:1.5rem;margin-bottom:1.5rem}button{background:hsla(0,0%,100%,.1);border:1px solid #d4d4d4;border-radius:.5rem;color:#d4d4d4;cursor:pointer;padding:1rem 2rem}main{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;justify-content:center;width:100%}.home{-webkit-filter:invert(1) drop-shadow(0 0 .25rem rgba(0,0,0,.7));filter:invert(1) drop-shadow(0 0 .25rem rgba(0,0,0,.7));height:2rem;left:2rem;position:fixed;top:2rem;-webkit-transition:-webkit-filter .2s;transition:-webkit-filter .2s;transition:filter .2s;transition:filter .2s,-webkit-filter .2s;width:2rem;z-index:150}.home:active,.home:focus,.home:hover{-webkit-filter:invert(1) drop-shadow(0 0 .75rem #56d45b);filter:invert(1) drop-shadow(0 0 .75rem #56D45B);-webkit-filter:invert(1) drop-shadow(0 0 .75rem var(--mainColor));filter:invert(1) drop-shadow(0 0 .75rem var(--mainColor))}.modal-overlay{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:rgba(0,0,0,.5);display:none;height:100%;justify-content:center;left:0;opacity:0;position:fixed;top:0;-webkit-transition:all .4s;transition:all .4s;width:100%;z-index:200}.modal-overlay .modal{background:rgba(25,25,25,.95);border-radius:.5rem;-webkit-box-shadow:0 0 .5rem hsla(0,0%,100%,.3);box-shadow:0 0 .5rem hsla(0,0%,100%,.3);padding:3rem;position:relative}.modal-overlay .modal p.close-modal{color:#fff;cursor:pointer;font-size:4rem;margin:0;position:absolute;right:1rem;top:0;-webkit-transition:color .2s;transition:color .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.modal-overlay .modal p.close-modal:active,.modal-overlay .modal p.close-modal:focus,.modal-overlay .modal p.close-modal:hover{color:#56d45b;color:var(--mainColor)}main.bio{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:start;-ms-flex-pack:start;-ms-flex-direction:column;flex-direction:column;font-size:1.4rem;justify-content:flex-start}main.bio h2,main.bio img{margin:0 auto}main.bio img.band-logo{margin-bottom:2.6rem;margin-bottom:var(--mg);width:20rem}main.bio h3{font-size:3.6rem}main.bio h3,main.bio nav{margin-bottom:3.6rem;margin-bottom:var(--mg-lg)}main.bio nav{background:linear-gradient(135deg,#374737,#70ca72);background:linear-gradient(135deg,var(--gradientStart) 0,var(--gradientEnd) 100%);padding:3.6rem 0;padding:var(--mg-lg) 0;text-align:center;width:100%}main.bio nav h1,main.bio nav h2,main.bio nav img{margin:0 auto;max-width:80%}main.bio nav h1{font-size:5.2rem}main.bio nav h1,main.bio nav h2{margin-bottom:2.6rem;margin-bottom:var(--mg)}main.bio nav h2{font-size:2.4rem}main.bio nav .band-picture{height:50rem;margin-bottom:2.6rem;margin-bottom:var(--mg);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}main.bio nav .band-picture:active,main.bio nav .band-picture:focus,main.bio nav .band-picture:hover{-webkit-transform:rotate(.6deg);transform:rotate(.6deg)}main.bio nav .links{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}main.bio nav .links,main.bio nav .links a{display:-webkit-box;display:-ms-flexbox;display:flex}main.bio nav .links a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:.2rem solid #56d45b;border:.2rem solid var(--mainColor);border-radius:.5rem;margin:0 1rem;padding:1rem 2rem;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:background-color .2s;transition:background-color .2s;-webkit-transition:background-color var(--transition);transition:background-color var(--transition)}main.bio nav .links a:active,main.bio nav .links a:focus,main.bio nav .links a:hover{background-color:hsla(0,0%,9%,.5)}main.bio nav .links a:active img,main.bio nav .links a:focus img,main.bio nav .links a:hover img{-webkit-transform:scale(1.1);transform:scale(1.1)}main.bio nav .links a img{-webkit-filter:invert(27%) sepia(28%) saturate(5861%) hue-rotate(138.3deg) brightness(120%) contrast(70%);filter:invert(27%) sepia(28%) saturate(5861%) hue-rotate(138.3deg) brightness(120%) contrast(70%);-webkit-filter:var(--imageFilter);filter:var(--imageFilter);height:1.5rem;margin-right:1.5rem;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-transition:-webkit-transform var(--transition);transition:-webkit-transform var(--transition);transition:transform var(--transition);transition:transform var(--transition),-webkit-transform var(--transition)}main.bio section{grid-gap:1rem;display:grid;grid-template-columns:calc(33% - .5rem) calc(33% - .5rem) calc(33% - .5rem);justify-items:center;margin-bottom:3.6rem;margin-bottom:var(--mg-lg);max-width:60%}main.bio section div{aspect-ratio:1/1;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-transition:-webkit-transform .2s,-webkit-box-shadow .2s;transition:-webkit-transform .2s,-webkit-box-shadow .2s;transition:transform .2s,box-shadow .2s;transition:transform .2s,box-shadow .2s,-webkit-transform .2s,-webkit-box-shadow .2s;-webkit-transition:-webkit-transform var(--transition),-webkit-box-shadow var(--transition);transition:-webkit-transform var(--transition),-webkit-box-shadow var(--transition);transition:transform var(--transition),box-shadow var(--transition);transition:transform var(--transition),box-shadow var(--transition),-webkit-transform var(--transition),-webkit-box-shadow var(--transition)}main.bio section div:active,main.bio section div:focus,main.bio section div:hover{-webkit-box-shadow:0 0 .5rem hsla(0,0%,100%,.3);box-shadow:0 0 .5rem hsla(0,0%,100%,.3);-webkit-transform:scale(1.02);transform:scale(1.02)}main.bio section div.past-members{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;justify-content:center;width:100%}main.bio section div.past-members p{background:none;opacity:1;position:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}main.bio section div.past-members:active,main.bio section div.past-members:focus,main.bio section div.past-members:hover{-webkit-box-shadow:none;box-shadow:none}main.bio section img{height:100%;width:100%}main.bio section img:active+p,main.bio section img:focus+p,main.bio section img:hover+p{opacity:1;pointer-events:none}main.bio section p{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:-webkit-gradient(linear,left top,left bottom,color-stop(10%,transparent),color-stop(33%,rgba(0,0,0,.5)),to(#000));background:linear-gradient(transparent 10%,rgba(0,0,0,.5) 33%,#000);bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:2.6rem;font-weight:700;height:33%;justify-content:center;opacity:0;padding:0 1rem;position:absolute;text-align:center;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-transition:opacity var(--transition);transition:opacity var(--transition);width:100%}main.bio section p:active,main.bio section p:focus,main.bio section p:hover{opacity:1;pointer-events:none}main.bio section span{display:block;font-size:1.1rem;margin-top:1rem}main.bio section span.learn-more{font-style:italic}main.bio figure{margin-bottom:3.6rem;margin-bottom:var(--mg-lg);max-width:60%;width:100%}main.bio figure iframe{aspect-ratio:16/9;height:100%;width:100%}main.bio footer{background:linear-gradient(135deg,#374737,#70ca72);background:linear-gradient(135deg,var(--gradientStart) 0,var(--gradientEnd) 100%);padding:3.6rem 0;padding:var(--mg-lg) 0;text-align:center;width:100%}main.bio footer a{color:#fff;margin-bottom:0;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:color .2s;transition:color .2s;-webkit-transition:color var(--transition);transition:color var(--transition)}main.bio footer a:active,main.bio footer a:focus,main.bio footer a:hover{color:#56d45b;color:var(--mainColor)}.modal-artist,.past-members-modal{font-size:1.3rem;max-height:95%;overflow-y:auto;text-align:center}.modal-artist h1,.past-members-modal h1{font-size:3.2rem;margin-bottom:1.3rem}.modal-artist h3,.past-members-modal h3{margin-bottom:1.3rem}.modal-artist{max-width:720px}.modal-artist img{margin-bottom:1.3rem;max-width:20rem}.modal-artist p{margin-bottom:1.3rem;text-align:justify;text-indent:1.3rem}.past-members-modal{height:100%;max-width:840px;padding:3rem 0!important}.past-members-modal .past-members-container{height:100%;max-height:calc(100% - 11rem)}.past-members-modal .past-members-container .scrollbar-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center}.past-members-modal .past-members-container .past-member{display:grid;grid-template-columns:25rem 1fr;margin:0 3rem 1.3rem}.past-members-modal .past-members-container .past-member img{margin-bottom:.6rem;padding:1rem;width:100%}.past-members-modal .past-members-container .past-member .past-member-infos{margin-left:1.3rem;text-align:left}.past-members-modal .past-members-container .past-member .past-member-infos span{margin-bottom:.6rem;margin-left:1.3rem}.past-members-modal .past-members-container .past-member .past-member-infos h3,.past-members-modal .past-members-container .past-member .past-member-infos i{display:inline-block}.past-members-modal .past-members-container .past-member .past-member-infos p{text-align:justify;text-indent:1rem}.past-members-modal button{margin-top:1.3rem}section.track-playback{height:45%;position:relative;width:100%}section.track-playback .blurred-background{background-position:50%;background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(.5rem);filter:blur(.5rem);height:115%;position:relative;width:100%;z-index:50}section.track-playback .featured-track-wrapper{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center;position:absolute;top:0;width:100%;z-index:75}section.track-playback .featured-track-wrapper .next-release,section.track-playback .featured-track-wrapper .previous-release{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:4.6rem;height:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:7rem}section.track-playback .featured-track-wrapper .previous-release{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;left:0;padding-right:3rem;-webkit-transition:-webkit-box-shadow .3s ease-out;transition:-webkit-box-shadow .3s ease-out;transition:box-shadow .3s ease-out;transition:box-shadow .3s ease-out,-webkit-box-shadow .3s ease-out}section.track-playback .featured-track-wrapper .previous-release:active,section.track-playback .featured-track-wrapper .previous-release:focus,section.track-playback .featured-track-wrapper .previous-release:hover{-webkit-box-shadow:inset 5.5rem 0 2rem rgba(0,0,0,.7);box-shadow:inset 5.5rem 0 2rem rgba(0,0,0,.7)}section.track-playback .featured-track-wrapper .next-release{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-left:3rem;right:0;-webkit-transition:-webkit-box-shadow .3s ease-out;transition:-webkit-box-shadow .3s ease-out;transition:box-shadow .3s ease-out;transition:box-shadow .3s ease-out,-webkit-box-shadow .3s ease-out}section.track-playback .featured-track-wrapper .next-release:active,section.track-playback .featured-track-wrapper .next-release:focus,section.track-playback .featured-track-wrapper .next-release:hover{-webkit-box-shadow:inset -5.5rem 0 2rem rgba(0,0,0,.7);box-shadow:inset -5.5rem 0 2rem rgba(0,0,0,.7)}section.track-playback .featured-track-wrapper .featured-track-container{background-color:hsla(0,0%,100%,.5);border-radius:.5rem;height:80%;padding:1.5rem 1.5rem 0;position:relative}section.track-playback .featured-track-wrapper .featured-track-container img{height:calc(100% - 5rem);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}section.track-playback .featured-track-wrapper .featured-track-container .player{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:5rem;width:100%}section.track-playback .featured-track-wrapper .featured-track-container .player img{cursor:pointer;height:2.5rem;padding:0;-webkit-transition:-webkit-filter .3s;transition:-webkit-filter .3s;transition:filter .3s;transition:filter .3s,-webkit-filter .3s}section.track-playback .featured-track-wrapper .featured-track-container .player img:active,section.track-playback .featured-track-wrapper .featured-track-container .player img:focus,section.track-playback .featured-track-wrapper .featured-track-container .player img:hover{-webkit-filter:invert(18%) sepia(24%) saturate(6016%) hue-rotate(337deg) brightness(120%) contrast(104%);filter:invert(18%) sepia(24%) saturate(6016%) hue-rotate(337deg) brightness(120%) contrast(104%)}section.track-playback .featured-track-wrapper .featured-track-container .player .progress-bar{background:#999;border-radius:1rem;cursor:pointer;height:.5rem;margin:0 1rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}section.track-playback .featured-track-wrapper .featured-track-container .player .progress-bar:active .current-progress,section.track-playback .featured-track-wrapper .featured-track-container .player .progress-bar:focus .current-progress,section.track-playback .featured-track-wrapper .featured-track-container .player .progress-bar:hover .current-progress{background:#56d45b;background:var(--mainColor)}section.track-playback .featured-track-wrapper .featured-track-container .player .progress-bar .current-progress{background:#333;border-radius:1rem;height:100%;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;width:0}section.track-playback .featured-track-wrapper .featured-track-container .player p{color:#000;font-size:1.6rem}section.track-playback .featured-track-wrapper .featured-track-container:active,section.track-playback .featured-track-wrapper .featured-track-container:focus,section.track-playback .featured-track-wrapper .featured-track-container:hover{border-bottom-right-radius:0;border-top-right-radius:0}section.track-playback .featured-track-wrapper .featured-track-container:active img,section.track-playback .featured-track-wrapper .featured-track-container:focus img,section.track-playback .featured-track-wrapper .featured-track-container:hover img{-webkit-transform:scale(1.01);transform:scale(1.01)}section.track-playback .featured-track-wrapper .featured-track-container:active .release-tracklist,section.track-playback .featured-track-wrapper .featured-track-container:focus .release-tracklist,section.track-playback .featured-track-wrapper .featured-track-container:hover .release-tracklist{opacity:1}section.track-playback .featured-track-wrapper .featured-track-container .release-tracklist{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(0,0,0,.6)),to(transparent));background:linear-gradient(90deg,rgba(0,0,0,.6) 85%,transparent);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center;left:100%;opacity:0;padding-left:1.5rem;position:absolute;top:0;-webkit-transition:opacity .2s;transition:opacity .2s;width:100%}section.track-playback .featured-track-wrapper .featured-track-container .release-tracklist h3{font-size:1.1rem}section.track-playback .featured-track-wrapper .featured-track-container .release-tracklist h3:first-child{margin-top:.6rem}section.track-playback .featured-track-wrapper .featured-track-container .release-tracklist p{font-size:1.1rem;margin-bottom:.6rem}section.track-links{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;align-items:center;background:linear-gradient(135deg,#374737,#70ca72);background:linear-gradient(135deg,var(--gradientStart) 0,var(--gradientEnd) 100%);color:#fff;-ms-flex-direction:column;flex-direction:column;height:45%;padding:1rem 0 3rem;position:relative;text-align:center;z-index:100}section.track-links,section.track-links .release-pager{-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}section.track-links .release-pager{margin-bottom:auto}section.track-links .release-pager,section.track-links .release-pager a{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}section.track-links .release-pager a{color:grey;cursor:pointer;font-size:2.8rem;margin:0 .5rem;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:color .2s;transition:color .2s}section.track-links .release-pager a.selected{color:#fff}section.track-links.disabled{cursor:no-drop}section.track-links h1{font-size:2.8rem}section.track-links h2{font-size:2.2rem;font-style:italic;margin-bottom:1rem}section.track-links p{font-size:1.6rem;margin-bottom:1rem}section.track-links p span{cursor:pointer;font-size:1.1rem;font-style:italic;padding-left:.5rem;-webkit-transition:color .2s;transition:color .2s}section.track-links p span:active,section.track-links p span:focus,section.track-links p span:hover{color:#56d45b;color:var(--mainColor)}section.track-links .listen-online{display:grid;grid-template-columns:1fr 1fr;margin-bottom:auto;max-width:45rem}section.track-links .listen-online a{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;align-items:center;background:#fff;border:1px solid #000;border-radius:2rem;color:#000;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-evenly;margin:.7rem;padding:.6rem 2rem;text-align:center;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:all .2s;transition:all .2s}section.track-links .listen-online a:active,section.track-links .listen-online a:focus,section.track-links .listen-online a:hover{-webkit-filter:invert(1);filter:invert(1)}section.track-links .listen-online a img{height:2rem;margin-right:1rem}section.track-links .listen-online a p{font-size:1.4rem;margin:0}section.track-links .disabled{-webkit-filter:grayscale(100%) brightness(40%) contrast(.8);filter:grayscale(100%) brightness(40%) contrast(.8);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}section.credits{height:10%;position:relative}section.credits .blurred-background{background-position:50% 80%;background-repeat:no-repeat;background-size:cover;bottom:0;-webkit-filter:blur(.5rem);filter:blur(.5rem);height:115%;position:absolute;width:100%;z-index:50}section.credits .credit-container{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:rgba(0,0,0,.2);color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center;position:absolute;text-align:center;top:0;width:100%;z-index:75}section.credits .credit-container p{font-size:1.3rem}section.credits .credit-container a{color:#fff;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:color .2s;transition:color .2s}section.credits .credit-container a:active,section.credits .credit-container a:focus,section.credits .credit-container a:hover{color:#56d45b;color:var(--mainColor)}.modal-seemore a{-webkit-box-align:center;-ms-flex-align:center;grid-gap:1rem;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:#fff;border-radius:2rem;color:#000;display:grid;grid-template-columns:3rem 1fr;justify-content:center;margin:.7rem 0;padding:.6rem 1rem;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:all .2s;transition:all .2s;width:100%}.modal-seemore a:active,.modal-seemore a:focus,.modal-seemore a:hover{-webkit-filter:invert(1);filter:invert(1)}.modal-seemore a.disabled{-webkit-filter:grayscale(100%) brightness(40%) contrast(.8);filter:grayscale(100%) brightness(40%) contrast(.8);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.modal-seemore a img{height:2rem}.modal-seemore a p{font-size:1.3rem;padding-right:.5rem}.content{background:linear-gradient(135deg,#374737,#70ca72);background:linear-gradient(135deg,var(--gradientStart) 0,var(--gradientEnd) 100%);border-radius:.5rem;max-height:90%;max-width:100rem;padding:6rem 0;text-align:center}.content img.band-logo{height:12rem}.content .link-wrapper{height:calc(100% - 13.5rem);overflow-y:auto}.content .link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid grey;border-radius:.5rem;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;margin:.75rem 6rem;padding:.5rem 0;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:background-color .2s;transition:background-color .2s}.content .link img{height:2.5rem;margin-left:4rem;margin-right:2rem}.content .link p{font-size:1.3rem;margin-right:4rem}.content .link:active,.content .link:focus,.content .link:hover{background-color:hsla(0,0%,100%,.33)}@media (max-width:1000px){nav.site-nav a{font-size:1.4rem;padding:0 .5rem}nav.site-nav .socials{display:none}main.creation .subpage-nav{-webkit-box-orient:inherit;-webkit-box-direction:inherit;bottom:inherit;-ms-flex-direction:inherit;flex-direction:inherit;height:2rem;margin:1rem 0;top:6rem;width:100%}main.creation .subpage-nav img{height:100%;padding:0 1rem;width:auto}main.creation .music{padding:0 3rem 0 1rem}main.creation .music .band{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-bottom:0}main.creation .music .band .band-image{display:none}main.creation .music .band .band-releases{padding:2rem 1rem;position:inherit;width:100%}main.creation .music .band .band-releases .band-header h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}main.creation .music .band .band-releases .band-albums .album{height:calc(95% - 3rem)}main.creation .video{padding:0 3rem 0 1rem}main.creation .video .video-grid .embed-video h2{font-size:1.4rem}main.creation .photo{padding:0 3rem 0 1rem}main.contact section{display:inherit;padding:3rem 5%}.modal.credit{max-width:inherit;padding:1rem;width:95%}body.links main .link-wrapper{max-height:95%;padding:2rem;width:95%}body.links main .link-wrapper img.main-logo{height:6rem}body.links main .link-wrapper .link img{margin:0 1rem}body.links main .link-wrapper .link P{font-size:1.2rem;margin-right:1rem}}@media (max-width:870px){section.track-playback .featured-track-wrapper .featured-track-container .release-tracklist{display:none}main.bio section{max-width:85%}main.bio nav .band-picture{height:auto}}@media (max-width:512px){main.creation .music .band .band-image{position:inherit;width:90%}main.creation .music .band .band-releases .band-header span{display:none}main.bio nav .links{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;align-items:center;-ms-flex-direction:column;flex-direction:column}main.bio nav .links a{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:1rem 0;width:85%}main.bio nav .links a img{margin-left:0}main.bio section{grid-template-columns:100%}main.bio figure{max-width:85%}.modal.past-members-modal .past-member{grid-template-columns:1fr}}@media (max-height:740px){main.home{display:inherit;overflow-y:auto}main.home img{max-width:25rem}main.home h2{margin-bottom:2%;max-width:inherit}section.track-links .listen-online{margin-bottom:0}section.track-links .listen-online a{margin:.2rem}}@media (max-height:630px){section.track-links h1{font-size:1.9rem}section.track-links h2{font-size:1.5rem}section.track-links h2,section.track-links p{margin-bottom:.2rem}section.track-links .listen-online a{padding:.5rem 1rem}section.track-links .listen-online a img{margin-right:.5rem}section.track-links .listen-online a p{font-size:1.3rem}}@media (max-height:512px){main.home img{margin:2% 0;max-width:25rem}} +:root{--mg-lg:3.6rem;--mg:2.6rem;--transition:.2s;--mainColor:#56d45b;--gradientStart:#374737;--gradientEnd:#70ca72;--imageFilter:invert(27%) sepia(28%) saturate(5861%) hue-rotate(138.3deg) brightness(120%) contrast(70%)}*{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body,html{font-size:62.5%;height:100%;overflow:hidden;width:100%}body{background:-webkit-gradient(linear,left top,left bottom,from(#181818),to(#383838));background:linear-gradient(#181818,#383838);color:#d4d4d4;font-family:sans-serif}a{color:#56d45b;color:var(--mainColor);display:block;font-size:1.5rem;margin-bottom:1.5rem}button{background:hsla(0,0%,100%,.1);border:1px solid #d4d4d4;border-radius:.5rem;color:#d4d4d4;cursor:pointer;padding:1rem 2rem}main{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;justify-content:center;width:100%}.home{-webkit-filter:invert(1) drop-shadow(0 0 .25rem rgba(0,0,0,.7));filter:invert(1) drop-shadow(0 0 .25rem rgba(0,0,0,.7));height:2rem;left:2rem;position:fixed;top:2rem;-webkit-transition:-webkit-filter .2s;transition:-webkit-filter .2s;transition:filter .2s;transition:filter .2s,-webkit-filter .2s;width:2rem;z-index:150}.home:active,.home:focus,.home:hover{-webkit-filter:invert(1) drop-shadow(0 0 .75rem #56d45b);filter:invert(1) drop-shadow(0 0 .75rem #56D45B);-webkit-filter:invert(1) drop-shadow(0 0 .75rem var(--mainColor));filter:invert(1) drop-shadow(0 0 .75rem var(--mainColor))}select{padding:.2rem 1rem;position:absolute;right:2rem;top:2rem}.modal-overlay{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:rgba(0,0,0,.5);display:none;height:100%;justify-content:center;left:0;opacity:0;position:fixed;top:0;-webkit-transition:all .4s;transition:all .4s;width:100%;z-index:200}.modal-overlay .modal{background:rgba(25,25,25,.95);border-radius:.5rem;-webkit-box-shadow:0 0 .5rem hsla(0,0%,100%,.3);box-shadow:0 0 .5rem hsla(0,0%,100%,.3);padding:3rem;position:relative}.modal-overlay .modal p.close-modal{color:#fff;cursor:pointer;font-size:4rem;margin:0;position:absolute;right:1rem;top:0;-webkit-transition:color .2s;transition:color .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.modal-overlay .modal p.close-modal:active,.modal-overlay .modal p.close-modal:focus,.modal-overlay .modal p.close-modal:hover{color:#56d45b;color:var(--mainColor)}main.bio{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:start;-ms-flex-pack:start;-ms-flex-direction:column;flex-direction:column;font-size:1.4rem;justify-content:flex-start}main.bio h2,main.bio img{margin:0 auto}main.bio img.band-logo{margin-bottom:2.6rem;margin-bottom:var(--mg);width:20rem}main.bio h3{font-size:3.6rem}main.bio h3,main.bio nav{margin-bottom:3.6rem;margin-bottom:var(--mg-lg)}main.bio nav{background:linear-gradient(135deg,#374737,#70ca72);background:linear-gradient(135deg,var(--gradientStart) 0,var(--gradientEnd) 100%);padding:3.6rem 0;padding:var(--mg-lg) 0;text-align:center;width:100%}main.bio nav h1,main.bio nav h2,main.bio nav img{margin:0 auto;max-width:80%}main.bio nav h1{font-size:5.2rem}main.bio nav h1,main.bio nav h2{margin-bottom:2.6rem;margin-bottom:var(--mg)}main.bio nav h2{font-size:2.4rem}main.bio nav .band-picture{height:50rem;margin-bottom:2.6rem;margin-bottom:var(--mg);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}main.bio nav .band-picture:active,main.bio nav .band-picture:focus,main.bio nav .band-picture:hover{-webkit-transform:rotate(.6deg);transform:rotate(.6deg)}main.bio nav .links{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}main.bio nav .links,main.bio nav .links a{display:-webkit-box;display:-ms-flexbox;display:flex}main.bio nav .links a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:.2rem solid #56d45b;border:.2rem solid var(--mainColor);border-radius:.5rem;margin:0 1rem;padding:1rem 2rem;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:background-color .2s;transition:background-color .2s;-webkit-transition:background-color var(--transition);transition:background-color var(--transition)}main.bio nav .links a:active,main.bio nav .links a:focus,main.bio nav .links a:hover{background-color:hsla(0,0%,9%,.5)}main.bio nav .links a:active img,main.bio nav .links a:focus img,main.bio nav .links a:hover img{-webkit-transform:scale(1.1);transform:scale(1.1)}main.bio nav .links a img{-webkit-filter:invert(27%) sepia(28%) saturate(5861%) hue-rotate(138.3deg) brightness(120%) contrast(70%);filter:invert(27%) sepia(28%) saturate(5861%) hue-rotate(138.3deg) brightness(120%) contrast(70%);-webkit-filter:var(--imageFilter);filter:var(--imageFilter);height:1.5rem;margin-right:1.5rem;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-transition:-webkit-transform var(--transition);transition:-webkit-transform var(--transition);transition:transform var(--transition);transition:transform var(--transition),-webkit-transform var(--transition)}main.bio section{grid-gap:1rem;display:grid;grid-template-columns:calc(33% - .5rem) calc(33% - .5rem) calc(33% - .5rem);justify-items:center;margin-bottom:3.6rem;margin-bottom:var(--mg-lg);max-width:60%}main.bio section div{aspect-ratio:1/1;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-transition:-webkit-transform .2s,-webkit-box-shadow .2s;transition:-webkit-transform .2s,-webkit-box-shadow .2s;transition:transform .2s,box-shadow .2s;transition:transform .2s,box-shadow .2s,-webkit-transform .2s,-webkit-box-shadow .2s;-webkit-transition:-webkit-transform var(--transition),-webkit-box-shadow var(--transition);transition:-webkit-transform var(--transition),-webkit-box-shadow var(--transition);transition:transform var(--transition),box-shadow var(--transition);transition:transform var(--transition),box-shadow var(--transition),-webkit-transform var(--transition),-webkit-box-shadow var(--transition)}main.bio section div:active,main.bio section div:focus,main.bio section div:hover{-webkit-box-shadow:0 0 .5rem hsla(0,0%,100%,.3);box-shadow:0 0 .5rem hsla(0,0%,100%,.3);-webkit-transform:scale(1.02);transform:scale(1.02)}main.bio section div.past-members{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;justify-content:center;width:100%}main.bio section div.past-members p{background:none;opacity:1;position:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}main.bio section div.past-members:active,main.bio section div.past-members:focus,main.bio section div.past-members:hover{-webkit-box-shadow:none;box-shadow:none}main.bio section img{height:100%;width:100%}main.bio section img:active+p,main.bio section img:focus+p,main.bio section img:hover+p{opacity:1;pointer-events:none}main.bio section p{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:-webkit-gradient(linear,left top,left bottom,color-stop(10%,transparent),color-stop(33%,rgba(0,0,0,.5)),to(#000));background:linear-gradient(transparent 10%,rgba(0,0,0,.5) 33%,#000);bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:2.6rem;font-weight:700;height:33%;justify-content:center;opacity:0;padding:0 1rem;position:absolute;text-align:center;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-transition:opacity var(--transition);transition:opacity var(--transition);width:100%}main.bio section p:active,main.bio section p:focus,main.bio section p:hover{opacity:1;pointer-events:none}main.bio section span{display:block;font-size:1.1rem;margin-top:1rem}main.bio section span.learn-more{font-style:italic}main.bio figure{margin-bottom:3.6rem;margin-bottom:var(--mg-lg);max-width:60%;width:100%}main.bio figure iframe{aspect-ratio:16/9;height:100%;width:100%}main.bio footer{background:linear-gradient(135deg,#374737,#70ca72);background:linear-gradient(135deg,var(--gradientStart) 0,var(--gradientEnd) 100%);padding:3.6rem 0;padding:var(--mg-lg) 0;text-align:center;width:100%}main.bio footer a{color:#fff;margin-bottom:0;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:color .2s;transition:color .2s;-webkit-transition:color var(--transition);transition:color var(--transition)}main.bio footer a:active,main.bio footer a:focus,main.bio footer a:hover{color:#56d45b;color:var(--mainColor)}.modal-artist,.past-members-modal{font-size:1.3rem;max-height:95%;overflow-y:auto;text-align:center}.modal-artist h1,.past-members-modal h1{font-size:3.2rem;margin-bottom:1.3rem}.modal-artist h3,.past-members-modal h3{margin-bottom:1.3rem}.modal-artist{max-width:720px}.modal-artist img{margin-bottom:1.3rem;max-width:20rem}.modal-artist p{margin-bottom:1.3rem;text-align:justify;text-indent:1.3rem}.past-members-modal{height:100%;max-width:840px;padding:3rem 0!important}.past-members-modal .past-members-container{height:100%;max-height:calc(100% - 11rem)}.past-members-modal .past-members-container .scrollbar-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center}.past-members-modal .past-members-container .past-member{display:grid;grid-template-columns:25rem 1fr;margin:0 3rem 1.3rem}.past-members-modal .past-members-container .past-member img{margin-bottom:.6rem;padding:1rem;width:100%}.past-members-modal .past-members-container .past-member .past-member-infos{margin-left:1.3rem;text-align:left}.past-members-modal .past-members-container .past-member .past-member-infos span{margin-bottom:.6rem;margin-left:1.3rem}.past-members-modal .past-members-container .past-member .past-member-infos h3,.past-members-modal .past-members-container .past-member .past-member-infos i{display:inline-block}.past-members-modal .past-members-container .past-member .past-member-infos p{text-align:justify;text-indent:1rem}.past-members-modal button{margin-top:1.3rem}section.track-playback{height:45%;position:relative;width:100%}section.track-playback .blurred-background{background-position:50%;background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(.5rem);filter:blur(.5rem);height:115%;position:relative;width:100%;z-index:50}section.track-playback .featured-track-wrapper{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center;position:absolute;top:0;width:100%;z-index:75}section.track-playback .featured-track-wrapper .next-release,section.track-playback .featured-track-wrapper .previous-release{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:4.6rem;height:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:7rem}section.track-playback .featured-track-wrapper .previous-release{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;left:0;padding-right:3rem;-webkit-transition:-webkit-box-shadow .3s ease-out;transition:-webkit-box-shadow .3s ease-out;transition:box-shadow .3s ease-out;transition:box-shadow .3s ease-out,-webkit-box-shadow .3s ease-out}section.track-playback .featured-track-wrapper .previous-release:active,section.track-playback .featured-track-wrapper .previous-release:focus,section.track-playback .featured-track-wrapper .previous-release:hover{-webkit-box-shadow:inset 5.5rem 0 2rem rgba(0,0,0,.7);box-shadow:inset 5.5rem 0 2rem rgba(0,0,0,.7)}section.track-playback .featured-track-wrapper .next-release{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-left:3rem;right:0;-webkit-transition:-webkit-box-shadow .3s ease-out;transition:-webkit-box-shadow .3s ease-out;transition:box-shadow .3s ease-out;transition:box-shadow .3s ease-out,-webkit-box-shadow .3s ease-out}section.track-playback .featured-track-wrapper .next-release:active,section.track-playback .featured-track-wrapper .next-release:focus,section.track-playback .featured-track-wrapper .next-release:hover{-webkit-box-shadow:inset -5.5rem 0 2rem rgba(0,0,0,.7);box-shadow:inset -5.5rem 0 2rem rgba(0,0,0,.7)}section.track-playback .featured-track-wrapper .featured-track-container{background-color:hsla(0,0%,100%,.5);border-radius:.5rem;height:80%;padding:1.5rem 1.5rem 0;position:relative}section.track-playback .featured-track-wrapper .featured-track-container img{height:calc(100% - 5rem);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}section.track-playback .featured-track-wrapper .featured-track-container .player{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:5rem;width:100%}section.track-playback .featured-track-wrapper .featured-track-container .player img{cursor:pointer;height:2.5rem;padding:0;-webkit-transition:-webkit-filter .3s;transition:-webkit-filter .3s;transition:filter .3s;transition:filter .3s,-webkit-filter .3s}section.track-playback .featured-track-wrapper .featured-track-container .player img:active,section.track-playback .featured-track-wrapper .featured-track-container .player img:focus,section.track-playback .featured-track-wrapper .featured-track-container .player img:hover{-webkit-filter:invert(18%) sepia(24%) saturate(6016%) hue-rotate(337deg) brightness(120%) contrast(104%);filter:invert(18%) sepia(24%) saturate(6016%) hue-rotate(337deg) brightness(120%) contrast(104%)}section.track-playback .featured-track-wrapper .featured-track-container .player .progress-bar{background:#999;border-radius:1rem;cursor:pointer;height:.5rem;margin:0 1rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}section.track-playback .featured-track-wrapper .featured-track-container .player .progress-bar:active .current-progress,section.track-playback .featured-track-wrapper .featured-track-container .player .progress-bar:focus .current-progress,section.track-playback .featured-track-wrapper .featured-track-container .player .progress-bar:hover .current-progress{background:#56d45b;background:var(--mainColor)}section.track-playback .featured-track-wrapper .featured-track-container .player .progress-bar .current-progress{background:#333;border-radius:1rem;height:100%;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;width:0}section.track-playback .featured-track-wrapper .featured-track-container .player p{color:#000;font-size:1.6rem}section.track-playback .featured-track-wrapper .featured-track-container:active,section.track-playback .featured-track-wrapper .featured-track-container:focus,section.track-playback .featured-track-wrapper .featured-track-container:hover{border-bottom-right-radius:0;border-top-right-radius:0}section.track-playback .featured-track-wrapper .featured-track-container:active img,section.track-playback .featured-track-wrapper .featured-track-container:focus img,section.track-playback .featured-track-wrapper .featured-track-container:hover img{-webkit-transform:scale(1.01);transform:scale(1.01)}section.track-playback .featured-track-wrapper .featured-track-container:active .release-tracklist,section.track-playback .featured-track-wrapper .featured-track-container:focus .release-tracklist,section.track-playback .featured-track-wrapper .featured-track-container:hover .release-tracklist{opacity:1}section.track-playback .featured-track-wrapper .featured-track-container .release-tracklist{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(0,0,0,.6)),to(transparent));background:linear-gradient(90deg,rgba(0,0,0,.6) 85%,transparent);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center;left:100%;opacity:0;padding-left:1.5rem;position:absolute;top:0;-webkit-transition:opacity .2s;transition:opacity .2s;width:100%}section.track-playback .featured-track-wrapper .featured-track-container .release-tracklist h3{font-size:1.1rem}section.track-playback .featured-track-wrapper .featured-track-container .release-tracklist h3:first-child{margin-top:.6rem}section.track-playback .featured-track-wrapper .featured-track-container .release-tracklist p{font-size:1.1rem;margin-bottom:.6rem}section.track-links{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;align-items:center;background:linear-gradient(135deg,#374737,#70ca72);background:linear-gradient(135deg,var(--gradientStart) 0,var(--gradientEnd) 100%);color:#fff;-ms-flex-direction:column;flex-direction:column;height:45%;padding:1rem 0 3rem;position:relative;text-align:center;z-index:100}section.track-links,section.track-links .release-pager{-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}section.track-links .release-pager{font-size:2.8rem;margin-bottom:auto}section.track-links .release-pager,section.track-links .release-pager a{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}section.track-links .release-pager a{color:grey;cursor:pointer;font-size:inherit;margin:0 .5rem;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:color .2s;transition:color .2s}section.track-links .release-pager a.selected{color:#fff}section.track-links.disabled{cursor:no-drop}section.track-links h1{font-size:2.8rem}section.track-links h2{font-size:2.2rem;font-style:italic;margin-bottom:1rem}section.track-links p{font-size:1.6rem;margin-bottom:1rem}section.track-links p span{cursor:pointer;font-size:1.1rem;font-style:italic;padding-left:.5rem;-webkit-transition:color .2s;transition:color .2s}section.track-links p span:active,section.track-links p span:focus,section.track-links p span:hover{color:#56d45b;color:var(--mainColor)}section.track-links .listen-online{display:grid;grid-template-columns:1fr 1fr;margin-bottom:auto;max-width:45rem}section.track-links .listen-online a{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;align-items:center;background:#fff;border:1px solid #000;border-radius:2rem;color:#000;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-evenly;margin:.7rem;padding:.6rem 2rem;text-align:center;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:all .2s;transition:all .2s}section.track-links .listen-online a:active,section.track-links .listen-online a:focus,section.track-links .listen-online a:hover{-webkit-filter:invert(1);filter:invert(1)}section.track-links .listen-online a img{height:2rem;margin-right:1rem}section.track-links .listen-online a p{font-size:1.4rem;margin:0}section.track-links .disabled{-webkit-filter:grayscale(100%) brightness(40%) contrast(.8);filter:grayscale(100%) brightness(40%) contrast(.8);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}section.credits{height:10%;position:relative}section.credits .blurred-background{background-position:50% 80%;background-repeat:no-repeat;background-size:cover;bottom:0;-webkit-filter:blur(.5rem);filter:blur(.5rem);height:115%;position:absolute;width:100%;z-index:50}section.credits .credit-container{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:rgba(0,0,0,.2);color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center;position:absolute;text-align:center;top:0;width:100%;z-index:75}section.credits .credit-container p{font-size:1.3rem}section.credits .credit-container a{color:#fff;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:color .2s;transition:color .2s}section.credits .credit-container a:active,section.credits .credit-container a:focus,section.credits .credit-container a:hover{color:#56d45b;color:var(--mainColor)}.modal-seemore{text-align:center}.modal-seemore a{-webkit-box-align:center;-ms-flex-align:center;grid-gap:1rem;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:#fff;border-radius:2rem;color:#000;display:grid;grid-template-columns:3rem 1fr;justify-content:center;margin:.7rem 0;padding:.6rem 1rem;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:all .2s;transition:all .2s;width:100%}.modal-seemore a:active,.modal-seemore a:focus,.modal-seemore a:hover{-webkit-filter:invert(1);filter:invert(1)}.modal-seemore a.disabled{-webkit-filter:grayscale(100%) brightness(40%) contrast(.8);filter:grayscale(100%) brightness(40%) contrast(.8);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.modal-seemore a img{height:2rem}.modal-seemore a p{font-size:1.3rem;padding-right:.5rem}.modal-seemore button{margin-top:1.3rem}.content{background:linear-gradient(135deg,#374737,#70ca72);background:linear-gradient(135deg,var(--gradientStart) 0,var(--gradientEnd) 100%);border-radius:.5rem;max-height:90%;max-width:100rem;padding:6rem 0;text-align:center}.content img.band-logo{height:12rem}.content .link-wrapper{height:calc(100% - 13.5rem);overflow-y:auto}.content .link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid grey;border-radius:.5rem;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;margin:.75rem 6rem;padding:.5rem 0;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:background-color .2s;transition:background-color .2s}.content .link img{height:2.5rem;margin-left:4rem;margin-right:2rem}.content .link p{font-size:1.3rem;margin-right:4rem}.content .link:active,.content .link:focus,.content .link:hover{background-color:hsla(0,0%,100%,.33)}@media (max-width:1000px){nav.site-nav a{font-size:1.4rem;padding:0 .5rem}nav.site-nav .socials{display:none}main.creation .subpage-nav{-webkit-box-orient:inherit;-webkit-box-direction:inherit;bottom:inherit;-ms-flex-direction:inherit;flex-direction:inherit;height:2rem;margin:1rem 0;top:6rem;width:100%}main.creation .subpage-nav img{height:100%;padding:0 1rem;width:auto}main.creation .music{padding:0 3rem 0 1rem}main.creation .music .band{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-bottom:0}main.creation .music .band .band-image{display:none}main.creation .music .band .band-releases{padding:2rem 1rem;position:inherit;width:100%}main.creation .music .band .band-releases .band-header h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}main.creation .music .band .band-releases .band-albums .album{height:calc(95% - 3rem)}main.creation .video{padding:0 3rem 0 1rem}main.creation .video .video-grid .embed-video h2{font-size:1.4rem}main.creation .photo{padding:0 3rem 0 1rem}main.contact section{display:inherit;padding:3rem 5%}.modal.credit{max-width:inherit;padding:1rem;width:95%}body.links main .link-wrapper{max-height:95%;padding:2rem;width:95%}body.links main .link-wrapper img.main-logo{height:6rem}body.links main .link-wrapper .link img{margin:0 1rem}body.links main .link-wrapper .link P{font-size:1.2rem;margin-right:1rem}}@media (max-width:870px){section.track-playback .featured-track-wrapper .featured-track-container .release-tracklist{display:none}main.bio section{max-width:85%}main.bio nav .band-picture{height:auto}}@media (max-width:512px){main.creation .music .band .band-image{position:inherit;width:90%}main.creation .music .band .band-releases .band-header span{display:none}main.bio nav .links{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;align-items:center;-ms-flex-direction:column;flex-direction:column}main.bio nav .links a{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:1rem 0;width:85%}main.bio nav .links a img{margin-left:0}main.bio section{grid-template-columns:100%}main.bio figure{max-width:85%}.modal.past-members-modal .past-member{grid-template-columns:1fr}}@media (max-height:740px){main.home{display:inherit;overflow-y:auto}main.home img{max-width:25rem}main.home h2{margin-bottom:2%;max-width:inherit}section.track-links .listen-online{margin-bottom:0}section.track-links .listen-online a{margin:.2rem}}@media (max-height:630px){section.track-links h1{font-size:1.9rem}section.track-links h2{font-size:1.5rem}section.track-links h2,section.track-links p{margin-bottom:.2rem}section.track-links .listen-online a{padding:.5rem 1rem}section.track-links .listen-online a img{margin-right:.5rem}section.track-links .listen-online a p{font-size:1.3rem}}@media (max-height:512px){main.home img{margin:2% 0;max-width:25rem}} diff --git a/assets/dist/BW.bundle.js b/assets/dist/BW.bundle.js index 0bd2b38..42ced8b 100644 --- a/assets/dist/BW.bundle.js +++ b/assets/dist/BW.bundle.js @@ -1,107 +1 @@ -/* - * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). - * This devtool is neither made for production nor for readable output files. - * It uses "eval()" calls to create a separate source file in the browser devtools. - * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) - * or disable the default devtool with "devtool: false". - * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). - */ -/******/ (() => { // webpackBootstrap -/******/ "use strict"; -/******/ var __webpack_modules__ = ({ - -/***/ "./src/bw.js": -/*!*******************!*\ - !*** ./src/bw.js ***! - \*******************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _js_FilterGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./js/FilterGenerator.js */ \"./src/js/FilterGenerator.js\");\n/* harmony import */ var _bw_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./bw.scss */ \"./src/bw.scss\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\n\n\nvar DEBUG = true;\nvar BW = /*#__PURE__*/function () {\n function BW() {\n var _this = this;\n _classCallCheck(this, BW);\n this._lang = ['fr', 'es', 'de'].indexOf(navigator.language.substring(0, 2)) !== -1 ? navigator.language.substring(0, 2) : 'en';\n this._nls = null;\n this._band = null;\n this._mainScroll = null;\n this._version = '1.3.0'; // Based on v1.1.0 of BandWebsite\n\n if (DEBUG === true) {\n console.log(\"nac.band v\".concat(this._version, \" : Begin website initialization\"));\n }\n this._fetchLang().then(this._fetchBandInfo.bind(this)).then(this._init.bind(this)).then(this._buildPage.bind(this)).then(this._events.bind(this))[\"catch\"](function (err) {\n // Error are displayed even if DEBUG is set to false, to notify end user to contact support\n console.error(\"nac.band v\".concat(_this._version, \" : Fatal error during initialization, please contact support :\\n\"), err);\n })[\"finally\"](function () {\n if (DEBUG === true) {\n console.log(\"nac.band v\".concat(_this._version, \" : Website initialization done\"));\n }\n });\n }\n _createClass(BW, [{\n key: \"_fetchLang\",\n value: function _fetchLang() {\n var _this2 = this;\n if (DEBUG === true) {\n console.log(\"1. Fetch language keys with \".concat(this._lang, \" locale\"));\n }\n return new Promise(function (resolve, reject) {\n fetch(\"assets/json/\".concat(_this2._lang, \".json\")).then(function (data) {\n data.json().then(function (nlsKeys) {\n if (DEBUG === true) {\n console.log(\"2. Language keys successfully retrieven\");\n }\n _this2._nls = nlsKeys;\n resolve();\n })[\"catch\"](function (err) {\n if (DEBUG === true) {\n console.log(\"Err. Can't parse language keys, the JSON file may be is invalid\");\n }\n reject(err);\n });\n })[\"catch\"](function (err) {\n if (DEBUG === true) {\n console.log(\"Err. Couldn't retrieve language keys\");\n }\n reject(err);\n });\n });\n }\n }, {\n key: \"_fetchBandInfo\",\n value: function _fetchBandInfo() {\n var _this3 = this;\n if (DEBUG === true) {\n console.log(\"1. Fetch band links and releases\");\n }\n return new Promise(function (resolve, reject) {\n fetch(\"assets/json/band.json\").then(function (data) {\n data.json().then(function (bandKeys) {\n if (DEBUG === true) {\n console.log(\"2. Links and releases successfully retrieven\");\n }\n _this3._band = bandKeys;\n resolve();\n })[\"catch\"](function (err) {\n if (DEBUG === true) {\n console.log(\"Err. Can't parse language keys, the JSON file may be is invalid\");\n }\n reject(err);\n });\n })[\"catch\"](function (err) {\n if (DEBUG === true) {\n console.log(\"Err. Couldn't retrieve language keys\");\n }\n reject(err);\n });\n });\n }\n }, {\n key: \"_init\",\n value: function _init() {\n var _this4 = this;\n if (DEBUG === true) {\n console.log(\"5. Updatde css to take color and style value into account\");\n }\n return new Promise(function (resolve, reject) {\n // Only update cs variables if precised in band.json, keep default otherwise\n if (_this4._band.styles) {\n document.documentElement.style.setProperty('--mainColor', _this4._band.styles.mainColor);\n document.documentElement.style.setProperty('--gradientStart', _this4._band.styles.gradientStart);\n document.documentElement.style.setProperty('--gradientEnd', _this4._band.styles.gradientEnd);\n // Create filter css rule from main color color\n var rgb = _js_FilterGenerator_js__WEBPACK_IMPORTED_MODULE_0__.Color.hexToRgb(_this4._band.styles.mainColor);\n var color = new _js_FilterGenerator_js__WEBPACK_IMPORTED_MODULE_0__.Color(rgb[0], rgb[1], rgb[2]);\n var solver = new _js_FilterGenerator_js__WEBPACK_IMPORTED_MODULE_0__.Solver(color);\n var result = solver.solve();\n document.documentElement.style.setProperty('--imageFilter', result.filter);\n resolve();\n } else {\n reject(new Error('Not styles found in JSON file'));\n }\n });\n }\n }, {\n key: \"_buildPage\",\n value: function _buildPage() {\n var _this5 = this;\n if (DEBUG === true) {\n console.log(\"6. Build HTML DOM depending on the page type\");\n }\n return new Promise(function (resolve, reject) {\n if (document.body.dataset.type === 'index') {\n _this5._buildIndexPage();\n } else if (document.body.dataset.type === 'listen') {\n _this5._buildListenPage();\n } else if (document.body.dataset.type === 'tree') {\n _this5._buildTreePage();\n } else {\n if (DEBUG === true) {\n console.log(\"Err. Unknown page type to init the website with\");\n }\n reject(new Error('Invalid type. Should be either index, listen or tree'));\n }\n resolve();\n });\n }\n }, {\n key: \"_buildIndexPage\",\n value: function _buildIndexPage() {\n var _this6 = this;\n if (DEBUG === true) {\n console.log(\"6. Init website with the artist main page\");\n }\n document.querySelector('#band-name').innerHTML = this._nls.band.name;\n document.querySelector('#band-picture').src = \"./assets/img/artists/\".concat(this._band.bandPicture);\n document.querySelector('#band-desc').innerHTML = this._nls.band.desc;\n document.querySelector('#listen-link').innerHTML = \"\\\"listen\\\"\".concat(this._nls.listenLink);\n document.querySelector('#tree-link').innerHTML = \"\\\"listen\\\"\".concat(this._nls.treeLink);\n document.querySelector('#musicians-section').innerHTML = this._nls.musicians;\n document.querySelector('#works-section').innerHTML = this._nls.works;\n document.querySelector('#videos-section').innerHTML = this._nls.videos;\n for (var i = 0; i < this._band.members.length; ++i) {\n var container = document.createElement('DIV');\n container.dataset.artist = this._band.members[i].fullName;\n var picture = document.createElement('IMG');\n picture.src = \"./assets/img/artists/\".concat(this._band.members[i].picture);\n var label = document.createElement('P');\n label.innerHTML = \"\\n \".concat(this._band.members[i].fullName, \"
\\n \\xA9 \").concat(this._band.members[i].pictureCredit, \"
\\n \").concat(this._nls.learnMore, \"\\n \");\n container.addEventListener('click', this._artistModal.bind(this, this._band.members[i]));\n container.appendChild(picture);\n container.appendChild(label);\n document.getElementById('artists').appendChild(container);\n }\n if (this._band.pastMembers.length > 0) {\n var _container = document.createElement('DIV');\n _container.classList.add('past-members');\n var _label = document.createElement('P');\n _label.innerHTML = \"\\n \".concat(this._nls.pastMembers, \"
\\n \").concat(this._nls.learnMore, \"\\n \");\n _container.addEventListener('click', this._pastMembersModal.bind(this, this._band.pastMembers));\n _container.appendChild(_label);\n document.getElementById('artists').appendChild(_container);\n }\n for (var _i = 0; _i < this._band.releases.length; ++_i) {\n if (this._band.releases[_i].showOnMainPage === true) {\n var _container2 = document.createElement('DIV');\n _container2.dataset.url = this._getReleaseLink(this._band.releases[_i].links);\n var _picture = document.createElement('IMG');\n _picture.src = \"./assets/img/releases/\".concat(this._band.releases[_i].cover);\n var _label2 = document.createElement('P');\n _label2.innerHTML = \"\\n \".concat(this._band.releases[_i].title, \"
\\n \").concat(this._band.releases[_i].artist, \"
\\n \").concat(this._buildReleaseDate(this._band.releases[_i].date), \"\\n \");\n _container2.addEventListener('click', this._openReleaseVideo.bind(this, _container2.dataset.url));\n _container2.appendChild(_picture);\n _container2.appendChild(_label2);\n document.getElementById('releases').appendChild(_container2);\n }\n }\n // Force timeout to wait for draw, then raf to display scroll\n setTimeout(function () {\n _this6._mainScroll = new window.ScrollBar({\n target: document.body,\n style: {\n color: _this6._band.styles.mainColor\n }\n });\n // Force raf after scroll creation to make scrollbar properly visible\n requestAnimationFrame(function () {\n _this6._mainScroll.updateScrollbar();\n });\n }, 100);\n }\n }, {\n key: \"_buildListenPage\",\n value: function _buildListenPage() {\n var _this7 = this;\n if (DEBUG === true) {\n console.log(\"6. Init website with the artist listen page\");\n }\n // Update page nls\n document.querySelector('#release-from').innerHTML = this._nls.from;\n document.querySelector('#listen-online').innerHTML = this._nls.listenOnline;\n document.querySelector('#see-more-links').innerHTML = this._nls.seeMore;\n document.querySelector('#published-on').innerHTML = this._nls.publishedOn;\n // Internal useful variables\n var progress = document.getElementById('current-progress');\n var overlay = document.getElementById('modal-overlay');\n var audio = new Audio();\n var activeRelease = 0;\n // Define internal functions to update UI according to selected release\n var updateRelease = function updateRelease() {\n // Reset audio playback and playback UI\n audio.pause();\n audio.currentTime = 0;\n progress.style.width = '0';\n // Update active release\n var release = _this7._band.releases[activeRelease];\n // Update blurred backgrounds\n document.getElementById('release-background').style.backgroundImage = \"url('assets/img/releases/\".concat(release.cover, \"')\");\n document.getElementById('release-background-bottom').style.backgroundImage = \"url('assets/img/releases/\".concat(release.cover, \"')\");\n // Update release primitive information\n document.getElementById('release-cover').src = \"assets/img/releases/\".concat(release.cover);\n document.getElementById('release-duration').innerHTML = release.duration;\n document.getElementById('release-title').innerHTML = release.title;\n document.getElementById('release-artist').innerHTML = release.artist;\n document.getElementById('release-date').innerHTML = _this7._buildReleaseDate(release.date);\n document.getElementById('label-link').innerHTML = release.label;\n document.getElementById('label-link').href = release.labelLink;\n // Update view links according to the selected release\n for (var i = 0; i < release.links.length; ++i) {\n if (release.links[i].url === '') {\n // Link type has no url and should be disabled\n document.getElementById(release.links[i].type).classList.add('disabled'); // Only disabled button\n } else {\n // Update link information\n document.getElementById(release.links[i].type).classList.remove('disabled'); // Clear previous disabled class\n document.getElementById(release.links[i].type).href = release.links[i].url; // Update url href link\n }\n }\n // Create tracks and append them to the concerned DOM\n document.getElementById('release-tracklist').innerHTML = _this7._buildTrackCredits(release.tracks);\n // Update justify content if scroll exists\n if (document.getElementById('release-tracklist').scrollHeight > document.getElementById('release-tracklist').clientHeight) {\n document.getElementById('release-tracklist').style.display = 'inherit';\n setTimeout(function () {\n var trackScroll = new window.ScrollBar({\n target: document.getElementById('release-tracklist'),\n style: {\n color: _this7._band.styles.mainColor\n }\n });\n // Force raf after scroll creation to make scrollbar properly visible\n requestAnimationFrame(function () {\n trackScroll.updateScrollbar();\n });\n }, 100);\n }\n audio = new Audio(\"assets/audio/\".concat(release.audio));\n handlePlayback(audio);\n // Update pager selected item\n document.getElementById('release-pager').children[activeRelease].classList.add('selected');\n };\n // Handle the audio playback and events\n var handlePlayback = function handlePlayback() {\n var button = document.getElementById('play-pause');\n button.src = 'assets/img/controls/play.svg';\n var progressTrack = document.getElementById('progress-bar');\n var progress = document.getElementById('current-progress');\n var playing = false;\n // Handle click on play/pause button\n button.addEventListener('click', function () {\n if (playing === true) {\n playing = false;\n button.src = 'assets/img/controls/play.svg';\n audio.pause();\n } else {\n playing = true;\n button.src = 'assets/img/controls/pause.svg';\n audio.play();\n }\n });\n // Update progress on audio playing\n audio.addEventListener('timeupdate', function () {\n progress.style.width = \"\".concat(audio.currentTime / audio.duration * 100, \"%\");\n });\n // Reset progress and audio when playback reached the end of tracks\n audio.addEventListener('ended', function () {\n audio.currentTime = 0;\n progress.style.width = '0';\n button.src = 'assets/img/controls/play.svg';\n playing = false;\n });\n // User manually seek a part of audio\n progressTrack.addEventListener('click', function (event) {\n if (playing === true) {\n var box = progressTrack.getBoundingClientRect();\n audio.currentTime = (event.clientX - box.left) / box.width * audio.duration;\n progress.style.width = \"\".concat(audio.currentTime / audio.duration * 100, \"%\");\n }\n });\n };\n // Previous and next release event handling if more than one release\n if (this._band.releases.length === 1) {\n document.getElementById('release-previous').style.display = 'none';\n document.getElementById('release-next').style.display = 'none';\n } else {\n document.getElementById('release-previous').addEventListener('click', function (e) {\n e.target.blur();\n document.getElementById('release-pager').children[activeRelease].classList.remove('selected');\n activeRelease = (_this7._band.releases.length + activeRelease - 1) % _this7._band.releases.length;\n updateRelease();\n });\n document.getElementById('release-next').addEventListener('click', function (e) {\n e.target.blur();\n document.getElementById('release-pager').children[activeRelease].classList.remove('selected');\n activeRelease = (activeRelease + 1) % _this7._band.releases.length;\n updateRelease();\n });\n for (var i = 0; i < this._band.releases.length; ++i) {\n var releasePage = document.createElement('A');\n releasePage.innerHTML = '●';\n releasePage.addEventListener('click', function (e) {\n document.getElementById('release-pager').children[activeRelease].classList.remove('selected');\n var parent = e.target.parentNode;\n activeRelease = Array.prototype.indexOf.call(parent.children, e.target);\n updateRelease();\n });\n document.getElementById('release-pager').appendChild(releasePage);\n }\n }\n // Blur modal event\n document.getElementById('modal-overlay').addEventListener('click', function () {\n overlay.style.opacity = 0;\n setTimeout(function () {\n overlay.innerHTML = '';\n overlay.style.display = 'none';\n }, 400);\n });\n // Open modal event\n document.getElementById('see-more-links').addEventListener('click', function () {\n fetch('assets/html/seemoremodal.html').then(function (data) {\n overlay.style.display = 'flex';\n data.text().then(function (htmlString) {\n overlay.appendChild(document.createRange().createContextualFragment(htmlString));\n var release = _this7._band.releases[activeRelease];\n for (var _i2 = 0; _i2 < release.moreLinks.length; ++_i2) {\n if (release.moreLinks[_i2].url === '') {\n // Link type has no url and should be disabled\n document.getElementById(release.moreLinks[_i2].type).classList.add('disabled'); // Only disabled button\n } else {\n // Update link information\n document.getElementById(release.moreLinks[_i2].type).classList.remove('disabled'); // Clear previous disabled class\n document.getElementById(release.moreLinks[_i2].type).href = release.moreLinks[_i2].url; // Update url href link\n }\n }\n\n requestAnimationFrame(function () {\n return overlay.style.opacity = 1;\n });\n });\n })[\"catch\"](function (e) {\n return console.error(e);\n });\n });\n // Update UI with first release available in array\n updateRelease();\n }\n }, {\n key: \"_buildTreePage\",\n value: function _buildTreePage() {\n var _this8 = this;\n if (DEBUG === true) {\n console.log(\"6. Init website with the artist link tree\");\n }\n // Iterate over link to create link content\n for (var i = 0; i < this._band.links.length; ++i) {\n document.querySelector('#link-wrapper').innerHTML += \"\\n \\n \\n

\").concat(this._band.links[i].name, \"

\\n \\n \");\n }\n // Force timeout to wait for draw, then raf to display scroll\n setTimeout(function () {\n _this8._mainScroll = new window.ScrollBar({\n target: document.getElementById('link-wrapper'),\n style: {\n color: _this8._band.styles.mainColor\n }\n });\n // Force raf after scroll creation to make scrollbar properly visible\n requestAnimationFrame(function () {\n _this8._mainScroll.updateScrollbar();\n });\n }, 100);\n }\n }, {\n key: \"_events\",\n value: function _events() {\n // Blur modal event\n document.getElementById('modal-overlay').addEventListener('click', this._closeModal.bind(this));\n }\n\n // Utils for main page\n }, {\n key: \"_artistModal\",\n value: function _artistModal(artist) {\n var _this9 = this;\n var overlay = document.getElementById('modal-overlay');\n // Open modal event\n fetch(\"assets/html/biomodal.html\").then(function (data) {\n overlay.style.display = 'flex';\n data.text().then(function (htmlString) {\n var container = document.createRange().createContextualFragment(htmlString);\n container.querySelector('#artist-name').innerHTML = artist.fullName;\n container.querySelector('#artist-picture').src = \"./assets/img/artists/\".concat(artist.picture);\n for (var i = 0; i < artist.roles.length; ++i) {\n container.querySelector('#artist-roles').innerHTML += _this9._nls.roles[artist.roles[i]];\n if (i + 1 < artist.roles.length) {\n container.querySelector('#artist-roles').innerHTML += ', ';\n }\n }\n container.querySelector('#artist-roles').innerHTML += \" \".concat(_this9._nls.since, \" \").concat(artist.range.split('-')[0]);\n container.querySelector('#artist-bio').innerHTML = artist.bio[_this9._lang];\n container.querySelector('#close-modal-button').innerHTML = _this9._nls.close;\n overlay.appendChild(container);\n requestAnimationFrame(function () {\n return overlay.style.opacity = 1;\n });\n });\n })[\"catch\"](function (e) {\n return console.error(e);\n });\n }\n }, {\n key: \"_pastMembersModal\",\n value: function _pastMembersModal(pastMembers) {\n var _this10 = this;\n var overlay = document.getElementById('modal-overlay');\n // Open modal event\n fetch(\"assets/html/pastmembersmodal.html\").then(function (data) {\n overlay.style.display = 'flex';\n data.text().then(function (htmlString) {\n var container = document.createRange().createContextualFragment(htmlString);\n container.querySelector('#modal-title').innerHTML = _this10._nls.pastMembers;\n var artistsContainer = container.querySelector('#past-members-container');\n for (var i = 0; i < pastMembers.length; ++i) {\n var member = document.createElement('DIV');\n member.classList.add('past-member');\n var roles = '';\n for (var j = 0; j < pastMembers[i].roles.length; ++j) {\n roles += _this10._nls.roles[pastMembers[i].roles[j]];\n if (j + 1 < pastMembers[i].roles.length) {\n roles += ', ';\n }\n }\n roles += \" \".concat(_this10._nls.from, \" \").concat(pastMembers[i].range.split('-')[0], \" \").concat(_this10._nls.to, \" \").concat(pastMembers[i].range.split('-')[1]);\n member.innerHTML = \"\\n
\\xA9 \").concat(pastMembers[i].pictureCredit, \"
\\n
\\n

\").concat(pastMembers[i].fullName, \"

\\u2013 \").concat(roles, \"\\n

\").concat(pastMembers[i].bio[_this10._lang], \"

\\n
\\n \");\n artistsContainer.appendChild(member);\n }\n container.querySelector('#close-modal-button').innerHTML = _this10._nls.close;\n overlay.appendChild(container);\n // Force timeout to wait for draw, then raf to display scroll\n setTimeout(function () {\n var scroll = new window.ScrollBar({\n target: overlay.querySelector('#past-members-container'),\n style: {\n color: _this10._band.styles.mainColor\n }\n });\n // Force raf after scroll creation to make scrollbar properly visible\n requestAnimationFrame(function () {\n scroll.updateScrollbar();\n });\n }, 100);\n // Open modal\n requestAnimationFrame(function () {\n return overlay.style.opacity = 1;\n });\n });\n })[\"catch\"](function (e) {\n return console.error(e);\n });\n }\n }, {\n key: \"_closeModal\",\n value: function _closeModal(e) {\n if (e.originalTarget.id !== 'modal-overlay' && e.originalTarget.className !== 'close-modal') {\n return;\n }\n var overlay = document.getElementById('modal-overlay');\n if (overlay.style.display === 'flex') {\n overlay.style.opacity = 0;\n setTimeout(function () {\n overlay.innerHTML = '';\n overlay.style = '';\n }, 400);\n }\n }\n }, {\n key: \"_getReleaseLink\",\n value: function _getReleaseLink(links) {\n var url = '';\n for (var i = 0; i < links.length; ++i) {\n if (links[i].url !== '') {\n url = links[i].url;\n if (links[i].type === 'youtube') {\n return links[i].url;\n }\n }\n }\n return url;\n }\n }, {\n key: \"_openReleaseVideo\",\n value: function _openReleaseVideo(url) {\n window.open(url, '_blank').focus();\n }\n\n // Utils for listen page\n }, {\n key: \"_buildReleaseDate\",\n value: function _buildReleaseDate(date) {\n var dateArray = date.split('-');\n if (this._lang === 'en') {\n return \"\".concat(this._nls.months[dateArray[1] - 1], \" \").concat(dateArray[0].replace(/^0+/, ''), \", \").concat(dateArray[2]);\n } else {\n return \"\".concat(dateArray[0].replace(/^0+/, ''), \" \").concat(this._nls.months[dateArray[1] - 1], \" \").concat(dateArray[2]);\n }\n }\n }, {\n key: \"_buildTrackCredits\",\n value: function _buildTrackCredits(tracks) {\n var dom = '';\n for (var i = 0; i < tracks.length; ++i) {\n dom += \"

\".concat(i + 1, \". \").concat(tracks[i].title, \" \\u2013 \").concat(tracks[i].duration, \"

\");\n if (tracks[i].composer !== '') {\n // Add composer if any\n dom += \"\".concat(this._nls.composer, \" : \").concat(tracks[i].composer, \"
\");\n }\n if (tracks[i].author !== '') {\n // Add author if any\n dom += \"\".concat(this._nls.author, \" : \").concat(tracks[i].author);\n }\n dom += \"

\";\n }\n return dom;\n }\n }]);\n return BW;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BW);\n\n//# sourceURL=webpack://BW/./src/bw.js?"); - -/***/ }), - -/***/ "./src/js/FilterGenerator.js": -/*!***********************************!*\ - !*** ./src/js/FilterGenerator.js ***! - \***********************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Color: () => (/* binding */ Color),\n/* harmony export */ Solver: () => (/* binding */ Solver)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\n// Real MVP : Barrett Sonntag (@sosuke on CodePen)\n// Code taken from https://codepen.io/sosuke/pen/Pjoqqp, licensed under MIT Licensed.\n// Slightly adapted to match our needs for BandWebsite\nvar Color = /*#__PURE__*/function () {\n function Color(r, g, b) {\n _classCallCheck(this, Color);\n this.set(r, g, b);\n }\n _createClass(Color, [{\n key: \"toString\",\n value: function toString() {\n return \"rgb(\".concat(Math.round(this.r), \", \").concat(Math.round(this.g), \", \").concat(Math.round(this.b), \")\");\n }\n }, {\n key: \"set\",\n value: function set(r, g, b) {\n this.r = this.clamp(r);\n this.g = this.clamp(g);\n this.b = this.clamp(b);\n }\n }, {\n key: \"hueRotate\",\n value: function hueRotate() {\n var angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n angle = angle / 180 * Math.PI;\n var sin = Math.sin(angle);\n var cos = Math.cos(angle);\n this.multiply([0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928, 0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.140, 0.072 - cos * 0.072 - sin * 0.283, 0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072]);\n }\n }, {\n key: \"grayscale\",\n value: function grayscale() {\n var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n this.multiply([0.2126 + 0.7874 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 - 0.0722 * (1 - value), 0.2126 - 0.2126 * (1 - value), 0.7152 + 0.2848 * (1 - value), 0.0722 - 0.0722 * (1 - value), 0.2126 - 0.2126 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 + 0.9278 * (1 - value)]);\n }\n }, {\n key: \"sepia\",\n value: function sepia() {\n var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n this.multiply([0.393 + 0.607 * (1 - value), 0.769 - 0.769 * (1 - value), 0.189 - 0.189 * (1 - value), 0.349 - 0.349 * (1 - value), 0.686 + 0.314 * (1 - value), 0.168 - 0.168 * (1 - value), 0.272 - 0.272 * (1 - value), 0.534 - 0.534 * (1 - value), 0.131 + 0.869 * (1 - value)]);\n }\n }, {\n key: \"saturate\",\n value: function saturate() {\n var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n this.multiply([0.213 + 0.787 * value, 0.715 - 0.715 * value, 0.072 - 0.072 * value, 0.213 - 0.213 * value, 0.715 + 0.285 * value, 0.072 - 0.072 * value, 0.213 - 0.213 * value, 0.715 - 0.715 * value, 0.072 + 0.928 * value]);\n }\n }, {\n key: \"multiply\",\n value: function multiply(matrix) {\n var newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);\n var newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);\n var newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);\n this.r = newR;\n this.g = newG;\n this.b = newB;\n }\n }, {\n key: \"brightness\",\n value: function brightness() {\n var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n this.linear(value);\n }\n }, {\n key: \"contrast\",\n value: function contrast() {\n var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n this.linear(value, -(0.5 * value) + 0.5);\n }\n }, {\n key: \"linear\",\n value: function linear() {\n var slope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n var intercept = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n this.r = this.clamp(this.r * slope + intercept * 255);\n this.g = this.clamp(this.g * slope + intercept * 255);\n this.b = this.clamp(this.b * slope + intercept * 255);\n }\n }, {\n key: \"invert\",\n value: function invert() {\n var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n this.r = this.clamp((value + this.r / 255 * (1 - 2 * value)) * 255);\n this.g = this.clamp((value + this.g / 255 * (1 - 2 * value)) * 255);\n this.b = this.clamp((value + this.b / 255 * (1 - 2 * value)) * 255);\n }\n }, {\n key: \"hsl\",\n value: function hsl() {\n // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA.\n var r = this.r / 255;\n var g = this.g / 255;\n var b = this.b / 255;\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var h,\n s,\n l = (max + min) / 2;\n if (max === min) {\n h = s = 0;\n } else {\n var d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n return {\n h: h * 100,\n s: s * 100,\n l: l * 100\n };\n }\n }, {\n key: \"clamp\",\n value: function clamp(value) {\n if (value > 255) {\n value = 255;\n } else if (value < 0) {\n value = 0;\n }\n return value;\n }\n }], [{\n key: \"hexToRgb\",\n value: function hexToRgb(hex) {\n // Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\n var shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, function (m, r, g, b) {\n return r + r + g + g + b + b;\n });\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;\n }\n }]);\n return Color;\n}();\nvar Solver = /*#__PURE__*/function () {\n function Solver(target) {\n _classCallCheck(this, Solver);\n this.target = target;\n this.targetHSL = target.hsl();\n this.reusedColor = new Color(0, 0, 0);\n }\n _createClass(Solver, [{\n key: \"solve\",\n value: function solve() {\n var result = this.solveNarrow(this.solveWide());\n return {\n values: result.values,\n loss: result.loss,\n filter: this.css(result.values)\n };\n }\n }, {\n key: \"solveWide\",\n value: function solveWide() {\n var A = 5;\n var c = 15;\n var a = [60, 180, 18000, 600, 1.2, 1.2];\n var best = {\n loss: Infinity\n };\n for (var i = 0; best.loss > 25 && i < 3; i++) {\n var initial = [50, 20, 3750, 50, 100, 100];\n var result = this.spsa(A, a, c, initial, 1000);\n if (result.loss < best.loss) {\n best = result;\n }\n }\n return best;\n }\n }, {\n key: \"solveNarrow\",\n value: function solveNarrow(wide) {\n var A = wide.loss;\n var c = 2;\n var A1 = A + 1;\n var a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];\n return this.spsa(A, a, c, wide.values, 500);\n }\n }, {\n key: \"spsa\",\n value: function spsa(A, a, c, values, iters) {\n var alpha = 1;\n var gamma = 0.16666666666666666;\n var best = null;\n var bestLoss = Infinity;\n var deltas = new Array(6);\n var highArgs = new Array(6);\n var lowArgs = new Array(6);\n for (var k = 0; k < iters; k++) {\n var ck = c / Math.pow(k + 1, gamma);\n for (var i = 0; i < 6; i++) {\n deltas[i] = Math.random() > 0.5 ? 1 : -1;\n highArgs[i] = values[i] + ck * deltas[i];\n lowArgs[i] = values[i] - ck * deltas[i];\n }\n var lossDiff = this.loss(highArgs) - this.loss(lowArgs);\n for (var _i = 0; _i < 6; _i++) {\n var g = lossDiff / (2 * ck) * deltas[_i];\n var ak = a[_i] / Math.pow(A + k + 1, alpha);\n values[_i] = fix(values[_i] - ak * g, _i);\n }\n var loss = this.loss(values);\n if (loss < bestLoss) {\n best = values.slice(0);\n bestLoss = loss;\n }\n }\n return {\n values: best,\n loss: bestLoss\n };\n function fix(value, idx) {\n var max = 100;\n if (idx === 2 /* saturate */) {\n max = 7500;\n } else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) {\n max = 200;\n }\n if (idx === 3 /* hue-rotate */) {\n if (value > max) {\n value %= max;\n } else if (value < 0) {\n value = max + value % max;\n }\n } else if (value < 0) {\n value = 0;\n } else if (value > max) {\n value = max;\n }\n return value;\n }\n }\n }, {\n key: \"loss\",\n value: function loss(filters) {\n // Argument is array of percentages.\n var color = this.reusedColor;\n color.set(0, 0, 0);\n color.invert(filters[0] / 100);\n color.sepia(filters[1] / 100);\n color.saturate(filters[2] / 100);\n color.hueRotate(filters[3] * 3.6);\n color.brightness(filters[4] / 100);\n color.contrast(filters[5] / 100);\n var colorHSL = color.hsl();\n return Math.abs(color.r - this.target.r) + Math.abs(color.g - this.target.g) + Math.abs(color.b - this.target.b) + Math.abs(colorHSL.h - this.targetHSL.h) + Math.abs(colorHSL.s - this.targetHSL.s) + Math.abs(colorHSL.l - this.targetHSL.l);\n }\n }, {\n key: \"css\",\n value: function css(filters) {\n function fmt(idx) {\n var multiplier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;\n return Math.round(filters[idx] * multiplier);\n }\n return \"invert(\".concat(fmt(0), \"%) sepia(\").concat(fmt(1), \"%) saturate(\").concat(fmt(2), \"%) hue-rotate(\").concat(fmt(3, 3.6), \"deg) brightness(\").concat(fmt(4), \"%) contrast(\").concat(fmt(5), \"%)\");\n }\n }]);\n return Solver;\n}();\n\n\n//# sourceURL=webpack://BW/./src/js/FilterGenerator.js?"); - -/***/ }), - -/***/ "./src/bw.scss": -/*!*********************!*\ - !*** ./src/bw.scss ***! - \*********************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://BW/./src/bw.scss?"); - -/***/ }) - -/******/ }); -/************************************************************************/ -/******/ // The module cache -/******/ var __webpack_module_cache__ = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ // Check if module is in cache -/******/ var cachedModule = __webpack_module_cache__[moduleId]; -/******/ if (cachedModule !== undefined) { -/******/ return cachedModule.exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = __webpack_module_cache__[moduleId] = { -/******/ // no module.id needed -/******/ // no module.loaded needed -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/************************************************************************/ -/******/ /* webpack/runtime/define property getters */ -/******/ (() => { -/******/ // define getter functions for harmony exports -/******/ __webpack_require__.d = (exports, definition) => { -/******/ for(var key in definition) { -/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { -/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); -/******/ } -/******/ } -/******/ }; -/******/ })(); -/******/ -/******/ /* webpack/runtime/hasOwnProperty shorthand */ -/******/ (() => { -/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) -/******/ })(); -/******/ -/******/ /* webpack/runtime/make namespace object */ -/******/ (() => { -/******/ // define __esModule on exports -/******/ __webpack_require__.r = (exports) => { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ })(); -/******/ -/************************************************************************/ -/******/ -/******/ // startup -/******/ // Load entry module and return exports -/******/ // This entry module can't be inlined because the eval devtool is used. -/******/ var __webpack_exports__ = __webpack_require__("./src/bw.js"); -/******/ window.BW = __webpack_exports__["default"]; -/******/ -/******/ })() -; \ No newline at end of file +!function(){"use strict";var e={d:function(t,n){for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}},t={};function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){for(var r=0;r0&&void 0!==arguments[0]?arguments[0]:0;e=e/180*Math.PI;var t=Math.sin(e),n=Math.cos(e);this.multiply([.213+.787*n-.213*t,.715-.715*n-.715*t,.072-.072*n+.928*t,.213-.213*n+.143*t,.715+.285*n+.14*t,.072-.072*n-.283*t,.213-.213*n-.787*t,.715-.715*n+.715*t,.072+.928*n+.072*t])}},{key:"grayscale",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.multiply([.2126+.7874*(1-e),.7152-.7152*(1-e),.0722-.0722*(1-e),.2126-.2126*(1-e),.7152+.2848*(1-e),.0722-.0722*(1-e),.2126-.2126*(1-e),.7152-.7152*(1-e),.0722+.9278*(1-e)])}},{key:"sepia",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.multiply([.393+.607*(1-e),.769-.769*(1-e),.189-.189*(1-e),.349-.349*(1-e),.686+.314*(1-e),.168-.168*(1-e),.272-.272*(1-e),.534-.534*(1-e),.131+.869*(1-e)])}},{key:"saturate",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.multiply([.213+.787*e,.715-.715*e,.072-.072*e,.213-.213*e,.715+.285*e,.072-.072*e,.213-.213*e,.715-.715*e,.072+.928*e])}},{key:"multiply",value:function(e){var t=this.clamp(this.r*e[0]+this.g*e[1]+this.b*e[2]),n=this.clamp(this.r*e[3]+this.g*e[4]+this.b*e[5]),r=this.clamp(this.r*e[6]+this.g*e[7]+this.b*e[8]);this.r=t,this.g=n,this.b=r}},{key:"brightness",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.linear(e)}},{key:"contrast",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.linear(e,-.5*e+.5)}},{key:"linear",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;this.r=this.clamp(this.r*e+255*t),this.g=this.clamp(this.g*e+255*t),this.b=this.clamp(this.b*e+255*t)}},{key:"invert",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.r=this.clamp(255*(e+this.r/255*(1-2*e))),this.g=this.clamp(255*(e+this.g/255*(1-2*e))),this.b=this.clamp(255*(e+this.b/255*(1-2*e)))}},{key:"hsl",value:function(){var e,t,n=this.r/255,r=this.g/255,a=this.b/255,s=Math.max(n,r,a),i=Math.min(n,r,a),l=(s+i)/2;if(s===i)e=t=0;else{var o=s-i;switch(t=l>.5?o/(2-s-i):o/(s+i),s){case n:e=(r-a)/o+(r255?e=255:e<0&&(e=0),e}}],[{key:"hexToRgb",value:function(e){e=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(e,t,n,r){return t+t+n+n+r+r}));var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?[parseInt(t[1],16),parseInt(t[2],16),parseInt(t[3],16)]:null}}]),e}(),l=function(){function e(t){r(this,e),this.target=t,this.targetHSL=t.hsl(),this.reusedColor=new i(0,0,0)}return s(e,[{key:"solve",value:function(){var e=this.solveNarrow(this.solveWide());return{values:e.values,loss:e.loss,filter:this.css(e.values)}}},{key:"solveWide",value:function(){for(var e=[60,180,18e3,600,1.2,1.2],t={loss:1/0},n=0;t.loss>25&&n<3;n++){var r=this.spsa(5,e,15,[50,20,3750,50,100,100],1e3);r.loss.5?1:-1,o[m]=r[m]+d*l[m],c[m]=r[m]-d*l[m];for(var h=this.loss(o)-this.loss(c),y=0;y<6;y++){var g=h/(2*d)*l[y],v=t[y]/Math.pow(e+u+1,1);r[y]=(b=r[y]-v*g,_=void 0,_=100,2===(p=y)?_=7500:4!==p&&5!==p||(_=200),3===p?b>_?b%=_:b<0&&(b=_+b%_):b<0?b=0:b>_&&(b=_),b)}var f=this.loss(r);f1&&void 0!==arguments[1]?arguments[1]:1;return Math.round(e[t]*n)}return"invert(".concat(t(0),"%) sepia(").concat(t(1),"%) saturate(").concat(t(2),"%) hue-rotate(").concat(t(3,3.6),"deg) brightness(").concat(t(4),"%) contrast(").concat(t(5),"%)")}}]),e}();function o(e){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o(e)}function c(e,t){for(var n=0;n type. Should be either index, listen or tree")),t()}))}},{key:"_buildIndexPage",value:function(){var e=this;document.querySelector("#band-name").innerHTML=this._nls.band.name,document.querySelector("#band-picture").src="./assets/img/artists/".concat(this._band.bandPicture),document.querySelector("#band-desc").innerHTML=this._nls.band.desc,document.querySelector("#listen-link").innerHTML='listen'.concat(this._nls.listenLink),document.querySelector("#tree-link").innerHTML='listen'.concat(this._nls.treeLink),document.querySelector("#musicians-section").innerHTML=this._nls.musicians,document.querySelector("#works-section").innerHTML=this._nls.works,document.querySelector("#videos-section").innerHTML=this._nls.videos;for(var t=0;t\n © ").concat(this._band.members[t].pictureCredit,'
\n ').concat(this._nls.learnMore,"\n "),n.addEventListener("click",this._artistModal.bind(this,this._band.members[t])),n.appendChild(r),n.appendChild(a),document.getElementById("artists").appendChild(n)}if(this._band.pastMembers.length>0){var s=document.createElement("DIV");s.classList.add("past-members");var i=document.createElement("P");i.innerHTML="\n ".concat(this._nls.pastMembers,'
\n ').concat(this._nls.learnMore,"\n "),s.addEventListener("click",this._pastMembersModal.bind(this,this._band.pastMembers)),s.appendChild(i),document.getElementById("artists").appendChild(s)}for(var l=0;l\n ").concat(this._band.releases[l].artist,"
\n ").concat(this._buildReleaseDate(this._band.releases[l].date),"\n "),o.addEventListener("click",this._openReleaseVideo.bind(this,o.dataset.url)),o.appendChild(c),o.appendChild(u),document.getElementById("releases").appendChild(o)}setTimeout((function(){e._mainScroll=new window.ScrollBar({target:document.body,style:{color:e._band.styles.mainColor}}),requestAnimationFrame((function(){e._mainScroll.updateScrollbar()}))}),100)}},{key:"_buildListenPage",value:function(){var e=this;document.querySelector("#release-from").innerHTML=this._nls.from,document.querySelector("#listen-online").innerHTML=this._nls.listenOnline,document.querySelector("#see-more-links").innerHTML=this._nls.seeMore,document.querySelector("#published-on").innerHTML=this._nls.publishedOn;var t=document.getElementById("current-progress"),n=document.getElementById("modal-overlay"),r=new Audio,a=0,s=function(){r.pause(),r.currentTime=0,t.style.width="0";var n=e._band.releases[a];document.getElementById("release-background").style.backgroundImage="url('assets/img/releases/".concat(n.cover,"')"),document.getElementById("release-background-bottom").style.backgroundImage="url('assets/img/releases/".concat(n.cover,"')"),document.getElementById("release-cover").src="assets/img/releases/".concat(n.cover),document.getElementById("release-duration").innerHTML=n.duration,document.getElementById("release-title").innerHTML=n.title,document.getElementById("release-artist").innerHTML=n.artist,document.getElementById("release-date").innerHTML=e._buildReleaseDate(n.date),document.getElementById("label-link").innerHTML=n.label,document.getElementById("label-link").href=n.labelLink;for(var s=0;sdocument.getElementById("release-tracklist").clientHeight&&(document.getElementById("release-tracklist").style.display="inherit",setTimeout((function(){var t=new window.ScrollBar({target:document.getElementById("release-tracklist"),style:{color:e._band.styles.mainColor}});requestAnimationFrame((function(){t.updateScrollbar()}))}),100)),r=new Audio("assets/audio/".concat(n.audio)),i(r),e._band.releases.length<35&&document.getElementById("release-pager").children[a].classList.add("selected")},i=function(){var e=document.getElementById("play-pause");e.src="assets/img/controls/play.svg";var t=document.getElementById("progress-bar"),n=document.getElementById("current-progress"),a=!1;e.addEventListener("click",(function(){!0===a?(a=!1,e.src="assets/img/controls/play.svg",r.pause()):(a=!0,e.src="assets/img/controls/pause.svg",r.play())})),r.addEventListener("timeupdate",(function(){n.style.width="".concat(r.currentTime/r.duration*100,"%")})),r.addEventListener("ended",(function(){r.currentTime=0,n.style.width="0",e.src="assets/img/controls/play.svg",a=!1})),t.addEventListener("click",(function(e){if(!0===a){var s=t.getBoundingClientRect();r.currentTime=(e.clientX-s.left)/s.width*r.duration,n.style.width="".concat(r.currentTime/r.duration*100,"%")}}))};if(1===this._band.releases.length)document.getElementById("release-previous").style.display="none",document.getElementById("release-next").style.display="none";else if(document.getElementById("release-previous").addEventListener("click",(function(t){t.target.blur(),e._band.releases.length<35&&document.getElementById("release-pager").children[a].classList.remove("selected"),a=(e._band.releases.length+a-1)%e._band.releases.length,s()})),document.getElementById("release-next").addEventListener("click",(function(t){t.target.blur(),e._band.releases.length<35&&document.getElementById("release-pager").children[a].classList.remove("selected"),a=(a+1)%e._band.releases.length,s()})),this._band.releases.length&&this._band.releases.length<35){for(var l=0;l\n \n

').concat(this._band.links[t].name,"

\n \n ");setTimeout((function(){e._mainScroll=new window.ScrollBar({target:document.getElementById("link-wrapper"),style:{color:e._band.styles.mainColor}}),requestAnimationFrame((function(){e._mainScroll.updateScrollbar()}))}),100)}},{key:"_events",value:function(){document.getElementById("modal-overlay").addEventListener("click",this._closeModal.bind(this))}},{key:"_artistModal",value:function(e){var t=this,n=document.getElementById("modal-overlay");fetch("assets/html/biomodal.html").then((function(r){n.style.display="flex",r.text().then((function(r){var a=document.createRange().createContextualFragment(r);a.querySelector("#artist-name").innerHTML=e.fullName,a.querySelector("#artist-picture").src="./assets/img/artists/".concat(e.picture);for(var s=0;s© ').concat(e[i].pictureCredit,'\n
\n

').concat(e[i].fullName,"

– ").concat(o,"\n

").concat(e[i].bio[t._lang],"

\n
\n "),s.appendChild(l)}a.querySelector("#close-modal-button").innerHTML=t._nls.close,n.appendChild(a),setTimeout((function(){var e=new window.ScrollBar({target:n.querySelector("#past-members-container"),style:{color:t._band.styles.mainColor}});requestAnimationFrame((function(){e.updateScrollbar()}))}),100),requestAnimationFrame((function(){return n.style.opacity=1}))}))})).catch((function(e){return console.error(e)}))}},{key:"_closeModal",value:function(e){if("modal-overlay"===e.originalTarget.id||"close-modal"===e.originalTarget.className){var t=document.getElementById("modal-overlay");"flex"===t.style.display&&(t.style.opacity=0,setTimeout((function(){t.innerHTML="",t.style=""}),400))}}},{key:"_getReleaseLink",value:function(e){for(var t="",n=0;n".concat(n+1,". ").concat(e[n].title," – ").concat(e[n].duration,"

"),""!==e[n].composer&&(t+="".concat(this._nls.composer," : ").concat(e[n].composer,"
")),""!==e[n].author&&(t+="".concat(this._nls.author," : ").concat(e[n].author)),t+="

";return t}}])&&c(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();window.BW=t.default}(); \ No newline at end of file diff --git a/assets/html/seemoremodal.html b/assets/html/seemoremodal.html index 7224f9c..343ba24 100644 --- a/assets/html/seemoremodal.html +++ b/assets/html/seemoremodal.html @@ -2,10 +2,6 @@ tidal-link

Tidal

- - - pandora-link -

Pandora

 genius-link @@ -19,4 +15,5 @@ musicbrainz-link

MusicBrainz

 + diff --git a/assets/json/band.json b/assets/json/band.json index c33c1c8..c61aa06 100644 --- a/assets/json/band.json +++ b/assets/json/band.json @@ -127,9 +127,6 @@ { "type": "tidal", "url": "https://listen.tidal.com/album/200014684" - }, { - "type": "pandora", - "url": "" }, { "type": "genius", "url": "https://genius.com/albums/Nac-fra/Dystopie" @@ -221,9 +218,6 @@ { "type": "tidal", "url": "https://listen.tidal.com/album/200014704" - }, { - "type": "pandora", - "url": "" }, { "type": "genius", "url": "https://genius.com/albums/Nac-fra/Crad-bar-boogie-single" @@ -279,9 +273,6 @@ { "type": "tidal", "url": "https://listen.tidal.com/album/199407447" - }, { - "type": "pandora", - "url": "" }, { "type": "genius", "url": "https://genius.com/albums/Nac-fra/Tramp-single" @@ -337,9 +328,6 @@ { "type": "tidal", "url": "" - }, { - "type": "pandora", - "url": "" }, { "type": "genius", "url": "https://genius.com/albums/Nac-fra/Nature-humaine-origins" @@ -395,9 +383,6 @@ { "type": "tidal", "url": "" - }, { - "type": "pandora", - "url": "" }, { "type": "genius", "url": "https://genius.com/artists/Nac-fra/" @@ -453,9 +438,6 @@ { "type": "tidal", "url": "" - }, { - "type": "pandora", - "url": "" }, { "type": "genius", "url": "https://genius.com/albums/Nac-fra/Nac" diff --git a/assets/json/de.json b/assets/json/de.json index d98f76a..bac3480 100644 --- a/assets/json/de.json +++ b/assets/json/de.json @@ -28,5 +28,11 @@ "to": "bis", "since": "seit", "close": "Schließen", - "months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"] + "months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"], + "lang": { + "en": "🇬🇧 Englisch", + "fr": "🇫🇷 Französisch", + "es": "🇪🇸 Spanische", + "de": "🇩🇪 Deutsch" + } } diff --git a/assets/json/en.json b/assets/json/en.json index 882182e..97f9983 100644 --- a/assets/json/en.json +++ b/assets/json/en.json @@ -28,5 +28,11 @@ "to": "to", "since": "since", "close": "Close", - "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] + "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], + "lang": { + "en": "🇬🇧 English", + "fr": "🇫🇷 French", + "es": "🇪🇸 Spanish", + "de": "🇩🇪 German" + } } diff --git a/assets/json/es.json b/assets/json/es.json index a45ecfd..13981fe 100644 --- a/assets/json/es.json +++ b/assets/json/es.json @@ -28,5 +28,11 @@ "to": "a", "since": "desde", "close": "Cerca", - "months": ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"] + "months": ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"], + "lang": { + "en": "🇬🇧 Inglés", + "fr": "🇫🇷 Francés", + "es": "🇪🇸 Español", + "de": "🇩🇪 Alemán" + } } diff --git a/assets/json/fr.json b/assets/json/fr.json index fcde637..88f8c44 100644 --- a/assets/json/fr.json +++ b/assets/json/fr.json @@ -28,5 +28,11 @@ "to": "à", "since": "depuis", "close": "Fermer", - "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"] + "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"], + "lang": { + "en": "🇬🇧 Anglais", + "fr": "🇫🇷 Français", + "es": "🇪🇸 Espagnol", + "de": "🇩🇪 Allemand" + } } diff --git a/index.html b/index.html index fe8834c..d6d3b87 100644 --- a/index.html +++ b/index.html @@ -66,6 +66,12 @@

2021 – 2023

+ diff --git a/listen.html b/listen.html index 1e1a704..2ef2569 100644 --- a/listen.html +++ b/listen.html @@ -100,6 +100,12 @@

+ diff --git a/package.json b/package.json index 655effc..79956f0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bandwebsite", - "version": "1.0.0", + "version": "1.1.0", "description": "A template to make a band or artist website ", "keywords": [], "main": "src/bw.js", diff --git a/src/bw.js b/src/bw.js index 16e720c..3679de1 100644 --- a/src/bw.js +++ b/src/bw.js @@ -2,42 +2,60 @@ import { Color, Solver } from './js/FilterGenerator.js'; import './bw.scss'; -const DEBUG = true; +const DEBUG = false; class BW { constructor() { - this._lang = (['fr', 'es', 'de'].indexOf(navigator.language.substring(0, 2)) !== -1) ? navigator.language.substring(0, 2) : 'en'; + this._lang = localStorage.getItem('website-lang'); + if (this._lang === null) { + this._lang = (['fr', 'es', 'de', 'en'].indexOf(navigator.language.substring(0, 2)) !== -1) ? navigator.language.substring(0, 2) : 'en'; + localStorage.setItem('website-lang', this._lang); + } this._nls = null; this._band = null; this._mainScroll = null; - this._version = '1.3.0'; // Based on v1.1.0 of BandWebsite + this._version = '1.1.0'; - if (DEBUG === true) { console.log(`nac.band v${this._version} : Begin website initialization`); } + if (DEBUG === true) { console.log(`BandWebsite v${this._version} : Begin website initialization`); } - this._fetchLang() + this._initLang() .then(this._fetchBandInfo.bind(this)) .then(this._init.bind(this)) .then(this._buildPage.bind(this)) .then(this._events.bind(this)) .catch(err => { // Error are displayed even if DEBUG is set to false, to notify end user to contact support - console.error(`nac.band v${this._version} : Fatal error during initialization, please contact support :\n`, err); + console.error(`BandWebsite v${this._version} : Fatal error during initialization, please contact support :\n`, err); }) .finally(() => { - if (DEBUG === true) { console.log(`nac.band v${this._version} : Website initialization done`); } + if (DEBUG === true) { console.log(`BandWebsite v${this._version} : Website initialization done`); } }); } - _fetchLang() { + _initLang() { if (DEBUG === true) { console.log(`1. Fetch language keys with ${this._lang} locale`); } return new Promise((resolve, reject) => { fetch(`assets/json/${this._lang}.json`).then(data => { data.json().then(nlsKeys => { if (DEBUG === true) { console.log(`2. Language keys successfully retrieven`); } this._nls = nlsKeys; + + const select = document.getElementById('lang-select'); + for (let i = 0; i < select.children.length; ++i) { + select.children[i].innerHTML = this._nls.lang[select.children[i].value]; + if (select.children[i].value === this._lang) { + select.children[i].setAttribute('selected', true); + } + } + + select.addEventListener('change', e => { + localStorage.setItem('website-lang', e.target.value); + window.location.reload(); + }); + resolve(); }).catch(err => { if (DEBUG === true) { console.log(`Err. Can't parse language keys, the JSON file may be is invalid`); } @@ -247,7 +265,9 @@ class BW { audio = new Audio(`assets/audio/${release.audio}`); handlePlayback(audio); // Update pager selected item - document.getElementById('release-pager').children[activeRelease].classList.add('selected'); + if (this._band.releases.length < 35) { + document.getElementById('release-pager').children[activeRelease].classList.add('selected'); + } }; // Handle the audio playback and events const handlePlayback = () => { @@ -295,37 +315,38 @@ class BW { } else { document.getElementById('release-previous').addEventListener('click', e => { e.target.blur(); - document.getElementById('release-pager').children[activeRelease].classList.remove('selected'); + if (this._band.releases.length < 35) { + document.getElementById('release-pager').children[activeRelease].classList.remove('selected'); + } activeRelease = (this._band.releases.length + activeRelease - 1) % this._band.releases.length; updateRelease(); }); document.getElementById('release-next').addEventListener('click', e => { e.target.blur(); - document.getElementById('release-pager').children[activeRelease].classList.remove('selected'); + if (this._band.releases.length < 35) { + document.getElementById('release-pager').children[activeRelease].classList.remove('selected'); + } activeRelease = (activeRelease + 1) % this._band.releases.length; updateRelease(); }); - for (let i = 0; i < this._band.releases.length; ++i) { - const releasePage = document.createElement('A'); - releasePage.innerHTML = '●'; - releasePage.addEventListener('click', e => { - document.getElementById('release-pager').children[activeRelease].classList.remove('selected'); - const parent = e.target.parentNode; - activeRelease = Array.prototype.indexOf.call(parent.children, e.target); - updateRelease(); - }); - document.getElementById('release-pager').appendChild(releasePage); + if (this._band.releases.length && this._band.releases.length < 35) { + for (let i = 0; i < this._band.releases.length; ++i) { + const releasePage = document.createElement('A'); + releasePage.innerHTML = '●'; + releasePage.addEventListener('click', e => { + document.getElementById('release-pager').children[activeRelease].classList.remove('selected'); + const parent = e.target.parentNode; + activeRelease = Array.prototype.indexOf.call(parent.children, e.target); + updateRelease(); + }); + releasePage.style.margin = `0 ${(3.5 / this._band.releases.length)}rem`; + document.getElementById('release-pager').appendChild(releasePage); + } + + document.getElementById('release-pager').style.fontSize = `${(20 / this._band.releases.length) % 5.5}rem`; } } - // Blur modal event - document.getElementById('modal-overlay').addEventListener('click', () => { - overlay.style.opacity = 0; - setTimeout(() => { - overlay.innerHTML = ''; - overlay.style.display = 'none'; - }, 400); - }); // Open modal event document.getElementById('see-more-links').addEventListener('click', () => { fetch('assets/html/seemoremodal.html').then(data => { @@ -341,6 +362,7 @@ class BW { document.getElementById(release.moreLinks[i].type).href = release.moreLinks[i].url; // Update url href link } } + overlay.querySelector('#close-modal-button').innerHTML = this._nls.close; requestAnimationFrame(() => overlay.style.opacity = 1); }); }).catch(e => console.error(e)); diff --git a/src/bw.scss b/src/bw.scss index 4cf613d..0b6df79 100644 --- a/src/bw.scss +++ b/src/bw.scss @@ -69,6 +69,13 @@ main { } } +select { + padding: .2rem 1rem; + position: absolute; + right: 2rem; + top: 2rem; +} + .modal-overlay { align-items: center; background-color: rgba(0, 0, 0, .5); diff --git a/src/scss/_listen.scss b/src/scss/_listen.scss index 21d6c00..01d70ec 100644 --- a/src/scss/_listen.scss +++ b/src/scss/_listen.scss @@ -187,6 +187,7 @@ section.track-links { .release-pager { display: flex; + font-size: 2.8rem; justify-content: center; margin-bottom: auto; user-select: none; @@ -195,7 +196,7 @@ section.track-links { text-decoration: none; color: grey; cursor: pointer; - font-size: 2.8rem; + font-size: inherit; margin: 0 .5rem; user-select: none; transition: color .2s; @@ -333,6 +334,8 @@ section.credits { } .modal-seemore { + text-align: center; + a { align-items: center; background-color: white; @@ -369,4 +372,8 @@ section.credits { padding-right: .5rem; } } + + button { + margin-top: 1.3rem; + } } diff --git a/tree.html b/tree.html index 3ea527c..4d2374d 100644 --- a/tree.html +++ b/tree.html @@ -50,6 +50,13 @@ + +