juancwu/potoforio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

in progress: working on getting retina display responsiveness right

Browse source
This commit is contained in:
jc 2023-10-24 00:28:03 -04:00
commit d2e3fafae7
No known key found for this signature in database
2 changed files with 39 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

14
public/views/index.html
View file

@ -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"

31
tailwind.config.js
View file

@ -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)
`,
},
},
},
},