stylez

client/src/style/index.less

@@ -47,17 +47,23 @@ html {
 :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;
+
+    --color-blue-gray: #506485;
+
     --base-accent-color: var(--color-accent-blue);
+    --fg-color: var(--color-off-white);
     --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;
@@ -68,12 +74,13 @@ html {
     --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);
@@ -81,10 +88,11 @@ html {
     --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);
+    --base-spacing-double: calc(var(--base-spacing)*2);
+
     --utility-bar-header-height: calc(var(--base-spacing) * 1.5);
 }
 
@@ -119,7 +127,17 @@ button, select {
 
 button, [type=button], [type=reset], [type=submit] {
     -webkit-appearance:button;
-    cursor:pointer
+    border-color: transparent;
+    cursor:pointer;
+
+    font-family: var(--secondary-font-family);
+    font-size: var(--small-font-size);
+    text-transform: uppercase;
+
+    &:hover {
+        background: var(--tertiary-background-color);
+        border-color: transparent;
+    }
 }
 
 // ok actual styles
@@ -129,23 +147,26 @@ body {
 }
 
 main {
-    padding: 0 10% 0 10%;
+    padding: 0 5% 0 5%;
 }
 
 button, [type=submit] {
     padding: var(--base-spacing-half);
+    background: var(--secondary-background-color);
+
 }
 
 .landing {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 0.5fr 2fr;
 
     .login {
-        flex: 1;
+        button {
+            width: 100%;
+        }
     }
 
     .info {
-        flex: 1;
-
         p {
             margin-bottom: var(--base-spacing);
         }
@@ -153,28 +174,80 @@ button, [type=submit] {
 
 }
 
+.alt-text {
+    font-family: var(--secondary-font-family);
+    font-size: var(--small-font-size);
+    text-transform: uppercase;
+}
+
+.search {
+    display: grid;
+    grid-template-columns: 1fr 0.5fr 2fr;
+
+    article {
+        display: grid;
+        grid-template-columns: 1fr 4fr 1fr;
+        background-color: var(--secondary-background-color);
+        padding: var(--base-spacing);
+        margin-bottom: var(--base-spacing);
+
+        button {
+            margin-right: var(--base-spacing);
+            background: var(--tertiary-background-color);
+            border-color: var(--secondary-background-color);
+        }
+    }
+}
+
 form {
     margin-bottom: var(--base-spacing);
 
-    label {
-        margin-bottom: var(--base-spacing-half);
-    }
-
     label, input {
         display: block;
     }
+
+    input, button {
+        width: 100%;
+    }
+
+    input {
+        padding: var(--base-spacing-half);
+        margin-bottom: var(--base-spacing);
+    }
+
+    label {
+        font-family: var(--secondary-font-family);
+        font-size: var(--small-font-size);
+        text-transform: uppercase;
+        margin-bottom: var(--base-spacing-half);
+    }
+
+}
+
+a {
+    // padding-left: var(--base-spacing);
+    margin-right: var(--base-spacing);
+
+    color: var(--secondary-font-color);
+    font-family: var(--secondary-font-family);
+    font-size: var(--small-font-size);
+    text-transform: uppercase;
+
+    &:hover {
+        color: var(--fg-color);
+    }
 }
 
 
-.header {
-    display: flex;
+header {
+    display: grid;
+    grid-template-columns: 1fr min-content 1fr;
+    padding-bottom: var(--base-spacing);
 }
 
 .home {
-    min-height: 100%;
-    width: 100%;
-
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 0.5fr 2fr;
 
     .bundle {
         flex: 1;