chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix iphone screen height

Browse Source
This commit is contained in:
Chuck Dries
2022-02-28 18:49:24 -08:00
parent 84b43d1f40
commit b2a85ba0ec
6 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/html.js
View File

@@ -15,7 +15,7 @@ export default function HTML(props) {
name="description"
/>
<meta
content="width=device-width, initial-scale=1, shrink-to-fit=no"
content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
name="viewport"
/>
{props.headComponents}

15
src/pages/index.js
View File

@@ -6,12 +6,13 @@ import { take } from "ramda";
import classnames from "classnames";
import {
getVibrantToHelmetSafeBodyStyle,
getHelmetSafeBodyStyle,
getVibrant,
getAspectRatio,
} from "../utils";
import Nav from "../components/index/Nav";
import ActionButtons from "../components/index/ActionButtons";
import { use100vh } from "react-div-100vh";
const env =
process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
@@ -105,6 +106,8 @@ const IndexPage = ({
const vibrant = getVibrant(image);
const ar = getAspectRatio(image);
const screenHeight = use100vh();
const imageIsLandscape = isClient ? ar > 1 : true;
return (
@@ -113,14 +116,14 @@ const IndexPage = ({
<title>Chuck Dries</title>
<body
className={classnames(isClient ? "bg-vibrant-dark" : "")}
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
style={getHelmetSafeBodyStyle(vibrant, screenHeight)}
/>
</Helmet>
<main
className={classnames(
"font-serif",
imageIsLandscape
? "landscape:grid portrait:h-screen portrait:flex flex-col justify-evenly"
? "landscape:grid portrait:h-actual-screen portrait:flex flex-col justify-evenly"
: "portrait:grid landscape:flex flex-row"
)}
>
@@ -181,8 +184,8 @@ const IndexPage = ({
alt=""
className={classnames(
imageIsLandscape
? "landscape:h-screen portrait:h-two-thirds-vw"
: "h-screen portrait:w-full landscape:w-1/2"
? "landscape:h-actual-screen portrait:h-two-thirds-vw"
: "h-actual-screen portrait:w-full landscape:w-1/2"
)}
image={getImage(image)}
loading="eager"
@@ -192,7 +195,7 @@ const IndexPage = ({
/>
) : (
<div
className="landscape:h-screen portrait:h-two-thirds-vw w-full bg-gray-800"
className="landscape:h-actual-screen portrait:h-two-thirds-vw w-full bg-gray-800"
style={{ gridArea: "1/1" }}
></div>
)}

7
src/utils.js
View File

@@ -17,7 +17,7 @@ export const getRgba = (palette, alpha) =>
`rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, ${alpha || 1})`;
// work around SSR bug in react-helmet
export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
export const getHelmetSafeBodyStyle = (vibrant, screenHeight) => {
const style = {
"--muted": vibrant.Muted,
"--dark-muted": vibrant.DarkMuted,
@@ -25,13 +25,14 @@ export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
"--vibrant": vibrant.Vibrant,
"--dark-vibrant": vibrant.DarkVibrant,
"--light-vibrant": vibrant.LightVibrant,
"--height-screen": screenHeight ? `${screenHeight}px` : '100vh'
};
if (typeof window === "undefined") {
return style;
}
return Object.keys(style)
.map((key) => `${key}: ${style[key]}`)
.join(";");
.map((key) => `${key}: ${style[key]};`)
.join("");
};
const gcd = (a, b) => {