Started working on the front-end.

resources/webapp/css/new-life-songs.css

@@ -0,0 +1,62 @@
+/**
+ * # New Life Songs DB
+ * @author Jonathan Bernard <jdb@jdb-labs.com>
+ */
+/** ### forSize
+  * This mixin allows us to apply some rules selectively based on the screen
+  * size. There are three primary sizes: `small`, `medium`, and `large`, which
+  * are mutually exclusive. Additionally there are two additional sizes:
+  * `notSmall` and `ultraLarge`. `notSmall`, as the name implies matches any
+  * value which is not the small screen size, so it overlaps with medium,
+  * large, and ultraLarge. `ultraLarge` defines a wider minimum screen size
+  * than large, but neither large nor ultraLarge specify maximum widths,
+  * so ultraLarge is a strict subset of large. A screen large enough to match
+  * ultraLarge will also match large (compare with medium and large: matching
+  * medium means it will not match large, and vice versa). */
+* {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+
+/* HTML5 elements */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+body {
+  color: #333;
+  font-family: Cantarell;
+  margin: 2rem auto;
+  width: 60rem; }
+
+header {
+  position: relative; }
+  header > h1, header > h2 {
+    font-family: "Roboto Condensed";
+    margin-bottom: 1.5em; }
+  header nav {
+    position: absolute;
+    top: 0;
+    right: 0; }
+    header nav ul {
+      list-style: none; }
+      header nav ul li {
+        display: block;
+        float: right;
+        padding: 0.4rem 0.6rem; }
+        header nav ul li a {
+          color: #333;
+          display: block;
+          padding: 0.1rem 0.4rem;
+          text-decoration: none; }
+        header nav ul li a:hover {
+          background-color: #333;
+          border-radius: 3px;
+          color: white; }
+
+th {
+  font-family: "Roboto Condensed"; }
+
+/*# sourceMappingURL=new-life-songs.css.map */