Basic web app

2 files changed, 154 insertions, 0 deletions

diff --git a/static/google.png b/static/google.png
new file mode 100644
index 0000000..29ab511
--- /dev/null
+++ b/static/google.png
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..fca47c8
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,154 @@
+body {
+	font-family: 'Roboto';
+	font-size: 16px;
+	margin: 0;
+}
+
+a {
+	text-decoration: none;
+}
+
+header {
+	height: 50px;
+	background-color: #3F51B5;
+	box-sizing: border-box;
+	color: white;
+	margin-bottom: 1em;
+	box-shadow: 0 0 4px #1A237E;
+}
+
+h1 {
+	font-size: 24px;
+	font-weight: 500;
+	margin: 0;
+	padding: 0;
+}
+
+h1 > a {
+	color: white;
+}
+
+h2 {
+	font-weight: 500;
+	font-size: 20px;
+	margin: 16px;
+}
+
+ul.scrobbles {
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+
+ul.scrobbles li {
+	display: flex;
+	height: 60px;
+	padding: 0 16px;
+	align-items: center;
+}
+
+ul.scrobbles li:hover {
+	background-color: #E8EAF6;
+}
+
+ul.scrobbles li img {
+	height: 40px;
+	margin-right: 16px;
+	border: 1px solid #C5CAE9;
+}
+
+ul.scrobbles li div {
+	font-size: 14px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	line-height: 18px;
+}
+
+ul.scrobbles li .album {
+	font-size: 12px;
+	color: #4f4f4f;
+}
+
+#center {
+	height: 100%;
+	max-width: 1000px;
+	margin: 0 auto;
+	padding: 0 16px;
+	display: flex;
+	box-sizing: border-box;
+	align-items: center;
+}
+
+.user {
+	color: rgba(255, 255, 255, .8);
+	margin-left: auto;
+}
+
+.user:hover {
+	color: rgba(255, 255, 255, 1);
+}
+
+#main {
+	max-width: 1000px;
+	margin: 0 auto;
+}
+
+input[type=text], input[type=password] {
+	border: none;
+	padding-bottom: 8px;
+	font-size: 16px;
+	border-bottom: 1px solid grey;
+}
+
+label {
+	font-size: 12px;
+	box-sizing: border-box;
+	margin-bottom: 8px;
+}
+
+input[type=text]:focus, input[type=password]:focus {
+	outline: none;
+	padding-bottom: 7px;
+	border-bottom: 2px solid #3F51B5;
+}
+
+input:focus+label {
+	color: #3F51B5;
+
+}
+
+.row {
+	display: flex;
+	margin-bottom: 1em;
+	flex-wrap: wrap;
+	margin-top: -1em;
+	padding: 0 16px;
+}
+
+.form-element {
+	display: flex;
+	flex-direction: column-reverse;
+	margin-right:1em;
+	margin-top: 1em;
+	width: 300px;
+}
+
+input[type=submit] {
+	border: none;
+	background: none;
+	padding: 0;
+	font-family: 'Roboto';
+	color: #3F51B5;
+	font-size: 16px;
+	font-weight: 500;
+	cursor: pointer
+}
+
+input[type=submit]:focus {
+	outline: none;
+}
+
+form > section {
+	margin-bottom: 2em;
+}