Login screen

client/js/login.js

@@ -0,0 +1,7 @@
+"use strict";
+
+jQuery( document ).ready(function( $ ) {
+
+	$('#login-user').focus();
+
+});

client/scss/layout/_base.scss

@@ -5,10 +5,6 @@ html {
   box-sizing: inherit;
 }
 
-#root {
-	padding-top: 52px;
-}
-
 [v-cloak] {
   display: none;
 }

client/scss/layout/_content.scss

@@ -1,4 +1,8 @@
 
+#root {
+	padding-top: 52px;
+}
+
 #page-type-view > section {
 	transition: background-color .5s ease;
 

client/scss/login.scss

@@ -0,0 +1,184 @@
+@import './layout/_base';
+@import './layout/_mixins';
+
+body {
+	padding: 0;
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	font-size: 14px;
+}
+
+a {
+	color: #FFF;
+	transition: color 0.4s ease;
+	text-decoration: none;
+
+	&:hover {
+		color: #FB8C00;
+		text-decoration: underline;
+	}
+
+}
+
+#bg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+	background-color: #000;
+
+	> div {
+		background-size: cover;
+		background-position: center center;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		opacity: 0;
+		visibility: hidden;
+		transition: opacity 3s ease, visibility 3s;
+		animation: bg 30s linear infinite;
+
+		&:nth-child(1) {
+			animation-delay: 10s;
+		}
+
+		&:nth-child(2) {
+			animation-delay: 20s;
+		}
+
+	}
+
+}
+
+#root {
+	position: fixed;
+	top: 15vh;
+	left: 10vw;
+	z-index: 2;
+	color: #FFF;
+	display: flex;
+	flex-direction: column;
+
+	h1 {
+		font-size: 4rem;
+		color: #FFF;
+		padding: 0;
+		margin: 0;
+		animation: headerIntro 3s ease;
+	}
+
+	h2 {
+		font-size: 1.5rem;
+		font-weight: normal;
+		color: rgba(255,255,255,0.7);
+		padding: 0;
+		margin: 0 0 25px 0;
+		animation: headerIntro 3s ease;
+	}
+
+	input[type=text], input[type=password] {
+		width: 350px;
+		max-width: 80vw;
+		border: 1px solid rgba(255,255,255,0.3);
+		border-radius: 3px;
+		background-color: rgba(0,0,0,0.2);
+		padding: 0 15px;
+		height: 40px;
+		margin: 0 0 10px 0;
+		color: #FFF;
+		font-weight: bold;
+		font-size: 14px;
+		transition: all 0.4s ease;
+
+		&:focus {
+			outline: none;
+			border-color: rgba(255,255,255,0.8);
+		}
+
+	}
+
+	button {
+		background-color: #FB8C00;
+		color: #FFF;
+		border: 1px solid lighten(#FB8C00, 10%);
+		border-radius: 3px;
+		height: 40px;
+		width: 125px;
+		padding: 0;
+		font-weight: bold;
+		margin: 15px 0 0 0;
+		transition: all 0.4s ease;
+		cursor: pointer;
+
+		&:focus {
+			outline: none;
+			border-color: #FFF;
+		}
+
+		&:hover {
+			background-color: darken(#FB8C00, 10%);
+		}
+
+	}
+
+}
+
+#copyright {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	position: absolute;
+	left: 10vw;
+	bottom: 10vh;
+	z-index: 2;
+	color: rgba(255,255,255,0.5);
+	font-weight: bold;
+
+	.icon {
+		font-size: 1.2rem;
+		margin: 0 8px;
+	}
+
+	a {
+		opacity: 0.75;
+	}
+
+}
+
+@include keyframes(bg) {
+	0% {
+		@include prefix(transform, scale(1,1));
+		visibility: visible;
+		opacity: 0;
+	},
+	5% {
+		opacity: 0.5;
+	},
+	33% {
+		opacity: 0.5;
+	},
+	38% {
+		@include prefix(transform, scale(1.2, 1.2));
+		opacity: 0;
+	},
+	39% {
+		visibility: hidden;
+	}
+	100% {
+		visibility: hidden;
+		opacity: 0;
+	}
+}
+
+@include keyframes(headerIntro) {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}