Add categories and favicon

* Reorganize resource directories (templates, less, static)
* Show categories on index
* Add favicon

res/less/colors.less

@@ -0,0 +1,12 @@
+@nochordscolor: #FBB;
+@nochordscolor-hover: #FAA;
+@title: #369;
+@subtitle: #444;
+@text: #333;
+@text-hover: #607D8B;
+@secondary: #EEE;
+@secondary-hover: #CCC;
+@chord-color: darkgreen;
+
+@transition: .5s;
+@border-radius: 4px;

res/less/index.less

@@ -0,0 +1,46 @@
+@import "colors";
+
+.songs {
+    list-style: none;
+    padding: 0;
+    > a {
+        color: inherit;
+        text-decoration: none;
+        > li {
+            background-color: @secondary;
+            margin: .5em;
+            padding: .6em;
+            border-radius: @border-radius;
+            .number {
+                font-weight: bolder;
+                color: black;
+            }
+            &:hover {
+                color: @text-hover;
+                background-color: @secondary-hover;
+                transition-duration: @transition;
+            }
+            &.noChords {
+                background-color: @nochordscolor;
+                &:hover {
+                    color: @text-hover;
+                    background-color: @nochordscolor-hover;
+                }
+            }
+        }
+    }
+}
+ul.songs {
+    width: 100%;
+    margin: 1em auto;
+    li {
+        display: inline-block;
+        margin: .2em;
+    }
+}
+span.noChords {
+    background-color: @nochordscolor;
+    padding: 0.3em 0.4em;
+    border-radius: @border-radius;
+    display: inline-block;
+}

res/less/main.less

@@ -0,0 +1,59 @@
+@import "colors";
+
+h1 {
+    color: @title;
+    margin-inline: auto;
+    width: max-content;
+    max-width: 100%;
+    text-align: center;
+    > a, > a:hover, > a:active, > a:visited {
+        color: @title;
+    }
+}
+
+h2, h3 {
+    color: @subtitle;
+    font-weight: lighter;
+}
+
+footer {
+    text-align: center;
+}
+
+body {
+    font-family: Helvetica, Arial, sans-serif;
+    color: @text;
+    max-width: 75em;
+    margin: 1em;
+    @media (min-width: 75em + 1em) {
+        margin: auto;
+    }
+}
+
+nav {
+    margin-inline: auto;
+    width: max-content;
+    max-width: 100%;
+    > ul {
+        padding-inline-start: 0px;
+        > li {
+            display: inline-block;
+        }
+    }
+}
+
+a {
+    text-decoration: none;
+    > span {
+        color: @text;
+        padding: 0.5em;
+        margin: 0.2em;
+        display: inline-block;
+        background: @secondary;
+        border-radius: @border-radius;
+        &:hover {
+            background: @secondary-hover;
+            transition-duration: @transition;
+        }
+    }
+}

res/less/song.less

@@ -0,0 +1,78 @@
+@import "colors.less";
+
+table.chordedline {
+    border-spacing: 0px;
+    display: inline-block;
+}
+
+.song div {
+    padding: 0.5em 0;
+}
+
+.chordedline td {
+    padding: 0px;
+}
+
+.chord {
+    font-style: italic;
+    color: @chord-color;
+}
+
+div.chorus {
+    font-weight: bold;
+    border-left: black 2px solid;
+    padding-left: 0.5em;
+    div {
+        padding-left: 0.5em;
+    }
+    table {
+        margin-left: 0;
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+.rrep {
+    background-image: url(repeat-sign.svg);
+    display: inline-block;
+    width: 1em;
+    height: 2em;
+}
+
+.lrep {
+    -moz-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+    filter: FlipV;
+    -ms-filter: "FlipV";
+    .rrep();
+}
+
+.rep {
+    font-style: italic;
+}
+
+.echo {
+    font-style: italic;
+}
+
+button, select#transposeSelect {
+    min-width: 2em;
+    min-height: 2em;
+    padding: .4em;
+    border-style: none;
+    border-radius: @border-radius;
+    background-color: @secondary;
+    &:hover {
+        background-color: @secondary-hover;
+        transition-duration: @transition;
+    }
+}
+
+select#transposeSelect {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    font-weight: bold;
+    color: black;
+}