diff --git a/app.py b/app.py index fca2e09..9cfa4f3 100644 --- a/app.py +++ b/app.py @@ -147,6 +147,10 @@ def motifindex(): category.id ''').fetchall() + category_info.append( + ('', 'Misc.') + ) + motif_info = db.execute(''' select id, name, category, count(clip.motif_id) diff --git a/static/albumicons/1.0.svg b/static/albumicons/1.0.svg new file mode 100644 index 0000000..63396d6 --- /dev/null +++ b/static/albumicons/1.0.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/static/albumicons/2.0.svg b/static/albumicons/2.0.svg new file mode 100644 index 0000000..7383534 --- /dev/null +++ b/static/albumicons/2.0.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/static/albumicons/2.5.svg b/static/albumicons/2.5.svg new file mode 100644 index 0000000..31601e3 --- /dev/null +++ b/static/albumicons/2.5.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/static/albumicons/3.0.svg b/static/albumicons/3.0.svg new file mode 100644 index 0000000..ba0d0da --- /dev/null +++ b/static/albumicons/3.0.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/static/albumicons/3.5.svg b/static/albumicons/3.5.svg new file mode 100644 index 0000000..8399ed2 --- /dev/null +++ b/static/albumicons/3.5.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/static/albumicons/4.0.svg b/static/albumicons/4.0.svg new file mode 100644 index 0000000..e76ba5d --- /dev/null +++ b/static/albumicons/4.0.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/static/albumicons/5.0.svg b/static/albumicons/5.0.svg new file mode 100644 index 0000000..4505db2 --- /dev/null +++ b/static/albumicons/5.0.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/static/albumicons/5.5.svg b/static/albumicons/5.5.svg new file mode 100644 index 0000000..8b04af5 --- /dev/null +++ b/static/albumicons/5.5.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/static/albumicons/6.0.svg b/static/albumicons/6.0.svg new file mode 100644 index 0000000..1a7153c --- /dev/null +++ b/static/albumicons/6.0.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/static/motifbuttonpressed.css b/static/motifbuttonpressed.css new file mode 100644 index 0000000..0cd5ba9 --- /dev/null +++ b/static/motifbuttonpressed.css @@ -0,0 +1,7 @@ +.top-buttons a:last-child{ + background-color: var(--light-border); + border-style: inset; + border-color: var(--light-border); + border-radius: 1.2rem; + border-width: 0.3rem; +} \ No newline at end of file diff --git a/static/script.js b/static/script.js new file mode 100644 index 0000000..8a2d904 --- /dev/null +++ b/static/script.js @@ -0,0 +1,25 @@ +function getAnchor() { + return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null; +} + +window.addEventListener('load', (event) => { + preclicked = getAnchor(); + console.log(preclicked); + const radiobutton = document.getElementById(preclicked); + console.log(radiobutton); + if (radiobutton){ + radiobutton.checked = true; + + } + label = document.getElementById(`${preclicked}_label`) + label.scrollIntoView(); +}); + +function collapse(clickevent){ + const radiobutton = document.getElementById(clickevent.target.htmlFor); + if (radiobutton.checked){ + radiobutton.checked = false; + clickevent.preventDefault(); + } +} + diff --git a/static/songbuttonpressed.css b/static/songbuttonpressed.css new file mode 100644 index 0000000..66a25f8 --- /dev/null +++ b/static/songbuttonpressed.css @@ -0,0 +1,7 @@ +.top-buttons a:first-child{ + background-color: var(--light-border); + border-style: inset; + border-color: var(--light-border); + border-radius: 1.2rem; + border-width: 0.3rem; +} \ No newline at end of file diff --git a/static/style.css b/static/style.css index 3687229..d083281 100644 --- a/static/style.css +++ b/static/style.css @@ -1,12 +1,13 @@ -/* body{ - max-width:50rem;margin-left:auto;margin-right:auto; -} */ - :root{ --light-block: lch(90% 25 85); --light-box: lch(100% 0 90); --light-back: linear-gradient(90deg, lch(95% 20 260), white 25%, white 75%, lch(95% 20 260)); --light-border: lch(80% 45 85); + font-family: "Zen Maru Gothic", sans-serif; +} + +h1, h2, h3, h4, h5, h6{ + font-family: "Shippori Mincho", serif; } body{ @@ -39,11 +40,12 @@ footer{ .top-buttons{ display: flex; margin: 0; - padding: 1rem; - column-gap: 1rem; + padding: 1.2rem; + column-gap: .6rem; max-height: fit-content; } + .top-buttons a{ flex: auto; display: flex; @@ -51,21 +53,28 @@ footer{ justify-content: center; align-items: center; position: relative; + border-style: outset; + border-color: var(--light-border); + border-radius: 1.2rem; + border-width: 0.3rem; } + + .top-buttons a:nth-child(2){ flex: none; } -.top-buttons a::before{ +.top-buttons a:nth-child(2):before{ content: ""; position: absolute; bottom: 0; right: 0; border-style: outset; border-color: var(--light-border); - border-radius: 1rem; + border-radius: 1.2rem; + border-width: 0.3rem; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -73,6 +82,22 @@ footer{ height: 100%; } +/* .top-buttons a::before{ + content: ""; + position: absolute; + bottom: 0; + right: 0; + border-style: outset; + border-color: var(--light-border); + border-radius: 1.2rem; + border-width: 0.3rem; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; +} */ + .top-buttons li{ vertical-align: center; } @@ -81,8 +106,10 @@ footer{ display: block; } +/* SEARCH BAR */ + .search-bar{ - max-width: 50rem; + max-width: 64rem; width: 100%; height: 2rem; margin-left: auto; @@ -108,7 +135,7 @@ footer{ all: unset; background-color: white; width: 100%; - height: 1rem; + height: 1.2rem; } #search-results{ @@ -133,7 +160,7 @@ footer{ main{ background-color: var(--light-block); - max-width: 50rem; + max-width: 64rem; width: 100%; margin-left: auto; margin-right: auto; @@ -152,6 +179,7 @@ h1{ h2{ margin: 0; + font- } h3{ @@ -162,6 +190,37 @@ a{ text-decoration: none; } +/* HOME BUTTONS */ + +.home-title{ + padding: 4.8rem; + text-align: center; + border-style: solid; + border-top: 0; border-left: 0; border-right: 0; +} + +.home-nav{ + display: flex; + flex: auto; + justify-content: space-around; +} + +.home-button{ + border-style: outset; + border-color: var(--light-border); + border-radius: 1.2rem; + flex: auto; + display: flex; + flex-direction: column; + list-style: none; + justify-content: center; + align-items: center; + position: relative; +} + + +/* INDEX LISTS */ + .album-list{ display: flex; flex-direction: column; @@ -174,17 +233,22 @@ a{ flex-basis: 51%; } -.album-info{ - display: flex; - align-items: baseline; - /* border-style: solid; - border-top: 0; border-left: 0; border-right: 0; */ - margin: 1rem; - margin-bottom: 0.5rem; - background: var(--light-box); - position: sticky; - top: 0px; - gap: 1rem; +.album-icon{ + display: inline-block; + align-self: center; +} + +.date{ + margin-top: .3rem; margin-left: 2.4rem; +} + +/* INDEX ENTRIES */ + +.sort-box{ + border-style: solid; + border-left: 0; border-right: 0; border-top: 0; + border-color: black; + border-width: 1px; } .sort-box h2{ @@ -192,42 +256,52 @@ a{ } .sort-box.album{ - margin-bottom: 1rem; - + margin-bottom: 1.2rem; + display: flex; + align-items: center; + border-style: solid; + border-top: 0; border-left: 0; border-right: 0; + border-width: 1px; + margin: 1.2rem; margin-bottom: 0; + background: var(--light-block); + position: sticky; + top: 0; + gap: .6rem +} + +.date{ + font-size: small; } .sort-box.category{ - gap: 1rem; - margin-left: auto; margin-right: auto; + gap: 1.2rem; + margin-left: auto; margin-right: auto; margin-bottom: 1.2rem; width: 24rem; - margin-bottom: 1rem; + } -.sort-box.category h2{ - margin: 1rem; +.sort-box.category{ + margin: 1.2rem; margin-bottom: 0px; - border-style: solid; - border-color: var(--light-box); - background: var(--light-box); + background: var(--light-block); } .entry-box{ list-style: none; - min-height: 1.5rem; + min-height: 1.8rem; display: flex; - border-radius: 1rem 0% 0% 1rem; + border-radius: 1.2rem 0% 0% 1.2rem; background: linear-gradient(90deg, var(--light-box) 90%, rgba(255, 255, 255, 0) 100%); } .entry-box.song{ - margin-top: 0.5rem; margin-bottom: 0.5rem; margin-left: 1rem; margin-right: 1rem; + margin-top: .6rem; margin-bottom: .6rem; margin-left: 1.2rem; margin-right: 1.2rem; } .entry-box.motif{ - margin: 1rem; - margin-bottom: 0; + margin: 1.2rem; margin-bottom: 0; justify-content: center; - align-items: baseline; + align-items: center; } .entry-box.song li{ @@ -235,11 +309,12 @@ a{ flex: auto; flex-wrap: nowrap; justify-content: left; - column-gap: 1rem; - align-content: bottom; + /* align-content: bottom; */ white-space: nowrap; overflow: hidden; - height: 1.5rem; + text-overflow: ellipsis; + height: 1.8rem; + } .entry-box.song span{ @@ -247,18 +322,10 @@ a{ } .entry-box.song.empty{ - margin-top: 0; margin-bottom: 0; + margin-top: 0; margin-bottom: 0; margin-right: 2.4rem; background: none; } -.entry-box.song.full li span{ - color: black; -} - -.entry-box.song.empty li span{ - color: gray; -} - .entry-box.motif span{ color: black; vertical-align: middle; @@ -267,32 +334,53 @@ a{ .entry-box.motif::before{ content: "b"; - min-width: 4rem; visibility: hidden; margin-right: auto; } .motif-name{ text-align: center; + color: black; +} + +.track-number{ + min-width: 2.4rem; + margin-left: .6rem; + color: black; +} + +.track-name{ + color: black; +} + +.track-name-jp{ + margin-left: 1.2rem; + color: gray; +} + +.empty{ + color: gray; } .clip-count{ color: black; flex-wrap: nowrap; display: inline; - align-self: center; text-align: right; - min-width: 1.5rem; - margin-right: 1rem; + min-width: 0; + margin-right: 1.2rem; + min-width: 1.6rem; } .count-icon{ - width: 1rem; height: 1rem; - margin-left: auto; margin-right: 0.2rem; + width: 1.2rem; height: 1.2rem; + margin-left: auto; display: block; align-self: center; } +/* SONG INDEX ALBUM DROPDOWNS */ + .sort-box.album label{ cursor: pointer; } @@ -302,82 +390,91 @@ a{ } .sort-list{ - visibility: collapse; + display: none; +} + +.sort-box.album > *{ + pointer-events: none; +} + +.sort-box.album::after{ + content: "▼"; + margin-left: auto; } .collapse:checked ~ .sort-list{ - visibility: visible; + display:initial } +.collapse:checked ~ .sort-box.album::after{ + content: "▲"; +} + +/* ENTRY PAGE TITLES */ + .title-box{ - margin: 1rem; - border-style: solid; - border-color: var(--light-box); + margin: 1.2rem; margin-bottom: 1.2rem; background: var(--light-box); +} + +.eng-title{ display: flex; align-items: center; + /* margin-bottom: .6rem; */ } .title-box img{ - vertical-align: bottom; + align-self: center; + margin-left: .6rem; } .title-box h1{ - margin-left: .5rem; - max-width: 65%; + margin-left: .6rem; + min-width: 0; + font-size: calc(1.2rem + .6vw); } .title-jp{ - margin-left: 2rem; - max-width: 65%; + color: gray; + margin-right: 1.2rem; padding-bottom: .6rem; + text-align: right; } .title-album{ - margin-left: auto; - min-width: 2rem; + margin-left: auto; margin-right: .7rem; margin-top: .7rem; + align-self: flex-start; } +.title-album img{ + margin: 0; +} + +/* ENTRY PAGE DETAILS */ + .track-info{ display: flex; flex-wrap: wrap; - justify-content: center; - row-gap: 1rem; + justify-content: space-around; + gap: 1.2rem; } .track-info li{ list-style: none; } -.songpage-artist{ +.songpage-detail{ display: flex; flex-direction: column; - width: 23rem; - + min-width: 16rem; } -.songpage-artist ul{ - gap: 0.5rem; +.songpage-detail ul{ + gap: .6rem; } -.songpage-artist h2{ +.songpage-detail h2{ text-align: center; - margin-bottom: 1rem; -} - -.songpage-album{ - display: flex; - flex-direction: column; - width: 23rem; - -} - -.songpage-album ul{ - gap: 0.5rem; -} - -.songpage-album h2{ - text-align: center; - margin-bottom: 1rem; + margin-bottom: 1.2rem; } .entrypage-connections{ @@ -388,11 +485,11 @@ a{ } .entrypage-connections h2{ text-align: center; - margin-bottom: 1rem; + margin-bottom: 1.2rem; } .entrypage-clip{ - margin-bottom: 1rem; + margin-bottom: 1.2rem; display: flex; flex-wrap: wrap-reverse; column-gap: 2rem; @@ -401,8 +498,8 @@ a{ } .clip-pointer{ - width: 12rem; - white-space: nowrap; + width: 18rem; + /* white-space: nowrap; */ text-align: center; } diff --git a/templates/base.html b/templates/base.html index dd33954..d3b1e7c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,9 +5,12 @@ {% block title required %}{% endblock %} - Eorzea Songbook + + {%block sheet %}{% endblock %} + diff --git a/templates/home.html b/templates/home.html index ba045b4..4da6bb2 100644 --- a/templates/home.html +++ b/templates/home.html @@ -3,11 +3,20 @@ {% block nav %}{% endblock %} {% block content %} -

The Eorzea Songbook

+

The Eorzea Songbook

-View Songs +

Explore the music of Final Fantasy XIV! Discover the recurring melodies in your favorite songs, or take a closer look at the motifs and their appearances.

-View Motifs +
+ + Song Index +

Songs

+ + + Motif Index +

Motifs

+ +
{% block footer %}{% endblock %} {% endblock %} \ No newline at end of file diff --git a/templates/motif.html b/templates/motif.html index b69635b..2947fec 100644 --- a/templates/motif.html +++ b/templates/motif.html @@ -2,14 +2,16 @@ {% block title %}{{ name }}{% endblock %} +{% block sheet %}{% endblock %} + {% block content %} -
-

Motif Icon {{ name }}

+
+ Motif Icon

{{ name }}

-

Songs Featured:

+

Featured In: