css and some nav

client/src/style/index.less

@@ -1,91 +1,183 @@
-html, body {
-	height: 100%;
-	width: 100%;
-	padding: 0;
-	margin: 0;
-	background: #FAFAFA;
-	font-family: 'Helvetica Neue', arial, sans-serif;
-	font-weight: 400;
-	color: #444;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+// Digital Ocean reset
+html {
+  box-sizing: border-box;
+  font-size: 16px;
 }
 
-* {
-	box-sizing: border-box;
+*, *:before, *:after {
+  box-sizing: inherit;
 }
 
-#app {
-	height: 100%;
+body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+// stuff from UX laws
+html {
+    color:var(--base-font-color);
+    font-size:clamp(var(--min-font-size),calc(50% + 1vw),var(--max-font-size));
+    font-family:var(--base-font-family);
+    line-height:var(--base-line-height);
+    -webkit-text-size-adjust:100%;
+    background:var(--base-background-color);
+    box-sizing:border-box
+}
+
+// @charset "UTF-8";
+:root {
+    --breakpoint-medium: 35em;
+    --breakpoint-large: 56em;
+    --color-dark-blue: #101014;
+    --color-mid-blue: #16171d;
+    --color-light-blue: #1f2128;
+    --color-mid-grey: #9BA0B3;
+    --color-off-white: #F4F1D0;
+    --color-accent-blue: #5E9ED6;
+    --base-accent-color: var(--color-accent-blue);
+    --hover-link-color: var(--color-off-white);
+    --base-background-color: var(--color-dark-blue);
+    --secondary-background-color: var(--color-mid-blue);
+    --tertiary-background-color: var(--color-light-blue);
+    --small-font-size: 0.75em;
+    --base-font-size: 1em;
+    --smedium-font-size: 1.333em;
+    --medium-font-size: 1.777em;
+    --large-font-size: 2.369em;
+    --xlarge-font-size: 3.157em;
+    --base-font-family: 'Raleway', Arial, Sans-Serif;
+    --secondary-font-family: monospace;
+    --base-font-color: var(--color-off-white);
+    --secondary-font-color: var(--color-mid-grey);
+    --base-line-height: 1.4;
+    --header-line-height: 1.2;
+    --min-font-size: var(--base-font-size);
+    --max-font-size: var(--large-font-size);
+    --base-duration: .3s;
+    --base-timing: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    --base-border-color: var(--secondary-font-color);
+    --base-border: 1px solid var(--base-border-color);
+    --hover-border: 1px solid var(--base-font-color);
+    --focus-border: 1px solid var(--base-font-color);
+    --base-border-radius: .2rem;
+    --base-focus: 2px solid var(--base-accent-color);
+    --base-outline-offset: 0.25em;
+    --base-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, .25);
+    --hover-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .5);
+    --base-spacing: 1rem;
+    --base-spacing-half: calc(var(--base-spacing)/2);
+    --utility-bar-header-height: calc(var(--base-spacing) * 1.5);
+}
+
+button, input, optgroup, select, textarea {
+    margin:0;
+    border:var(--base-border);
+    border-radius:var(--base-border-radius);
+    background:0 0;
+    font-family:inherit;
+    font-size:100%;
+    color:inherit;
+    line-height:var(--base-line-height);
+}
+
+input:hover, textarea:hover {
+    color:var(--base-font-color);
+    border:var(--hover-border)
+}
+
+input:focus, textarea:focus {
+    border:var(--focus-border);
+    outline:0
+}
+
+button, input {
+    overflow:visible
+}
+
+button, select {
+    text-transform:none
+}
+
+button, [type=button], [type=reset], [type=submit] {
+    -webkit-appearance:button;
+    cursor:pointer
+}
+
+// ok actual styles
+
+body {
+    padding-top: calc(var(--base-spacing)/2);
+}
+
+main {
+    padding: 0 10% 0 10%;
+}
+
+button, [type=submit] {
+    padding: var(--base-spacing-half);
+}
+
+.landing {
+    display: flex;
+
+    .login {
+        flex: 1;
+    }
+
+    .info {
+        flex: 1;
+
+        p {
+            margin-bottom: var(--base-spacing);
+        }
+    }
+
+}
+
+form {
+    margin-bottom: var(--base-spacing);
+
+    label {
+        margin-bottom: var(--base-spacing-half);
+    }
+
+    label, input {
+        display: block;
+    }
+}
+
+
+.header {
+    display: flex;
 }
 
 .home {
-	padding: 56px 20px;
-	min-height: 100%;
-	width: 100%;
+    min-height: 100%;
+    width: 100%;
 
-	display: flex;
+    display: flex;
 
-	.bundle {
-		flex: 1;
-		padding-right: 1em;
-	}
+    .bundle {
+        flex: 1;
+        padding-right: 1em;
+    }
 }
-
-.profile {
-	padding: 56px 20px;
-	min-height: 100%;
-	width: 100%;
-}
-
-.header {
-	position: fixed;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 56px;
-	padding: 0;
-	background: #673AB7;
-	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-	z-index: 50;
-}
-
-.header {
-	h1 {
-		float: left;
-		margin: 0;
-		padding: 0 15px;
-		font-size: 24px;
-		line-height: 56px;
-		font-weight: 400;
-		color: #FFF;
-	}
-
-	nav {
-		float: right;
-		font-size: 100%;
-	}
-
-	nav a {
-		display: inline-block;
-		height: 56px;
-		line-height: 56px;
-		padding: 0 15px;
-		min-width: 50px;
-		text-align: center;
-		background: rgba(255,255,255,0);
-		text-decoration: none;
-		color: #FFF;
-		will-change: background-color;
-	}
-
-	nav a:hover,
-	nav a:active {
-		background: rgba(0,0,0,0.2);
-	}
-
-	nav a.active {
-		background: rgba(0,0,0,0.4);
-	}
-}
-