dev.2ha.me/lixiyu-net
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix some responsive layout bugs

Browse Source
This commit is contained in:
PrinOrange
2024-01-06 14:06:49 +08:00
parent 8db176fae9
commit 698029f509
16 changed files with 22 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/layouts/layouts.tsx
View File

@@ -3,5 +3,5 @@ export const Page = ({ children }: { children: React.ReactNode }) => {
};
export const ContentContainer = ({ children }: { children: React.ReactNode }) => {
return <main className="responsive-width">{children}</main>;
return <main className="px-5 lg:px-20 xl:px-32 2xl:px-52 flex-grow">{children}</main>;
};

4
components/readerpage/DrawerTOC.tsx
View File

@@ -12,7 +12,7 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
title="Open the table of contents"
className="bottom-7 right-4 fixed bg-white dark:bg-black border-gray-700 border dark:border-gray-500 shadow-xl"
>
<div onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-3 font-bold">
<div onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-2 font-bold">
{"TOC"}
</div>
</SheetTrigger>
@@ -20,7 +20,7 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
<SheetHeader>
<SheetTitle className="mt-8 font-bold">{"TABLE OF CONTENTS"}</SheetTitle>
</SheetHeader>
<ul className="my-3 flat-scrollbar h-[70vh] flex flex-col overflow-y-auto">
<ul className="my-3 flat-scrollbar h-[70vh] flex flex-col overflow-y-auto flat-scrollbar-normal">
{props.data?.map((item) => (
<Link
className="hover:text-sky-500 border-t border-b py-2 border-dashed"

6
components/readerpage/TOC.tsx
View File

@@ -3,8 +3,10 @@ import Link from "next/link";
export const TOC = (props: { data: TTOCItem[] }) => {
return (
<div className="sticky top-[5em] mx-5 p-2 border-gray-500">
<div className="p-2 font-bold text-center border border-gray-500">{"TABLE OF CONTENTS"}</div>
<div className="sticky top-[5em] mx-5 p-2 border border-black dark:border-gray-400 rounded-sm">
<div className="p-2 font-bold text-center border bg-black text-white dark:text-black dark:bg-gray-100">
{"TABLE OF CONTENTS"}
</div>
<ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto">
{props.data?.map((item) => (
<Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>

2
components/utils/NavBar.tsx
View File

@@ -37,7 +37,7 @@ export const NavBar = () => {
return (
<Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
<nav className="responsive-width sticky top-0 z-50 flex justify-between py-3 backdrop-blur bg-white/50 dark:bg-black/50">
<nav className="sticky top-0 z-50 flex justify-between py-3 backdrop-blur bg-white/50 dark:bg-black/50">
<Link href="/" className="cursor-pointer">
<h1
className={`${fontFangZhengXiaoBiaoSongCN.className} my-auto border-b-4 border-b-black text-2xl font-bold dark:border-b-white`}

2
pages/404.tsx
View File

@@ -11,8 +11,8 @@ export default function NotFoundPage() {
};
return (
<Page>
<NavBar />
<ContentContainer>
<NavBar />
<div className="flex flex-col justify-center">
<TfiFaceSad className="mx-auto my-4" size={"6em"} />
<p className="mx-auto my-3 text-center text-2xl font-bold">{"404 NOT FOUND"}</p>

4
pages/about.tsx
View File

@@ -15,9 +15,9 @@ export default function AboutPage() {
description={"Type your brief self-introduction in a sentence here make SEO recognize it easily."}
coverURL={Config.PageCovers.websiteCoverURL}
/>
<NavBar />
<ContentContainer>
<h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
<NavBar />
<h2 className={`my-10 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
{"ABOUT ME"}
</h2>
<hr />

2
pages/blog/[id].tsx
View File

@@ -66,9 +66,9 @@ const ReaderPage = (props: ReaderPageProps) => {
description={props.frontMatter.summary}
coverURL={props.frontMatter.coverURL ?? Config.AvatarURL}
/>
<NavBar />
<Toaster />
<ContentContainer>
<NavBar />
<div className="my-5 justify-center md:flex">
<div className="md:w-2/3">
<div className="py-1">

4
pages/friends.tsx
View File

@@ -12,9 +12,9 @@ export default function FriendsPage() {
return (
<Page>
<SEO title={`${Config.SiteTitle} - Friends`} description={"My Friend Links"} />
<NavBar />
<ContentContainer>
<h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
<NavBar />
<h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
{"FRIENDS"}
</h2>
<hr />

2
pages/index.tsx
View File

@@ -29,8 +29,8 @@ export default function Home(props: HomePageProps) {
description={`Welcome to the ${Config.Nickname}'s blog website. It's the website for recording thoughts for technology, life experience and so on.`}
coverURL={Config.PageCovers.websiteCoverURL}
/>
<NavBar />
<ContentContainer>
<NavBar />
<HomeCover />
{props.pinnedPostList.length !== 0 && (
<div>

2
pages/posts/[[...slug]].tsx
View File

@@ -50,8 +50,8 @@ export default function PostsPage(props: PostsPageProps) {
description={"Here is the list page for all published posts. Click here for more details."}
coverURL={Config.PageCovers.websiteCoverURL}
/>
<NavBar />
<ContentContainer>
<NavBar />
<h2 className={`my-5 flex justify-center text-2xl ${fontFangZhengXiaoBiaoSongCN.className} font-bold`}>
<LuPenTool className="mx-2 my-auto" />
{"ALL POSTS"}

4
pages/search.tsx
View File

@@ -53,10 +53,10 @@ export default function SearchPage() {
return (
<Page>
<SEO title={`${Config.SiteTitle} - Search`} description={"Search the posts on your demand."} />
<NavBar />
<Toaster />
<ContentContainer>
<h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
<NavBar />
<h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
{"SEARCH POSTS"}
</h2>
<div className="flex my-10 h-1/2">

4
pages/sponsor.tsx
View File

@@ -21,12 +21,12 @@ export default function AboutPage() {
"If you like my works, I would deeply appreciate your support as a patron. Your contribution not only fuels my creative journey but also allows me to delve deeper into my passion."
}
/>
<NavBar />
<ContentContainer>
<NavBar />
<div className="md:flex">
<div className="flex flex-col justify-center md:w-1/2">
<h2
className={`my-5 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`}
className={`my-10 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`}
>
<GoHeartFill className="mx-2 my-auto" />
{"SPONSOR"}

2
pages/tags/[...slug].tsx
View File

@@ -50,8 +50,8 @@ export default function TagsContentPage(props: TagsContentPageProps) {
description={`Here are posts under the tag ${props.tagName}.`}
coverURL={Config.PageCovers.websiteCoverURL}
/>
<NavBar />
<ContentContainer>
<NavBar />
<h2
className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}
>

2
pages/tags/index.tsx
View File

@@ -22,8 +22,8 @@ export default function TagsIndexPage(props: TagsIndexPageProps) {
description={"Here is the list page for all tags which sorts all posts to every catagories."}
coverURL={Config.PageCovers.websiteCoverURL}
/>
<NavBar />
<ContentContainer>
<NavBar />
<h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
<AiOutlineTags className="mx-2 my-auto" />
{"ALL TAGS"}

1
styles/globals.css
View File

@@ -4,7 +4,6 @@
@import "./typesetting.css";
@import "./formulation.css";
@import "./layout.css";
@import "./scrollbar.css";
@import "./prism.css";

3
styles/layout.css
View File

@@ -1,3 +0,0 @@
.responsive-width {
@apply px-5 lg:px-20 xl:px-32 2xl:px-52;
}