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

improve index ssr/nojs layout

Browse Source
This commit is contained in:
Chuck Dries 2021-06-16 23:51:31 -07:00
parent 3763065690
commit 8ec8b011b2
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
gatsby/src/pages/index.js
View File

@ -4,14 +4,10 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils'; import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import classnames from 'classnames'; import classnames from 'classnames';
import useBreakpoint from 'use-breakpoint';
import { HeroA } from '../components/IndexComponents'; import { HeroA } from '../components/IndexComponents';
import themeBreakpoints from '../breakpoints';
const IndexPage = ({ data: { allFile: { edges } } }) => { const IndexPage = ({ data: { allFile: { edges } } }) => {
const { breakpoint } = useBreakpoint(themeBreakpoints, 'md');
const [isClient, setIsClient] = React.useState(false); const [isClient, setIsClient] = React.useState(false);
const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]); const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]);
const image = React.useMemo(() => { const image = React.useMemo(() => {
@ -21,7 +17,6 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
return images[Math.floor(Math.random() * images.length)]; return images[Math.floor(Math.random() * images.length)];
}, [images, isClient]); }, [images, isClient]);
const vibrant = getVibrant(image, isClient); const vibrant = getVibrant(image, isClient);
console.log('vibrant', vibrant);
React.useEffect(() => { React.useEffect(() => {
if (!isClient) { if (!isClient) {
setIsClient(true); setIsClient(true);
@ -49,7 +44,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
gridArea: '1/1', gridArea: '1/1',
}} /> }} />
// 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol // 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
: <div className="md:h-screen sm:h-auto" style={{gridArea: '1/1', height: breakpoint === 'sm' ? '67vw' : '100vh'}}></div> } : <div className="md:h-screen sm:h-two-thirds-vw" style={{gridArea: '1/1' }}></div> }
<div className="relative grid place-items-center" style={{gridArea: '1/1'}}> <div className="relative grid place-items-center" style={{gridArea: '1/1'}}>
<div className="m-2 flex flex-col items-end"> <div className="m-2 flex flex-col items-end">
<section className={classnames('rounded-xl py-6', isClient && ' bg-vibrant-dark-75')}> <section className={classnames('rounded-xl py-6', isClient && ' bg-vibrant-dark-75')}>

6
gatsby/src/styles/global.css
View File

@ -28,6 +28,12 @@
.scroll-padding-6 { .scroll-padding-6 {
scroll-padding: theme('spacing.6'); scroll-padding: theme('spacing.6');
} }
@variants responsive {
.h-two-thirds-vw {
height: 67vw;
}
}
} }
body { body {