float navbar in middle of screen

This commit is contained in:
Chuck Dries 2021-07-16 22:52:00 -07:00
parent cb7e308d12
commit 25698a08e2

View File

@ -163,7 +163,6 @@ const IndexPage = ({
style={getVibrantToHelmetSafeBodyStyle(vibrant)} style={getVibrantToHelmetSafeBodyStyle(vibrant)}
/> />
</Helmet> </Helmet>
{/* WIP: ipad portrait hits md breakpoint, looks bad */}
<main <main
className={classnames( className={classnames(
"font-serif hero", "font-serif hero",
@ -187,7 +186,6 @@ const IndexPage = ({
}} }}
/> />
) : ( ) : (
// 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
<div <div
className="landscape:h-screen portrait:h-two-thirds-vw w-full" className="landscape:h-screen portrait:h-two-thirds-vw w-full"
style={{ gridArea: "1/1" }} style={{ gridArea: "1/1" }}
@ -204,14 +202,12 @@ const IndexPage = ({
> >
<nav <nav
className={classnames( className={classnames(
isClient && // ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen"
"text-vibrant-dark bg-vibrant-dark blurred-or-opaque-bg-2", "w-screen p-2 flex justify-center"
"px-6 p-2",
ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen"
)} )}
style={{ zIndex: 100 }} style={{ zIndex: 100 }}
> >
<ul className="flex flex-wrap justify-center"> <ul className="text-vibrant-dark px-6 p-2 bg-vibrant-dark blurred-or-opaque-bg-2 inline-flex flex-wrap justify-center">
<li> <li>
<HeroA <HeroA
href="/CharlesDriesResumeCurrent.pdf" href="/CharlesDriesResumeCurrent.pdf"