Pretties up the song and motif pages.

app.py

@@ -259,16 +259,16 @@ def songpage(id):
 
     # query song name
 
-    name, = db.execute('''
+    song_info = db.execute('''
     select
-        name
+        name, name_jp
     from
         song
     where
         id = ?
     ''',
     (id,)
-    ).fetchone()
+    ).fetchall()
     
     # query album info
     
@@ -333,7 +333,7 @@ def songpage(id):
     ).fetchall()
 
     return flask.render_template('song.html',
-        name=name,
+        song_info=song_info,
         id=id,
         album_info=album_info,
         clip_info=clip_info,

static/style.css

@@ -38,22 +38,47 @@ footer{
 
 .top-buttons{
     display: flex;
-    padding-left: 0;
     margin: 0;
-    padding: 2rem;
+    padding: 1rem;
     column-gap: 1rem;
+    max-height: fit-content;
 
 }
-.top-buttons li{
+.top-buttons a{
     flex: auto;
+    display: flex;
+    list-style: none;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.top-buttons a:nth-child(2){
+    flex: none;
+
+}
+
+.top-buttons a::before{
+    content: "";
+    position: absolute;
+    bottom: 0;
+    right: 0;
     border-style: outset;
     border-color: var(--light-border);
-    list-style: none;
-    text-align: center;
+    border-radius: 1rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
 }
 
-.top-buttons li:nth-child(2){
-    flex: none;
+.top-buttons li{
+    vertical-align: center;
+}
+
+.top-buttons img{
+    display: block;
 }
 
 .search-bar{
@@ -129,6 +154,10 @@ h2{
     margin: 0;
 }
 
+h3{
+    margin: 0;
+}
+
 a{
     text-decoration: none;
 }
@@ -136,7 +165,6 @@ a{
 .album-list{
     display: flex;
     flex-direction: column;
-    gap: 1rem;
 }
 
 .category-list{
@@ -144,14 +172,13 @@ a{
     flex-wrap: wrap;
     align-content: flex-start;
     flex-basis: 51%;
-    row-gap: 1rem;
 }
 
 .album-info{
     display: flex;
     align-items: baseline;
-    border-style: solid;
-    border-color: var(--light-box);
+    /* border-style: solid;
+    border-top: 0; border-left: 0; border-right: 0; */
     margin: 1rem;
     margin-bottom: 0.5rem;
     background: var(--light-box);
@@ -165,13 +192,15 @@ a{
 }
 
 .sort-box.album{
-    gap: 1rem;
+    margin-bottom: 1rem;
+    
 }
 
 .sort-box.category{
     gap: 1rem;
     margin-left: auto; margin-right: auto;
     width: 24rem;
+    margin-bottom: 1rem;
 }
 
 .sort-box.category h2{
@@ -186,17 +215,19 @@ a{
     list-style: none;
     min-height: 1.5rem;
     display: flex;
+    border-radius: 1rem 0% 0% 1rem;
+    background: linear-gradient(90deg, var(--light-box) 90%, rgba(255, 255, 255, 0) 100%);
 }
 
 .entry-box.song{
-    margin-top: 0.5rem; margin-bottom: 0.5rem; margin-left: 4rem; margin-right: 1rem;
+    margin-top: 0.5rem; margin-bottom: 0.5rem; margin-left: 1rem; margin-right: 1rem;
 }
 
 .entry-box.motif{
     margin: 1rem;
     margin-bottom: 0;
-    background: var(--light-box);
     justify-content: center;
+    align-items: baseline;
 }
 
 .entry-box.song li{
@@ -215,12 +246,9 @@ a{
     align-self: center;
 }
 
-.entry-box.song.full{
-    background: var(--light-box);
-}
-
 .entry-box.song.empty{
     margin-top: 0; margin-bottom: 0;
+    background: none;
 }
 
 .entry-box.song.full li span{
@@ -239,7 +267,7 @@ a{
 
 .entry-box.motif::before{
     content: "b";
-    min-width: 2rem;
+    min-width: 4rem;
     visibility: hidden;
     margin-right: auto;
 }
@@ -252,11 +280,17 @@ a{
     color: black;
     flex-wrap: nowrap;
     display: inline;
-    border-left-style: solid;
     align-self: center;
-    margin-left: auto;
-    min-width: 2rem;
     text-align: right;
+    min-width: 1.5rem;
+    margin-right: 1rem;
+}
+
+.count-icon{
+    width: 1rem; height: 1rem;
+    margin-left: auto; margin-right: 0.2rem;
+    display: block;
+    align-self: center;
 }
 
 .sort-box.album label{
@@ -277,22 +311,36 @@ a{
 
 .title-box{
     margin: 1rem;
-    margin-bottom: 0px;
     border-style: solid;
     border-color: var(--light-box);
     background: var(--light-box);
     display: flex;
-    align-items: baseline;
+    align-items: center;
+}
+
+.title-box img{
+    vertical-align: bottom;
 }
 
 .title-box h1{
-    padding: 0;
+    margin-left: .5rem;
+    max-width: 65%;
+}
+
+.title-jp{
+    margin-left: 2rem;
+    max-width: 65%;
+}
+
+.title-album{
+    margin-left: auto;
+    min-width: 2rem;
 }
 
 .track-info{
-    margin-top: 1rem;
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
     row-gap: 1rem;
 }
 
@@ -304,49 +352,57 @@ a{
     display: flex;
     flex-direction: column;
     width: 23rem;
-    margin-left: 2rem; margin-right: auto;
+
+}
+
+.songpage-artist ul{
+    gap: 0.5rem;
+}
+
+.songpage-artist h2{
+    text-align: center;
+    margin-bottom: 1rem;
 }
 
 .songpage-album{
     display: flex;
     flex-direction: column;
     width: 23rem;
-    margin-left: 2rem; margin-right: auto;
+
 }
 
-.songpage-motifs{
+.songpage-album ul{
+    gap: 0.5rem;
+}
+
+.songpage-album h2{
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+.entrypage-connections{
     display: flex;
     flex-direction: column;
     width: 100%;
     justify-content: center;
 }
-.songpage-motifs h2{
+.entrypage-connections h2{
     text-align: center;
+    margin-bottom: 1rem;
 }
 
-.songpage-clip{
-    margin-top: 1rem;
+.entrypage-clip{
+    margin-bottom: 1rem;
     display: flex;
     flex-wrap: wrap-reverse;
     column-gap: 2rem;
     justify-content: center;
     align-items: center;
-    flex-shrink: 0;
-    flex-grow: 1;
 }
 
-.songpage-clip audio{
-
-}
-
-.songpage-clip::before{
-    /* content: "";
-    visibility: hidden;
-    width: 15%; */
-}
-
-.motif-pointer{
+.clip-pointer{
     width: 12rem;
     white-space: nowrap;
     text-align: center;
 }
+

templates/motif.html

@@ -3,21 +3,23 @@
 {% block title %}{{ name }}{% endblock %}
 
 {% block content %}
-<h1> Motif: {{ name }} </h1>
-
+<hgroup class="title-box">
+    <h1> <img src="/static/motificon.png" alt="Motif Icon" class="title-icon"/> {{ name }} </h1>
+</hgroup>
 <!-- Clips -->
 
-<p>Clips: </p>
-<ul>
-{% for song_id, motif_id, song in clip_info %}
-    <li>
+<div class="entrypage-connections">
+    <h2>Songs Featured:</h2>
+    <ul>
+    {% for song_id, motif_id, song 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>
-        <a href="/song/{{ song_id }}">{{ song }}</a>
+            <span class="clip-pointer"><a href="/song/{{ song_id }}">{{ song }}</a></span>
         </li>
-{% endfor %}
-</ul>
-
+    {% endfor %}
+    </ul>
+</div>
 {% endblock %}

templates/motifindex.html

@@ -12,7 +12,8 @@
                     <li>
                         <span class="motif-name">{{ motif }}</span>
                     </li>
-                    {% if count %}<span class="clip-count">x{{ count }}</span>{% endif %}
+                    <img src="/static/songicon.png" alt="Song Icon" class="count-icon"/>
+                    {% if count %}<span class="clip-count">x {{ count }}</span>{% endif %}
                 </a>
             {% endfor %}
         </ul>
@@ -27,7 +28,8 @@
                     <li>
                         <span class="motif-name">{{ motif }}</span>
                     </li>
-                    {% if count %}<span class="clip-count"> x{{ count }} {% endif %}</span>
+                    <img src="/static/songicon.png" alt="Song Icon" class="count-icon"/>
+                    {% if count %}<span class="clip-count">x {{ count }} {% endif %}</span>
                 </a>
             {% endfor %}
         </ul>

templates/nav.html

@@ -1,9 +1,9 @@
 <header>
     <nav>
         <ul class="top-buttons">
-            <li><a href="{{ url_for('songindex') }}">Songs</a></li>
-            <li><a href="{{ url_for('homepage') }}">Home</a></li>
-            <li><a href="{{ url_for('motifindex') }}">Motifs</a></li>
+            <a href="{{ url_for('songindex') }}" class="song-button"><li><img src="/static/songicon.png" alt="Song Index" /></li></a>
+            <a href="{{ url_for('homepage') }}" class="home-button"><li><img src="/static/songbook.png" alt="Home" /></li></a>
+            <a href="{{ url_for('motifindex') }}" class="motif-button"><li><img src="/static/motificon.png" alt="Motif Index" /></li></a>
         </ul>
     </nav>
 

templates/song.html

@@ -1,13 +1,21 @@
 {% extends "base.html" %}
-{% block title %}{{ name }}{% endblock %}
+{% block title %}
+{% for name, _ in song_info %}{{ name }}{% endfor %}
+{% endblock %}
 
 {% block content %}
-<div class="title-box">
+<hgroup class="title-box">
+    <img src="/static/songicon.png" alt="Song Icon" class="title-icon"/>
+    {% for name, name_jp in song_info %}
         <h1>{{ name }}</h1>
-    {% for track, _, _, album_code in album_info %}
-        {{ album_code }}{% if not loop.last %}, {% endif %}
+    {% if name_jp %}
+        <h2 class="title-jp">{{name_jp}}</h2>
+    {% endif %}
     {% endfor %}
-</div>
+    {% for track, _, _, album_code in album_info %}
+        <h3 class="title-album">{{ album_code }}{% if not loop.last %}, {% endif %}</h3>
+    {% endfor %}
+</hgroup>
 
 <!-- Artist info -->
 
@@ -16,7 +24,7 @@
         <h2 >Artist:  </h2>
         <ul>
         {% for name, name_rm, credit in artist_info %}
-            <li>{{ name_rm }} ({{ name }}): {{ credit }}</li>
+            <li>{{ credit }}: {% if name_rm %}{{ name_rm }} - {% endif %}{{ name }}</li>
         {% endfor %}
         </ul>
     </div>
@@ -27,21 +35,21 @@
         <h2>Album: </h2>
         <ul>
         {% for album_id, track, album_name, album_code in album_info %}
-        <li><a href="{{ url_for('albumpage', id=album_id) }}">{{ album_name }}</a> #{{ track }}</li>
+        <li><a href="{{ url_for('albumpage', id=album_id) }}">{{ album_name }}</a> - #{{ track }}</li>
         {% endfor %}
         </ul>
     </div>
 <!-- Motifs -->
-    <div class="songpage-motifs">
-        <h2>Motifs Used: </h2>
+    <div class="entrypage-connections">
+        <h2>Motifs Featured: </h2>
         <ul>
         {% for song_id, motif_id, motif in clip_info %}
-            <li class="songpage-clip">
+            <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="motif-pointer"><a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a></span>
+                <span class="clip-pointer"><a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a></span>
             </li>
         {% endfor %}
         </ul>

templates/songindex.html

@@ -12,8 +12,7 @@
         <label for="{{ code }}" class="album-info">
             <h2>{{ name }}</h2>
             <span class="code">{{ code }}</span>
-                    <span class="date">Released: {{ date }}</span>
-                
+            <span class="date">{{ date }}</span>
         </label>
         <ul class="sort-list">
             {% for song_id, album, track, name, name_jp, count in song_info if album_id == album %}
@@ -24,7 +23,8 @@
                             <span class="track-name">{{ name }}</span>
                             {% if name_jp %}<span class="track-name-jp">{{ name_jp }}</span>{% endif %}
                         </li>
-                        <span class="clip-count"> x{{ count }} </span>
+                        <img src="/static/motificon.png" alt="Motif Icon" class="count-icon"/>
+                        <span class="clip-count">x {{ count }} </span>
                     </a>
                 {% else %}
                     <a href="{{ url_for('songpage', id=song_id) }}" class="entry-box song empty">