adds dark mkode and pretties things up more

app.py

@@ -37,7 +37,7 @@ def searchpage():
     if searchargs:
         searchresult = db.execute('''
         select
-            'song', id, name, instr(lower(name),lower(?))
+            'song', id, name, NULL, instr(lower(name),lower(?))
         from
             song
         where
@@ -46,7 +46,7 @@ def searchpage():
             '%' || ? || '%'
         union all
         select
-            'album', id, name, instr(lower(name),lower(?))
+            'album', id, name, code, instr(lower(name),lower(?))
         from
             album
         where
@@ -55,7 +55,7 @@ def searchpage():
             '%' || ? || '%'
         union all
         select
-            'motif', id, name, instr(lower(name),lower(?))
+            'motif', id, name, NULL, instr(lower(name),lower(?))
         from
             motif
         where
@@ -63,7 +63,7 @@ def searchpage():
         like
             '%' || ? || '%'
         order by
-            4
+            5
         limit
             10
         ''',
@@ -233,7 +233,7 @@ def motifpage(id):
 
     clip_info = db.execute('''
     select
-        song_id, motif_id, song.name
+        song_id, motif_id, song.name, feature
     from
         clip
     join
@@ -249,9 +249,31 @@ def motifpage(id):
     (id,)
     ).fetchall()
 
+    album_info = db.execute('''
+    select
+        clip.song_id, album.code
+    from
+        clip
+    join
+        song_album
+    on
+        clip.song_id=song_album.song_id
+    join
+        album
+    on
+        song_album.album_id=album.id
+    where
+        clip.motif_id = ?
+    order by
+        song_album.album_id
+    ''',
+    (id,)
+    ).fetchall()
+
     return flask.render_template('motif.html',
         name=name,
-        clip_info=clip_info
+        clip_info=clip_info,
+        album_info=album_info
     )
 
 # SONG PAGES

static/albumicons/1.0.svg

@@ -25,8 +25,8 @@
      inkscape:document-units="mm"
      showgrid="false"
      inkscape:zoom="3.5705387"
-     inkscape:cx="11.062756"
+     inkscape:cx="22.965722"
-     inkscape:cy="103.06568"
+     inkscape:cy="123.79084"
      inkscape:window-width="2560"
      inkscape:window-height="1377"
      inkscape:window-x="1912"
@@ -42,8 +42,11 @@
      transform="translate(17.134108,-0.05239776)">
     <path
        id="rect1491"
-       style="fill:#009db1;stroke-width:0.264583"
+       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" />
+       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"

static/albumicons/2.0.svg

@@ -25,8 +25,8 @@
      inkscape:document-units="mm"
      showgrid="false"
      inkscape:zoom="3.5705387"
-     inkscape:cx="11.062756"
+     inkscape:cx="22.965722"
-     inkscape:cy="103.06568"
+     inkscape:cy="123.79084"
      inkscape:window-width="2560"
      inkscape:window-height="1377"
      inkscape:window-x="1912"
@@ -42,8 +42,11 @@
      transform="translate(17.134108,-7.2047088)">
     <path
        id="rect1497"
-       style="fill:#002bce;stroke-width:0.264583"
+       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" />
+       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"

static/albumicons/3.0.svg

@@ -25,8 +25,8 @@
      inkscape:document-units="mm"
      showgrid="false"
      inkscape:zoom="3.5705387"
-     inkscape:cx="11.062756"
+     inkscape:cx="22.965722"
-     inkscape:cy="103.06568"
+     inkscape:cy="101.38526"
      inkscape:window-width="2560"
      inkscape:window-height="1377"
      inkscape:window-x="1912"
@@ -42,8 +42,11 @@
      transform="translate(17.134108,-21.509332)">
     <path
        id="rect1509"
-       style="fill:#be9e10;stroke-width:0.264583"
+       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" />
+       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"

static/albumicons/5.0.svg

@@ -25,8 +25,8 @@
      inkscape:document-units="mm"
      showgrid="false"
      inkscape:zoom="3.5705387"
-     inkscape:cx="11.062756"
+     inkscape:cx="22.965722"
-     inkscape:cy="103.06568"
+     inkscape:cy="123.79084"
      inkscape:window-width="2560"
      inkscape:window-height="1377"
      inkscape:window-x="1912"
@@ -42,8 +42,11 @@
      transform="translate(17.134108,-43.778434)">
     <path
        id="rect1527"
-       style="fill:#3f0097;stroke-width:0.264583"
+       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" />
+       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"

static/albumicons/5.5.svg

@@ -7,42 +7,16 @@
    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,-50.485358)">
     <path
        id="rect1533"
-       style="fill:#3b5676;stroke-width:0.264583"
+       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"

static/albumicons/6.0.svg

@@ -25,8 +25,8 @@
      inkscape:document-units="mm"
      showgrid="false"
      inkscape:zoom="3.5705387"
-     inkscape:cx="11.062756"
+     inkscape:cx="22.965722"
-     inkscape:cy="103.06568"
+     inkscape:cy="123.79084"
      inkscape:window-width="2560"
      inkscape:window-height="1377"
      inkscape:window-x="1912"
@@ -42,8 +42,11 @@
      transform="translate(17.134108,-57.506678)">
     <path
        id="rect1539"
-       style="fill:#5a5a5a;stroke-width:0.264583"
+       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" />
+       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"

static/motifbuttonpressed.css

@@ -1,7 +1,9 @@
-.top-buttons a:last-child{
+.nav-button.motif{
-    background-color: var(--light-border);
+    background-color: var(--pressed);
     border-style: inset;
-    border-color: var(--light-border);
+}
-    border-radius: 1.2rem;
+
-    border-width: 0.3rem;
+.nav-text.motif{
+    color: var(--pressed-text);
+    text-shadow: 1px 1px 2px black;
 }

static/script.js

@@ -3,18 +3,26 @@ function getAnchor() {
 }
 
 window.addEventListener('load', (event) => {
-    preclicked = getAnchor();
+    const preclicked = getAnchor();
-    console.log(preclicked);
+    if (! preclicked) return;
     const radiobutton = document.getElementById(preclicked);
-    console.log(radiobutton);
     if (radiobutton){
         radiobutton.checked = true;
-
+        const label = document.getElementById(`${preclicked}_label`);
-    }
-    label = document.getElementById(`${preclicked}_label`)
         label.scrollIntoView();
+    }
 });
 
+function albumselect(code){
+    const radiobutton = document.getElementById(code);
+    if (radiobutton){
+        radiobutton.checked = true;
+        const label = document.getElementById(`${code}_label`);
+        label.scrollIntoView();
+    }
+    document.getElementById('search-input').value = '';
+};
+
 function collapse(clickevent){
     const radiobutton = document.getElementById(clickevent.target.htmlFor);
     if (radiobutton.checked){

static/songbuttonpressed.css

@@ -1,7 +1,9 @@
-.top-buttons a:first-child{
+.nav-button.song{
-    background-color: var(--light-border);
+    background-color: var(--pressed);
     border-style: inset;
-    border-color: var(--light-border);
+}
-    border-radius: 1.2rem;
+
-    border-width: 0.3rem;
+.nav-text.song{
+    color: var(--pressed-text);
+    text-shadow: 1px 1px 2px black;
 }

static/style.css

@@ -1,148 +1,233 @@
 :root{
-    --light-block: lch(90% 25 85);
+    --block: lch(90% 25 85);
-    --light-box: lch(100% 0 90);
+    --box: lch(100% 0 90);
-    --light-back: linear-gradient(90deg, lch(95% 20 260), white 25%, white 75%, lch(95% 20 260));
+    --back: radial-gradient(white 50%, lch(95% 10 225) );
-    --light-border: lch(80% 45 85);
+    --search-back: white;
+    --thick-border: lch(80% 45 85);
+    --thin-border: lch(40% 45 85);
+    --pressed: lch(65% 40 75);
+    --pressed-text: lch(100% 25 85);
+    --text: black;
+    --light-text: gray;
+    --text-shadow: black;
     font-family: "Zen Maru Gothic", sans-serif;
+    color: var(--text);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root{
+        --block: lch(20% 0 75);
+        --box: lch(40% 2.5 75);
+        --back: radial-gradient(lch(20% 0 75), black );
+        --search-back: lch(35% 0 75);
+        --thick-border: lch(60% 10 75);
+        --thin-border: lch(60% 10 75);
+        --pressed: lch(5% 0 75);
+        --pressed-text: lch(95% 5 75);
+        --text: lch(95% 5 75);
+        --box-text: white;
+        --light-text: lch(65% 5 75);
+        --light-box-text: lch(85% 5 75);
+    }
 }
 
 h1, h2, h3, h4, h5, h6{
     font-family: "Shippori Mincho", serif;
+    margin: 0;
 }
 
 body{
+    display: flex; flex-direction: column;
     margin: 0;
-    background: var(--light-back);
+    background: var(--back);
-    display: flex;
+    background-attachment: fixed;
-    flex-direction: column;
-    flex-shrink: 0;
     height: 100vh;
 }
 
-header{
+a{
-    background-color: var(--light-block);
+    color: var(--text);
-    margin: 0;
-    border-style: outset;
-    border-top: 0; border-left: 0; border-right: 0;
-    border-color: var(--light-border);
 }
 
-footer{
+span{
-    background-color: var(--light-block);
+    color: var(--text);
-    border-style: outset;
+}
-    border-bottom: 0; border-left: 0; border-right: 0;
+
-    border-color: var(--light-border);
+/* HEADER */
-    width: 100%;
+
-    padding: 0;
+header{
-    margin-top: auto;
+    background: var(--block);
+    margin: 0;
+    border-style: outset; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thick-border);
 }
 
 .top-buttons{
-    display: flex;
+    display: flex; flex: auto; justify-content: center;
-    margin: 0;
+    padding: .6rem;
-    padding: 1.2rem;
     column-gap: .6rem;
     max-height: fit-content;
-
+    max-width: 64rem;
+    margin: auto;
 }
 
-.top-buttons a{
+.nav-button{
-    flex: auto;
+    display: flex; flex-direction: column; justify-content: center;
-    display: flex;
+    background-color: var(--block);
-    list-style: none;
+    border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
-    justify-content: center;
-    align-items: center;
     position: relative;
-    border-style: outset;
+    flex: auto;
-    border-color: var(--light-border);
-    border-radius: 1.2rem;
-    border-width: 0.3rem;
 }
 
-
+.nav-button a{
-
+    text-decoration: none;
-.top-buttons a:nth-child(2){
-    flex: none;
-
 }
 
-.top-buttons a:nth-child(2):before{
+.nav-button li{
-    content: "";
+    list-style: none;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    border-style: outset;
-    border-color: var(--light-border);
-    border-radius: 1.2rem;
-    border-width: 0.3rem;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
 }
 
-/* .top-buttons a::before{
+.nav-text{
-    content: "";
+    color: var(--text);
-    position: absolute;
+    text-align: center;
-    bottom: 0;
-    right: 0;
-    border-style: outset;
-    border-color: var(--light-border);
-    border-radius: 1.2rem;
-    border-width: 0.3rem;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
-} */
-
-.top-buttons li{
-    vertical-align: center;
 }
 
-.top-buttons img{
+.nav-text::before{
+    content: "-"
+}
+
+.nav-text::after{
+    content: "-"
+}
+
+.nav-button img{
     display: block;
+    margin: auto;
+
 }
 
+.nav-button.home{
+    flex: none;
+}
+
+.nav-button.home::before{
+    content: "";
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+/* HOME BUTTON */
+
+.home-main{
+    margin-top: clamp(0rem, calc(8vw - 8rem), 2.4rem); margin-bottom: auto;
+    background: var(--block);
+}
+
+.home-title{
+    padding: 4vh;
+    text-align: center;
+    border-style: outset; border-color: var(--thick-border);
+    background: radial-gradient(lch(35% 90 50) 50%, lch(10% 90 50));
+    position: relative;
+}
+
+.home-title h1{
+    text-shadow: 1px 1px 2px var(--text-shadow);
+    color: lch(90% 25 85);
+}
+
+.home-title h1::before{
+    content: "-"
+}
+
+.home-title h1::after{
+    content: "-"
+}
+
+.home-title h3{
+    margin-top: 1.2rem;
+    color: lch(90% 25 85);
+}
+
+.home-title p{
+    position: absolute;
+    right: .3rem;
+    bottom: .3rem;
+    font-size: small;
+    margin: 0;
+    color: lch(80% 50 50);
+}
+
+.home-body{
+    
+    padding-top: 1.2rem;
+}
+
+.home-body h2{
+    text-align: center;
+}
+
+.home-body p{
+    margin-left: 1.2rem; margin-right: 1.2rem; margin-top: .6rem;
+    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;
+}
+
+.home-button{
+    display: flex; flex-direction: column; list-style: none; justify-content: center; align-items: center;
+    flex: auto;
+    position: relative;
+    border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem;
+    text-decoration: none;
+    background-color: var(--block);
+    padding-top: 1.2rem; padding-bottom: 1.2rem;
+}
+
+
 /* SEARCH BAR */
 
 .search-bar{
+    display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center;
     max-width: 64rem;
     width: 100%;
-    height: 2rem;
+    height: 3.6rem;
-    margin-left: auto;
+    margin-left: auto; margin-right: auto;
-    margin-right: auto;
+    background-color: var(--block);
-    background-color: var(--light-block);
+    border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thin-border); border-width: 1px;
-    border-style: outset;
-    border-top: 0;
-    border-color: var(--light-border);
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
 }
 
 .search-items{
-    display: inline-block;
     position: relative;
+    height: 2.4rem;
     width: 80%;
 }
 
 .search-items input{
-    all: unset;
+    /* all:unset; */
-    background-color: white;
+    font: unset;
+    color: unset;
+    background-color: var(--search-back);
     width: 100%;
-    height: 1.2rem;
+    height: 2.4rem;
+    border-style: solid; border-color: var(--thin-border); border-width: 1px;
 }
 
+/* SEARCH RESULTS */
+
 #search-results{
-    display: flex;
+    display: flex; flex-direction: column;
-    flex-direction: column;
-    margin: auto;
-    position: absolute;
     width: 100%;  
 }
 
@@ -151,86 +236,109 @@ footer{
 }
 
 #search-results ul{
-    background-color: white;
+    background-color: var(--search-back);
     padding-left: 0;
     margin-top: 0;
     list-style: none;
     z-index: 1;
+    border-style: solid; border-color: var(--thin-border); border-width: 1px; border-top: 0; border-bottom: 0;
 }
 
-main{
+#search-results li{
-    background-color: var(--light-block);
+    display: flex; align-items: center;
-    max-width: 64rem;
+    min-height: 2.4rem;
-    width: 100%;
+    border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0;
-    margin-left: auto;
-    margin-right: auto;
 }
 
-main ul{
+#search-results a{
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    padding-left: 0;
-}
-
-h1{
-    margin: 0;
-}
-
-h2{
-    margin: 0;
-    font-
-}
-
-h3{
-    margin: 0;
-}
-
-a{
     text-decoration: none;
 }
 
-/* HOME BUTTONS */
+.search-icon{
+    min-width: 2.6rem;
+}
 
-.home-title{
+.search-icon img{
-    padding: 4.8rem;
+    margin-left: auto;
+    height: 1.8rem;
+    display: block;
+}
+
+.search-icon.album img{
+    display: block;
+    height: 1.2rem;
+    margin-left: auto;
+}
+
+.search-type{
+    font-size: small;
+    color: var(--light-box-text);
+    margin-left: .3rem;
+    min-width: 2.6rem;
+}
+
+/* MAIN PAGE */
+
+main{
+    background-color: var(--block);
+    max-width: 64rem;
+    width: 100%;
+    margin-left: auto; margin-right: auto;
+}
+
+main ul{
+    display: flex; flex-direction: column;
+    margin: 0;
+    padding-left: 0;
+}
+
+/* FOOTER */
+
+footer{
+    background: linear-gradient(90deg, lch(10% 90 50), lch(35% 90 50) 25%, lch(35% 90 50) 75%, lch(10% 90 50));
+    width: 100%;
+    padding: 0;
+    margin-top: auto;
+}
+
+.footer-content{
+    display: flex; justify-content: center; flex-wrap: wrap; align-items: center;
+    max-width: 64rem;
+    margin-left: auto; margin-right: auto; margin-bottom: .3rem; margin-top: .3rem;
+}
+
+.footer-content span{
+    font-size: calc(.7rem + .3vw);
+    margin-left: 1.2rem; margin-right: 1.2rem;
     text-align: center;
-    border-style: solid;
+    color: lch(90% 25 85);
-    border-top: 0; border-left: 0; border-right: 0;
 }
 
-.home-nav{
+.footer-content a{
-    display: flex;
+    color: lch(90% 25 85);
-    flex: auto;
-    justify-content: space-around;
 }
 
-.home-button{
+.copyright{
-    border-style: outset;
-    border-color: var(--light-border);
-    border-radius: 1.2rem;
-    flex: auto;
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
-    list-style: none;
+    column-gap: .3em;
     justify-content: center;
-    align-items: center;
+    margin-left: 1.2rem; margin-right: 1.2rem;
-    position: relative;
 }
 
-
+.copyright span{
+    margin: 0;
+    text-align: center;
+}
 /* INDEX LISTS */
 
 .album-list{
-    display: flex;
+    display: flex; flex-direction: column;
-    flex-direction: column;
 }
 
 .category-list{
-    display: flex;
+    display: flex; flex-wrap: wrap; align-content: flex-start; flex-basis: 51%;
-    flex-wrap: wrap;
+    justify-content: center;
-    align-content: flex-start;
-    flex-basis: 51%;
 }
 
 .album-icon{
@@ -238,87 +346,57 @@ a{
     align-self: center;
 }
 
+/* INDEX BLOCKS */
+
+.sort-box{
+    margin-top: 1.2rem; margin-left: 1.2rem; margin-right: 1.2rem;
+}
+
+.sort-box.album:not(:first-child){
+    margin-top: 2.4rem;
+}
+
+.sort-box:last-child{
+    margin-bottom: 1.2rem;
+}
+
+.sort-box.category{
+    width: 29.6rem;
+    background: var(--block);
+}
+
+.sort-header{
+    border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-width: 1px; border-color: var(--thin-border);
+}
+
+.sort-header.album{
+    display: flex; align-items: center;
+    font-size: calc(.7rem + .4vw);
+    background: var(--block);
+    position: sticky;
+    top: 0;
+    gap: .6rem;
+}
+
 .date{
-    margin-top: .3rem; margin-left: 2.4rem;
+    margin-top: .6rem; margin-left: 2.4rem;
+    font-size: small;
 }
 
 /* INDEX ENTRIES */
 
-.sort-box{
-    border-style: solid;
-    border-left: 0; border-right: 0; border-top: 0;
-    border-color: black;
-    border-width: 1px;
-}
-
-.sort-box h2{
-    color: black;
-}
-
-.sort-box.album{
-    margin-bottom: 1.2rem;
-    display: flex;
-    align-items: center;
-    border-style: solid;
-    border-top: 0; border-left: 0; border-right: 0;
-    border-width: 1px;
-    margin: 1.2rem; margin-bottom: 0;
-    background: var(--light-block);
-    position: sticky;
-    top: 0;
-    gap: .6rem
-}
-
-.date{
-    font-size: small;
-}
-
-.sort-box.category{
-    gap: 1.2rem;
-    margin-left: auto; margin-right: auto; margin-bottom: 1.2rem;
-    width: 24rem;
-
-}
-
-.sort-box.category{
-    margin: 1.2rem;
-    margin-bottom: 0px;
-    background: var(--light-block);
-}
-
 .entry-box{
+    display: flex; align-items: center;
     list-style: none;
     min-height: 1.8rem;
-    display: flex;
+    background-color: var(--box);
-    border-radius: 1.2rem 0% 0% 1.2rem;
+    border-radius: 1.2rem;
-    background: linear-gradient(90deg, var(--light-box) 90%, rgba(255, 255, 255, 0) 100%);
+    margin-top: .6rem;
+    text-decoration: none;
 }
 
 .entry-box.song{
-    margin-top: .6rem; margin-bottom: .6rem; margin-left: 1.2rem; margin-right: 1.2rem;
+    margin-bottom: .6rem;
-}
-
-.entry-box.motif{
-    margin: 1.2rem; margin-bottom: 0;
-    justify-content: center;
-    align-items: center;
-}
-
-.entry-box.song li{
-    display: flex;
-    flex: auto;
-    flex-wrap: nowrap;
-    justify-content: left;
-    /* align-content: bottom; */
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    height: 1.8rem;
-
-}
-
-.entry-box.song span{
-    align-self: center;
 }
 
 .entry-box.song.empty{
@@ -326,105 +404,113 @@ a{
     background: none;
 }
 
-.entry-box.motif span{
+.entry-box li{
-    color: black;
+    display: flex; flex: auto; flex-wrap: nowrap; align-items: center;
-    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: 1.8rem;
+}
 
+.entry-box.motif li{
+    justify-content: center;
+    flex-grow: 0;
+}
+
+.entry-box.song li{
+    justify-content: left;
 }
 
 .entry-box.motif::before{
-    content: "b";
+    content: "";
+    max-width: 3.6rem;
+    flex-grow: 1;
     visibility: hidden;
     margin-right: auto;
 }
 
 .motif-name{
     text-align: center;
-    color: black;
+    color: var(--box-text);
+
 }
 
 .track-number{
     min-width: 2.4rem;
     margin-left: .6rem;
-    color: black;
+    color: var(--box-text);
 }
 
 .track-name{
-    color: black;
+    color: var(--box-text);
 }
 
 .track-name-jp{
-    margin-left: 1.2rem;
+    margin-left: 2.4rem;
-    color: gray;
+    color: var(--light-box-text);
 }
 
 .empty{
-    color: gray;
+    color: var(--light-text);
 }
 
 .clip-count{
-    color: black;
+    color: var(--box-text);
-    flex-wrap: nowrap;
     display: inline;
-    text-align: right;
+    text-align: left;
-    min-width: 0;
+    min-width: 2.4rem;
-    margin-right: 1.2rem;
+    margin-left: .24rem;
-    min-width: 1.6rem;
 }
 
 .count-icon{
     width: 1.2rem; height: 1.2rem;
     margin-left: auto;
     display: block;
-    align-self: center;
 }
 
 /* SONG INDEX ALBUM DROPDOWNS */
 
-.sort-box.album label{
-    cursor: pointer;
-}
-
 .collapse{
     display: none;
 }
 
-.sort-list{
+.sort-list.album{
     display: none;
 }
 
-.sort-box.album > *{
+.sort-header.album > *{
+    cursor: pointer;
     pointer-events: none;
 }
 
-.sort-box.album::after{
+.sort-header.album::after{
     content: "▼";
     margin-left: auto;
+    color: var(--thin-border);
 }
 
-.collapse:checked ~ .sort-list{
+.collapse:checked ~ .sort-list.album{
     display:initial
 }
 
-.collapse:checked ~ .sort-box.album::after{
+.collapse:checked ~ .sort-header.album::after{
     content: "▲";
+    color: var(--thin-border);
 }
 
 /* ENTRY PAGE TITLES */
 
 .title-box{
     margin: 1.2rem; margin-bottom: 1.2rem;
-    background: var(--light-box);
+    background: var(--box);
 }
 
 .eng-title{
-    display: flex;
+    display: flex; align-items: center;
-    align-items: center;
+    color: var(--box-text);
-    /* margin-bottom: .6rem; */
 }
 
 .title-box img{
-    align-self: center;
     margin-left: .6rem;
 }
 
@@ -435,27 +521,27 @@ a{
 }
 
 .title-jp{
-    color: gray;
+    color: var(--light-box-text);
     margin-right: 1.2rem; padding-bottom: .6rem;
     text-align: right;
 }
 
 .title-album{
-    margin-left: auto; margin-right: .7rem; margin-top: .7rem;
+    display: flex; align-items: center;
-    align-self: flex-start;
+    margin-left: auto;
 }
 
 .title-album img{
     margin: 0;
+    display: block;
+    margin-right: .6rem;
 }
 
 /* ENTRY PAGE DETAILS */
 
 .track-info{
-    display: flex;
+    display: flex; flex-wrap: wrap; justify-content: space-around;
-    flex-wrap: wrap;
+    row-gap: 1.2rem;
-    justify-content: space-around;
-    gap: 1.2rem;
 }
 
 .track-info li{
@@ -463,9 +549,9 @@ a{
 }
 
 .songpage-detail{
-    display: flex;
+    display: flex; flex-direction: column;
-    flex-direction: column;
+    min-width: 18rem;
-    min-width: 16rem;
+    margin-left: 1.2rem; margin-right: 1.2rem;
 }
 
 .songpage-detail ul{
@@ -477,9 +563,35 @@ a{
     margin-bottom: 1.2rem;
 }
 
+.songpage-detail li{
+    display: flex; align-items: baseline; gap: .6rem;
+    flex-wrap: wrap;
+}
+
+.songpage-credit{
+    font-size: small;
+    min-width: 4.2rem;
+    text-align: right;
+}
+
+.songpage-img{
+    display: inline-block;
+    height: 1.2rem;
+    align-self: flex-end;
+}
+
+.song-location{
+    display: flex; flex-direction: column;
+    width: 100%;
+    justify-content: center;
+}
+.song-location h2{
+    text-align: center;
+    margin-bottom: 1.2rem;
+}
+
 .entrypage-connections{
-    display: flex;
+    display: flex; flex-direction: column;
-    flex-direction: column;
     width: 100%;
     justify-content: center;
 }
@@ -489,17 +601,29 @@ a{
 }
 
 .entrypage-clip{
+    display: flex; flex-wrap: wrap-reverse;
     margin-bottom: 1.2rem;
-    display: flex;
+    column-gap: 2.4rem; row-gap: .6rem;
-    flex-wrap: wrap-reverse;
-    column-gap: 2rem;
     justify-content: center;
     align-items: center;
 }
 
+.connection-icon{
+    display: inline-block;
+    width: 1.2rem; height: 1.2rem;
+}
+
 .clip-pointer{
+    display: flex; justify-content: center; align-items: center;
     width: 18rem;
-    /* white-space: nowrap; */
+    gap: .3rem;
     text-align: center;
 }
 
+.clip-album-icon{
+    height: 1.2rem;
+}
+
+.clip-pointer a{
+    flex-shrink: 1;
+}

templates/base.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <title>{% block title required %}{% endblock %} - Eorzea Songbook</title>
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
-        <meta name="description" content="Listen to the motifs of Final Fantasy XIV's soundtrack." />
+        <meta name="description" content="An unofficial library of the motifs in Final Fantasy XIV's soundtrack." />
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Shippori+Mincho|Shippori+Mincho:bold|Zen+Maru+Gothic|Zen+Maru+Gothic:bold" />
         <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
         {%block sheet %}{% endblock %}
@@ -16,7 +16,10 @@
     <body>
 
         {% block nav %}{% include 'nav.html' %}{% endblock %}
-        <main>{% block content required %}{% endblock %}</main>
+        {% block main %}<main>{% endblock %}
+        {% block content required %}{% endblock %}
+        {% block main2 %}</main>{% endblock %}
+        
         {% block footer %}{% include 'footer.html' %}{% endblock %}
 
     </body>

templates/footer.html

@@ -1,5 +1,16 @@
 <footer>
 
-    <p> The footer will be in here, when it's ready. </p>
+    <div class="footer-content">
-    
+        <span>
+            Suggest a new connection
+        </span>
+        <span>
+            <a href="#" class="top-of-page">↑Top of page↑</a>
+        </span>
+        <div class="copyright">
+            <span>Audio is</span>
+            <span>©2010-2023 SQUARE ENIX CO., LTD.</span>
+            <span>All Rights Reserved.</span>
+        </div>
+    </div>
 </footer>

templates/home.html

@@ -1,22 +1,84 @@
 {% extends 'base.html' %}
 {% block title %}Home{% endblock %}
 {% block nav %}{% endblock %}
+{% block main %}{% endblock %}
 {% block content %}
 
-<h1 class="home-title">The Eorzea Songbook</h1>
+<main class="home-main">
 
-<p> Explore the music of Final Fantasy XIV! Discover the recurring melodies in your favorite songs, or take a closer look at the motifs and their appearances. </p>
+    <hgroup class="home-title">
+        <h1>The Eorzea Songbook</h1>
+        <h3>An unofficial library of motifs in the Final Fantasy XIV soundtrack.</h3>
+        <p>Last updated: 26/06/2023</p>
+    </hgroup>
 
     <div class="home-nav">
         <a href="{{ url_for('songindex') }}" class="home-button">
-        <img src="/static/songicon.png" alt="Song Index" />
+            <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Index" />
-        <h2>Songs</h2>
+            <h2 class="nav-text">Songs</h2>
         </a>
 
         <a href="{{ url_for('motifindex') }}" class="home-button">
-        <img src="/static/motificon.png" alt="Motif Index" />
+            <img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Index" />
-        <h2>Motifs</h2>
+            <h2 class="nav-text">Motifs</h2>
         </a>
     </div>
-{% block footer %}{% endblock %}
+
+    <div class="home-body">
+        <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>For example, here's what you hear when you enter the city of Ishgard.</p>
+        <div class="entrypage-clip">
+            <audio
+                controls
+                src = "{{ url_for('static', filename='clip/') }}0288-024.flac" 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">
+            <audio
+                controls
+                src = "{{ url_for('static', filename='clip/') }}0317-024.flac" 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">
+            <audio
+                controls
+                src = "{{ url_for('static', filename='clip/') }}0294-024.flac" 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">
+            <audio
+                controls
+                src = "{{ url_for('static', filename='clip/') }}0337-024.flac" 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>
+    </div>
+
+
+
+</main>
+
+{% block main2 %}{% endblock %}
 {% endblock %}

templates/motif.html

@@ -6,21 +6,20 @@
 
 {% block content %}
 <hgroup class="title-box eng-title">
-    <img src="/static/motificon.png" alt="Motif Icon" class="title-icon"/><h1> {{ name }} </h1>
+    <img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon" class="title-icon"/><h1> {{ name }} </h1>
 </hgroup>
 <!-- Clips -->
 
 <div class="entrypage-connections">
+    <ul>
+    {% for song_id, motif_id, song, feature in clip_info if feature%}
+            {% include "motifpageclipget.html" %}
+    {% endfor %}
+    </ul>
     <h2>Featured In:</h2>
     <ul>
-    {% for song_id, motif_id, song in clip_info %}
+    {% for song_id, motif_id, song, feature in clip_info if not feature %}
-        <li class="entrypage-clip">
+            {% include "motifpageclipget.html" %}
-            <audio
-                controls
-                src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
-            </audio>
-            <span class="clip-pointer"><a href="/song/{{ song_id }}">{{ song }}</a></span>
-        </li>
     {% endfor %}
     </ul>
 </div>

templates/motifindex.html

@@ -6,15 +6,15 @@
 {% block content %}
 <section class="category-list">
     {% for category_id, name in category_info %}
-    <div>
+    <div class="sort-box category">
-        <h2 class="sort-box category">{{ name }}</h2>
+        <h2 class="sort-header category">{{ name }}</h2>
-        <ul>
+        <ul class="sort-list category">
             {% 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>
                         <div class="motif-name">{{ motif }}</div>
                     </li>
-                    <img src="/static/songicon.png" alt="Song Icon" class="count-icon"/>
+                    <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="count-icon"/>
                     {% if count %}<div class="clip-count">⨯ {{ count }}</div>{% endif %}
                 </a>
             {% endfor %}

templates/motifpageclipget.html

@@ -0,0 +1,13 @@
+<li class="entrypage-clip">
+    <audio
+        controls
+        src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" 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=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>
+</li>

templates/nav.html

@@ -1,16 +1,31 @@
 <header>
     <nav>
         <ul class="top-buttons">
-            <a href="{{ url_for('songindex') }}" class="song-button"><li><img src="/static/songicon.png" alt="Song Index" /></li></a>
+            <div class="nav-button song">
-            <a href="{{ url_for('homepage') }}" class="home-button"><li><img src="/static/songbook.png" alt="Home" /></li></a>
+                <a href="{{ url_for('songindex') }}">
-            <a href="{{ url_for('motifindex') }}" class="motif-button"><li><img src="/static/motificon.png" alt="Motif Index" /></li></a>
+                    <li><img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Index" class="nav-image"/>
+                    <h3 class="nav-text song">Songs</h3>
+                </li></a>
+            </div>
+            <div class="nav-button home">
+                <a href="{{ url_for('homepage') }}"><li>
+                    <img src="{{ url_for('static', filename='songbook.png') }}" alt="Home" class="nav-image" />
+                </li></a>
+            </div>
+            <div class="nav-button motif">
+                <a href="{{ url_for('motifindex') }}"><li>
+                    <img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Index" class="nav-image" />
+                    <h3 class="nav-text motif">Motifs</h3>
+                </li></a>
+            </div>
         </ul>
     </nav>
-
 </header>
+
 <div class="search-bar">
     <div class="search-items">
         <input
+            id="search-input"
             type="search"
             name="q"
             autocomplete="off"

templates/searchresults.html

@@ -1,12 +1,30 @@
 <h2>Search Results:</h2>
 <ul>
-{% for desc, id, name, _ in searchresult %}
+{% for desc, id, name, code, _ in searchresult %}
     {% if desc == 'song' %}
-        <li><a href="{{ url_for('songpage', id=id) }}">Song: {{ name }} </a></li>
+    <a href="{{ url_for('songpage', id=id) }}"><li>
+        <span class="search-icon">
+            <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon"/>
+        </span>
+        <span class="search-type">Song:</span>
+        {{ name }}
+    </li></a>
     {% elif desc == 'album' %}
-        <li><a href="{{ url_for('albumpage', id=id) }}">Album: {{ name }} </a></li>
+    <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 }}"/>
+        </span>
+        <span class="search-type">Album:</span>
+        {{ name }}
+    </li></a>
     {% elif desc == 'motif' %}
-        <li><a href="{{ url_for('motifpage', id=id) }}">Motif: {{ name }} </a></li>
+    <a href="{{ url_for('motifpage', id=id) }}"><li>
+        <span class="search-icon">
+            <img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon"/>
+        </span>
+        <span class="search-type">Motif:</span>
+        {{ name }}
+    </li></a>
     {% endif %}
 {% endfor %}
 </ul>

templates/song.html

@@ -3,12 +3,14 @@
 {% for name, _ in song_info %}{{ name }}{% endfor %}
 {% endblock %}
 
+{% set clipmode = "motif" %}
+
 {% block sheet %}<link rel="stylesheet" href="{{ url_for('static', filename='songbuttonpressed.css') }}" />{% endblock %}
 
 {% block content %}
 <hgroup class="title-box">
     <div class="eng-title">
-    <img src="/static/songicon.png" alt="Song Icon" />
+    <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" />
     {% for name, name_jp in song_info %}
         <h1>{{ name }}</h1>
     {% endfor %}
@@ -33,7 +35,11 @@
         <h2 >Artist:  </h2>
         <ul>
         {% for name, name_rm, credit in artist_info %}
-            <li>{{ credit }}: {% if name_rm %}{{ name_rm }} - {% endif %}{{ name }}</li>
+            <li>
+                <span class="songpage-credit">{{ credit }}:</span>
+                <span>{{ name }}</span>
+                <span>{% if name_rm %}{{ name_rm }} {% endif %}</span>
+            </li>
         {% endfor %}
         </ul>
     </div>
@@ -44,24 +50,39 @@
         <h2>Album: </h2>
         <ul>
         {% for album_id, track, album_name, album_code in album_info %}
-        <li><a href="{{ url_for('songindex', _anchor='') }}{{ album_code }}">{{ album_name }}</a> - #{{ track }}</li>
+        <li>
-        {% endfor %}
+            <img src="{{ url_for('static', filename='albumicons/') }}{{ album_code }}.svg" alt="{{ album_code }}" class="songpage-img"/>
-        </ul>
+            <a href="{{ url_for('songindex', _anchor='') }}{{ album_code }}">{{ album_name }}</a> - Track #{{ track }}
-    </div>
-<!-- Motifs -->
-    <div class="entrypage-connections">
-        <h2>Motifs Featured: </h2>
-        <ul>
-        {% for song_id, motif_id, motif in clip_info %}
-            <li class="entrypage-clip">
-                <audio
-                    controls
-                    src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
-                </audio>
-                <span class="clip-pointer"><a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a></span>
         </li>
         {% endfor %}
         </ul>
     </div>
+
+<!-- Location -->
+
+    {% if description %}
+
+    <div class="song-location">
+        <h2>Used In:</h2>
+    </div>
+
+    {% endif %}
+
+<!-- Motifs -->
+
+    {% if clip_info %}
+    <div class="entrypage-connections">
+        <h2>Motifs Featured: </h2>
+        <ul>
+        {% for song_id, motif_id, motif in clip_info %}
+            {% include "songpageclipget.html" %}
+        {% endfor %}
+        </ul>
+    </div>
+    {% else %}
+    <div class="entrypage-connections">
+        <h2>No connections yet. Suggest one?</h3>
+    </div>
+    {% endif %}
 </div>
 {% endblock %}

templates/songindex.html

@@ -9,22 +9,23 @@
 {% block content %}
 <section class="album-list">
     {% for album_id, name, date, code in album_info %}
+    <div class="sort-box album">
         <input type="radio" name="album" id="{{ code }}" class="collapse">
-        <label for="{{ code }}" id="{{ code }}" class="sort-box album" onclick="collapse(event)">
+        <label for="{{ code }}" id="{{ code }}_label" class="sort-header album" onclick="collapse(event)">
             <img src="{{ url_for('static', filename='albumicons/') }}{{ code }}.svg" alt="{{ code }}" class="album-icon"/> 
             <h2>{{ name }}</h2>
         </label>
-        <ul class="sort-list">
+        <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 %}
-                {% if count > 0 %}
+                {% if count %}
                     <a href="{{ url_for('songpage', id=song_id) }}" class="entry-box song full">
                         <li>
                             <span class="track-number full">#{{ track }}: </span>
                             <span class="track-name full">{{ name }}</span>
                             {% if name_jp %}<span class="track-name-jp full">{{ name_jp }}</span>{% endif %}
                         </li>
-                        <img src="/static/motificon.png" alt="Motif Icon" class="count-icon"/>
+                        <img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon" class="count-icon"/>
                         <span class="clip-count">⨯ {{ count }} </span>
                     </a>
                 {% else %}
@@ -38,6 +39,7 @@
                 {% endif %}
             {% endfor %}
         </ul>
+    </div>
     {% endfor %}
 </section>
 

templates/songpageclipget.html

@@ -0,0 +1,10 @@
+<li class="entrypage-clip">
+    <audio
+        controls
+        src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" 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>