diff --git a/package.json b/package.json index dda142e..acdd65e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/html.js b/src/html.js index c30c71e..f9c9ab3 100644 --- a/src/html.js +++ b/src/html.js @@ -15,7 +15,7 @@ export default function HTML(props) { name="description" /> {props.headComponents} diff --git a/src/pages/index.js b/src/pages/index.js index 98fee0f..fcca9ae 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -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 = ({ Chuck Dries
@@ -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 = ({ /> ) : (
)} diff --git a/src/utils.js b/src/utils.js index ab67b26..9e57df8 100644 --- a/src/utils.js +++ b/src/utils.js @@ -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) => { diff --git a/tailwind.config.js b/tailwind.config.js index 056b526..21d5d4d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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)', }, diff --git a/yarn.lock b/yarn.lock index 074b7df..4d9de04 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"