From f47db1fd50117c803da9d4865cb758fe070a84d8 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 10 Nov 2022 16:36:55 +0600
Subject: [PATCH] displaying contact links as grid

---
 components/contact/ContactInformation.vue |  2 +-
 constants/contacts.ts                     |  1 +
 pages/contacts.vue                        | 16 ++++++++++++++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/contact/ContactInformation.vue b/components/contact/ContactInformation.vue
index 4889259..5408a63 100644
--- a/components/contact/ContactInformation.vue
+++ b/components/contact/ContactInformation.vue
@@ -30,7 +30,7 @@ onMounted(() => (mail.value = atob(contacts.email)));
 .grid {
   width: auto;
   display: grid;
-  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fit, minmax(230px, auto));
   gap: 16px;
   align-items: flex-start;
   justify-content: flex-start;
diff --git a/constants/contacts.ts b/constants/contacts.ts
index d05cc59..6f9494f 100644
--- a/constants/contacts.ts
+++ b/constants/contacts.ts
@@ -2,4 +2,5 @@ export const contacts = {
   telegram: "vv4000",
   email: "Z290aGFtNDhAZ21haWwuY29t",
   github: "muerwre",
+  location: "Pavlodar, Rep. Kazakhstan",
 } as const;
diff --git a/pages/contacts.vue b/pages/contacts.vue
index a899d92..6e7272d 100644
--- a/pages/contacts.vue
+++ b/pages/contacts.vue
@@ -2,7 +2,10 @@
   <article :class="$style.content">
     <div :class="$style.grid">
       <div :class="$style.text">
-        <h1>Write me a letter!</h1>
+        <h1 :class="$style.title">Write me a letter!</h1>
+        <div :class="$style.location">
+          <b>Current Location:</b> {{ contacts.location }}
+        </div>
 
         <div :class="$style.contacts">
           <ContactInformation />
@@ -17,7 +20,12 @@
 </template>
 
 <script lang="ts">
+import { contacts } from "~~/constants/contacts";
+
 export default {
+  data() {
+    return { contacts };
+  },
   scrollToTop: true,
   head() {
     return {
@@ -48,6 +56,10 @@ definePageMeta({ layout: "landing" });
 }
 
 .contacts {
-  margin-top: 40px;
+  margin-top: 60px;
+}
+
+.title {
+  margin-bottom: 10px;
 }
 </style>