updates the website for Growing Light

2024-04-09 17:36:30 +10:00 · 2024-04-09 17:36:30 +10:00 · 793386319b
commit 793386319b
parent 2b12db093b
28 changed files with 618 additions and 650 deletions
--- a/app.py
+++ b/app.py
@ -146,7 +146,7 @@ def songindex():

    song_info = db.execute('''
    select
-        song_album.song_id, album_id, track, song.name, song.name_jp, count(clip.song_id)
+        song_album.song_id, album_id, (select code from album where id = (select min(album_id) from song_album where song_album.song_id=song.id)) as earliest_album, track, song.name, song.name_jp, count(clip.song_id)
    from
        song_album
    join
@ -213,44 +213,6 @@ def motifindex():
        motif_info = motif_info
    )

-# ALBUM PAGES
-
-@app.route('/album/<int:id>')
-def albumpage(id):
-    
-    db = openbook()
-
-    album_info = db.execute('''
-    select
-        name, date
-    from
-        album
-    where
-        id = ?
-    ''',
-    (id,)
-    ).fetchone()
-
-    song_info = db.execute('''
-    select
-        song_id, track, song.name, song.name_jp
-    from
-        song_album
-    join
-        song
-    on
-        song_album.song_id=song.id
-    where
-        album_id = ?
-    ''',
-    (id,)
-    ).fetchall()
-
-    return flask.render_template('album.jinja',
-        album_info=album_info,
-        song_info=song_info
-    )
-
 # MOTIF PAGES

@app.route('/motif/<int:id>')
@ -275,7 +237,7 @@ def motifpage(id):

    clip_info = db.execute('''
    select
-        song_id, motif_id, song.name, feature
+        song_id, motif_id, song.name, feature, song.location
    from
        clip
    join
@ -385,7 +347,11 @@ def songpage(id):

    clip_info = db.execute('''
    select
-        song_id, motif_id, motif.name
+        song_id,
+        motif_id,
+        motif.name,
+        (select song_id from clip where motif_id = motif.id and feature == 1) as feature_clip,
+        (select name from song where (select song_id from clip where motif_id = motif.id and feature == 1) = song.id) as feature_name
    from
        clip
    join
--- a/build_clips.py
+++ b/build_clips.py
@ -29,7 +29,7 @@ for song, motif, start, duration, album, track in db.execute('''
    album_folder = f'{album - 1:02}. *'
    song_file = f'{track:03}. *.flac'

-    source = glob.glob(f"/mnt/petal/media/Audio/ffxiv/{album_folder}/{song_file}")
+    source = glob.glob(f"/mnt/petal/media/Audio/Music/Soundtracks/Final Fantasy XIV/{album_folder}/{song_file}")
    assert(len(source) == 1)
    source = source[0]

--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@ -7,4 +7,5 @@ services:
    volumes:
      - type: bind
        source: ./suggestions.csv
-        target: /opt/app/suggestions.csv
+        target: /opt/app/suggestions.csv
+    restart: unless-stopped
--- a/reference.ods
+++ b/reference.ods
--- a/reference_clips.ods
+++ b/reference_clips.ods
--- a/static/albumicons/1.0.svg
+++ b/static/albumicons/1.0.svg
@ -1,63 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="11.213148mm"
-   height="6.1305523mm"
-   viewBox="0 0 11.213148 6.1305523"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   sodipodi:docname="album icons.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="3.5705387"
-     inkscape:cx="22.965722"
-     inkscape:cy="123.79084"
-     inkscape:window-width="2560"
-     inkscape:window-height="1377"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(17.134108,-0.05239776)">
-    <path
-       id="rect1491"
-       style="fill:#14b290;fill-opacity:1;stroke-width:0.264583"
-       d="m -15.134108,0.05239776 h 7.2131476 c 1.108,0 2,0.892 2,2.00000004 V 4.18295 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 V 2.0523978 c 0,-1.10800004 0.892,-2.00000004 2,-2.00000004 z"
-       inkscape:export-filename="album icons\rect1491.svg"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-    <path
-       d="m -13.444384,1.0630206 v 4.0404049 h -0.868163 V 2.044183 q -0.07166,0.06339 -0.170877,0.1212673 -0.09646,0.055122 -0.206705,0.1019747 -0.110243,0.044097 -0.228754,0.07717 -0.118511,0.030317 -0.234267,0.044097 V 1.6555765 q 0.338998,-0.099219 0.63941,-0.2535588 0.300412,-0.1543401 0.542946,-0.3389971 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11800" />
-    <path
-       d="m -11.735618,5.1723274 q -0.214973,0 -0.358289,-0.1322916 -0.143316,-0.1322916 -0.143316,-0.3252168 0,-0.1984373 0.146072,-0.3252167 0.148828,-0.1267795 0.369314,-0.1267795 0.223242,0 0.363802,0.1295355 0.143315,0.1267795 0.143315,0.3224607 0,0.2011935 -0.146071,0.3307289 -0.143316,0.1267795 -0.374827,0.1267795 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11802" />
-    <path
-       d="m -9.3571255,5.1723274 q -1.4111105,0 -1.4111105,-1.9816175 0,-1.0280157 0.380339,-1.5654502 0.383094,-0.5401905 1.1079415,-0.5401905 1.3780372,0 1.3780372,2.0146903 0,1.003211 -0.3775822,1.5378894 -0.3748261,0.5346785 -1.077625,0.5346785 z m 0.038585,-3.4230443 q -0.5649952,0 -0.5649952,1.4193782 0,1.3366961 0.5539709,1.3366961 0.5401906,0 0.5401906,-1.3780372 0,-1.3780371 -0.5291663,-1.3780371 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11804" />
-  </g>
-</svg>
--- a/static/albumicons/2.0.svg
+++ b/static/albumicons/2.0.svg
@ -1,63 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="11.213148mm"
-   height="6.1305513mm"
-   viewBox="0 0 11.213148 6.1305513"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   sodipodi:docname="album icons.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="3.5705387"
-     inkscape:cx="22.965722"
-     inkscape:cy="123.79084"
-     inkscape:window-width="2560"
-     inkscape:window-height="1377"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(17.134108,-7.2047088)">
-    <path
-       id="rect1497"
-       style="fill:#2f56e9;fill-opacity:1;stroke-width:0.264583"
-       d="m -15.134108,7.2047091 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.1305519 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 V 9.2047091 c 0,-1.108 0.892,-2 2,-2 z"
-       inkscape:export-filename="album icons\rect1497.svg"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-    <path
-       d="m -14.377315,11.533645 h 1.675693 v 0.722091 h -2.629294 V 11.95808 q 0,-0.303168 0.101974,-0.542946 0.101975,-0.242535 0.256315,-0.432704 0.15434,-0.192925 0.336241,-0.338997 0.184657,-0.148828 0.350022,-0.267339 0.173632,-0.124024 0.303168,-0.237023 0.132291,-0.112999 0.220486,-0.2232417 0.09095,-0.1129991 0.135048,-0.2259981 0.0441,-0.1157551 0.0441,-0.2452906 0,-0.2535589 -0.143316,-0.3830944 -0.143316,-0.1295355 -0.438216,-0.1295355 -0.509874,0 -0.97565,0.405143 V 8.570865 q 0.515386,-0.333485 1.163063,-0.333485 0.300412,0 0.537435,0.079926 0.239778,0.07717 0.405142,0.223242 0.165365,0.1460719 0.250803,0.3555336 0.0882,0.2067055 0.0882,0.4630205 0,0.2728513 -0.08544,0.485069 -0.08268,0.2122179 -0.223242,0.3858509 -0.137803,0.173632 -0.319704,0.319704 -0.181901,0.143316 -0.377582,0.278364 -0.132292,0.09371 -0.256315,0.187413 -0.121268,0.09095 -0.214974,0.181901 -0.09371,0.08819 -0.148828,0.173632 -0.05512,0.08544 -0.05512,0.162609 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11858" />
-    <path
-       d="m -11.557851,12.324638 q -0.214974,0 -0.358289,-0.132291 -0.143316,-0.132292 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325217 0.148828,-0.126779 0.369314,-0.126779 0.223242,0 0.363801,0.129535 0.143316,0.12678 0.143316,0.322461 0,0.201193 -0.146072,0.330729 -0.143316,0.126779 -0.374826,0.126779 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11860" />
-    <path
-       d="m -9.1793587,12.324638 q -1.4111103,0 -1.4111103,-1.981617 0,-1.0280159 0.380338,-1.5654504 0.3830948,-0.5401906 1.1079423,-0.5401906 1.3780372,0 1.3780372,2.01469 0,1.003211 -0.3775822,1.53789 -0.3748261,0.534678 -1.077625,0.534678 z m 0.038585,-3.4230441 q -0.5649952,0 -0.5649952,1.4193781 0,1.336696 0.5539709,1.336696 0.5401906,0 0.5401906,-1.378037 0,-1.3780371 -0.5291663,-1.3780371 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11862" />
-  </g>
-</svg>
--- a/static/albumicons/2.5.svg
+++ b/static/albumicons/2.5.svg
@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="11.213148mm"
-   height="6.1305513mm"
-   viewBox="0 0 11.213148 6.1305513"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   sodipodi:docname="album icons.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="3.5705387"
-     inkscape:cx="11.062756"
-     inkscape:cy="103.06568"
-     inkscape:window-width="2560"
-     inkscape:window-height="1377"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(17.134108,-14.226025)">
-    <path
-       id="rect1503"
-       style="fill:#5c812b;stroke-width:0.264583"
-       d="m -15.134108,14.226025 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z" />
-    <path
-       d="m -14.284987,18.55496 h 1.675694 v 0.722092 h -2.629295 v -0.297656 q 0,-0.303168 0.101974,-0.542947 0.101975,-0.242534 0.256315,-0.432703 0.15434,-0.192926 0.336241,-0.338998 0.184657,-0.148828 0.350022,-0.267339 0.173633,-0.124023 0.303168,-0.237022 0.132292,-0.112999 0.220486,-0.223242 0.09095,-0.112999 0.135048,-0.225998 0.0441,-0.115755 0.0441,-0.245291 0,-0.253559 -0.143316,-0.383094 -0.143316,-0.129536 -0.438216,-0.129536 -0.509874,0 -0.97565,0.405143 v -0.766188 q 0.515386,-0.333485 1.163063,-0.333485 0.300412,0 0.537435,0.07993 0.239778,0.07717 0.405143,0.223242 0.165364,0.146072 0.250802,0.355533 0.0882,0.206706 0.0882,0.463021 0,0.272851 -0.08544,0.485069 -0.08268,0.212218 -0.223242,0.38585 -0.137803,0.173633 -0.319704,0.319705 -0.181901,0.143316 -0.377582,0.278363 -0.132292,0.09371 -0.256315,0.187413 -0.121268,0.09095 -0.214974,0.181901 -0.09371,0.08819 -0.148828,0.173633 -0.05512,0.08544 -0.05512,0.162608 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11866" />
-    <path
-       d="m -11.465523,19.345954 q -0.214973,0 -0.358289,-0.132292 -0.143316,-0.132291 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325216 0.148828,-0.12678 0.369314,-0.12678 0.223242,0 0.363802,0.129536 0.143315,0.126779 0.143315,0.32246 0,0.201194 -0.146072,0.330729 -0.143315,0.12678 -0.374826,0.12678 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11868" />
-    <path
-       d="m -10.299703,19.175077 v -0.74414 q 0.4051426,0.248047 0.8626509,0.248047 0.3445093,0 0.5374345,-0.162609 0.1956813,-0.165364 0.1956813,-0.446484 0,-0.587043 -0.8295784,-0.587043 -0.3059243,0 -0.7055553,0.04685 l 0.148828,-2.20486 h 2.0918607 v 0.711068 h -1.4276465 l -0.055122,0.790993 q 0.2122177,-0.01654 0.3665579,-0.01654 0.6090924,0 0.9536017,0.319705 0.3445093,0.319705 0.3445093,0.859895 0,0.598068 -0.4106551,0.978407 -0.4106551,0.377582 -1.113454,0.377582 -0.5705074,0 -0.959114,-0.170877 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11870" />
-  </g>
-</svg>
--- a/static/albumicons/3.0.svg
+++ b/static/albumicons/3.0.svg
@ -1,63 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="11.213148mm"
-   height="6.1305504mm"
-   viewBox="0 0 11.213148 6.1305504"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   sodipodi:docname="album icons.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="3.5705387"
-     inkscape:cx="22.965722"
-     inkscape:cy="101.38526"
-     inkscape:window-width="2560"
-     inkscape:window-height="1377"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(17.134108,-21.509332)">
-    <path
-       id="rect1509"
-       style="fill:#8a800f;fill-opacity:1;stroke-width:0.264583"
-       d="m -15.134108,21.509331 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z"
-       inkscape:export-filename="album icons\rect1509.svg"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-    <path
-       d="m -15.284064,26.430823 v -0.757921 q 0.396875,0.289388 0.926041,0.289388 0.333485,0 0.518142,-0.143316 0.187413,-0.143316 0.187413,-0.399631 0,-0.264583 -0.23151,-0.407899 -0.228754,-0.143316 -0.631141,-0.143316 h -0.366558 v -0.66697 h 0.338997 q 0.771701,0 0.771701,-0.512629 0,-0.482313 -0.592556,-0.482313 -0.396875,0 -0.771701,0.256315 v -0.711068 q 0.416167,-0.209461 0.970138,-0.209461 0.606337,0 0.942578,0.272851 0.338997,0.272851 0.338997,0.708311 0,0.774457 -0.785481,0.970138 v 0.01378 q 0.418923,0.05236 0.661457,0.305924 0.242535,0.250803 0.242535,0.617361 0,0.553971 -0.405143,0.876431 -0.405143,0.322461 -1.118966,0.322461 -0.611849,0 -0.994943,-0.198437 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11874" />
-    <path
-       d="m -11.604705,26.62926 q -0.214974,0 -0.358289,-0.132292 -0.143316,-0.132291 -0.143316,-0.325216 0,-0.198438 0.146072,-0.325217 0.148828,-0.12678 0.369314,-0.12678 0.223242,0 0.363801,0.129536 0.143316,0.126779 0.143316,0.322461 0,0.201193 -0.146072,0.330728 -0.143316,0.12678 -0.374826,0.12678 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11876" />
-    <path
-       d="m -9.2262128,26.62926 q -1.4111102,0 -1.4111102,-1.981618 0,-1.028015 0.380338,-1.56545 0.3830948,-0.54019 1.1079423,-0.54019 1.3780372,0 1.3780372,2.01469 0,1.003211 -0.3775822,1.537889 -0.3748261,0.534679 -1.0776251,0.534679 z m 0.038585,-3.423044 q -0.5649952,0 -0.5649952,1.419378 0,1.336696 0.5539709,1.336696 0.5401905,0 0.5401905,-1.378037 0,-1.378037 -0.5291662,-1.378037 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11878" />
-  </g>
-</svg>
--- a/static/albumicons/3.5.svg
+++ b/static/albumicons/3.5.svg
@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="11.213148mm"
-   height="6.1305523mm"
-   viewBox="0 0 11.213148 6.1305523"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   sodipodi:docname="album icons.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="3.5705387"
-     inkscape:cx="11.062756"
-     inkscape:cy="103.06568"
-     inkscape:window-width="2560"
-     inkscape:window-height="1377"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(17.134108,-28.845033)">
-    <path
-       id="rect1515"
-       style="fill:#9f6800;stroke-width:0.264583"
-       d="m -15.134108,28.845034 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z" />
-    <path
-       d="m -15.191735,33.766525 v -0.75792 q 0.396875,0.289388 0.926041,0.289388 0.333485,0 0.518142,-0.143316 0.187413,-0.143316 0.187413,-0.399631 0,-0.264583 -0.23151,-0.407899 -0.228754,-0.143316 -0.631141,-0.143316 h -0.366558 v -0.66697 h 0.338997 q 0.771701,0 0.771701,-0.512629 0,-0.482313 -0.592556,-0.482313 -0.396875,0 -0.771701,0.256314 v -0.711067 q 0.416167,-0.209461 0.970138,-0.209461 0.606337,0 0.942578,0.272851 0.338997,0.272851 0.338997,0.708311 0,0.774457 -0.785481,0.970138 v 0.01378 q 0.418923,0.05236 0.661458,0.305924 0.242534,0.250803 0.242534,0.61736 0,0.553971 -0.405143,0.876432 -0.405143,0.322461 -1.118966,0.322461 -0.611849,0 -0.994943,-0.198438 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11882" />
-    <path
-       d="m -11.512376,33.964963 q -0.214974,0 -0.358289,-0.132292 -0.143316,-0.132291 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325216 0.148828,-0.12678 0.369314,-0.12678 0.223242,0 0.363801,0.129536 0.143316,0.126779 0.143316,0.32246 0,0.201194 -0.146072,0.330729 -0.143316,0.12678 -0.374826,0.12678 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11884" />
-    <path
-       d="m -10.346556,33.794086 v -0.74414 q 0.4051425,0.248047 0.8626508,0.248047 0.3445093,0 0.5374345,-0.162609 0.1956813,-0.165364 0.1956813,-0.446484 0,-0.587043 -0.8295784,-0.587043 -0.3059242,0 -0.7055552,0.04685 l 0.148828,-2.20486 h 2.0918606 v 0.711068 h -1.4276465 l -0.055122,0.790993 q 0.2122178,-0.01654 0.3665579,-0.01654 0.6090924,0 0.9536017,0.319705 0.3445093,0.319705 0.3445093,0.859895 0,0.598068 -0.410655,0.978407 -0.4106551,0.377582 -1.1134541,0.377582 -0.5705073,0 -0.9591139,-0.170877 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11886" />
-  </g>
-</svg>
--- a/static/albumicons/4.0.svg
+++ b/static/albumicons/4.0.svg
@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="11.213148mm"
-   height="6.1305542mm"
-   viewBox="0 0 11.213148 6.1305542"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   sodipodi:docname="album icons.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="3.5705387"
-     inkscape:cx="11.062756"
-     inkscape:cy="103.06568"
-     inkscape:window-width="2560"
-     inkscape:window-height="1377"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(17.134108,-36.023543)">
-    <path
-       id="rect1521"
-       style="fill:#910009;stroke-width:0.264583"
-       d="m -15.134108,36.023544 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130553 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130553 c 0,-1.108 0.892,-2 2,-2 z" />
-    <path
-       d="m -12.875254,37.122359 v 2.491491 h 0.474045 v 0.650434 h -0.474045 v 0.810286 h -0.79375 v -0.810286 h -1.722546 v -0.68075 q 0.228754,-0.256315 0.474045,-0.559484 0.24529,-0.305924 0.474045,-0.628385 0.228754,-0.32246 0.424435,-0.647677 0.198437,-0.327973 0.336241,-0.625629 z m -1.736327,2.491491 h 0.942577 v -1.380793 q -0.09646,0.179145 -0.209461,0.363802 -0.112999,0.181901 -0.237023,0.361046 -0.124023,0.176388 -0.250802,0.344509 -0.12678,0.165364 -0.245291,0.311436 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11890" />
-    <path
-       d="m -11.497217,41.143472 q -0.214974,0 -0.35829,-0.132292 -0.143316,-0.132292 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325217 0.148828,-0.126779 0.369314,-0.126779 0.223242,0 0.363802,0.129536 0.143316,0.126779 0.143316,0.32246 0,0.201194 -0.146072,0.330729 -0.143316,0.12678 -0.374826,0.12678 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11892" />
-    <path
-       d="m -9.1187251,41.143472 q -1.4111099,0 -1.4111099,-1.981618 0,-1.028016 0.380338,-1.56545 0.3830945,-0.540191 1.107942,-0.540191 1.3780372,0 1.3780372,2.014691 0,1.003211 -0.3775822,1.537889 -0.3748261,0.534679 -1.0776251,0.534679 z m 0.038585,-3.423045 q -0.5649953,0 -0.5649953,1.419379 0,1.336696 0.553971,1.336696 0.5401905,0 0.5401905,-1.378038 0,-1.378037 -0.5291662,-1.378037 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11894" />
-  </g>
-</svg>
--- a/static/albumicons/5.0.svg
+++ b/static/albumicons/5.0.svg
@ -1,63 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="11.213148mm"
-   height="6.1305504mm"
-   viewBox="0 0 11.213148 6.1305504"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   sodipodi:docname="album icons.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="3.5705387"
-     inkscape:cx="22.965722"
-     inkscape:cy="123.79084"
-     inkscape:window-width="2560"
-     inkscape:window-height="1377"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(17.134108,-43.778434)">
-    <path
-       id="rect1527"
-       style="fill:#5900d6;fill-opacity:1;stroke-width:0.264583"
-       d="m -15.134108,43.778431 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z"
-       inkscape:export-filename="album icons\rect1527.svg"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-    <path
-       d="m -15.249613,48.727482 v -0.74414 q 0.405143,0.248046 0.862652,0.248046 0.344509,0 0.537434,-0.162608 0.195681,-0.165365 0.195681,-0.446484 0,-0.587044 -0.829578,-0.587044 -0.305924,0 -0.705555,0.04685 l 0.148828,-2.204859 h 2.09186 v 0.711067 h -1.427646 l -0.05512,0.790993 q 0.212218,-0.01654 0.366558,-0.01654 0.609093,0 0.953602,0.319704 0.344509,0.319705 0.344509,0.859896 0,0.598068 -0.410655,0.978406 -0.410655,0.377582 -1.113454,0.377582 -0.570507,0 -0.959114,-0.170876 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11898" />
-    <path
-       d="m -11.639155,48.898358 q -0.214974,0 -0.35829,-0.132291 -0.143316,-0.132292 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325217 0.148828,-0.126779 0.369314,-0.126779 0.223242,0 0.363802,0.129535 0.143316,0.12678 0.143316,0.322461 0,0.201193 -0.146072,0.330729 -0.143316,0.126779 -0.374826,0.126779 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11900" />
-    <path
-       d="m -9.2606633,48.898358 q -1.4111097,0 -1.4111097,-1.981617 0,-1.028016 0.380338,-1.56545 0.3830943,-0.540191 1.1079418,-0.540191 1.3780371,0 1.3780371,2.01469 0,1.003211 -0.3775821,1.53789 -0.3748261,0.534678 -1.0776251,0.534678 z m 0.038585,-3.423044 q -0.5649953,0 -0.5649953,1.419378 0,1.336696 0.553971,1.336696 0.5401905,0 0.5401905,-1.378037 0,-1.378037 -0.5291662,-1.378037 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11902" />
-  </g>
-</svg>
--- a/static/albumicons/5.5.svg
+++ b/static/albumicons/5.5.svg
@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="11.213148mm"
-   height="6.1305542mm"
-   viewBox="0 0 11.213148 6.1305542"
-   version="1.1"
-   id="svg5"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs2" />
-  <g
-     id="layer1"
-     transform="translate(17.134108,-50.485358)">
-    <path
-       id="rect1533"
-       style="fill:#46658b;fill-opacity:1;stroke-width:0.264583"
-       d="m -15.134108,50.485359 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z" />
-    <path
-       d="m -15.157284,55.43441 v -0.74414 q 0.405142,0.248046 0.862651,0.248046 0.344509,0 0.537434,-0.162608 0.195682,-0.165364 0.195682,-0.446484 0,-0.587044 -0.829579,-0.587044 -0.305924,0 -0.705555,0.04685 l 0.148828,-2.204859 h 2.091861 v 0.711067 h -1.427647 l -0.05512,0.790994 q 0.212217,-0.01654 0.366557,-0.01654 0.609093,0 0.953602,0.319705 0.344509,0.319704 0.344509,0.859895 0,0.598068 -0.410655,0.978406 -0.410655,0.377582 -1.113454,0.377582 -0.570507,0 -0.959113,-0.170876 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11906" />
-    <path
-       d="m -11.546827,55.605286 q -0.214974,0 -0.35829,-0.132291 -0.143316,-0.132292 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325217 0.148828,-0.126779 0.369314,-0.126779 0.223242,0 0.363802,0.129535 0.143316,0.12678 0.143316,0.322461 0,0.201194 -0.146072,0.330729 -0.143316,0.126779 -0.374826,0.126779 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11908" />
-    <path
-       d="m -10.381008,55.43441 v -0.74414 q 0.405143,0.248046 0.8626513,0.248046 0.3445093,0 0.5374345,-0.162608 0.1956813,-0.165364 0.1956813,-0.446484 0,-0.587044 -0.8295784,-0.587044 -0.3059242,0 -0.7055547,0.04685 l 0.148828,-2.204859 h 2.0918601 v 0.711067 h -1.4276465 l -0.055121,0.790994 q 0.2122177,-0.01654 0.3665578,-0.01654 0.6090925,0 0.9536017,0.319705 0.3445093,0.319704 0.3445093,0.859895 0,0.598068 -0.410655,0.978406 -0.4106551,0.377582 -1.1134541,0.377582 -0.5705073,0 -0.9591143,-0.170876 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11910" />
-  </g>
-</svg>
--- a/static/albumicons/6.0.svg
+++ b/static/albumicons/6.0.svg
@ -1,63 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="11.213148mm"
-   height="6.1305542mm"
-   viewBox="0 0 11.213148 6.1305542"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   sodipodi:docname="album icons.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="3.5705387"
-     inkscape:cx="22.965722"
-     inkscape:cy="123.79084"
-     inkscape:window-width="2560"
-     inkscape:window-height="1377"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(17.134108,-57.506678)">
-    <path
-       id="rect1539"
-       style="fill:#808080;fill-opacity:1;stroke-width:0.264583"
-       d="m -15.134108,57.506676 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z"
-       inkscape:export-filename="album icons\rect1539.svg"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-    <path
-       d="m -12.523855,61.243054 q 0,0.292144 -0.101975,0.545702 -0.101975,0.253559 -0.283876,0.440972 -0.1819,0.184657 -0.432703,0.292144 -0.250803,0.104731 -0.548459,0.104731 -0.333485,0 -0.598068,-0.124023 -0.261827,-0.124024 -0.443728,-0.35829 -0.181901,-0.237022 -0.278364,-0.578776 -0.09646,-0.341753 -0.09646,-0.774457 0,-0.509873 0.124023,-0.923284 0.12678,-0.416168 0.35829,-0.711068 0.234266,-0.2949 0.564995,-0.454752 0.330729,-0.162608 0.74414,-0.162608 0.457508,0 0.711067,0.107487 v 0.727603 q -0.300412,-0.170876 -0.655945,-0.170876 -0.220486,0 -0.399631,0.08544 -0.179145,0.08544 -0.30868,0.242535 -0.12678,0.157096 -0.201194,0.380338 -0.07166,0.220486 -0.07717,0.493337 h 0.01654 q 0.28112,-0.388606 0.829579,-0.388606 0.24529,0 0.443728,0.08819 0.198437,0.08819 0.338997,0.250803 0.14056,0.159852 0.21773,0.38585 0.07717,0.225998 0.07717,0.501606 z m -0.851627,0.05512 q 0,-0.636653 -0.520898,-0.636653 -0.118511,0 -0.214974,0.0441 -0.09646,0.0441 -0.165364,0.124024 -0.0689,0.07993 -0.107487,0.190169 -0.03583,0.107487 -0.03583,0.239778 0,0.146072 0.03858,0.272851 0.03858,0.12678 0.107487,0.223242 0.07166,0.09371 0.16812,0.148829 0.09646,0.05512 0.214974,0.05512 0.118511,0 0.212218,-0.04685 0.09646,-0.04961 0.162608,-0.135048 0.0689,-0.08819 0.104731,-0.209462 0.03583,-0.124023 0.03583,-0.270095 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11914" />
-    <path
-       d="m -11.581278,62.626603 q -0.214974,0 -0.358289,-0.132292 -0.143316,-0.132291 -0.143316,-0.325216 0,-0.198438 0.146072,-0.325217 0.148828,-0.12678 0.369314,-0.12678 0.223242,0 0.363801,0.129536 0.143316,0.126779 0.143316,0.322461 0,0.201193 -0.146072,0.330729 -0.143316,0.126779 -0.374826,0.126779 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11916" />
-    <path
-       d="m -9.2027857,62.626603 q -1.4111103,0 -1.4111103,-1.981617 0,-1.028016 0.380338,-1.565451 0.3830948,-0.54019 1.1079423,-0.54019 1.3780372,0 1.3780372,2.01469 0,1.003211 -0.3775822,1.53789 -0.3748261,0.534678 -1.077625,0.534678 z m 0.038585,-3.423044 q -0.5649952,0 -0.5649952,1.419378 0,1.336696 0.5539709,1.336696 0.5401906,0 0.5401906,-1.378037 0,-1.378037 -0.5291663,-1.378037 z"
-       style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
-       id="path11918" />
-  </g>
-</svg>
--- a/static/cliparrow-horizontal.svg
+++ b/static/cliparrow-horizontal.svg
@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   preserveAspectRatio="none"
+   width="0.9587754mm"
+   height="0.28485018mm"
+   viewBox="0 0 0.9587754 0.28485018"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   sodipodi:docname="cliparrow.svg"
+   inkscape:export-filename="cliparrow-vertical.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="128"
+     inkscape:cx="284.54687"
+     inkscape:cy="127.53516"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-74.942545,-33.744746)">
+    <path
+       id="rect1"
+       style="fill:#ffffff;stroke-width:4.80801"
+       d="m 75.901315,33.744746 v 0.08753 l -0.479387,0.19732 -0.479387,-0.19732 v -0.08753 l 0.479387,0.19732 z"
+       sodipodi:nodetypes="ccccccc"
+       inkscape:export-filename="cliparrow.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+  </g>
+</svg>
--- a/static/cliparrow-vertical.svg
+++ b/static/cliparrow-vertical.svg
@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="0.28485018mm"
+   height="0.95877546mm"
+   viewBox="0 0 0.28485018 0.95877546"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   sodipodi:docname="cliparrow.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="128"
+     inkscape:cx="284.54687"
+     inkscape:cy="127.53516"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-75.279505,-33.407783)">
+    <path
+       id="rect1"
+       style="fill:#ffffff;stroke-width:4.80801"
+       d="m 75.279503,33.407784 h 0.08753 l 0.19732,0.479387 -0.19732,0.479387 h -0.08753 l 0.19732,-0.479387 z"
+       sodipodi:nodetypes="ccccccc" />
+  </g>
+</svg>
--- a/static/style.css
+++ b/static/style.css
@ -18,7 +18,7 @@
    :root{
        --block: lch(20% 0 75);
        --box: lch(40% 2.5 75);
-        --back: radial-gradient(lch(10% 0 75) 50%, black );
+        --back: radial-gradient(lch(10% 0 75) 42%, black );
        --search-back: lch(35% 0 75);
        --thick-border: lch(60% 10 75);
        --thin-border: lch(60% 10 75);
@ -198,13 +198,13 @@ header{
    color: lch(90% 25 85);
 }

-.home-title p{
+.home-title h4{
    position: absolute;
    right: .3rem;
    bottom: .3rem;
-    /* font-size: small; */
+    font-size: small;
    margin: 0;
-    color: lch(80% 50 50);
+    color: lch(90% 25 85);
 }

 .home-body{
@ -217,13 +217,12 @@ header{
 }

 .home-body p{
-    margin-left: 1.2rem; margin-right: 1.2rem; margin-top: .6rem;
+    margin-left: 1.2rem; margin-right: 1.2rem; margin-top: .6rem; margin-bottom: 1.2rem;
    text-align: center;
 }

 .home-nav{
    display: flex; gap: 1.2rem;
-    /* border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0; */
    margin: 1.2rem; margin-bottom: 0;
    padding-bottom: 1.2rem;
 }
@ -238,6 +237,13 @@ header{
    padding-top: 1.2rem; padding-bottom: 1.2rem;
 }

+.home-clips{
+    display: flex; flex-direction: column; justify-items: center;
+    width: min-content;
+    gap: .6rem;
+    margin: auto;
+}
+

 /* SEARCH BAR */

@ -327,7 +333,7 @@ header{
    display: block;
 }

-.search-icon.album img{
+.search-icon.album svg{
    display: block;
    height: 1.2rem;
    margin-left: auto;
@ -357,6 +363,7 @@ main ul{
    display: flex; flex-direction: column;
    margin: 0;
    padding-left: 0;
+    align-items: center;
 }

 /* FOOTER */
@ -411,6 +418,7 @@ footer{
 .album-icon{
    display: inline-block;
    align-self: center;
+    fill: var(--text);
 }

 /* INDEX BLOCKS */
@ -518,6 +526,15 @@ footer{
    color: var(--light-box-text);
 }

+.track-earliest{
+    line-height: 0;
+    margin-right: .3rem;
+}
+
+.track-earliest svg{
+    height: 1.2rem;
+}
+
 .empty{
    color: var(--light-text);
 }
@ -596,7 +613,7 @@ footer{
    margin-left: auto;
 }

-.title-album img{
+.title-album svg{
    margin: 0;
    display: block;
    margin-right: .6rem;
@ -629,7 +646,7 @@ footer{
 }

 .songpage-detail li{
-    display: flex; align-items: baseline; gap: .6rem;
+    display: flex; align-items: flex-end; gap: .6rem;
    flex-wrap: wrap;
 }

@ -640,6 +657,10 @@ footer{
 }

 .songpage-img{
+    display: flex;
+}
+
+.songpage-img svg{
    display: inline-block;
    height: 1.2rem;
    align-self: flex-end;
@ -655,8 +676,6 @@ footer{
    text-align: center;
 }

-
-
 .entrypage-connections{
    display: flex; flex-direction: column;
    width: 100%;
@ -667,12 +686,22 @@ footer{
    margin-bottom: 1.2rem;
 }

-.entrypage-clip{
-    display: flex; flex-wrap: wrap-reverse;
+.clip{
+    display: flex; flex-direction: column; align-items: center;
+    gap: .3rem;    padding: .3rem;
+}
+
+.entrypage-motif{
+    display: flex; flex-direction: column; align-items: center;
    margin-bottom: 1.2rem;
-    column-gap: 2.4rem; row-gap: .6rem;
-    justify-content: center;
-    align-items: center;
+
+}
+
+.entrypage-clips{
+    display: flex; align-items: stretch; flex-wrap: wrap;
+    margin-top: .6rem;
+    background-color: var(--box);
+    max-width: 42rem;
 }

 .connection-icon{
@ -680,19 +709,111 @@ footer{
    width: 1.2rem; height: 1.2rem;
 }

-.clip-pointer{
+.clip-title{
    display: flex; justify-content: center; align-items: center;
-    width: 18rem;
+    max-width: 19rem;
    gap: .3rem;
    text-align: center;
+    margin: auto;
+}
+
+.clip-title::after{
+    content: '';
+    width: 1.2rem;
 }

 .clip-album-icon{
+    line-height: 0;
+}
+
+.clip-album-icon svg{
    height: 1.2rem;
 }

-.clip-pointer a{
+.clip-title a, p{
+    flex-shrink: 1; margin: 0;
+}
+
+.soundslike{
+    width: 2.4rem;
+    background-color: var(--block);
+    mask-image: url( '/static/cliparrow-vertical.svg' );
+    mask-size: 100% 100%;
+}
+
+
+.motiflist{
+    align-items: unset;
+}
+
+.motifpage-list{
+    align-items: center;
+}
+
+.motifpage-list li{
+    list-style: none;
+}
+
+.motifpage-songs{
+    display: flex; align-items: center; flex-wrap: wrap;
+    /* gap: .3rem; */
+    width: 42rem;
+    background-color: var(--box);
+    margin-bottom: 1.8rem;
+    margin-top: .6rem;
+}
+
+.motifpage-info{
+    display: flex; align-items: center;
+    gap: .6rem;
    flex-shrink: 1;
+    width: 50%;
+    padding: .3rem;
+}
+
+.motifpage-albums{
+    height: min-content;
+}
+
+.motifpage-albums div{
+    display: flex;
+}
+
+.motifpage-location p{
+    text-align: left;
+    line-height: 1.2rem;
+}
+
+@media (max-width: 42.1rem){
+    .soundslike{
+        /* display: none; */
+        mask-image: url( '/static/cliparrow-horizontal.svg' );
+        height: 1.2rem;
+        width: auto;
+    }
+
+    .entrypage-clips{
+        flex-direction: column;
+    }
+
+    .motifpage-songs{
+        width: auto;
+        flex-direction: column;
+        gap: unset;
+    }
+
+    .motifpage-info{
+        width: unset;
+        flex-direction: column;
+    }
+
+    .motifpage-location{
+        width: 18rem;
+    }
+    
+    .motifpage-location p{
+        text-align: center;
+    }
 }

 /* SUGGEST PAGE */
--- a/templates/albumicon.jinja
+++ b/templates/albumicon.jinja
@ -0,0 +1,242 @@
+{% if album_code == '1.0' %}
+
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.213269mm"
+   height="6.1303754mm"
+   viewBox="0 0 11.213269 6.1303754"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+     <title>Before Meteor</title>
+     <defs
+     id="defs2" /><g
+     id="layer1"
+     transform="translate(-8.9717916,-6.8116751)"><path
+       id="path1"
+       style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1"
+       d="m 10.97167,6.8116751 c -1.1079967,0 -1.9998779,0.8918812 -1.9998779,1.9998779 v 2.130619 c 0,1.107997 0.8918812,1.999878 1.9998779,1.999878 h 7.213513 c 1.107997,0 1.999878,-0.891881 1.999878,-1.999878 V 8.811553 c 0,-1.1079967 -0.891881,-1.9998779 -1.999878,-1.9998779 z m 1.163753,1.010791 h 0.526066 V 11.86253 H 11.793325 V 8.8032848 c -0.04777,0.04226 -0.104387,0.082855 -0.170532,0.1214396 -0.06431,0.036747 -0.133209,0.070566 -0.206706,0.1018026 -0.07349,0.0294 -0.149919,0.055468 -0.228926,0.077515 -0.07901,0.020213 -0.156924,0.034738 -0.234095,0.043925 V 8.414678 c 0.225999,-0.066146 0.438963,-0.1503221 0.639238,-0.2532145 0.200274,-0.102893 0.38143,-0.215893 0.543119,-0.3389974 z m 4.69067,0.021704 c 0.91869,0 1.37821,0.6717388 1.37821,2.0148641 0,0.6688068 -0.126033,1.1814388 -0.377754,1.5378908 -0.249884,0.356452 -0.608922,0.534851 -1.077454,0.534851 -0.94074,0 -1.411283,-0.660714 -1.411283,-1.9817913 0,-0.6853426 0.126779,-1.2069895 0.380338,-1.5652791 0.255396,-0.3601263 0.624711,-0.5405355 1.107943,-0.5405355 z m -0.03876,0.6645589 c -0.376663,0 -0.564824,0.4727838 -0.564824,1.4190349 0,0.8911291 0.184659,1.3368691 0.553972,1.3368691 0.360127,0 0.540018,-0.45952 0.540018,-1.3782103 0,-0.9186904 -0.176389,-1.3776937 -0.529166,-1.3776937 z m -2.402954,2.513542 c 0.148826,0 0.270095,0.04283 0.363802,0.129191 0.09554,0.08452 0.143143,0.192006 0.143143,0.322461 0,0.134128 -0.04886,0.244372 -0.146244,0.330729 -0.09554,0.08452 -0.220314,0.127124 -0.374654,0.127124 -0.143315,0 -0.262574,-0.0441 -0.358118,-0.132292 -0.09554,-0.08819 -0.14366,-0.196945 -0.14366,-0.325561 0,-0.132292 0.04886,-0.240526 0.146244,-0.325045 0.09922,-0.08452 0.222496,-0.126607 0.369487,-0.126607 z" /></g></svg>
+
+{% endif %}
+
+{% if album_code == '2.0' %}
+
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.213269mm"
+   height="6.130373mm"
+   viewBox="0 0 11.213269 6.130373"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <title>A Realm Reborn</title><defs
+     id="defs2" /><g
+     id="layer1"
+     transform="translate(-25.730577,-19.524148)"><path
+       id="rect1497"
+       style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none"
+       d="m 27.730455,19.524148 c -1.107997,0 -1.999878,0.891881 -1.999878,1.999878 v 2.130618 c 0,1.107997 0.891881,1.999878 1.999878,1.999878 h 7.213513 c 1.107997,0 1.999878,-0.891881 1.999878,-1.999878 v -2.130618 c 0,-1.107997 -0.891881,-1.999878 -1.999878,-1.999878 z m 1.156518,1.032495 c 0.200275,0 0.37942,0.02681 0.537435,0.0801 0.159852,0.05145 0.294901,0.125861 0.405143,0.223242 0.110244,0.09738 0.193672,0.215893 0.250631,0.355534 0.0588,0.137803 0.08837,0.292144 0.08837,0.463021 0,0.181897 -0.02831,0.343248 -0.08527,0.484724 -0.05512,0.141478 -0.129535,0.270269 -0.223243,0.386023 -0.09187,0.115755 -0.198609,0.222495 -0.319877,0.319877 -0.121267,0.09554 -0.2473,0.187987 -0.377754,0.278019 -0.08819,0.06247 -0.173636,0.125117 -0.256315,0.187585 -0.08085,0.06063 -0.152504,0.121267 -0.214974,0.181901 -0.06247,0.05879 -0.112083,0.116672 -0.148829,0.173633 -0.03675,0.05696 -0.05478,0.111335 -0.05478,0.162781 h 1.67535 v 0.72192 h -2.629297 v -0.297657 c 0,-0.202109 0.03434,-0.383267 0.10232,-0.543119 0.06798,-0.16169 0.153422,-0.305753 0.256315,-0.432532 0.102893,-0.128616 0.21463,-0.241616 0.335897,-0.338997 0.123104,-0.09922 0.240123,-0.18816 0.350366,-0.267166 0.115755,-0.08268 0.216467,-0.161863 0.302824,-0.237195 0.08819,-0.07533 0.161862,-0.149748 0.220658,-0.223242 0.06063,-0.07533 0.105477,-0.150494 0.134876,-0.225826 0.0294,-0.07717 0.04444,-0.159107 0.04444,-0.245463 0,-0.16904 -0.04812,-0.296565 -0.14366,-0.382923 -0.09554,-0.08636 -0.241616,-0.129708 -0.438216,-0.129708 -0.339916,0 -0.665136,0.135049 -0.975651,0.405144 v -0.766362 c 0.343588,-0.222323 0.731454,-0.333313 1.163236,-0.333313 z m 4.875672,0 c 0.91869,0 1.377693,0.671739 1.377693,2.014864 0,0.668806 -0.125516,1.181438 -0.377237,1.53789 -0.249884,0.356452 -0.609439,0.534334 -1.077971,0.534334 -0.940739,0 -1.410767,-0.660198 -1.410767,-1.981273 0,-0.685344 0.126781,-1.207507 0.380339,-1.565796 0.255396,-0.360127 0.624712,-0.540019 1.107943,-0.540019 z m -0.03876,0.664042 c -0.376663,0 -0.564823,0.473301 -0.564823,1.419552 0,0.891129 0.184658,1.336868 0.553971,1.336868 0.360127,0 0.540019,-0.45952 0.540019,-1.378209 0,-0.918691 -0.176389,-1.378211 -0.529167,-1.378211 z m -2.403469,2.513541 c 0.148828,0 0.270097,0.04335 0.363803,0.129708 0.09554,0.08452 0.14366,0.192007 0.14366,0.322461 0,0.134128 -0.04886,0.244372 -0.146244,0.330729 -0.09554,0.08452 -0.220316,0.126607 -0.374654,0.126607 -0.143316,0 -0.263092,-0.0441 -0.358635,-0.132291 -0.09554,-0.0882 -0.143144,-0.196429 -0.143144,-0.325045 0,-0.132291 0.04886,-0.240525 0.146245,-0.325045 0.09922,-0.08452 0.22198,-0.127124 0.368969,-0.127124 z" /></g></svg>
+
+{% endif %}
+
+{% if album_code == '2.5' %}
+
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.213269mm"
+   height="6.1303754mm"
+   viewBox="0 0 11.213269 6.1303754"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2" /><g
+     id="layer1"
+     transform="translate(-42.143991,-6.8116751)">
+     <title>Before the Fall</title><path
+       id="rect1503"
+       style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none"
+       d="m 44.144387,6.8116751 c -1.107996,0 -2.000394,0.891881 -2.000394,1.999878 v 2.1306189 c 0,1.107997 0.892398,1.999878 2.000394,1.999878 h 7.212997 c 1.107997,0 1.999878,-0.891881 1.999878,-1.999878 V 8.8115531 c 0,-1.107997 -0.891881,-1.999878 -1.999878,-1.999878 z m 1.248503,1.032495 c 0.200274,0 0.37942,0.026812 0.537435,0.080099 0.159852,0.051446 0.2949,0.125861 0.405143,0.223242 0.110243,0.097381 0.193672,0.215893 0.250631,0.355534 0.0588,0.137804 0.08837,0.292144 0.08837,0.46302 0,0.181901 -0.02831,0.343247 -0.08527,0.484725 -0.05512,0.141479 -0.129534,0.270269 -0.223242,0.386023 -0.09187,0.115756 -0.19861,0.2224959 -0.319877,0.3198769 -0.121267,0.09554 -0.247301,0.187988 -0.377755,0.27802 -0.08819,0.06247 -0.173633,0.125117 -0.256315,0.187585 -0.08085,0.06063 -0.152503,0.121267 -0.214974,0.181901 -0.06247,0.05879 -0.112083,0.116671 -0.148828,0.173633 -0.03675,0.05696 -0.05478,0.111335 -0.05478,0.162781 h 1.67535 v 0.72192 h -2.629297 v -0.297657 c 0,-0.202112 0.03434,-0.383267 0.10232,-0.543119 0.06798,-0.161689 0.153421,-0.305753 0.256315,-0.432532 0.102893,-0.128617 0.214629,-0.241616 0.335896,-0.338997 0.123105,-0.09922 0.240123,-0.18816 0.350367,-0.2671669 0.115755,-0.082682 0.216467,-0.161863 0.302824,-0.237195 0.08819,-0.075333 0.161862,-0.149747 0.220658,-0.223242 0.06063,-0.075333 0.105477,-0.150494 0.134875,-0.225826 0.0294,-0.07717 0.04444,-0.159106 0.04444,-0.245463 0,-0.16904 -0.04812,-0.296566 -0.14366,-0.382923 -0.09554,-0.086357 -0.241617,-0.129708 -0.438216,-0.129708 -0.339916,0 -0.665134,0.135049 -0.975651,0.405144 v -0.766362 c 0.34359,-0.222323 0.731452,-0.333313 1.163236,-0.333313 z m 3.795117,0.066146 h 2.091862 v 0.711068 h -1.42782 l -0.05478,0.791166 c 0.141478,-0.011027 0.263493,-0.016537 0.366386,-0.016537 0.406061,0 0.723758,0.106224 0.95343,0.319361 0.229672,0.213136 0.344682,0.4997689 0.344682,0.8598959 0,0.398709 -0.137058,0.725192 -0.410827,0.978751 -0.27377,0.251721 -0.64458,0.377238 -1.113111,0.377238 -0.380337,0 -0.700044,-0.05661 -0.959114,-0.170532 v -0.744141 c 0.270094,0.165365 0.557475,0.248047 0.862479,0.248047 0.229673,0 0.408819,-0.05438 0.537435,-0.162781 0.130454,-0.11024 0.195854,-0.259071 0.195854,-0.446484 0,-0.391362 -0.276873,-0.587044 -0.829924,-0.587044 -0.203949,0 -0.438963,0.01579 -0.705383,0.04702 z m -1.361674,3.1114379 c 0.148828,0 0.270096,0.04335 0.363802,0.129708 0.09554,0.08452 0.143661,0.192007 0.143661,0.322461 0,0.134129 -0.04886,0.244372 -0.146245,0.330729 -0.09554,0.08452 -0.220313,0.126607 -0.374654,0.126607 -0.143315,0 -0.26309,-0.0441 -0.358634,-0.132291 -0.09554,-0.08819 -0.143144,-0.196428 -0.143144,-0.325045 0,-0.132291 0.04886,-0.240526 0.146244,-0.325045 0.09922,-0.08452 0.22198,-0.127124 0.36897,-0.127124 z" /></g></svg>
+
+{% endif %}
+
+{% if album_code == '3.0' %}
+
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.213273mm"
+   height="6.1308918mm"
+   viewBox="0 0 11.213273 6.1308918"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2" /><g
+     id="layer1"
+     transform="translate(-50.010347,-14.200953)">
+     <title>Heavensward</title><path
+       id="rect1509"
+       style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none"
+       d="m 52.01074,14.200953 c -1.107997,0 -2.000395,0.892398 -2.000395,2.000395 v 2.130103 c 0,1.107994 0.892398,2.000394 2.000395,2.000394 h 7.212996 c 1.107997,0 1.999878,-0.8924 1.999878,-2.000394 v -2.130103 c 0,-1.107997 -0.891881,-2.000395 -1.999878,-2.000395 z m 0.968933,1.033012 c 0.404223,0 0.718418,0.09095 0.942578,0.272852 0.225997,0.1819 0.338997,0.417661 0.338997,0.707967 0,0.516302 -0.261829,0.840029 -0.785481,0.970483 v 0.01344 c 0.279281,0.03491 0.499769,0.136882 0.661458,0.305925 0.161689,0.167202 0.242362,0.373161 0.242362,0.617533 0,0.369314 -0.135048,0.661461 -0.405143,0.876432 -0.270094,0.214974 -0.642914,0.322461 -1.118795,0.322461 -0.407898,0 -0.739892,-0.06615 -0.995288,-0.198437 v -0.758093 c 0.264583,0.192923 0.573266,0.289388 0.926042,0.289388 0.222323,0 0.395211,-0.0476 0.518315,-0.143144 0.124941,-0.09554 0.187585,-0.228583 0.187585,-0.399459 0,-0.176388 -0.07717,-0.3127 -0.23151,-0.408244 -0.152503,-0.09554 -0.363229,-0.143144 -0.631486,-0.143144 h -0.366386 v -0.667142 h 0.338997 c 0.514466,0 0.771529,-0.17088 0.771529,-0.51263 0,-0.321542 -0.197175,-0.482142 -0.592212,-0.482142 -0.264582,0 -0.522162,0.08544 -0.772045,0.256316 v -0.711068 c 0.277443,-0.139641 0.60117,-0.20929 0.970483,-0.20929 z m 5.015714,0 c 0.918691,0 1.378211,0.671222 1.378211,2.014348 0,0.668806 -0.126034,1.181439 -0.377755,1.53789 -0.249883,0.356453 -0.608921,0.534851 -1.077453,0.534851 -0.94074,0 -1.411284,-0.660714 -1.411284,-1.981791 0,-0.685343 0.12678,-1.206989 0.380339,-1.565279 0.255396,-0.360126 0.624711,-0.540019 1.107942,-0.540019 z m -0.03824,0.664042 c -0.376663,0 -0.56534,0.473301 -0.56534,1.419552 0,0.89113 0.184658,1.336353 0.553971,1.336353 0.360127,0 0.540536,-0.459004 0.540536,-1.377694 0,-0.918691 -0.17639,-1.378211 -0.529167,-1.378211 z m -2.403471,2.513542 c 0.148828,0 0.270096,0.04335 0.363802,0.129708 0.09554,0.08452 0.143144,0.192006 0.143144,0.322461 0,0.134128 -0.04835,0.244372 -0.145728,0.330729 -0.09554,0.08452 -0.220831,0.126607 -0.375171,0.126607 -0.143315,0 -0.262574,-0.0441 -0.358117,-0.132291 -0.09554,-0.08819 -0.143144,-0.196429 -0.143144,-0.325045 0,-0.132292 0.04835,-0.241042 0.145728,-0.325562 0.09922,-0.08452 0.222496,-0.126607 0.369486,-0.126607 z" /></g></svg>
+
+{% endif %}
+
+{% if album_code == '3.5' %}
+
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.213269mm"
+   height="6.1308918mm"
+   viewBox="0 0 11.213269 6.1308918"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <title>The Far Edge of Fate</title><defs
+     id="defs2" /><g
+     id="layer1"
+     transform="translate(-56.17843,-6.8114167)"><path
+       id="rect1515"
+       style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none"
+       d="m 58.178313,6.8114165 c -1.107997,0 -1.999878,0.891881 -1.999878,1.9998781 v 2.1306194 c 0,1.107997 0.891881,2.000395 1.999878,2.000395 h 7.212996 c 1.107997,0 2.000395,-0.892398 2.000395,-2.000395 V 8.8112946 c 0,-1.1079971 -0.892398,-1.9998781 -2.000395,-1.9998781 z m 1.061434,1.033012 c 0.404222,0 0.718417,0.090951 0.942578,0.272852 0.225998,0.181898 0.338997,0.41766 0.338997,0.707967 0,0.516302 -0.261828,0.840029 -0.785482,0.970483 v 0.013436 c 0.279282,0.034907 0.499769,0.136882 0.661459,0.3059255 0.161689,0.167199 0.242362,0.373162 0.242362,0.617533 0,0.369314 -0.135048,0.661458 -0.405143,0.876432 -0.270095,0.214974 -0.642913,0.322461 -1.118795,0.322461 -0.407897,0 -0.739375,-0.06615 -0.994771,-0.198437 v -0.758094 c 0.264583,0.192926 0.573265,0.289388 0.926042,0.289388 0.222321,0 0.394695,-0.0476 0.517797,-0.143143 0.124942,-0.09554 0.187586,-0.228583 0.187586,-0.399459 0,-0.176389 -0.07717,-0.3127 -0.231511,-0.408244 -0.1525,-0.09554 -0.362711,-0.143144 -0.630969,-0.143144 H 58.522995 V 9.5032426 h 0.338997 c 0.514465,0 0.772046,-0.1708781 0.772046,-0.5126311 0,-0.321539 -0.197692,-0.482141 -0.592729,-0.482141 -0.264583,0 -0.521645,0.085442 -0.771529,0.256315 v -0.711067 c 0.277444,-0.139641 0.600653,-0.20929 0.969967,-0.20929 z m 3.935677,0.066146 h 2.091862 v 0.711068 h -1.42782 l -0.05478,0.790649 c 0.141478,-0.011027 0.263493,-0.016536 0.366386,-0.016536 0.406061,0 0.723757,0.10674 0.95343,0.319877 0.229672,0.213136 0.344682,0.4997695 0.344682,0.8598965 0,0.398711 -0.137059,0.724675 -0.410828,0.978234 -0.27377,0.251722 -0.644578,0.377755 -1.11311,0.377755 -0.380338,0 -0.700044,-0.05713 -0.959115,-0.171049 v -0.74414 c 0.270095,0.165364 0.557474,0.248046 0.86248,0.248046 0.229672,0 0.408818,-0.05386 0.537435,-0.162264 0.130454,-0.110242 0.195853,-0.259071 0.195853,-0.446484 0,-0.391362 -0.276871,-0.587044 -0.829923,-0.587044 -0.203949,0 -0.438963,0.01527 -0.705383,0.04651 z M 61.81375,11.022013 c 0.148828,0 0.270096,0.04335 0.363802,0.129708 0.09554,0.08452 0.14366,0.192007 0.14366,0.322461 0,0.134129 -0.04886,0.244372 -0.146244,0.330729 -0.09554,0.08452 -0.220314,0.126607 -0.374654,0.126607 -0.143316,0 -0.263091,-0.0441 -0.358635,-0.132292 -0.09554,-0.08819 -0.143143,-0.196427 -0.143143,-0.325044 0,-0.132291 0.04886,-0.241043 0.146244,-0.325562 0.09922,-0.08452 0.221979,-0.126607 0.36897,-0.126607 z" /></g></svg>
+
+{% endif %}
+
+{% if album_code == '4.0' %}
+
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.213269mm"
+   height="6.1308928mm"
+   viewBox="0 0 11.213269 6.1308928"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <title>Stormblood</title><defs
+     id="defs2" /><g
+     id="layer1"
+     transform="translate(-65.777917,-13.750826)"><path
+       id="rect1521"
+       style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none"
+       d="m 67.777792,13.750826 c -1.107997,0 -1.999878,0.892399 -1.999878,2.000395 v 2.130103 c 0,1.107994 0.891881,2.000394 1.999878,2.000394 h 7.213513 c 1.107996,0 1.999878,-0.8924 1.999878,-2.000394 v -2.130103 c 0,-1.107996 -0.891882,-2.000395 -1.999878,-2.000395 z m 6.092651,1.033012 c 0.918691,0 1.378211,0.671222 1.378211,2.014348 0,0.668806 -0.126034,1.181439 -0.377755,1.53789 -0.249885,0.356452 -0.608922,0.534851 -1.077454,0.534851 -0.940739,0 -1.411283,-0.660714 -1.411283,-1.981791 0,-0.685343 0.12678,-1.20699 0.380339,-1.565279 0.255396,-0.360127 0.624711,-0.540019 1.107942,-0.540019 z m -4.64106,0.06615 h 0.807186 v 2.491321 h 0.474389 v 0.650606 h -0.474389 v 0.810287 H 69.242818 V 17.991915 H 67.520443 V 17.31082 c 0.152502,-0.170877 0.310346,-0.357027 0.473872,-0.559139 0.163527,-0.203949 0.321888,-0.413412 0.47439,-0.628386 0.152502,-0.214971 0.29381,-0.431211 0.424264,-0.648022 0.132291,-0.218649 0.244545,-0.426848 0.336414,-0.625285 z m 4.602303,0.597896 c -0.376663,0 -0.564823,0.4733 -0.564823,1.419552 0,0.89113 0.184657,1.336352 0.553971,1.336352 0.360125,0 0.540019,-0.459002 0.540019,-1.377693 0,-0.918691 -0.17639,-1.37821 -0.529167,-1.378211 z m -4.588868,0.512631 c -0.06431,0.119427 -0.133956,0.240696 -0.209289,0.363802 -0.07533,0.121267 -0.154512,0.241788 -0.237195,0.361218 -0.08268,0.117592 -0.166111,0.232084 -0.25063,0.344165 -0.08452,0.110242 -0.166456,0.214228 -0.245464,0.311609 h 0.942578 z m 2.185913,2.000911 c 0.148829,0 0.270096,0.04335 0.363803,0.129708 0.09554,0.08452 0.143143,0.192007 0.143143,0.322461 0,0.13413 -0.04886,0.244373 -0.146244,0.330729 -0.09555,0.08452 -0.220314,0.126607 -0.374654,0.126607 -0.143316,0 -0.262575,-0.0441 -0.358117,-0.132291 -0.09555,-0.08819 -0.143661,-0.196428 -0.143661,-0.325045 0,-0.132291 0.04886,-0.241041 0.146244,-0.325562 0.09922,-0.08452 0.222496,-0.126607 0.369486,-0.126607 z" /></g></svg>
+
+{% endif %}
+
+{% if album_code == '5.0' %}
+
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.213269mm"
+   height="6.1308918mm"
+   viewBox="0 0 11.213269 6.1308918"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <title>Shadowbringers</title>
+   <defs
+     id="defs2" /><g
+     id="layer1"
+     transform="translate(-82.409783,-12.942308)"><path
+       id="rect1527"
+       style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none"
+       d="m 84.409658,12.942309 c -1.107994,0 -1.999878,0.892398 -1.999878,2.000395 v 2.130103 c 0,1.107994 0.891884,2.000394 1.999878,2.000394 h 7.213514 c 1.107994,0 1.999878,-0.8924 1.999878,-2.000394 v -2.130103 c 0,-1.107997 -0.891884,-2.000395 -1.999878,-2.000395 z m 5.950542,1.033012 c 0.91869,0 1.37821,0.671222 1.37821,2.014348 0,0.668806 -0.126034,1.181438 -0.377755,1.53789 -0.249883,0.356452 -0.608921,0.534851 -1.077453,0.534851 -0.940739,0 -1.411284,-0.660714 -1.411284,-1.981791 0,-0.685343 0.12678,-1.20699 0.380339,-1.565279 0.255396,-0.360127 0.624711,-0.540019 1.107943,-0.540019 z m -5.85649,0.06615 h 2.091861 v 0.711068 h -1.427819 l -0.05478,0.790649 c 0.141478,-0.01103 0.263492,-0.01654 0.366386,-0.01654 0.406059,0 0.723757,0.106741 0.95343,0.319877 0.22967,0.213136 0.344682,0.499769 0.344682,0.859896 0,0.398709 -0.137058,0.724676 -0.410828,0.978235 -0.27377,0.251719 -0.64458,0.377754 -1.11311,0.377754 -0.380338,0 -0.700044,-0.05713 -0.959115,-0.171049 v -0.74414 c 0.270095,0.165361 0.557474,0.248046 0.86248,0.248046 0.22967,0 0.408818,-0.05386 0.537435,-0.162264 0.130451,-0.110241 0.195853,-0.259071 0.195853,-0.446484 0,-0.39136 -0.276874,-0.587044 -0.829923,-0.587044 -0.203949,0 -0.438963,0.01527 -0.705384,0.04651 z m 5.818249,0.597896 c -0.376664,0 -0.56534,0.473301 -0.56534,1.419552 0,0.89113 0.184658,1.336352 0.553971,1.336352 0.360127,0 0.540536,-0.459003 0.540536,-1.377693 0,-0.918691 -0.17639,-1.378211 -0.529167,-1.378211 z m -2.403471,2.513542 c 0.148828,0 0.270096,0.04335 0.363802,0.129708 0.09554,0.08452 0.143144,0.192007 0.143144,0.322461 0,0.134128 -0.04835,0.244372 -0.145728,0.330729 -0.09554,0.08452 -0.220832,0.126607 -0.37517,0.126607 -0.143316,0 -0.262574,-0.0441 -0.358118,-0.132291 -0.09554,-0.0882 -0.143144,-0.196429 -0.143144,-0.325045 0,-0.132291 0.04835,-0.241042 0.145728,-0.325562 0.09922,-0.08452 0.222496,-0.126607 0.369486,-0.126607 z" /></g></svg>
+
+{% endif %}
+
+{% if album_code == '5.5' %}
+
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.212744mm"
+   height="6.1303754mm"
+   viewBox="0 0 11.212744 6.1303754"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <title>Death Unto Dawn</title>
+   <defs
+     id="defs2" /><g
+     id="layer1"
+     transform="translate(-91.079934,-22.589335)"><path
+       id="rect1533"
+       style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none"
+       d="m 93.079809,22.589335 c -1.107997,0 -1.999878,0.891881 -1.999878,1.999878 v 2.130619 c 0,1.107997 0.891881,1.999878 1.999878,1.999878 h 7.212991 c 1.108,0 1.99988,-0.891881 1.99988,-1.999878 v -2.130619 c 0,-1.107997 -0.89188,-1.999878 -1.99988,-1.999878 z m 0.186035,1.098641 h 2.091862 v 0.711067 h -1.427303 l -0.05529,0.791167 c 0.141478,-0.01103 0.263493,-0.01654 0.366386,-0.01654 0.406062,0 0.724275,0.106741 0.953947,0.319877 0.229673,0.213136 0.344165,0.499769 0.344165,0.859896 0,0.398712 -0.136541,0.724676 -0.410311,0.978235 -0.273767,0.251721 -0.645095,0.377755 -1.113627,0.377755 -0.380335,0 -0.700046,-0.05713 -0.959114,-0.171049 v -0.744141 c 0.270092,0.165364 0.557476,0.248047 0.862479,0.248047 0.229673,0 0.408819,-0.05438 0.537435,-0.162781 0.130455,-0.110242 0.195854,-0.259071 0.195854,-0.446484 0,-0.391363 -0.276355,-0.587045 -0.829407,-0.587045 -0.203949,0 -0.43948,0.01579 -0.7059,0.04703 z m 4.776453,0 h 2.091863 v 0.711067 h -1.427821 l -0.05478,0.791167 c 0.141478,-0.01103 0.263493,-0.01654 0.366386,-0.01654 0.406061,0 0.723758,0.106741 0.95343,0.319877 0.229675,0.213136 0.344685,0.499769 0.344685,0.859896 0,0.398712 -0.13706,0.724676 -0.410831,0.978235 -0.27377,0.251721 -0.644578,0.377755 -1.11311,0.377755 -0.380338,0 -0.700044,-0.05713 -0.959115,-0.171049 v -0.744141 c 0.270095,0.165364 0.557475,0.248047 0.86248,0.248047 0.229673,0 0.408818,-0.05438 0.537435,-0.162781 0.130454,-0.110242 0.195853,-0.259071 0.195853,-0.446484 0,-0.391363 -0.276872,-0.587045 -0.829923,-0.587045 -0.20395,0 -0.438964,0.01579 -0.705383,0.04703 z m -1.361674,3.111954 c 0.148828,0 0.270095,0.04284 0.363802,0.129192 0.09554,0.08452 0.14366,0.192008 0.14366,0.32246 0,0.13413 -0.04886,0.244373 -0.146244,0.33073 -0.09554,0.08452 -0.220314,0.127124 -0.374654,0.127124 -0.143316,0 -0.263091,-0.0441 -0.358635,-0.132292 -0.09554,-0.08819 -0.143143,-0.196945 -0.143143,-0.325562 0,-0.13229 0.04886,-0.240524 0.146244,-0.325044 0.09922,-0.08452 0.221979,-0.126608 0.36897,-0.126608 z" /></g></svg>
+
+{% endif %}
+
+{% if album_code == '6.0' %}
+
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.213269mm"
+   height="6.1308918mm"
+   viewBox="0 0 11.213269 6.1308918"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <title>Endwalker</title><defs
+     id="defs2" /><g
+     id="layer1"
+     transform="translate(-52.398599,-34.822886)"><path
+       id="rect1539"
+       style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none"
+       d="m 54.398477,34.822885 c -1.107996,0 -1.999878,0.891882 -1.999878,1.999878 v 2.130619 c 0,1.107996 0.891882,2.000395 1.999878,2.000395 h 7.212996 c 1.107996,0 2.000395,-0.892399 2.000395,-2.000395 v -2.130619 c 0,-1.107996 -0.892399,-1.999878 -2.000395,-1.999878 z m 1.617989,1.033012 c 0.305002,0 0.542031,0.03583 0.711067,0.107487 v 0.727604 c -0.200271,-0.113917 -0.418755,-0.171049 -0.655773,-0.171049 -0.146991,0 -0.280029,0.02831 -0.399459,0.08527 -0.11943,0.05696 -0.222669,0.13815 -0.309025,0.24288 -0.08452,0.10473 -0.151412,0.23151 -0.201022,0.380338 -0.04777,0.146991 -0.07332,0.311093 -0.077,0.492993 h 0.01654 c 0.187413,-0.259067 0.463768,-0.388606 0.829407,-0.388606 0.163523,0 0.311608,0.02957 0.4439,0.08837 0.132291,0.05879 0.245291,0.142222 0.338998,0.250631 0.0937,0.106568 0.166111,0.235358 0.217557,0.386023 0.05145,0.150665 0.077,0.31804 0.077,0.501778 0,0.194763 -0.03382,0.376665 -0.101802,0.545703 -0.06798,0.169039 -0.162437,0.315858 -0.283704,0.4408 -0.121266,0.123105 -0.26585,0.220314 -0.433048,0.291972 -0.167202,0.06982 -0.349853,0.104903 -0.548287,0.104903 -0.222324,0 -0.421508,-0.04134 -0.597897,-0.124023 -0.174551,-0.08268 -0.322633,-0.201941 -0.4439,-0.358118 -0.121267,-0.158014 -0.214228,-0.35094 -0.278536,-0.578776 -0.06431,-0.227835 -0.09612,-0.486161 -0.09612,-0.77463 0,-0.339912 0.04134,-0.647851 0.124023,-0.923458 0.08452,-0.277442 0.203778,-0.514467 0.358118,-0.711067 0.156177,-0.1966 0.344337,-0.348185 0.564823,-0.454753 0.220486,-0.108405 0.468534,-0.162264 0.744141,-0.162264 z m 4.390429,0 c 0.918691,0 1.378211,0.671222 1.378211,2.014347 0,0.668807 -0.126034,1.181439 -0.377755,1.537891 -0.249884,0.356452 -0.608921,0.534851 -1.077453,0.534851 -0.94074,0 -1.411284,-0.660714 -1.411284,-1.981791 0,-0.685343 0.12678,-1.20699 0.380339,-1.565279 0.255396,-0.360126 0.624712,-0.540019 1.107942,-0.540019 z m -0.03824,0.664042 c -0.376663,0 -0.56534,0.473301 -0.56534,1.419552 0,0.89113 0.184657,1.336352 0.553971,1.336352 0.360127,0 0.540536,-0.459003 0.540536,-1.377693 0,-0.918691 -0.176389,-1.378211 -0.529167,-1.378211 z m -4.732528,1.457792 c -0.07901,0 -0.150665,0.01504 -0.214974,0.04444 -0.06431,0.0294 -0.119428,0.07074 -0.165364,0.124024 -0.04593,0.05329 -0.08176,0.116676 -0.107487,0.190169 -0.02389,0.07166 -0.03566,0.151585 -0.03566,0.239779 0,0.09738 0.01304,0.188332 0.03876,0.272851 0.02572,0.08452 0.06155,0.158934 0.107487,0.223242 0.04777,0.06247 0.103642,0.112082 0.167949,0.148828 0.06431,0.03675 0.135964,0.05478 0.214974,0.05478 0.07901,0 0.149918,-0.01528 0.21239,-0.04651 0.06431,-0.03307 0.118165,-0.07843 0.162264,-0.135393 0.04593,-0.05879 0.08102,-0.128441 0.104903,-0.209289 0.02389,-0.08268 0.03566,-0.172887 0.03566,-0.270268 0,-0.424435 -0.173634,-0.636654 -0.520899,-0.636654 z m 2.329057,1.05575 c 0.03721,0 0.07269,0.0029 0.106453,0.0083 0.03376,0.0054 0.0658,0.01349 0.09612,0.02429 0.03032,0.0108 0.05891,0.02412 0.08578,0.04031 0.02687,0.01619 0.05202,0.03525 0.07545,0.05684 0.02389,0.02113 0.04461,0.04369 0.06253,0.0677 0.01791,0.024 0.03301,0.04909 0.04496,0.07596 v 5.17e-4 c 0.01185,0.02674 0.02093,0.05517 0.02687,0.08475 0.006,0.02974 0.0088,0.06092 0.0088,0.09354 0,0.06645 -0.01176,0.126659 -0.03566,0.181384 -2.21e-4,5.06e-4 -2.94e-4,0.001 -5.17e-4,0.0016 v 5.17e-4 c -3.37e-4,7.62e-4 -0.0012,0.0013 -0.0015,0.0021 -0.01128,0.02505 -0.025,0.04927 -0.04134,0.07183 -0.0018,0.0025 -0.0038,0.0048 -0.0057,0.0072 -0.01771,0.02336 -0.03771,0.04551 -0.06098,0.06615 -0.02296,0.02031 -0.04805,0.0378 -0.07441,0.05323 -0.0019,0.0011 -0.0038,0.002 -0.0057,0.0031 -0.02686,0.01523 -0.05495,0.0285 -0.08527,0.03876 -0.03124,0.01056 -0.06431,0.01849 -0.09922,0.02377 h -5.17e-4 c -0.03476,0.0052 -0.07167,0.0078 -0.110071,0.0078 -0.03583,0 -0.06999,-0.0028 -0.102836,-0.0083 -0.03284,-0.0055 -0.06419,-0.01378 -0.09405,-0.0248 -0.02986,-0.01102 -0.05839,-0.0248 -0.08527,-0.04134 -0.02687,-0.01654 -0.05208,-0.03583 -0.07596,-0.05788 -0.02389,-0.02205 -0.04461,-0.04519 -0.06253,-0.06976 -0.01791,-0.02458 -0.03301,-0.05041 -0.04496,-0.07751 -0.01194,-0.0271 -0.0209,-0.05564 -0.02687,-0.08527 -0.006,-0.02963 -0.0088,-0.06035 -0.0088,-0.0925 0,-0.06615 0.01183,-0.126665 0.03617,-0.180868 0.01128,-0.02511 0.02535,-0.04876 0.04186,-0.07131 0.0027,-0.0037 0.0059,-0.0072 0.0088,-0.01085 0.01724,-0.02196 0.03652,-0.0431 0.05891,-0.06253 0.0248,-0.02113 0.05127,-0.03945 0.07906,-0.05529 0.02779,-0.01585 0.05707,-0.02922 0.08785,-0.03979 0.03078,-0.01056 0.06287,-0.01849 0.09664,-0.02377 0.03376,-0.0053 0.06919,-0.0078 0.105937,-0.0078 z" /></g></svg>
+
+{% endif %}
+
+{% if album_code == '6.5' %}
+
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.212752mm"
+   height="6.1308918mm"
+   viewBox="0 0 11.212752 6.1308918"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <title>Growing Light</title><defs
+     id="defs2" /><g
+     id="layer1"
+     transform="translate(-66.774468,-39.323901)"><path
+       id="path6"
+       style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none"
+       d="m 68.774343,39.323902 c -1.107997,0 -1.999878,0.892398 -1.999878,2.000395 V 43.4544 c 0,1.107997 0.891881,2.000394 1.999878,2.000394 h 7.212997 c 1.107997,0 1.999878,-0.892397 1.999878,-2.000394 v -2.130103 c 0,-1.107997 -0.891881,-2.000395 -1.999878,-2.000395 z m 1.617989,1.033012 c 0.305005,0 0.542029,0.03583 0.711068,0.107487 v 0.727605 c -0.200274,-0.113918 -0.418752,-0.171049 -0.655774,-0.171049 -0.14699,0 -0.280545,0.02831 -0.399975,0.08527 -0.11943,0.05696 -0.222152,0.138149 -0.308509,0.242879 -0.08452,0.10473 -0.151412,0.231513 -0.201021,0.380338 -0.04777,0.146991 -0.07384,0.311093 -0.07752,0.492994 h 0.01654 c 0.187413,-0.259071 0.464286,-0.388607 0.829923,-0.388607 0.163527,0 0.311092,0.02958 0.443384,0.08837 0.132291,0.05879 0.245291,0.142223 0.338998,0.250631 0.0937,0.106568 0.166627,0.235358 0.218074,0.386023 0.05145,0.150665 0.077,0.318039 0.077,0.501778 0,0.194763 -0.03382,0.376667 -0.101803,0.545703 -0.06798,0.16904 -0.162953,0.315861 -0.28422,0.4408 -0.121267,0.123105 -0.26533,0.220314 -0.432532,0.291972 -0.167202,0.06982 -0.34985,0.104903 -0.548287,0.104903 -0.222321,0 -0.422024,-0.04134 -0.598413,-0.124023 -0.174551,-0.08268 -0.322116,-0.201941 -0.443384,-0.358118 -0.121265,-0.158014 -0.214227,-0.35094 -0.278536,-0.578776 -0.0643,-0.227835 -0.09663,-0.486162 -0.09663,-0.774629 0,-0.339915 0.04134,-0.647853 0.124023,-0.923458 0.08452,-0.277445 0.204297,-0.514468 0.358634,-0.711068 0.156178,-0.1966 0.344338,-0.348185 0.564824,-0.454753 0.220486,-0.108405 0.468535,-0.162264 0.74414,-0.162264 z m 3.309876,0.06615 h 2.091862 v 0.711068 h -1.427303 l -0.05529,0.790649 c 0.141479,-0.01103 0.263494,-0.01654 0.366386,-0.01654 0.406062,0 0.724274,0.106741 0.953947,0.319877 0.229672,0.213136 0.344165,0.499769 0.344165,0.859896 0,0.398711 -0.136541,0.724676 -0.410311,0.978235 -0.273768,0.25172 -0.645095,0.377754 -1.113627,0.377754 -0.380338,0 -0.700044,-0.05713 -0.959115,-0.171049 v -0.74414 c 0.270097,0.165364 0.557476,0.248047 0.86248,0.248047 0.229673,0 0.408818,-0.05386 0.537435,-0.162264 0.130455,-0.110243 0.195854,-0.259072 0.195854,-0.446485 0,-0.391362 -0.276356,-0.587044 -0.829407,-0.587044 -0.20395,0 -0.43948,0.01527 -0.7059,0.04651 z m -3.690214,2.055689 c -0.07901,0 -0.150665,0.01504 -0.214974,0.04444 -0.06431,0.0294 -0.119429,0.07074 -0.165365,0.124024 -0.04593,0.05329 -0.08176,0.116677 -0.107487,0.190169 -0.02389,0.07166 -0.03566,0.151585 -0.03566,0.239779 0,0.09738 0.01252,0.188332 0.03824,0.272851 0.02572,0.08452 0.06155,0.158935 0.107487,0.223243 0.04777,0.06247 0.104159,0.112082 0.168465,0.148828 0.06431,0.03675 0.135965,0.05478 0.214974,0.05478 0.07901,0 0.149402,-0.01528 0.211874,-0.04651 0.06431,-0.03307 0.118682,-0.07843 0.16278,-0.135392 0.04593,-0.05879 0.08102,-0.128442 0.104904,-0.20929 0.02389,-0.08268 0.03566,-0.172886 0.03566,-0.270268 0,-0.424433 -0.173633,-0.636653 -0.520898,-0.636654 z m 2.329057,1.055749 c 0.148828,0 0.270096,0.04335 0.363802,0.129708 0.09554,0.08452 0.143143,0.192006 0.143143,0.322461 0,0.134128 -0.04886,0.244372 -0.146244,0.330729 -0.09554,0.08452 -0.220314,0.126607 -0.374654,0.126607 -0.143316,0 -0.262574,-0.0441 -0.358118,-0.132291 -0.09554,-0.08819 -0.14366,-0.196428 -0.14366,-0.325045 0,-0.132292 0.04886,-0.241042 0.146244,-0.325562 0.09922,-0.08452 0.222496,-0.126607 0.369487,-0.126607 z" /></g></svg>
+
+{% endif %}
--- a/templates/clipget.jinja
+++ b/templates/clipget.jinja
@ -1,11 +1,34 @@
-<li class="entrypage-clip">
-    <audio
-        controls
-        src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.mp3" type="audio/flac">
-    </audio>
-    <span class="clip-pointer">

-        <img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon" class="connection-icon"/>
-        <a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a>
-    </span>
+<li class="entrypage-motif">
+<div class="clip-title clip-heading">
+    <img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon" class="connection-icon"/>
+    <a href = "{{ url_for('motifpage', id=motif_id) }}"> <h3>{{ motif }}</h3></a>
+</div>
+<div class="entrypage-clips">
+    <div class="clip">
+        {% if feature != song_id %}
+            <div class="clip-title">
+                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
+                <p> {% for name, _, _ in song_info %}{{ name }}{% endfor %}</p>
+            </div>
+        {% endif %}
+        <audio
+            controls
+            src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.mp3" type="audio/flac">
+        </audio>
+    </div>
+    {% if feature != song_id %}
+    <div class="soundslike"></div>
+    <div class="clip">
+        <div class="clip-title">
+            <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
+            <a href = "{{ url_for('songpage', id=feature) }}"> {{ feature_name }}</a>
+        </div>
+        <audio
+            controls
+            src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % feature }}-{{ '%03d' % motif_id }}.mp3" type="audio/flac">
+        </audio>
+    </div>
+    {% endif %}
+</div>
 </li>
--- a/templates/credits.jinja
+++ b/templates/credits.jinja
@ -13,7 +13,6 @@
                    <li>'they' pronouns</li>
                    <li>Aristide Majnheld - Bismarck</li>
                    <li><a href="https://octodon.social/@esbylion">@esbylion@octodon.social</a></li>
-                    <li><a href="https://etheirys.masto.host/@esbylion">@esbylion@etheirys.masto.host</a></li>
                    <li><a href="mailto:eorzeasongbook@gmail.com">eorzeasongbook@gmail.com</a></li>
                </ul>
            </div>
@ -26,13 +25,13 @@
        <div>
            <h3>Made with</h3>
            <ul>
-                <li>Jinja, Flask, Python, sqlite, VS Code, Gunicorn, Docker, Caddy, HTMX, sox, pyexcel_odsr, LibreOffice Calc, Audacity</li>
+                <li>Jinja, Flask, Python, sqlite, VS Code, Gunicorn, Docker, Caddy, HTMX, sox, pyexcel_odsr, LibreOffice Calc, Audacity, MusicBee</li>
+                <li>Many other motif hunters - with special thanks to those who have suggested connections here, and to Rides1283man for their <a href="https://docs.google.com/spreadsheets/d/1OhgnhVCPrLDYxmtE1gvo6Opg4qbNRTe-hBwkxrB2dXs/edit#gid=2146091280">Compendium</a>.</li>
                <li>Osar'a Johve - Bismarck ♥</li>
            </ul>
            <p>Shout-outs to No Stress and Rainbow Connection</p>
        </div>
    </div>
-
 </div>


--- a/templates/footer.jinja
+++ b/templates/footer.jinja
@ -12,7 +12,7 @@
        </span>
        <div class="copyright">
            <span>Audio is</span>
-            <span>©2010-2023 SQUARE ENIX CO., LTD.</span>
+            <span>©2010-2024 SQUARE ENIX CO., LTD.</span>
            <span>All Rights Reserved.</span>
        </div>
    </div>
--- a/templates/home.jinja
+++ b/templates/home.jinja
@ -9,6 +9,7 @@
    <hgroup class="home-title">
        <h1>The Eorzea Songbook</h1>
        <h3>An unofficial library of motifs in the Final Fantasy XIV soundtrack.</h3>
+        <h4>2024-04-09: Updated for Growing Light!</h4>
    </hgroup>

    <div class="home-nav">
@ -24,52 +25,62 @@
    </div>

    <div class="home-body">
+
+        <h2>Spoiler Warning!</h2>
+        <p>Though no specific parts of the story are described,
+        this website includes the names of characters and locations that are important to the main story of Final Fantasy XIV.
+        If you haven't caught up on that story yet, and you want absolutely no information about who or what you see in it,
+        consider coming back when you're up to date.</p>
+
        <h2>What's a motif?</h2>
        <p>Have you ever been playing Final Fantasy XIV and thought you heard a song that sounds familiar?</p>
-        <p>When a specific part of a song is used repeatedly to point out a character, location, or idea, it's called a motif (or leitmotif). Sometimes, a motif that was created in one song can be used in another, to draw a connection between two ideas in the story.</p>
+        <p>When a specific part of a song is used repeatedly to point out a character, location, or idea, it's called a motif (or leitmotif, depending on who you ask). Sometimes, a motif that was created in one song can be used in another, to draw a connection between two ideas in the story.</p>
        <p>For example, here's what you hear when you enter the city of Ishgard.</p>
-        <div class="entrypage-clip">
+        <div class="home-clips">
+            <span class="clip-title">
+                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
+                <a href = "{{ url_for('songpage', id=288) }}"><h4>Solid</h4></a>
+            </span>
            <audio
                controls
                src = "{{ url_for('static', filename='clip/') }}0288-024.mp3" type="audio/flac">
            </audio>
-            <span class="clip-pointer">
-                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
-                <a href = "{{ url_for('songpage', id=288) }}"> Solid </a>
-            </span>
        </div>
        <p>And here's what you hear in Ishgard at night. The same notes are played, but this time it's slowed down, and played on just a piano. Sounds much easier to fall asleep to, doesn't it?</p>
-        <div class="entrypage-clip">
+        
+        <div class="home-clips">
+            <span class="clip-title">
+                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
+                <a href = "{{ url_for('songpage', id=317) }}"><h4>Night in the Brume</h4></a>
+            </span>
            <audio
                controls
                src = "{{ url_for('static', filename='clip/') }}0317-024.mp3" type="audio/flac">
            </audio>
-            <span class="clip-pointer">
-                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
-                <a href = "{{ url_for('songpage', id=317) }}"> Night in the Brume </a>
-            </span>
        </div>
        <p>Here's another song that plays in Ishgard at night - when you're in the Pillars, where the wealthy residents live. Notice how there are more instruments; a grand pipe organ and booming drums. A fancier tune for fancier people, but still using the same melody.</p>
-        <div class="entrypage-clip">
+        
+        <div class="home-clips">
+            <span class="clip-title">
+                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
+                <a href = "{{ url_for('songpage', id=294) }}"><h4>Nobility Sleeps</h4></a>
+            </span>
            <audio
                controls
                src = "{{ url_for('static', filename='clip/') }}0294-024.mp3" type="audio/flac">
            </audio>
-            <span class="clip-pointer">
-                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
-                <a href = "{{ url_for('songpage', id=294) }}"> Nobility Sleeps </a>
-            </span>
        </div>
        <p>Or this song, which plays during an important battle. Now our motif sounds like we're getting ready for a fight!</p>
-        <div class="entrypage-clip">
+        
+        <div class="home-clips">
+            <span class="clip-title">
+                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
+                <a href = "{{ url_for('songpage', id=337) }}"><h4>Heroes Never Die</h4></a>
+            </span>
            <audio
                controls
                src = "{{ url_for('static', filename='clip/') }}0337-024.mp3" type="audio/flac">
            </audio>
-            <span class="clip-pointer">
-                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
-                <a href = "{{ url_for('songpage', id=337) }}"> Heroes Never Die </a>
-            </span>
        </div>
        <p>Once we know that this is melody represents Ishgard, the same tune can be used in all kinds of different songs to connect them back to that city. The composers of Final Fantasy XIV can tell us all kinds of things about Ishgard, just by changing up how they play the motif.</p>
        <p>Final Fantasy XIV's soundtrack is full of these! Not just for cities, but for dungeons, characters, expansions, and more. Discover the repeated melodies in your favorite songs, or check the motif pages to see where they show up.</p>
--- a/templates/motif.jinja
+++ b/templates/motif.jinja
@ -11,14 +11,14 @@
 <!-- Clips -->

 <div class="entrypage-connections">
-    <ul>
-    {% for song_id, motif_id, song, feature in clip_info if feature %}
+    <ul class="motifpage-list">
+    {% for song_id, motif_id, song, feature, location in clip_info if feature %}
            {% include "motifpageclipget.jinja" %}
    {% endfor %}
    </ul>
    <h2>Featured In:</h2>
-    <ul>
-    {% for song_id, motif_id, song, feature in clip_info if not feature %}
+    <ul class="motifpage-list">
+    {% for song_id, motif_id, song, feature, location in clip_info if not feature %}
            {% include "motifpageclipget.jinja" %}
    {% endfor %}
    </ul>
--- a/templates/motifindex.jinja
+++ b/templates/motifindex.jinja
@ -8,7 +8,7 @@
    {% for category_id, name in category_info %}
    <div class="sort-box category">
        <h2 class="sort-header category">{{ name }}</h2>
-        <ul class="sort-list category">
+        <ul class="motiflist">
            {% for motif_id, motif, category, count in motif_info if category == category_id %}
                <a href="{{ url_for('motifpage', id=motif_id) }}" class="entry-box motif">
                    <li>
--- a/templates/motifpageclipget.jinja
+++ b/templates/motifpageclipget.jinja
@ -1,13 +1,27 @@
-<li class="entrypage-clip">
-    <audio
-        controls
-        src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.mp3" type="audio/flac">
-    </audio>
-    <span class="clip-pointer">
+<li>
+    <div class="clip-title">
        <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
-        <a href="{{ url_for('songpage', id=song_id ) }}">{{ song }}</a>
-        {% for album_song_id, album_code in album_info if album_song_id == song_id %}
-        <img src="{{ url_for('static', filename='albumicons/') }}{{ album_code }}.svg" alt="{{ album_code }}" class="clip-album-icon"/>
-        {% endfor %}
-    </span>
+        <a href = "{{ url_for('songpage', id=song_id) }}"><h4>{{ song }}</h4></a>
+    </div>
+    <div class="motifpage-songs">
+        <div class="clip">
+
+            <audio
+                controls
+                src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.mp3" type="audio/flac">
+            </audio>
+        </div>
+        <div class="motifpage-info">
+            <div class="motifpage-albums">
+                <div>
+                {% for album_song_id, album_code in album_info if album_song_id == song_id %}
+                    <span class="clip-album-icon">{% include 'albumicon.jinja' %}</span>
+                {% endfor %}
+                </div>
+            </div>
+            <div class="motifpage-location">
+                <p>{{ location }}</p>
+            </div>
+        </div>
+    </div>
 </li>
--- a/templates/searchresults.jinja
+++ b/templates/searchresults.jinja
@ -12,7 +12,9 @@
    {% elif desc == 'album' %}
    <a href="{{ url_for('songindex', _anchor=code) }}" onclick="albumselect('{{ code }}')"><li>
        <span class="search-icon album">
-            <img src="{{ url_for('static', filename='albumicons/') }}{{ code }}.svg" alt="{{ code }}"/>
+            {% with album_code = code %}
+                {% include 'albumicon.jinja' %}
+            {% endwith %}
        </span>
        <span class="search-type">Album:</span>
        {{ name }}
--- a/templates/song.jinja
+++ b/templates/song.jinja
@ -16,7 +16,7 @@
    {% endfor %}
    <h3 class="title-album">
    {% for track, _, _, album_code in album_info %}
-    <img src="{{ url_for('static', filename='albumicons/') }}{{ album_code }}.svg" alt="{{ album_code }}" />{% if not loop.last %}{% endif %}
+    <span>{% include 'albumicon.jinja' %}</span>{% if not loop.last %}{% endif %}
    {% endfor %}
    </h3>
    </div>
@ -32,7 +32,7 @@
 <div class="track-info" >
 <!-- Artist info -->
    <div class="songpage-detail">
-        <h2 >Artist:  </h2>
+        <h2 >Artists:  </h2>
        <ul>
        {% for name, name_rm, credit in artist_info %}
            <li>
@ -51,7 +51,7 @@
        <ul>
        {% for album_id, track, album_name, album_code in album_info %}
        <li>
-            <img src="{{ url_for('static', filename='albumicons/') }}{{ album_code }}.svg" alt="{{ album_code }}" class="songpage-img"/>
+            <span class="songpage-img">{% include 'albumicon.jinja' %}</span>
            <a href="{{ url_for('songindex', _anchor='') }}{{ album_code }}">{{ album_name }}</a> - Track #{{ track }}
        </li>
        {% endfor %}
@ -75,15 +75,14 @@
    <div class="entrypage-connections">
        <h2>Motifs Featured: </h2>
        <ul>
-        {% for song_id, motif_id, motif in clip_info %}
-            {% set type = 'motif' %}
+        {% for song_id, motif_id, motif, feature, feature_name in clip_info %}
            {% include "clipget.jinja" %}
        {% endfor %}
        </ul>
    </div>
    {% else %}
    <div class="entrypage-connections">
-        <h2>No connections yet. Suggest one?</h3>
+        <h2>No connections yet. <a href="{{ url_for('suggestpage') }}">Suggest one?</a></h3>
    </div>
    {% endif %}
 </div>
--- a/templates/songindex.jinja
+++ b/templates/songindex.jinja
@ -11,16 +11,25 @@
    {% for album_id, name, date, code in album_info %}
    <div class="sort-box album">
        <hgroup id="{{ code }}" class="sort-header album" onclick="albumHeaderClick(event)">
-            <img src="{{ url_for('static', filename='albumicons/') }}{{ code }}.svg" alt="{{ code }}" class="album-icon"/> 
+            {% with album_code = code %}
+                {% include 'albumicon.jinja' %}
+            {% endwith %}
            <h2>{{ name }}</h2>
        </hgroup>
        <ul class="sort-list album">
            <span class="date">Released: {{ date }}</span>
-            {% for song_id, album, track, name, name_jp, count in song_info if album_id == album %}
+            {% for song_id, album, earliest_album, track, name, name_jp, count in song_info if album_id == album %}
                {% if count %}
                    <a href="{{ url_for('songpage', id=song_id) }}" class="entry-box song full">
                        <li>
                            <span class="track-number full">#{{ track }}: </span>
+                            {% if earliest_album != code %}
+                                <span class="track-earliest">
+                                    {% with album_code = earliest_album %}
+                                        {% include 'albumicon.jinja' %}
+                                    {% endwith %}
+                                </span>
+                            {% endif %}
                            <span class="track-name full">{{ name }}</span>
                            {% if name_jp %}<span class="track-name-jp full">{{ name_jp }}</span>{% endif %}
                        </li>
@ -31,6 +40,13 @@
                    <a href="{{ url_for('songpage', id=song_id) }}" class="entry-box song empty">
                        <li>
                            <span class="track-number empty">#{{ track }}: </span>
+                            {% if earliest_album != code %}
+                                <span class="track-earliest">
+                                    {% with album_code = earliest_album %}
+                                        {% include 'albumicon.jinja' %}
+                                    {% endwith %}
+                                </span>
+                            {% endif %}
                            <span class="track-name empty">{{ name }}</span>
                            {% if name_jp %}<span class="track-name-jp empty">{{ name_jp }}</span>{% endif %}
                        </li>