From d2e3fafae75bc6068d201aee80fe202ca3d73c13 Mon Sep 17 00:00:00 2001
From: jc <46619361+juancwu@users.noreply.github.com>
Date: Tue, 24 Oct 2023 00:28:03 -0400
Subject: [PATCH] in progress: working on getting retina display responsiveness
 right

---
 public/views/index.html | 14 ++++++++------
 tailwind.config.js      | 31 +++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/public/views/index.html b/public/views/index.html
index 3334f48..20b35ba 100644
--- a/public/views/index.html
+++ b/public/views/index.html
@@ -234,22 +234,24 @@
                 </div>
             </div>
         </header>
-        <main
-            class="px-16 pb-24 relative h-[calc(100%_-_92px)] flex items-center justify-center"
-        >
+        <main class="px-16 py-24 relative h-[calc(100%_-_92px)]">
             <div class="grid-pattern absolute inset-0" aria-hidden="true"></div>
             <div
                 class="radial-overlay absolute inset-0"
                 aria-hidden="true"
             ></div>
-            <section id="hero" aria-label="Hero Section">
+            <section
+                id="hero"
+                aria-label="Hero Section"
+                class="h-full w-full flex items-center justify-center"
+            >
                 <div class="flex items-center justify-center gap-16">
                     <div class="text-white space-y-4 relative z-10">
                         <p class="text-md lg:text-xl text-zinc-300">
                             Hello there <span aria-hidden="true">👋</span>,
                         </p>
                         <p
-                            class="text-5xl md:text-7xl lg:text-9xl text-zinc-100 font-bold"
+                            class="text-5xl md:text-7xl lg:text-9xl max-[1150px]:text-7xl text-zinc-100 font-bold"
                         >
                             I am Juan
                         </p>
@@ -291,7 +293,7 @@
                         </a>
                     </div>
                     <div
-                        class="clip-me-from-grass drop-shadow-lg hidden md:block absolute top-2 right-0 opacity-30 lg:opacity-100 lg:relative p-2 bg-gray-200 md:max-w-lg"
+                        class="clip-me-from-grass drop-shadow-lg retina:w-96 retina:h-auto hidden md:block absolute top-2 right-0 opacity-30 lg:opacity-100 lg:relative p-2 bg-gray-200 md:max-w-lg"
                     >
                         <img
                             class="w-full h-full clip-me-from-grass z-0"
diff --git a/tailwind.config.js b/tailwind.config.js
index 852ecd3..429bef5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,37 @@ module.exports = {
                 '3xl': '2048px',
                 '4xl': '2560px',
                 '5xl': '4096px',
+                // for mac users
+                retina: {
+                    raw: `@media
+only screen and (-webkit-min-device-pixel-ratio: 2),
+only screen and (min--moz-device-pixel-ratio: 2),
+only screen and (-o-min-device-pixel-ratio: 2/1),
+only screen and (min-device-pixel-ratio: 2),
+only screen and (min-resolution: 192dpi),
+only screen and (min-resolution: 2dppx)
+`,
+                },
+                'retina-sm': {
+                    raw: `@media
+only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 640px),
+only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 640px),
+only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 640px),
+only screen and (min-device-pixel-ratio: 2) and (min-wdith: 640px),
+only screen and (min-resolution: 192dpi) and (min-width: 640px),
+only screen and (min-resolution: 2dppx) and (min-width: 640px)
+`,
+                },
+                'retina-md': {
+                    raw: `@media
+only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px),
+only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1024px),
+only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1024px),
+only screen and (min-device-pixel-ratio: 2) and (min-wdith: 1024px),
+only screen and (min-resolution: 192dpi) and (min-width: 1024px),
+only screen and (min-resolution: 2dppx) and (min-width: 1024px)
+`,
+                },
             },
         },
     },