styling login page

src/scss/base.scss

@@ -8,7 +8,7 @@ html, body {
     margin: 0;
     padding: 0;
     height: 100%;
-    background-color: $background-color;
+    background-color: $background-color-alt2;
     overflow: hidden;
     font-family: $font-family-sans-serif;
     font-size: $font-size-base;
@@ -27,6 +27,17 @@ h1, h2, h3, h4, h5, h6 {
     padding: 0;
 }
 
+p {
+    margin: 0 0 10px 0;
+    padding: 0;
+}
+
+img {
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+
 a {
     color: $brand-primary;
     text-decoration: none;

src/scss/pages.scss

@@ -0,0 +1,68 @@
+@import "variables.scss";
+
+#login, #register {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(100% + 50px);
+    margin-top: -50px;
+
+    @media (min-height: 750px) {
+        height: calc(100% + 300px);
+        margin-top: -300px;
+    }
+
+    .content {
+        max-width: 300px;
+
+        img {
+            margin: 0 auto 15px;
+            width: 282px;
+            display: block;
+        }
+
+        p {
+            font-size: $font-size-large;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .buttons {
+            display: flex;
+            margin: 15px 0 20px;
+
+            button {
+                margin-right: 10px;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+
+        .sub-options {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        a.settings-icon {
+            color: #bbbbbb;
+            position: absolute;
+            top: 10px;
+            left: 10px;
+
+            span {
+                visibility: hidden;
+            }
+
+            &:hover, &:focus {
+                color: $brand-primary;
+                text-decoration: none;
+
+                span {
+                    visibility: visible;
+                }
+            }
+        }
+    }
+}

src/scss/styles.scss

@@ -1,5 +1,6 @@
 @import "variables.scss";
 @import "base.scss";
+@import "pages.scss";
 @import "vault.scss";
 @import "list.scss";
 @import "box.scss";