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

1
package.json
View File

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

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) => {

3
tailwind.config.js
View File

@@ -31,6 +31,9 @@ module.exports = {
serif: ["Playfair Display", "serif"],
},
extend: {
height: {
"actual-screen": "var(--height-screen)"
},
dropShadow: {
'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"
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:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"