From 95398d70dd9dbfc4cb9c816c378f81bfeecfaab7 Mon Sep 17 00:00:00 2001
From: Reinaldy Rafli <aldy505@tutanota.com>
Date: Thu, 15 Jul 2021 18:58:50 +0700
Subject: [PATCH] fix(layout): codeblock responsiveness on mobile

---
 client/src/components/codeblock.svelte |  2 +-
 client/src/components/navbar.svelte    |  2 +-
 client/src/routes/__layout.svelte      |  2 +-
 client/src/routes/index.svelte         | 10 +++++-----
 client/src/routes/why.svelte           |  4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/src/components/codeblock.svelte b/client/src/components/codeblock.svelte
index 7961bbc..4a7d6eb 100644
--- a/client/src/components/codeblock.svelte
+++ b/client/src/components/codeblock.svelte
@@ -1,5 +1,5 @@
 <div
-  class="bg-gray-900 font-code px-4 md:px-8 py-6 rounded-lg text-white overflow-ellipsis whitespace-nowrap overflow-x-scroll md:overflow-auto shadow-xl bg-gradient-to-br from-transparent to-gray-800"
+  class="bg-gray-900 font-code px-4 md:px-8 py-6 rounded-lg text-white whitespace-nowrap overflow-x-scroll md:overflow-auto shadow-xl bg-gradient-to-br from-transparent to-gray-800"
 >
   <slot />
 </div>
diff --git a/client/src/components/navbar.svelte b/client/src/components/navbar.svelte
index eb8b0e8..8868742 100644
--- a/client/src/components/navbar.svelte
+++ b/client/src/components/navbar.svelte
@@ -13,6 +13,6 @@
 
 <style>
   .navigation-item {
-    @apply flex-1 duration-300 transition ease-in-out py-2 'md:py-0' 'md:opacity-50' 'hover:cursor-pointer' 'hover:scale-110' 'hover:opacity-100';
+    @apply flex-auto 'md:flex-1' duration-300 transition ease-in-out py-2 'md:py-0' 'md:opacity-50' 'hover:cursor-pointer' 'hover:scale-110' 'hover:opacity-100';
   }
 </style>
diff --git a/client/src/routes/__layout.svelte b/client/src/routes/__layout.svelte
index 288cc0b..7b1d1b6 100644
--- a/client/src/routes/__layout.svelte
+++ b/client/src/routes/__layout.svelte
@@ -26,7 +26,7 @@
 <div
   class="bg-gradient-to-br from-transparent to-lavender-300 dark:(bg-gray-900 to-lavender-900 text-white) min-h-screen h-full w-full"
 >
-  <div class="container mx-auto lg:px-40 md:20 sm:px-12 px-8">
+  <div class="container mx-auto lg:px-40 md:px-20 sm:px-12 px-8 w-full">
     <header>
       <Navbar />
     </header>
diff --git a/client/src/routes/index.svelte b/client/src/routes/index.svelte
index 707c0b6..e5ce406 100644
--- a/client/src/routes/index.svelte
+++ b/client/src/routes/index.svelte
@@ -19,16 +19,16 @@
 </svelte:head>
 
 <section>
-  <div class="flex flex-col md:flex-row items-center py-8">
+  <div class="flex flex-col lg:flex-row items-center py-8">
     <div class="flex-1">
-      <h1 class="text-6xl font-bold py-2">{$_('meta.tagline')}</h1>
-      <p class="text-base py-4 w-2/3">{$_('meta.explanation')}</p>
+      <h1 class="text-5xl md:text-6xl font-bold py-2">{$_('meta.tagline')}</h1>
+      <p class="text-base py-4 md:w-2/3">{$_('meta.explanation')}</p>
     </div>
-    <div class="flex-1 px-6">
+    <div class="flex-1 md:px-6 w-full">
       <div class="max-w-xs mx-auto">
         <img src={env.API_ENDPOINT + `/today`} alt="Sample joke" class="py-6 shadow-2xl" />
       </div>
-      <Codeblock class="px-4 md:px-0 mx-auto">$ curl -XGET 'https://jokesbapak2.herokuapp.com/v1/'</Codeblock>
+      <Codeblock>$ curl -XGET 'https://jokesbapak2.herokuapp.com/v1/'</Codeblock>
       <p class="text-sm text-center py-4 opacity-70 hover:opacity-100 transition duration-300 ease-in-out">
         {$_('home.more.1')} <span on:click={() => goto('/guide')}>{$_('navigation.guide')}</span>
         {$_('home.more.2')} <span on:click={() => goto('/api')}>{$_('navigation.api')}</span>
diff --git a/client/src/routes/why.svelte b/client/src/routes/why.svelte
index 6dab07b..50c2453 100644
--- a/client/src/routes/why.svelte
+++ b/client/src/routes/why.svelte
@@ -40,10 +40,10 @@
 
 <style>
   p {
-    @apply text-base py-2 'md:w-2/3';
+    @apply text-base py-2 'lg:w-2/3';
   }
   h1 {
-    @apply text-4xl font-bold py-4;
+    @apply text-3xl 'md:text-4xl' font-bold py-4;
   }
   a {
     /* This would probably be an error if you installed WindiCSS extension on VSCode */