From 7476cfce339e3c88bf7a6371cc6d9e94b7b0fa06 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Sun, 31 Jul 2022 14:56:41 +0200
Subject: [PATCH] final style update

---
 .../sections/contacts/MailContact.vue         |   8 +-
 .../sections/contacts/OtherContact.vue        | 222 ++++++++----------
 src/views/ContactView.vue                     |  47 +---
 3 files changed, 103 insertions(+), 174 deletions(-)

diff --git a/src/components/sections/contacts/MailContact.vue b/src/components/sections/contacts/MailContact.vue
index 75a385f..a64a2d0 100644
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="contact_container bg-neutral-100 rounded-md border border-gray-200 max-w-[500px] p-2 shadow">
+  <div class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow">
     <header class="mb-1.5">
       <h3 class="text-xl">
         Formularz kontaktowy
@@ -208,7 +208,9 @@ function formSubmit(event) {
 </script>
 
 <style lang="scss" scoped>
-.contact_container {
-  flex-basis: 500px;
+@screen md {
+  .contact_container {
+    flex-basis: 500px;
+  }
 }
 </style>
diff --git a/src/components/sections/contacts/OtherContact.vue b/src/components/sections/contacts/OtherContact.vue
index 94e5d6c..1b7af4d 100644
--- a/src/components/sections/contacts/OtherContact.vue
+++ b/src/components/sections/contacts/OtherContact.vue
@@ -1,82 +1,92 @@
 <template>
-  <div class="contact_info bg-neutral-100 rounded-md border border-gray-200 max-w-[500px] shadow">
-    <header class="info_head">
-      Inne formy kontaktu:
+  <div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
+    <header class="mb-1.5">
+      <h3 class="text-xl">
+        Inne formy kontaktu:
+      </h3>
     </header>
-    <div class="contact_element">
-      <img
-        class="contact_element_icon"
-        src="/assets/img/instagram.jpg"
-        alt="Instagram"
-      >
-      <span
-        id="instagram"
-        class="contact_element_text"
-      >
-        <a
-          href="https://www.instagram.com/nikcamii/"
-          target="_blank"
-          rel="noopener nofollow noreferrer"
-        >Instagram: @NiKCamii</a>
-      </span>
-    </div>
-    <div class="contact_element">
-      <img
-        class="contact_element_icon"
-        src="/assets/img/facebook.jpg"
-        alt="Facebook"
-      >
-      <span
-        id="facebook"
-        class="contact_element_text"
-      >
-        <a
-          href="https://www.facebook.com/nikcamii/"
-          target="_blank"
-          rel="noopener nofollow noreferrer"
-        >Facebook: @NiKCamii</a>
-      </span>
-    </div>
-    <div class="contact_element">
-      <img
-        class="contact_element_icon"
-        src="/assets/img/twitter.jpg"
-        alt="Twitter"
-      >
-      <span
-        id="twitter"
-        class="contact_element_text"
-      >
-        <a
-          href="https://twitter.com/nikcamii"
-          target="_blank"
-          rel="noopener nofollow noreferrer"
-        >Twitter: @NiKCamii</a>
-      </span>
-    </div>
-    <div class="contact_element">
-      <img
-        class="contact_element_icon"
-        src="/assets/img/gg.png"
-        alt="Gadu-Gadu"
-      >
-      <span
-        id="gg"
-        class="contact_element_text"
-      >GG: 38429969</span>
-    </div>
-    <div class="contact_element">
-      <img
-        class="contact_element_icon"
-        src="/assets/img/user.jpg"
-        alt="E-mail"
-      >
-      <span
-        id="mailto"
-        class="contact_element_text"
-      >
-        <a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
-      </span>
+    <div class="flex flex-col gap-2.5 justify-start items-start">
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        <img
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+          src="/assets/img/instagram.jpg"
+          alt="Instagram"
+        >
+        <span
+          id="instagram"
+          class="font-bold"
+        >
+          <a
+            href="https://www.instagram.com/nikcamii/"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+            class="hover:underline"
+          >Instagram: @NiKCamii</a>
+        </span>
+      </div>
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        <img
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+          src="/assets/img/facebook.jpg"
+          alt="Facebook"
+        >
+        <span
+          id="facebook"
+          class="font-bold"
+        >
+          <a
+            href="https://www.facebook.com/nikcamii/"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+            class="hover:text-gray-700 hover:underline"
+          >Facebook: @NiKCamii</a>
+        </span>
+      </div>
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        <img
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+          src="/assets/img/twitter.jpg"
+          alt="Twitter"
+        >
+        <span
+          id="twitter"
+          class="font-bold"
+        >
+          <a
+            href="https://twitter.com/nikcamii"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+            class="hover:text-gray-700 hover:underline"
+          >Twitter: @NiKCamii</a>
+        </span>
+      </div>
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        <img
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+          src="/assets/img/gg.png"
+          alt="Gadu-Gadu"
+        >
+        <span
+          id="gg"
+          class="font-bold"
+        >GG: 38429969</span>
+      </div>
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        <img
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+          src="/assets/img/user.jpg"
+          alt="E-mail"
+        >
+        <span
+          id="mailto"
+          class="font-bold"
+        >
+          <a
+            href="mailto:contact@kamilcraft.com"
+            class="hover:text-gray-700 hover:underline"
+          >Email: contact@kamilcraft.com</a>
+        </span>
+      </div>
     </div>
   </div>
 </template>
@@ -84,51 +94,18 @@
 <style lang="scss" scoped>
 @import "scss/media";
 
-.contact_info {
-  flex-basis: 410px;
+@screen md {
+  .contact_info {
+    flex-basis: 410px;
+  }
 }
 
-.info_head {
-  padding: 10px;
-  line-height: 1.6em;
-  font-size: 1.3em;
-  font-weight: bold;
-}
+a {
+  color: inherit;
 
-.contact_element {
-  display: flex;
-  align-items: center;
-  padding: 5px;
-  background-color: #fff;
-  border-top: 1px solid #e6e6e6;
-  border-bottom: 1px solid #e6e6e6;
-  margin-bottom: 5px;
-
-  a {
-    color: inherit;
-    text-decoration: none;
-
-    &:hover {
-      -webkit-text-fill-color: #444444;
-      color: #444444;
-      text-decoration: underline;
-    }
-  }
-
-  &_icon {
-    border-radius: 50%;
-    border: 1px solid #e2e2e2;
-    width: 50px;
-    height: 50px;
-    margin-right: 10px;
-    object-fit: contain;
-  }
-
-  &_text{
-    padding-top: 2px;
-    line-height: 1.6em;
-    font-size: 1.1em;
-    font-weight: bold;
+  &:hover {
+    -webkit-text-fill-color: #374151;
+    color: #374151;
   }
 }
 
@@ -153,11 +130,4 @@
 #gg {
   color: #ffa214;
 }
-
-@include media-tablet {
-  #instagram, #facebook, #twitter, #mailto, #gg {
-    font-size: 1em;
-    line-height: 1.2em;
-  }
-}
 </style>
diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue
index 99d9bc9..ddc51da 100644
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -1,6 +1,6 @@
 <template>
-  <section class="py-6">
-    <div class="flex items-start justify-center mx-auto gap-5">
+  <section class="px-3 py-6">
+    <div class="flex flex-col md:flex-row items-start justify-center mx-auto gap-5">
       <MailContact />
       <OtherContact />
     </div>
@@ -25,46 +25,3 @@ onMounted(() => {
   store.commit('setHeader', header)
 })
 </script>
-
-<style lang="scss">
-@import "scss/media";
-
-/* .contact {
-  padding: 25px 0;
-
-  .container {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-  }
-
-  .contact_container, .contact_info {
-    margin: 10px;
-    max-width: 500px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
-  }
-
-  @include media-tablet {
-    .container {
-      display: block;
-      margin: 0 auto;
-
-      .contact_container, .contact_info {
-        margin: 0 auto 25px;
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-  @include media-mobile {
-    .container {
-      padding: 0 10px;
-
-      .contact_container {
-        max-width: unset;
-      }
-    }
-  }
-} */
-</style>