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
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
6 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -56,6 +56,7 @@
"postcss-nested": "^5.0.5", "postcss-nested": "^5.0.5",
"ramda": "^0.27.1", "ramda": "^0.27.1",
"react": "^17.0.1", "react": "^17.0.1",
"react-div-100vh": "^0.7.0",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-responsive-masonry": "^2.1.2", "react-responsive-masonry": "^2.1.2",

2
src/html.js
View File

@ -15,7 +15,7 @@ export default function HTML(props) {
name="description" name="description"
/> />
<meta <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" name="viewport"
/> />
{props.headComponents} {props.headComponents}

15
src/pages/index.js
View File

@ -6,12 +6,13 @@ import { take } from "ramda";
import classnames from "classnames"; import classnames from "classnames";
import { import {
getVibrantToHelmetSafeBodyStyle, getHelmetSafeBodyStyle,
getVibrant, getVibrant,
getAspectRatio, getAspectRatio,
} from "../utils"; } from "../utils";
import Nav from "../components/index/Nav"; import Nav from "../components/index/Nav";
import ActionButtons from "../components/index/ActionButtons"; import ActionButtons from "../components/index/ActionButtons";
import { use100vh } from "react-div-100vh";
const env = const env =
process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development"; process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
@ -105,6 +106,8 @@ const IndexPage = ({
const vibrant = getVibrant(image); const vibrant = getVibrant(image);
const ar = getAspectRatio(image); const ar = getAspectRatio(image);
const screenHeight = use100vh();
const imageIsLandscape = isClient ? ar > 1 : true; const imageIsLandscape = isClient ? ar > 1 : true;
return ( return (
@ -113,14 +116,14 @@ const IndexPage = ({
<title>Chuck Dries</title> <title>Chuck Dries</title>
<body <body
className={classnames(isClient ? "bg-vibrant-dark" : "")} className={classnames(isClient ? "bg-vibrant-dark" : "")}
style={getVibrantToHelmetSafeBodyStyle(vibrant)} style={getHelmetSafeBodyStyle(vibrant, screenHeight)}
/> />
</Helmet> </Helmet>
<main <main
className={classnames( className={classnames(
"font-serif", "font-serif",
imageIsLandscape 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" : "portrait:grid landscape:flex flex-row"
)} )}
> >
@ -181,8 +184,8 @@ const IndexPage = ({
alt="" alt=""
className={classnames( className={classnames(
imageIsLandscape imageIsLandscape
? "landscape:h-screen portrait:h-two-thirds-vw" ? "landscape:h-actual-screen portrait:h-two-thirds-vw"
: "h-screen portrait:w-full landscape:w-1/2" : "h-actual-screen portrait:w-full landscape:w-1/2"
)} )}
image={getImage(image)} image={getImage(image)}
loading="eager" loading="eager"
@ -192,7 +195,7 @@ const IndexPage = ({
/> />
) : ( ) : (
<div <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" }} style={{ gridArea: "1/1" }}
></div> ></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})`; `rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, ${alpha || 1})`;
// work around SSR bug in react-helmet // work around SSR bug in react-helmet
export const getVibrantToHelmetSafeBodyStyle = (vibrant) => { export const getHelmetSafeBodyStyle = (vibrant, screenHeight) => {
const style = { const style = {
"--muted": vibrant.Muted, "--muted": vibrant.Muted,
"--dark-muted": vibrant.DarkMuted, "--dark-muted": vibrant.DarkMuted,
@ -25,13 +25,14 @@ export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
"--vibrant": vibrant.Vibrant, "--vibrant": vibrant.Vibrant,
"--dark-vibrant": vibrant.DarkVibrant, "--dark-vibrant": vibrant.DarkVibrant,
"--light-vibrant": vibrant.LightVibrant, "--light-vibrant": vibrant.LightVibrant,
"--height-screen": screenHeight ? `${screenHeight}px` : '100vh'
}; };
if (typeof window === "undefined") { if (typeof window === "undefined") {
return style; return style;
} }
return Object.keys(style) return Object.keys(style)
.map((key) => `${key}: ${style[key]}`) .map((key) => `${key}: ${style[key]};`)
.join(";"); .join("");
}; };
const gcd = (a, b) => { const gcd = (a, b) => {

3
tailwind.config.js
View File

@ -31,6 +31,9 @@ module.exports = {
serif: ["Playfair Display", "serif"], serif: ["Playfair Display", "serif"],
}, },
extend: { extend: {
height: {
"actual-screen": "var(--height-screen)"
},
dropShadow: { dropShadow: {
'dark': '0 1px 2px rgba(0, 0, 0, 0.8)', 'dark': '0 1px 2px rgba(0, 0, 0, 0.8)',
}, },

5
yarn.lock
View File

@ -11386,6 +11386,11 @@ react-dev-utils@^11.0.3:
strip-ansi "6.0.0" strip-ansi "6.0.0"
text-table "0.2.0" text-table "0.2.0"
react-div-100vh@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/react-div-100vh/-/react-div-100vh-0.7.0.tgz#b3bec03a833fa40e406f36ed2e23a35a59d1068f"
integrity sha512-I3d77tQyaSlOx/6vurDDLk7upb5GA2ldEtVXkk7Kn5cy+tLlS0KlqDK14xUxlxh7jz4StjgKcwFyrpymsPpomA==
react-dom@^17.0.1: react-dom@^17.0.1:
version "17.0.2" version "17.0.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"