mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 07:33:07 +08:00
refactor: improve semantic by replacing decorative hr with borders (#597)
Replace decorative usage of Hr component with borders to improve semantic. - remove Hr component - replace decorative hr elements with borders - introduce app-layout utility class - update layout and spacing - update docs about border css custom property
This commit is contained in:
Sat Naing
@@ -6,11 +6,11 @@ import { SITE } from "@/config";
|
||||
|
||||
{
|
||||
SITE.showBackButton && (
|
||||
<div class="mx-auto flex w-full max-w-app items-center justify-start px-2">
|
||||
<div class="app-layout flex items-center justify-start">
|
||||
<LinkButton
|
||||
id="back-button"
|
||||
href="/"
|
||||
class="focus-outline mt-8 mb-2 flex hover:text-foreground/75"
|
||||
class="focus-outline -ms-2 mt-8 mb-2 hover:text-foreground/75"
|
||||
>
|
||||
<IconChevronLeft class="inline-block size-6 rtl:rotate-180" />
|
||||
<span>Go back</span>
|
||||
|
||||
@@ -23,7 +23,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {
|
||||
}
|
||||
---
|
||||
|
||||
<nav class="mx-auto mt-8 mb-1 w-full max-w-app px-4" aria-label="breadcrumb">
|
||||
<nav class="app-layout mt-8 mb-1" aria-label="breadcrumb">
|
||||
<ul
|
||||
class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"
|
||||
>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
import Hr from "./Hr.astro";
|
||||
import Socials from "./Socials.astro";
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
@@ -11,12 +10,15 @@ export interface Props {
|
||||
const { noMarginTop = false } = Astro.props;
|
||||
---
|
||||
|
||||
<footer class:list={["w-full", { "mt-auto": !noMarginTop }]}>
|
||||
<Hr noPadding />
|
||||
<footer class:list={["app-layout", { "mt-auto": !noMarginTop }]}>
|
||||
<div
|
||||
class="flex flex-col items-center justify-between py-6 sm:flex-row-reverse sm:py-4"
|
||||
class:list={[
|
||||
"py-6 sm:py-4",
|
||||
"border-t border-border",
|
||||
"flex flex-col items-center justify-between sm:flex-row-reverse",
|
||||
]}
|
||||
>
|
||||
<Socials centered />
|
||||
<Socials />
|
||||
<div class="my-2 flex flex-col items-center whitespace-nowrap sm:flex-row">
|
||||
<span>Copyright © {currentYear}</span>
|
||||
<span class="hidden sm:inline"> | </span>
|
||||
|
||||
+111
-110
@@ -1,5 +1,4 @@
|
||||
---
|
||||
import Hr from "./Hr.astro";
|
||||
import IconX from "@/assets/icons/IconX.svg";
|
||||
import IconMoon from "@/assets/icons/IconMoon.svg";
|
||||
import IconSearch from "@/assets/icons/IconSearch.svg";
|
||||
@@ -23,121 +22,123 @@ const isActive = (path: string) => {
|
||||
};
|
||||
---
|
||||
|
||||
<header>
|
||||
<a
|
||||
id="skip-to-content"
|
||||
href="#main-content"
|
||||
class="absolute start-16 -top-full z-50 bg-background px-3 py-2 text-accent backdrop-blur-lg transition-all focus:top-4"
|
||||
>
|
||||
Skip to content
|
||||
</a>
|
||||
<a
|
||||
id="skip-to-content"
|
||||
href="#main-content"
|
||||
class="absolute start-16 -top-full z-50 bg-background px-3 py-2 text-accent backdrop-blur-lg transition-all focus:top-4"
|
||||
>
|
||||
Skip to content
|
||||
</a>
|
||||
|
||||
<header
|
||||
class="app-layout flex flex-col items-center justify-between sm:flex-row"
|
||||
>
|
||||
<div
|
||||
id="nav-container"
|
||||
class="mx-auto flex max-w-app flex-col items-center justify-between sm:flex-row"
|
||||
id="top-nav-wrap"
|
||||
class:list={[
|
||||
"py-4 sm:py-6",
|
||||
"border-b border-border",
|
||||
"relative w-full bg-background",
|
||||
"flex items-baseline justify-between sm:items-center",
|
||||
]}
|
||||
>
|
||||
<div
|
||||
id="top-nav-wrap"
|
||||
class="relative flex w-full items-baseline justify-between bg-background p-4 sm:items-center sm:py-6"
|
||||
<a
|
||||
href="/"
|
||||
class="absolute py-1 text-xl leading-8 font-semibold whitespace-nowrap sm:static sm:my-auto sm:text-2xl sm:leading-none"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
class="absolute py-1 text-xl leading-8 font-semibold whitespace-nowrap sm:static sm:my-auto sm:text-2xl sm:leading-none"
|
||||
{SITE.title}
|
||||
</a>
|
||||
<nav
|
||||
id="nav-menu"
|
||||
class="flex w-full flex-col items-center sm:ms-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0"
|
||||
>
|
||||
<button
|
||||
id="menu-btn"
|
||||
class="focus-outline self-end p-2 sm:hidden"
|
||||
aria-label="Open Menu"
|
||||
aria-expanded="false"
|
||||
aria-controls="menu-items"
|
||||
>
|
||||
{SITE.title}
|
||||
</a>
|
||||
<nav
|
||||
id="nav-menu"
|
||||
class="flex w-full flex-col items-center sm:ms-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0"
|
||||
<IconX id="close-icon" class="hidden" />
|
||||
<IconMenuDeep id="menu-icon" />
|
||||
</button>
|
||||
<ul
|
||||
id="menu-items"
|
||||
class:list={[
|
||||
"mt-4 grid w-44 grid-cols-2 place-content-center gap-2",
|
||||
"[&>li>a]:block [&>li>a]:px-4 [&>li>a]:py-3 [&>li>a]:text-center [&>li>a]:font-medium [&>li>a]:hover:text-accent sm:[&>li>a]:px-2 sm:[&>li>a]:py-1",
|
||||
"hidden",
|
||||
"sm:mt-0 sm:flex sm:w-auto sm:gap-x-5 sm:gap-y-0",
|
||||
]}
|
||||
>
|
||||
<button
|
||||
id="menu-btn"
|
||||
class="focus-outline self-end p-2 sm:hidden"
|
||||
aria-label="Open Menu"
|
||||
aria-expanded="false"
|
||||
aria-controls="menu-items"
|
||||
>
|
||||
<IconX id="close-icon" class="hidden" />
|
||||
<IconMenuDeep id="menu-icon" />
|
||||
</button>
|
||||
<ul
|
||||
id="menu-items"
|
||||
class:list={[
|
||||
"mt-4 grid w-44 grid-cols-2 place-content-center gap-2",
|
||||
"[&>li>a]:block [&>li>a]:px-4 [&>li>a]:py-3 [&>li>a]:text-center [&>li>a]:font-medium [&>li>a]:hover:text-accent sm:[&>li>a]:px-2 sm:[&>li>a]:py-1",
|
||||
"hidden",
|
||||
"sm:mt-0 sm:flex sm:w-auto sm:gap-x-5 sm:gap-y-0",
|
||||
]}
|
||||
>
|
||||
<li class="col-span-2">
|
||||
<a href="/posts" class:list={{ "active-nav": isActive("/posts") }}>
|
||||
Posts
|
||||
</a>
|
||||
</li>
|
||||
<li class="col-span-2">
|
||||
<a href="/tags" class:list={{ "active-nav": isActive("/tags") }}>
|
||||
Tags
|
||||
</a>
|
||||
</li>
|
||||
<li class="col-span-2">
|
||||
<a href="/about" class:list={{ "active-nav": isActive("/about") }}>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
{
|
||||
SITE.showArchives && (
|
||||
<li class="col-span-2">
|
||||
<LinkButton
|
||||
href="/archives"
|
||||
class:list={[
|
||||
"focus-outline flex justify-center p-3 sm:p-1",
|
||||
{
|
||||
"active-nav [&>svg]:stroke-accent": isActive("/archives"),
|
||||
},
|
||||
]}
|
||||
ariaLabel="archives"
|
||||
title="Archives"
|
||||
>
|
||||
<IconArchive class="hidden sm:inline-block" />
|
||||
<span class="sm:sr-only">Archives</span>
|
||||
</LinkButton>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
<li class="col-span-1 flex items-center justify-center">
|
||||
<LinkButton
|
||||
href="/search"
|
||||
class:list={[
|
||||
"focus-outline flex p-3 sm:p-1",
|
||||
{ "[&>svg]:stroke-accent": isActive("/search") },
|
||||
]}
|
||||
ariaLabel="search"
|
||||
title="Search"
|
||||
>
|
||||
<IconSearch />
|
||||
<span class="sr-only">Search</span>
|
||||
</LinkButton>
|
||||
</li>
|
||||
{
|
||||
SITE.lightAndDarkMode && (
|
||||
<li class="col-span-1 flex items-center justify-center">
|
||||
<button
|
||||
id="theme-btn"
|
||||
class="focus-outline relative size-12 p-4 sm:size-8 hover:[&>svg]:stroke-accent"
|
||||
title="Toggles light & dark"
|
||||
aria-label="auto"
|
||||
aria-live="polite"
|
||||
>
|
||||
<IconMoon class="absolute top-[50%] left-[50%] -translate-[50%] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
|
||||
<IconSunHigh class="absolute top-[50%] left-[50%] -translate-[50%] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<li class="col-span-2">
|
||||
<a href="/posts" class:list={{ "active-nav": isActive("/posts") }}>
|
||||
Posts
|
||||
</a>
|
||||
</li>
|
||||
<li class="col-span-2">
|
||||
<a href="/tags" class:list={{ "active-nav": isActive("/tags") }}>
|
||||
Tags
|
||||
</a>
|
||||
</li>
|
||||
<li class="col-span-2">
|
||||
<a href="/about" class:list={{ "active-nav": isActive("/about") }}>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
{
|
||||
SITE.showArchives && (
|
||||
<li class="col-span-2">
|
||||
<LinkButton
|
||||
href="/archives"
|
||||
class:list={[
|
||||
"focus-outline flex justify-center p-3 sm:p-1",
|
||||
{
|
||||
"active-nav [&>svg]:stroke-accent": isActive("/archives"),
|
||||
},
|
||||
]}
|
||||
ariaLabel="archives"
|
||||
title="Archives"
|
||||
>
|
||||
<IconArchive class="hidden sm:inline-block" />
|
||||
<span class="sm:sr-only">Archives</span>
|
||||
</LinkButton>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
<li class="col-span-1 flex items-center justify-center">
|
||||
<LinkButton
|
||||
href="/search"
|
||||
class:list={[
|
||||
"focus-outline flex p-3 sm:p-1",
|
||||
{ "[&>svg]:stroke-accent": isActive("/search") },
|
||||
]}
|
||||
ariaLabel="search"
|
||||
title="Search"
|
||||
>
|
||||
<IconSearch />
|
||||
<span class="sr-only">Search</span>
|
||||
</LinkButton>
|
||||
</li>
|
||||
{
|
||||
SITE.lightAndDarkMode && (
|
||||
<li class="col-span-1 flex items-center justify-center">
|
||||
<button
|
||||
id="theme-btn"
|
||||
class="focus-outline relative size-12 p-4 sm:size-8 hover:[&>svg]:stroke-accent"
|
||||
title="Toggles light & dark"
|
||||
aria-label="auto"
|
||||
aria-live="polite"
|
||||
>
|
||||
<IconMoon class="absolute top-[50%] left-[50%] -translate-[50%] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
|
||||
<IconSunHigh class="absolute top-[50%] left-[50%] -translate-[50%] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<Hr />
|
||||
</header>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
export interface Props {
|
||||
noPadding?: boolean;
|
||||
ariaHidden?: boolean;
|
||||
}
|
||||
|
||||
const { noPadding = false, ariaHidden = true } = Astro.props;
|
||||
---
|
||||
|
||||
<div class:list={["mx-auto max-w-app", noPadding ? "px-0" : "px-4"]}>
|
||||
<hr class="border-border" aria-hidden={ariaHidden} />
|
||||
</div>
|
||||
@@ -22,7 +22,7 @@ const {
|
||||
disabled ? (
|
||||
<span
|
||||
id={id}
|
||||
class:list={["group inline-block", className]}
|
||||
class:list={["group inline-flex items-center gap-1", className]}
|
||||
title={title}
|
||||
aria-disabled={disabled}
|
||||
>
|
||||
@@ -32,7 +32,10 @@ const {
|
||||
<a
|
||||
id={id}
|
||||
{href}
|
||||
class:list={["group inline-block hover:text-accent", className]}
|
||||
class:list={[
|
||||
"group inline-flex items-center gap-1 hover:text-accent",
|
||||
className,
|
||||
]}
|
||||
aria-label={ariaLabel}
|
||||
title={title}
|
||||
>
|
||||
|
||||
@@ -1,15 +1,9 @@
|
||||
---
|
||||
import { SOCIALS } from "@/constants";
|
||||
import LinkButton from "./LinkButton.astro";
|
||||
|
||||
export interface Props {
|
||||
centered?: boolean;
|
||||
}
|
||||
|
||||
const { centered = false } = Astro.props;
|
||||
---
|
||||
|
||||
<div class:list={["flex-wrap justify-center gap-1", { flex: centered }]}>
|
||||
<div class="flex flex-wrap items-center gap-1">
|
||||
{
|
||||
SOCIALS.map(social => (
|
||||
<LinkButton
|
||||
|
||||
Reference in New Issue
Block a user