Skip to content

Commit

Permalink
re-build layout using CSS grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@haach
haach committed Feb 20, 2024
1 parent a1a5154 commit 89a7f7d
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 204 deletions.
221 changes: 37 additions & 184 deletions src/components/molecules/PageLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,193 +1,63 @@
import {ReactNode} from 'react';
import {ComponentWithChildren} from '~/components';
import type {ReactNode} from 'react';
import type {ComponentWithChildren} from '~/components';
import {DarkModeSwitch} from '~/components/molecules/DarkModeSwitch';
import {HeaderNav} from '~/components/molecules/HeaderNav';
import {ContainerOuter} from '~/components/molecules/Layout';
import {SuspenseImage} from '~/components/molecules/SuspenseImage';
import {blackBorder, HR} from '~/components/primitives';
import {HR, blackBorder} from '~/components/primitives';
import {Typo} from '~/components/primitives/typography';
import {useWindow} from '~/contexts/WindowContext';

const imgCSS = 'clamp(125px, 20vw, 250px)';
const imgConatinerCSS = 'clamp(160px, 25vw, 320px)';
const halfImgCSS = 'clamp(75px, 10vw, 125px)';
interface PageLayoutProps {
title: string;
subTitle?: string;
sideBar?: ReactNode;
}

const MobileLayout: ComponentWithChildren<PageLayoutProps> = ({
const Layout: ComponentWithChildren<PageLayoutProps> = ({
children,
title,
subTitle,
sideBar,
}) => {
return (
<div className="relative py-8 print:py-5">
<HR
className="-z-10"
style={{transform: `translate3d(0px, ${halfImgCSS}, 0px)`}}
/>
<div className="container mx-auto border-box pl-5 pr-5 ">
<div className="flex flex-col justify-between gap-10">
<div className="flex flex-col justify-between gap-4">
<div
className={`inline-block border-2 rounded-full bg-white dark:bg-black m-auto aspect-square z-10 ${blackBorder}`}
style={{width: imgCSS}}
>
<SuspenseImage
src="/portrait.jpg"
className="rounded-full "
width={imgCSS}
height={imgCSS}
/>
</div>
<Typo.H1 style={{whiteSpace: 'nowrap'}}>{title}</Typo.H1>
<div className="grid grid-cols-1 items-start justify-center">
{/* HR */}
<div className="layout-start-top w-full py-32 md:py-36 lg:py-44 ">
<HR />
</div>
{/* TWO COLUMN GRID */}
<div className="layout-start-top layout-container grid gap-10 p-10 md:gap-16 md:p-16 max-w-screen-xl mx-auto z-10 ">
{/* HEADER */}
<div className={`layout-profileImage flex justify-end`}>
<div
className={`max-w-44 md:max-w-64 border-2 rounded-full bg-white dark:bg-black p-1 aspect-square ${blackBorder} `}
>
<SuspenseImage src="/portrait.jpg" className="rounded-full" />
</div>
</div>

<header className="grid grid-cols-1 gap-8 sm:gap-0 sm:grid-cols-2 items-end justify-center">
<div>
<Typo.H1 className="mb-2" style={{whiteSpace: 'nowrap'}}>
{title}
</Typo.H1>
{subTitle && (
<Typo.H2 className="-mt-4">
<Typo.H2>
{'// '}
{subTitle}
</Typo.H2>
)}
<DarkModeSwitch />
<HeaderNav />
</div>

{sideBar && (
<ContainerOuter className="flex-1">{sideBar}</ContainerOuter>
)}
<ContainerOuter>{children}</ContainerOuter>
</div>
</div>
</div>
);
};

const TabletLayout: ComponentWithChildren<PageLayoutProps> = ({
children,
title,
subTitle,
sideBar,
}) => {
return (
<div className="relative py-8 print:py-5 ">
<HR
className="-z-10"
style={{transform: `translate3d(0px, ${halfImgCSS}, 0px)`}}
/>
<div className="container mx-auto border-box pl-5 pr-5 sm:pl-8 sm:pr-8">
<div className="flex flex-col justify-between gap-10 sm:gap-10">
{/* TOP */}
<div className="sm:flex sm:flex-row justify-between gap-10 sm:gap-10 ">
<div className="flex flex-col">
<div
className={`inline-block border-2 rounded-full bg-white dark:bg-black m-auto sm:ml-8 p-1 aspect-square z-10 ${blackBorder}`}
style={{width: imgCSS}}
>
<SuspenseImage
src="/portrait.jpg"
className="rounded-full "
width={imgCSS}
height={imgCSS}
/>
</div>
</div>
<div className="flex flex-1 flex-col">
<div
className="flex items-end justify-between pb-4"
style={{height: halfImgCSS}}
>
<div>
<Typo.H1 className="mb-2" style={{whiteSpace: 'nowrap'}}>
{title}
</Typo.H1>
{subTitle && (
<Typo.H2>
{'// '}
{subTitle}
</Typo.H2>
)}
</div>
</div>
<div className="flex flex-col sm:flex-row justify-between mt-6">
<DarkModeSwitch className="mb-4" />
<HeaderNav />
</div>
</div>
</div>
{sideBar && (
<ContainerOuter className="flex-1">{sideBar}</ContainerOuter>
)}
<ContainerOuter>{children}</ContainerOuter>
</div>
</div>
</div>
);
};

const Layout: ComponentWithChildren<PageLayoutProps> = ({
children,
title,
subTitle,
sideBar,
}) => {
return (
<div className="relative py-8 lg:py-10 print:py-5">
<HR
className="-z-10"
style={{transform: `translate3d(0px, ${halfImgCSS}, 0px)`}}
/>
<div className="container mx-auto max-w-screen-xl border-box pl-5 pr-5 md:pl-8 md:pr-8 lg:pl-0 lg:pr-10 xl:pl-0 xl:pr-20 print:px-10">
<div className="flex flex-row justify-between md:gap-14 lg:gap-14 xl:gap-20 print:gap-20 ">
{/* LEFT */}
<div className="flex flex-col" style={{width: imgConatinerCSS}}>
<div
/* md:ml-10 lg:ml-10 xl:ml-20 */
className={`inline-block border-2 ml-auto rounded-full bg-white dark:bg-black p-1 aspect-square z-10 ${blackBorder}`}
style={{width: imgCSS}}
>
<SuspenseImage
src="/portrait.jpg"
className="rounded-full "
width={imgCSS}
height={imgCSS}
/>
</div>
{sideBar && (
<ContainerOuter className="flex-1 max-w-100">
{sideBar}
</ContainerOuter>
)}
<div className="flex flex-col justify-between sm:items-end">
<DarkModeSwitch className="mb-4" />
<HeaderNav />
</div>
</header>

{/* RIGHT */}
<div className="flex flex-1 flex-col">
<div
className="flex items-end justify-between pb-4"
style={{height: halfImgCSS}}
>
<div>
<Typo.H1 className="mb-2" style={{whiteSpace: 'nowrap'}}>
{title}
</Typo.H1>
{subTitle && (
<Typo.H2>
{'// '}
{subTitle}
</Typo.H2>
)}
</div>
<div className="flex flex-col justify-between items-end">
<DarkModeSwitch className="mb-4" />
<HeaderNav />
</div>
</div>
{/* SIDEBAR */}
{sideBar && <aside className="layout-sidebar">{sideBar}</aside>}

{/* CONTENT HERE */}
<ContainerOuter>{children}</ContainerOuter>
</div>
</div>
{/* CONTENT */}
<main className="layout-content flex flex-col gap-14">{children}</main>
</div>
</div>
);
Expand All @@ -199,26 +69,9 @@ export const PageLayout: ComponentWithChildren<PageLayoutProps> = ({
sideBar,
children,
}) => {
const windowContext = useWindow();
return (
<>
{windowContext?.width && windowContext?.width < 640 && (
<MobileLayout title={title} subTitle={subTitle} sideBar={sideBar}>
{children}
</MobileLayout>
)}
{windowContext?.width &&
windowContext?.width >= 640 &&
windowContext?.width < 768 && (
<TabletLayout title={title} subTitle={subTitle} sideBar={sideBar}>
{children}
</TabletLayout>
)}
{windowContext?.width && windowContext?.width >= 768 && (
<Layout title={title} subTitle={subTitle} sideBar={sideBar}>
{children}
</Layout>
)}
</>
<Layout title={title} subTitle={subTitle} sideBar={sideBar}>
{children}
</Layout>
);
};
115 changes: 95 additions & 20 deletions src/styles/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,100 @@
@apply underline decoration-remix-blue decoration-3 underline-offset-6;
} */

.resonsive-columns { column-width: 280px; column-gap: 2rem; }

.resonsive-columns {
column-width: 280px;
column-gap: 2rem;
}

.placeHoldergradient {
animation-duration: 1.2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%);
background-size: 1000px 640px;
}

@keyframes placeHolderShimmer{
0%{
background-position: -468px 0
}
100%{
background-position: 468px 0
}
}
animation-duration: 1.2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%);
background-size: 1000px 640px;
}

@keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}

.layout-start-top {
grid-column-start: 1;
grid-column-end: span 2;
grid-row-start: 1;
grid-row-end: span 1;
}

.layout-container {
grid-template-columns: min(340px, 20vw) 1fr;
grid-auto-rows: min-content;
align-content: start;
}

.layout-profileImage {
grid-column-start: 1;
grid-column-end: span 1;
grid-row-start: 1;
grid-row-end: span 2;
}

.layout-header {
grid-column-start: 2;
grid-column-end: span 1;
grid-row-start: 1;
grid-row-end: 1;
}

.layout-sidebar {
grid-column-start: 1;
grid-column-end: span 1;
grid-row-start: 3;
grid-row-end: [end];
}

.layout-content {
grid-column-start: 2;
grid-column-end: span 1;
grid-row-start: 2;
grid-row-end: span 3;
}

@media screen and (max-width: 768px) {
.layout-container {
grid-template-columns: 1fr;
grid-auto-rows: min-content;
align-content: start;
}
.layout-profileImage {
grid-column-start: 1;
grid-column-end: span 1;
grid-row-start: 1;
grid-row-end: span 1;
}
.layout-header {
grid-column-start: 1;
grid-column-end: span 1;
grid-row-start: 2;
grid-row-end: 2;
}
.layout-sidebar {
grid-column-start: 1;
grid-column-end: span 1;
grid-row-start: 3;
grid-row-end: [end];
}
.layout-content {
grid-column-start: 1;
grid-column-end: span 1;
grid-row-start: 4;
grid-row-end: span 3;
}
}

0 comments on commit 89a7f7d

Please sign in to comment.