contact page styled

TODO.md

@@ -7,12 +7,12 @@
 * Proper background images for hover effect
 
 ## contact
-* social icons at bottom right of form
 * form background image
 
 ## General
 * loading transitions
 * nav buttons
+* social nav items -> put in store or whatever
 
 ## Maybes
 * gallery page - featured images in same style as on services page with the

pages/contact.vue

@@ -39,12 +39,31 @@
           </b-input>
         </b-field>
 
-        <button class="btn-submit"
+        <div class="form-footer">
-                type="button"
+          <button class="btn-submit"
-                @click.prevent="onSubmit"
+                  type="button"
-                :disabled="isDisabled">
+                  @click.prevent="onSubmit"
-          Send
+                  :disabled="isDisabled">
-        </button>
+            Send
+          </button>
+
+          <ul class="social-nav">
+            <li v-for="item in socialNav"
+                :key="item.to"
+                class="social-nav__item"
+            >
+              <a class="social-nav__link social-link"
+                 :href="item.to"
+                 target="_blank"
+              >
+                <b-icon class="social-nav__icon"
+                        :icon="item.icon"
+                />
+              </a>
+            </li>
+          </ul>
+        </div>
+
       </div>
     </form>
 
@@ -78,7 +97,13 @@ export default {
         email: "",
         subject: "",
         message: "",
-      }
+      },
+      socialNav: [
+        { 'to': 'https://www.instagram.com', 'text': 'Instagram', icon: 'instagram' },
+        { 'to': 'https://www.facebook.com', 'text': 'Facebook', icon: 'facebook' },
+        { 'to': 'https://twitter.com', 'text': 'Twitter', icon: 'twitter' },
+        { 'to': 'https://uk.linkedin.com', 'text': 'LinkedIn', icon: 'linkedin' },
+      ],
     }
   },
 
@@ -180,5 +205,53 @@ export default {
     cursor: auto;
   }
 }
+
+.form-footer {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 2rem;
+  margin-top: 2rem;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 90%;
+    height: 1px;
+    top: 0;
+    left: 5%;
+    background-color: $color__neutral-800;
+  }
+}
+
+.social-nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.social-nav__item {
+  margin: 0 .2em;
+}
+
+.social-link {
+  transition: opacity .3s;
+
+  &:link, &:visited {
+    color: $color__neutral-100;
+    opacity: .6;
+  }
+
+  &:hover, &:active {
+    opacity: 1;
+  }
+}
 </style>