fix layout styles issues

This commit is contained in:
DefectingCat
2023-11-07 11:34:02 +08:00
parent 7b05f849cc
commit fef02b96ad
5 changed files with 12 additions and 10 deletions

View File

@ -43,10 +43,12 @@ export default function RootLayout({
</head> </head>
<body> <body>
<RUAThemeProvider> <RUAThemeProvider>
<HeadBar /> <div className="flex flex-col min-h-[100vh]">
{children} <HeadBar />
<Footer /> {children}
<BackToTop /> <Footer />
<BackToTop />
</div>
</RUAThemeProvider> </RUAThemeProvider>
</body> </body>
</html> </html>

View File

@ -11,8 +11,8 @@ export const metadata = {
export default function Page() { export default function Page() {
return ( return (
<main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl"> <main className="flex items-stretch justify-center flex-1 text-xl">
<div className="flex flex-col w-full h-full max-w-4xl px-4 py-24 text-2xl"> <div className="flex flex-col w-full max-w-4xl px-4 py-24 text-2xl">
<h1 className="flex pb-4 text-5xl"> <h1 className="flex pb-4 text-5xl">
<span className={clsx('font-semibold font-Lobster', styles.gradient)}> <span className={clsx('font-semibold font-Lobster', styles.gradient)}>
Hi there Hi there
@ -27,7 +27,7 @@ export default function Page() {
</span> </span>
</h1> </h1>
<div className="relative w-full h-full"> <div className="relative flex flex-1 w-full h-full">
<HomeModel /> <HomeModel />
</div> </div>
</div> </div>

View File

@ -14,7 +14,7 @@ export const metadata: Metadata = {
export default function Page() { export default function Page() {
return ( return (
<> <>
<main className="max-w-4xl px-8 py-8 mx-auto lg:px-0"> <main className="flex-1 max-w-4xl px-8 py-8 mx-auto lg:px-0">
<div> <div>
{/* Git projects */} {/* Git projects */}
<div> <div>

View File

@ -7,7 +7,7 @@ const nowDay = new Date().getFullYear();
const Footer = () => { const Footer = () => {
return ( return (
<> <>
<footer className="max-w-6xl px-4 mx-auto xl:px-0"> <footer className="w-full max-w-6xl px-4 mx-auto xl:px-0">
<div className="h-[2px] bg-slate-500"></div> <div className="h-[2px] bg-slate-500"></div>
<div <div

View File

@ -76,7 +76,7 @@ const HeadBar = () => {
<header <header
className={clsx( className={clsx(
'flex justify-between mx-auto', 'flex justify-between mx-auto',
'max-w-6xl p-4 xl:px-0 h-[84px]', 'max-w-6xl p-4 xl:px-0 w-full',
'items-center relative', 'items-center relative',
)} )}
> >