Started working on the front-end.

resources/webapp/css/forSize.mixin.scss

@@ -0,0 +1,33 @@
+$xSmallScreen: 320px;
+$smallScreen: 640px;
+$wideScreen: 1200px;
+$ultraWideScreen: 1600px;
+
+/** ### 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). */
+@mixin forSize($size) {
+
+    @if $size == xsmall {
+        @media screen and (max-width: $xSmallScreen) { @content; } }
+    @else if $size == small {
+        @media screen and (max-width: $smallScreen) { @content; } }
+    @else if $size == notSmall {
+        @media screen and (min-width: $smallScreen + 1) { @content; } }
+    @else if $size == medium {
+        @media screen and (min-width: $smallScreen + 1) and (max-width: $wideScreen - 1) { @content; } }
+    @else if $size == large {
+        @media screen and (min-width: $wideScreen) { @content; } }
+    @else if $size == ultraLarge {
+        @media screen and (min-width: $ultraWideScreen) { @content; } }
+}
+
+

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 */

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

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": ";;;;;;;;;;;;;;;AACA,CAAE;EACE,eAAe,EAAE,UAAU;EAC3B,kBAAkB,EAAE,UAAU;EAC9B,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;AAGd;0CACsC;EAClC,OAAO,EAAC,KAAK;;ACAjB,IAAK;EACD,KAAK,EANF,IAAI;EAOP,WAAW,EAAE,SAAS;EACzB,MAAM,EAAE,SAAS;EACjB,KAAK,EAAE,KAAK;;AAEb,MAAO;EACH,QAAQ,EAAE,QAAQ;EAElB,wBAAe;IACX,WAAW,EAAE,kBAAkB;IAC/B,aAAa,EAAE,KAAK;EAExB,UAAI;IACA,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IAER,aAAG;MACC,UAAU,EAAE,IAAI;MAEhB,gBAAG;QACC,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,aAAa;QAEtB,kBAAE;UACE,KAAK,EAhClB,IAAI;UAiCS,OAAO,EAAE,KAAK;UACd,OAAO,EAAE,aAAa;UACtB,eAAe,EAAE,IAAI;QAEzB,wBAAQ;UACJ,gBAAgB,EAtC7B,IAAI;UAuCS,aAAa,EAAE,GAAG;UAClB,KAAK,EAAE,KAAK;;AAIhC,EAAG;EAAE,WAAW,EAAE,kBAAkB",
+"sources": ["reset.scss","new-life-songs.scss"],
+"names": [],
+"file": "new-life-songs.css"
+}

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

@@ -0,0 +1,51 @@
+/**
+ * # New Life Songs DB
+ * @author Jonathan Bernard <jdb@jdb-labs.com>
+ */
+
+
+$dark: #333;
+
+@import "forSize.mixin.scss";
+@import "reset.scss";
+
+body {
+    color: $dark;
+    font-family: Cantarell;
+	margin: 2rem auto;
+	width: 60rem; }
+
+header {
+    position: relative;
+
+    & > h1, & > h2 {
+        font-family: "Roboto Condensed";
+        margin-bottom: 1.5em; }
+        
+    nav {
+        position: absolute;
+        top: 0;
+        right: 0;
+        
+        ul {
+            list-style: none;
+            
+            li {
+                display: block;
+                float: right;
+                padding: 0.4rem 0.6rem;
+
+                a {
+                    color: $dark;
+                    display: block;
+                    padding: 0.1rem 0.4rem;
+                    text-decoration: none; }
+
+                a:hover {
+                    background-color: $dark;
+                    border-radius: 3px;
+                    color: white;
+                }
+            } } } }
+
+th { font-family: "Roboto Condensed"; }

resources/webapp/css/reset.scss

@@ -0,0 +1,14 @@
+/// Global Rules
+* {
+    -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; }
+
+