Started working on the front-end.
This commit is contained in:
Jonathan Bernard
33
resources/webapp/css/forSize.mixin.scss
Normal file
33
resources/webapp/css/forSize.mixin.scss
Normal file
@ -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; } }
|
||||
}
|
||||
|
||||
|
||||
62
resources/webapp/css/new-life-songs.css
Normal file
62
resources/webapp/css/new-life-songs.css
Normal file
@ -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 */
|
||||
7
resources/webapp/css/new-life-songs.css.map
Normal file
7
resources/webapp/css/new-life-songs.css.map
Normal file
@ -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"
|
||||
}
|
||||
51
resources/webapp/css/new-life-songs.scss
Normal file
51
resources/webapp/css/new-life-songs.scss
Normal file
@ -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"; }
|
||||
14
resources/webapp/css/reset.scss
Normal file
14
resources/webapp/css/reset.scss
Normal file
@ -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; }
|
||||
|
||||
|
||||
BIN
resources/webapp/favicon.png
Normal file
BIN
resources/webapp/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
resources/webapp/images/favicon.png
Normal file
BIN
resources/webapp/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
146
resources/webapp/images/favicon.svg
Normal file
146
resources/webapp/images/favicon.svg
Normal file
@ -0,0 +1,146 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="64"
|
||||
height="64"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="favicon.svg"
|
||||
inkscape:export-filename="/home/jdbernard/projects/new-life-songs/src/main/webapp/images/favicon.png"
|
||||
inkscape:export-xdpi="180"
|
||||
inkscape:export-ydpi="180">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="5.6"
|
||||
inkscape:cx="36.631424"
|
||||
inkscape:cy="36.08398"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1028"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-196,-232.71932)">
|
||||
<g
|
||||
id="g3972"
|
||||
transform="matrix(1.1988541,0,0,1.1988541,-34.689684,-59.360988)">
|
||||
<path
|
||||
sodipodi:nodetypes="ccccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3066"
|
||||
d="m 197.85715,270.75504 c 18.44039,-9.68553 31.88947,-7.2133 43.21428,0.17857 l 0.17857,23.39286 c -15.06612,-7.66829 -29.63623,-7.15253 -43.75,0.89285 z"
|
||||
style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
<path
|
||||
sodipodi:nodetypes="ccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3836"
|
||||
d="m 218.57143,288.34432 c 5.66926,-15.13182 -22.94395,-29.42428 4.28571,-44.10714 -18.57938,17.81207 6.32776,26.01559 -4.28571,44.10714 z"
|
||||
style="fill:#f47321;fill-opacity:1;stroke:#f47321;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
<path
|
||||
sodipodi:nodetypes="ccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3838"
|
||||
d="m 220.89286,250.84432 c -7.46377,9.88399 15.90915,18.84168 0.89285,36.96429 5.71398,-18.35279 -10.64059,-29.80509 -0.89285,-36.96429 z"
|
||||
style="fill:#f8981d;fill-opacity:1;stroke:#f8981d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
<g
|
||||
style="stroke:#666666"
|
||||
transform="translate(30.241442,19.824244)"
|
||||
id="g3957">
|
||||
<g
|
||||
style="stroke:#666666"
|
||||
id="g3954">
|
||||
<path
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3928"
|
||||
d="m 181.13839,263.45593 -0.40178,-9.53125 -6.07143,-0.26785 0.37948,9.66517"
|
||||
style="fill:none;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
</g>
|
||||
<path
|
||||
style="fill:none;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 174.64286,256.73718 6.11607,0.29018"
|
||||
id="path3930"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
sodipodi:type="arc"
|
||||
style="fill:none;stroke:#666666;stroke-width:3;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||
id="path3932"
|
||||
sodipodi:cx="172.16518"
|
||||
sodipodi:cy="261.9046"
|
||||
sodipodi:rx="1.1607143"
|
||||
sodipodi:ry="0.390625"
|
||||
d="m 173.32589,261.9046 c 0,0.21574 -0.51967,0.39063 -1.16071,0.39063 -0.64105,0 -1.16072,-0.17489 -1.16072,-0.39063 0,-0.21573 0.51967,-0.39062 1.16072,-0.39062 0.64104,0 1.16071,0.17489 1.16071,0.39062 z"
|
||||
transform="matrix(0.80146427,0,0,0.86720805,35.41978,35.950686)" />
|
||||
<path
|
||||
sodipodi:type="arc"
|
||||
style="fill:none;stroke:#666666;stroke-width:3;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||
id="path3932-8"
|
||||
sodipodi:cx="172.16518"
|
||||
sodipodi:cy="261.9046"
|
||||
sodipodi:rx="1.1607143"
|
||||
sodipodi:ry="0.390625"
|
||||
d="m 173.32589,261.9046 c 0,0.21574 -0.51967,0.39063 -1.16071,0.39063 -0.64105,0 -1.16072,-0.17489 -1.16072,-0.39063 0,-0.21573 0.51967,-0.39062 1.16072,-0.39062 0.64104,0 1.16071,0.17489 1.16071,0.39062 z"
|
||||
transform="matrix(0.80146427,0,0,0.86720805,41.50237,36.374793)" />
|
||||
</g>
|
||||
<g
|
||||
style="fill:#666666;fill-opacity:1;stroke:#666666;stroke-opacity:1"
|
||||
transform="translate(45.892857,26.25)"
|
||||
id="g3968">
|
||||
<path
|
||||
style="fill:#666666;fill-opacity:1;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 187.76786,245.59879 0.13393,10.87054"
|
||||
id="path3964"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cc" />
|
||||
<path
|
||||
sodipodi:type="arc"
|
||||
style="fill:#666666;fill-opacity:1;stroke:#666666;stroke-width:3;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||
id="path3966"
|
||||
sodipodi:cx="184.96652"
|
||||
sodipodi:cy="255.05191"
|
||||
sodipodi:rx="0.8370536"
|
||||
sodipodi:ry="0.41294643"
|
||||
d="m 185.80358,255.05191 c 0,0.22806 -0.37477,0.41295 -0.83706,0.41295 -0.46229,0 -0.83705,-0.18489 -0.83705,-0.41295 0,-0.22806 0.37476,-0.41295 0.83705,-0.41295 0.46229,0 0.83706,0.18489 0.83706,0.41295 z"
|
||||
transform="matrix(1.103543,0,0,0.80447905,-18.013595,51.017545)" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
BIN
resources/webapp/images/new-life-songs.png
Normal file
BIN
resources/webapp/images/new-life-songs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
80
resources/webapp/images/new-life-songs.svg
Normal file
80
resources/webapp/images/new-life-songs.svg
Normal file
@ -0,0 +1,80 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="319.93701"
|
||||
height="41.225643"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="new-life-songs.svg"
|
||||
inkscape:export-filename="/home/jdbernard/projects/new-life-songs/src/main/webapp/images/new-life-songs.png"
|
||||
inkscape:export-xdpi="112.52"
|
||||
inkscape:export-ydpi="112.52">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="3.959798"
|
||||
inkscape:cx="84.054843"
|
||||
inkscape:cy="-31.95016"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1028"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-102.563,-63.265607)">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Aldrich;-inkscape-font-specification:Aldrich"
|
||||
x="110"
|
||||
y="95.933609"
|
||||
id="text2985"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan2987"
|
||||
x="110"
|
||||
y="95.933609">New Life Songs</tspan></text>
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:3.84500003;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||
d="m 389.73551,102.40638 c -45.27776,0 -285.24751,0.0799 -285.24751,0.0799 0.18336,-10.359756 0,-26.719287 0,-37.295643"
|
||||
id="path2989"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
Reference in New Issue
Block a user