Improve appearance

README.md

@@ -1,5 +1,5 @@
 # Songs2Slides
-Creates a lyrics slide show from a list of songs
+Creates a lyrics slideshow from a list of songs
 
 ## Setup
 1. Install python dependencies

songs2slides/static/create-step-1.js

@@ -23,7 +23,7 @@ function remove_song(n) {
 
 function renumber_songs() {
     const songs = document.getElementsByTagName('tr')
-    for (let i = 1; i < songs.length; i++) {
+    for (let i = 1; i < songs.length - 1; i++) {
         songs[i].children[0].textContent = `${i}.`
         songs[i].children[1].children[0].name = `title-${i}`
         songs[i].children[2].children[0].name = `artist-${i}`

songs2slides/static/create.css

@@ -11,12 +11,16 @@ table {
     width: 100%;
     border-collapse: collapse;
 }
-table input {
+tbody input {
     width: 100%;
 }
-table td {
+tbody td {
     padding: 0.2rem;
 }
+tfoot td {
+    padding-top: 1rem;
+    text-align: center;
+}
 
 .loading-modal {
     position: fixed;

songs2slides/static/global.css

@@ -45,26 +45,32 @@ p {
   padding: 0.3rem;
 }
 
+/* link buttons */
+a.button {
+    text-decoration: none;
+    display: inline-block;
+}
+
 /* padding */
 header {
     padding: 0.75rem;
 }
 main {
     padding: 1rem;
 }
-button, input {
+button, a.button, input {
     padding: 0.3rem 0.5rem;
 }
 textarea {
     padding: 0.5rem;
 }
 
 /* borders */
-button, input, textarea {
+button, a.button, input, textarea {
     border: 1px solid;
     border-radius: 5px;
 }
-button[type=submit] {
+button[type=submit], a.button.primary {
     font-weight: bold;
     border-color: var(--foreground);
 }
@@ -81,17 +87,17 @@ header a {
     color: #000000;
     text-decoration: none;
 }
-input, button, textarea {
+input, button, a.button, textarea {
     color: var(--foreground);
     border-color: var(--background5);
     background-color: var(--background2);
 }
 @media (hover: hover) {
-    button:hover, input[type=button]:hover {
+    button:hover, input[type=button]:hover, a.button:hover {
         background-color: var(--background3);
     }
 }
-button:active, input[type=button]:active {
+button:active, input[type=button]:active, a.button:active {
     background-color: var(--background4);
 }
 a {

songs2slides/static/home.css

@@ -1,8 +1,12 @@
 main {
     text-align: center;
-    padding: 2rem 0rem;
+    max-width: 620px;
 }
-p {
+h1 {
+    margin-top: 2rem;
+    margin-bottom: 0.5rem;
     font-size: 2rem;
-    font-weight: bold;
+}
+a.primary {
+    padding: 0.5rem 1rem;
 }

songs2slides/static/post-download.css

@@ -1,3 +1,4 @@
 main {
+    padding-top: 3rem;
     text-align: center;
 }

songs2slides/templates/create-step-1.html

@@ -26,8 +26,8 @@ <h1>Step 1: Select Songs</h1>
             </td>
             <td>
                 <button class="icon" type="button" title="Remove">
-                        <img src="{{ url_for('static', filename='trash.svg') }}"
-                            alt="Remove icon"/>
+                    <img src="{{ url_for('static', filename='trash.svg') }}"
+                        alt="Remove icon"/>
                 </button>
             </td>
         </tr>
@@ -62,10 +62,16 @@ <h1>Step 1: Select Songs</h1>
                 </td>
             </tr>
         </tbody>
+        <tfoot>
+            <tr>
+                <td colspan="4">
+                    <input type="button" value="Add song" onclick="add_song()"/>
+                </td>
+            </tr>
+        </tfoot>
     </table>
 
     <div id="actions">
-        <input type="button" value="Add song" onclick="add_song()"/>
         <button type="submit">
             Next
         </button>

songs2slides/templates/create-step-2.html

@@ -6,13 +6,13 @@
 {% endblock head %}
 
 {% set format_hint =
-'One blank line represents the start of a new slide and three blank ' +
+'A blank line represents the start of a new slide and three blank ' +
 'lines represent an empty slide.'
 %}
 
 {% block main %}
 <form id="step-2" method="POST" action="{{ url_for('.slides') }}">
-    <h1>Step 2: Preview Slides</h1>
+    <h1>Step 2: Review Lyrics</h1>
     <p>
         Review the parsed song lyrics below and make any necessary corrections.
         {{ format_hint }}

songs2slides/templates/home.html

@@ -5,6 +5,14 @@
 {% endblock head %}
 
 {% block main %}
-<p>Create lyric slide shows easily and quickly</p>
-<a href="{{ url_for('.create_step_1') }} ">Get Started</a>
+<h1>Simplify lyric slideshow creation</h1>
+<p>
+    Songs2Slides is a easy-to-use tool that automatically finds song lyrics and
+    creates beautiful lyric slideshows.
+</p>
+<p>
+    <a class="button primary" href="{{ url_for('.create_step_1') }} ">
+        Create a Slideshow
+    </a>
+</p>
 {% endblock main %}

songs2slides/templates/layout.html

@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
         <title>SongsSlides</title>
-        <meta name="description" content="Automatically creates lyric slide shows from a list of songs">
+        <meta name="description" content="Automatically creates lyric slideshows from a list of songs">
         <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icon-32.png') }}">
         <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='icon-32.png') }}">
         <link rel="apple-touch-icon" href="{{ url_for('static', filename='icon-180.png') }}">

songs2slides/templates/post-download.html

@@ -9,6 +9,6 @@
     Thank you for using Songs2Slides
 </p>
 <p>
-    <a href="{{ url_for('.create_step_1') }}">Create another slide show</a>
+    <a href="{{ url_for('.create_step_1') }}">Create another slideshow</a>
 </p>
 {% endblock main %}