Home hero positioing
This commit is contained in:
parent
86adce2a38
commit
7f16dacb41
|
@ -1,14 +1,21 @@
|
||||||
export function HomeHero() {
|
export function HomeHero() {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={
|
||||||
top: '-20vh',
|
{
|
||||||
// transform: `translateX(17.5vw) translateY(-5vh)`,
|
// transform: `translateX(17.5vw) translateY(-5vh)`,
|
||||||
}}
|
}
|
||||||
className="fixed bottom-0 left-0 right-0 z-30 overflow-hidden"
|
}
|
||||||
|
className="relative w-full h-full"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
className="object-cover object-right-bottom w-full h-full"
|
style={{
|
||||||
|
transform: ``,
|
||||||
|
// Make image expand into sidebar direction
|
||||||
|
direction: 'rtl',
|
||||||
|
minWidth: '100%',
|
||||||
|
}}
|
||||||
|
className="absolute bottom-0 left-0 object-cover h-full transform"
|
||||||
src="/hero.svg"
|
src="/hero.svg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import React, { ReactNode, useContext } from 'react';
|
import { useRouter } from 'next/router';
|
||||||
|
import React, { ReactNode, useContext, useEffect, useRef } from 'react';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import { UI } from '../../constants';
|
import { UI } from '../../constants';
|
||||||
import { ScreenContext } from '../../contexts/screen';
|
import { ScreenContext } from '../../contexts/screen';
|
||||||
|
@ -17,6 +18,8 @@ export default function Layout({ children }: Props) {
|
||||||
(state: IState) => state.navigation,
|
(state: IState) => state.navigation,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
const marginLeft = `${
|
const marginLeft = `${
|
||||||
pageType === PageType.NORMAL && isTablet
|
pageType === PageType.NORMAL && isTablet
|
||||||
? UI.SIDE_MENU_SIDE_BAR_WIDTH_PX
|
? UI.SIDE_MENU_SIDE_BAR_WIDTH_PX
|
||||||
|
@ -27,6 +30,20 @@ export default function Layout({ children }: Props) {
|
||||||
(pageType === PageType.BLOG || pageType === PageType.POST) &&
|
(pageType === PageType.BLOG || pageType === PageType.POST) &&
|
||||||
headerMobileMenuExpanded;
|
headerMobileMenuExpanded;
|
||||||
|
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
const handleLocationChange = () => {
|
||||||
|
// Reset scroll position
|
||||||
|
ref.current.scrollTo(0, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
router.events.on('routeChangeComplete', handleLocationChange);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
router.events.off('routeChangeComplete', handleLocationChange);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{ height: '100vh', width: '100%' }}
|
style={{ height: '100vh', width: '100%' }}
|
||||||
|
@ -43,6 +60,7 @@ export default function Layout({ children }: Props) {
|
||||||
<SideMenu />
|
<SideMenu />
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
ref={ref}
|
||||||
style={{
|
style={{
|
||||||
marginLeft,
|
marginLeft,
|
||||||
filter: `brightness(${mobileMenuOpen ? 0.85 : 1})`,
|
filter: `brightness(${mobileMenuOpen ? 0.85 : 1})`,
|
||||||
|
|
|
@ -71,6 +71,9 @@ function Page({
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
dispatch(setPageType(PageType.NORMAL));
|
dispatch(setPageType(PageType.NORMAL));
|
||||||
|
|
||||||
|
// Reset scroll position
|
||||||
|
window.scrollY = 0;
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -99,7 +102,7 @@ function Page({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Contained>
|
<Contained>
|
||||||
<h1 className="w-10/12 mt-6 mb-4 text-4xl font-bold leading-none text-primary font-prompt">
|
<h1 className="w-10/12 mt-12 mb-4 text-4xl font-bold leading-none text-primary font-prompt">
|
||||||
{page?.title}
|
{page?.title}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
|
|
|
@ -83,7 +83,7 @@ const Blog = (props: Props) => {
|
||||||
<title>{generateTitle('Blog')}</title>
|
<title>{generateTitle('Blog')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<div className="flex flex-col w-full mt-12 mb-6 space-y-10 bg-alt">
|
<div className="flex flex-col w-full mt-12 mb-6 space-y-6 bg-alt">
|
||||||
<Contained>
|
<Contained>
|
||||||
{!tag && posts.length && <ArticleCardFeature {...featuredPost} />}
|
{!tag && posts.length && <ArticleCardFeature {...featuredPost} />}
|
||||||
|
|
||||||
|
@ -129,7 +129,7 @@ const Blog = (props: Props) => {
|
||||||
<Contained>
|
<Contained>
|
||||||
<div className="flex justify-center mb-4">
|
<div className="flex justify-center mb-4">
|
||||||
{showPagination && (
|
{showPagination && (
|
||||||
<div className="mt-8 mobile:mt-12">
|
<div className="mt-4 mobile:mt-6">
|
||||||
<ReactPaginate
|
<ReactPaginate
|
||||||
previousLabel={'<'}
|
previousLabel={'<'}
|
||||||
nextLabel={'>'}
|
nextLabel={'>'}
|
||||||
|
|
|
@ -25,7 +25,7 @@ const Index = () => {
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
{/* Only visible when no pages are open */}
|
{/* Only visible when no pages are open */}
|
||||||
<div style={{ width: '100vw' }}>
|
<div className="w-full h-full">
|
||||||
<HomeHero />
|
<HomeHero />
|
||||||
<HomeHeroBubble />
|
<HomeHeroBubble />
|
||||||
</div>
|
</div>
|
||||||
|
|
1730
public/hero.svg
1730
public/hero.svg
File diff suppressed because it is too large
Load Diff
Before Width: | Height: | Size: 597 KiB After Width: | Height: | Size: 597 KiB |
Loading…
Reference in New Issue