From ca99d7001e5f3f4ebcfded6d4757cd6546e508e2 Mon Sep 17 00:00:00 2001
From: Rihan <me@file.properties>
Date: Tue, 17 May 2022 01:03:17 +0000
Subject: [PATCH 1/5] Responsive navigation

---
 src/components/buttons/IconPatch.tsx | 2 +-
 src/components/layout/Navigation.tsx | 8 ++++----
 src/components/text/ArrowLink.tsx    | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/buttons/IconPatch.tsx b/src/components/buttons/IconPatch.tsx
index 67f18106..c18803d5 100644
--- a/src/components/buttons/IconPatch.tsx
+++ b/src/components/buttons/IconPatch.tsx
@@ -14,7 +14,7 @@ export function IconPatch(props: IconPatchProps) {
       <div
         className={`bg-denim-300 flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent transition-[color,transform,border-color] duration-75 ${
           props.clickable
-            ? "hover:bg-denim-400 m-2 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
+            ? "hover:bg-denim-400 mx-2 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
             : ""
         } ${props.active ? "text-bink-600 border-bink-600 bg-bink-100" : ""}`}
       >
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index 3e40ff6d..be00a2fb 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -11,16 +11,16 @@ export interface NavigationProps {
 
 export function Navigation(props: NavigationProps) {
   return (
-    <div className="absolute left-0 right-0 top-0 flex items-center justify-between py-5 px-7">
-      <div className="flex items-center justify-center">
-        <div className="mr-6">
+    <div className="absolute left-0 right-0 top-0 flex items-center justify-between py-5 px-7 min-h-[88px]">
+      <div className="flex items-center justify-center w-full sm:w-fit">
+        <div className="mr-auto sm:mr-6">
           <Link to="/">
             <BrandPill clickable />
           </Link>
         </div>
         {props.children}
       </div>
-      <div className="flex">
+      <div className={props.children ? "hidden sm:flex" : "flex"}>
         <a
           href={DISCORD_LINK}
           target="_blank"
diff --git a/src/components/text/ArrowLink.tsx b/src/components/text/ArrowLink.tsx
index 6e4ebe92..67c645fb 100644
--- a/src/components/text/ArrowLink.tsx
+++ b/src/components/text/ArrowLink.tsx
@@ -26,7 +26,7 @@ export function ArrowLink(props: ArrowLinkProps) {
   const isExternal = !!(props as IArrowLinkPropsExternal).url;
   const isInternal = !!(props as IArrowLinkPropsInternal).to;
   const content = (
-    <span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95">
+    <span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95 mt-1 pr-1">
       {direction === "left" ? (
         <span className="text-xl transition-transform group-hover:-translate-x-1">
           <Icon icon={Icons.ARROW_LEFT} />

From 6d271bc7fd714e36493ad6454fe6f57847ef5891 Mon Sep 17 00:00:00 2001
From: Rihan <me@file.properties>
Date: Tue, 17 May 2022 01:03:27 +0000
Subject: [PATCH 2/5] Responsive rounded borders

---
 src/components/layout/Paper.tsx      | 2 +-
 src/components/media/VideoPlayer.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/Paper.tsx b/src/components/layout/Paper.tsx
index 8659e97f..2504844f 100644
--- a/src/components/layout/Paper.tsx
+++ b/src/components/layout/Paper.tsx
@@ -7,7 +7,7 @@ export interface PaperProps {
 
 export function Paper(props: PaperProps) {
   return (
-    <div className={`bg-denim-200 rounded-xl p-12 ${props.className}`}>
+    <div className={`bg-denim-200 lg:rounded-xl p-12 ${props.className}`}>
       {props.children}
     </div>
   )
diff --git a/src/components/media/VideoPlayer.tsx b/src/components/media/VideoPlayer.tsx
index 28a7ff6b..c625ea1c 100644
--- a/src/components/media/VideoPlayer.tsx
+++ b/src/components/media/VideoPlayer.tsx
@@ -14,7 +14,7 @@ export interface VideoPlayerProps {
 
 export function SkeletonVideoPlayer(props: { error?: boolean }) {
   return (
-    <div className="bg-denim-200 flex aspect-video w-full items-center justify-center rounded-xl">
+    <div className="bg-denim-200 flex aspect-video w-full items-center justify-center lg:rounded-xl">
       {props.error ? (
         <div className="flex flex-col items-center">
           <IconPatch icon={Icons.WARNING} className="text-red-400" />

From 1b2cc93d68281d61ddf2478e9eb8dcfc7777da79 Mon Sep 17 00:00:00 2001
From: Rihan <me@file.properties>
Date: Tue, 17 May 2022 01:15:19 +0000
Subject: [PATCH 3/5] Responsive padding

---
 src/components/layout/Paper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/Paper.tsx b/src/components/layout/Paper.tsx
index 2504844f..e2e8475b 100644
--- a/src/components/layout/Paper.tsx
+++ b/src/components/layout/Paper.tsx
@@ -7,7 +7,7 @@ export interface PaperProps {
 
 export function Paper(props: PaperProps) {
   return (
-    <div className={`bg-denim-200 lg:rounded-xl p-12 ${props.className}`}>
+    <div className={`bg-denim-200 lg:rounded-xl px-4 sm:px-8 md:px-12 py-6 sm:py-8 md:py-12 ${props.className}`}>
       {props.children}
     </div>
   )

From dff07a6f3891030aafea6b131e09439238c4f5b1 Mon Sep 17 00:00:00 2001
From: Rihan <me@file.properties>
Date: Tue, 17 May 2022 01:15:23 +0000
Subject: [PATCH 4/5] Responsive title

---
 src/components/text/Title.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/text/Title.tsx b/src/components/text/Title.tsx
index 0cc373e1..436a2663 100644
--- a/src/components/text/Title.tsx
+++ b/src/components/text/Title.tsx
@@ -3,5 +3,5 @@ export interface TitleProps {
 }
 
 export function Title(props: TitleProps) {
-  return <h1 className="text-4xl font-bold text-white">{props.children}</h1>;
+  return <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white">{props.children}</h1>;
 }

From 16da0a0e1650e335bb02d6ef01b7ad0c09884c33 Mon Sep 17 00:00:00 2001
From: Rihan <me@file.properties>
Date: Tue, 17 May 2022 01:15:38 +0000
Subject: [PATCH 5/5] Fix icon spacing

---
 src/components/buttons/IconPatch.tsx | 2 +-
 src/components/layout/Navigation.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/buttons/IconPatch.tsx b/src/components/buttons/IconPatch.tsx
index c18803d5..1a80061c 100644
--- a/src/components/buttons/IconPatch.tsx
+++ b/src/components/buttons/IconPatch.tsx
@@ -14,7 +14,7 @@ export function IconPatch(props: IconPatchProps) {
       <div
         className={`bg-denim-300 flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent transition-[color,transform,border-color] duration-75 ${
           props.clickable
-            ? "hover:bg-denim-400 mx-2 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
+            ? "hover:bg-denim-400 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
             : ""
         } ${props.active ? "text-bink-600 border-bink-600 bg-bink-100" : ""}`}
       >
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index be00a2fb..dfc8891f 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -20,7 +20,7 @@ export function Navigation(props: NavigationProps) {
         </div>
         {props.children}
       </div>
-      <div className={props.children ? "hidden sm:flex" : "flex"}>
+      <div className={`${props.children ? "hidden sm:flex" : "flex"} flex-row	gap-4`}>
         <a
           href={DISCORD_LINK}
           target="_blank"