From 984d6dfd1d1ccbb50c5ceb0a3c4f85265f6c6375 Mon Sep 17 00:00:00 2001
From: Made Baruna <made.setia@gmail.com>
Date: Sun, 11 Apr 2021 01:16:56 +0800
Subject: [PATCH] Update homepage

---
 src/routes/_index/twitter.svelte | 17 ++++++++++++-----
 src/routes/_layout.svelte        | 16 +++++++++++-----
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/routes/_index/twitter.svelte b/src/routes/_index/twitter.svelte
index 629167d6..560f06bc 100644
--- a/src/routes/_index/twitter.svelte
+++ b/src/routes/_index/twitter.svelte
@@ -5,16 +5,23 @@
 </script>
 
 <div class="bg-item rounded-xl p-4 flex flex-col items-start">
-  <p class="text-white ml-2">
-    {$t('home.twitter.title')}
-  </p>
+  <div class="w-full text-white">
+    <a
+      class="twitter-timeline"
+      data-dnt="true"
+      data-theme="dark"
+      data-tweet-limit="1"
+      data-chrome="noheader nofooter noborders transparent"
+      href="https://twitter.com/MadeBaruna?ref_src=twsrc%5Etfw">Tweets by MadeBaruna</a
+    > <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+  </div>
   <a
-    href="https://twitter.com/MadeBaruna"
+    href="https://twitter.com/intent/user?screen_name=MadeBaruna"
     target="_blank"
     class="flex justify-end items-center self-end lg:self-start text-white mt-4 bg-background-secondary rounded-xl py-2 px-4
     hover:bg-background transition-colors duration-100"
   >
-  <Icon path={mdiTwitter} className="mr-2" />
+    <Icon path={mdiTwitter} className="mr-2" />
     {$t('home.twitter.detail')}
     <Icon path={mdiChevronRight} />
   </a>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 09c35d3e..34967306 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -18,7 +18,7 @@
   import SettingData from '../components/SettingData.svelte';
   import Toast from '../components/Toast.svelte';
   import Icon from '../components/Icon.svelte';
-  import { mdiDiscord, mdiFacebook, mdiReddit, mdiTelegram } from '@mdi/js';
+  import { mdiDiscord, mdiFacebook, mdiReddit, mdiTelegram, mdiTwitter } from '@mdi/js';
 
   export let segment;
 
@@ -64,13 +64,19 @@
   </p>
   <div class="flex mt-4 md:items-center flex-col md:flex-row">
     <a class="text-gray-400 hover:text-primary" href="https://discord.gg/tPURAYgHV9" target="_blank">
-      <Icon path={mdiDiscord} size={1.5} /> {$t('footer.discord')}
+      <Icon path={mdiDiscord} size={1.5} />
+      {$t('footer.discord')}
     </a>
     <div class="text-gray-400 mt-4 md:mt-0 md:ml-4 flex flex-col md:pl-4 md:border-l border-gray-600">
       <span class="text-gray-500">{$t('footer.community')}</span>
-      <a class="text-gray-400 hover:text-primary" href="https://t.me/GenshinImpact_ID" target="_blank">
-        <Icon path={mdiTelegram} size={1} /> Telegram	🇮🇩
-      </a>
+      <div>
+        <a class="text-gray-400 hover:text-primary mr-1 whitespace-no-wrap" href="https://t.me/GenshinImpact_ID" target="_blank">
+          <Icon path={mdiTelegram} size={1} /> Telegram 🇮🇩
+        </a>
+        <a class="text-gray-400 hover:text-primary whitespace-no-wrap" href="https://twitter.com/MadeBaruna" target="_blank">
+          <Icon path={mdiTwitter} size={1} /> Dev Twitter
+        </a>
+      </div>
     </div>
     <div class="text-gray-400 mt-4 md:mt-0 md:ml-4 flex flex-col md:pl-4 md:border-l border-gray-600">
       <span class="text-gray-500">{$t('footer.official')}</span>