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

src/components/BackButton.astro

@@ -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>

src/components/Breadcrumb.astro

@@ -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"
   >

src/components/Footer.astro

@@ -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 }]}>
+<footer class:list={["app-layout", { "mt-auto": !noMarginTop }]}>
-  <Hr noPadding />
   <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 &#169; {currentYear}</span>
       <span class="hidden sm:inline">&nbsp;|&nbsp;</span>

src/components/Header.astro

@@ -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,7 +22,6 @@ const isActive = (path: string) => {
 };
 ---
 
-<header>
 <a
   id="skip-to-content"
   href="#main-content"
@@ -31,13 +29,18 @@ const isActive = (path: string) => {
 >
   Skip to content
 </a>
-  <div
+
-    id="nav-container"
+<header
-    class="mx-auto flex max-w-app flex-col items-center justify-between sm:flex-row"
+  class="app-layout flex flex-col items-center justify-between sm:flex-row"
 >
   <div
     id="top-nav-wrap"
-      class="relative flex w-full items-baseline justify-between bg-background p-4 sm:items-center sm:py-6"
+    class:list={[
+      "py-4 sm:py-6",
+      "border-b border-border",
+      "relative w-full bg-background",
+      "flex items-baseline justify-between sm:items-center",
+    ]}
   >
     <a
       href="/"
@@ -136,8 +139,6 @@ const isActive = (path: string) => {
       </ul>
     </nav>
   </div>
-  </div>
-  <Hr />
 </header>
 
 <script>

src/components/Hr.astro

@@ -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>

src/components/LinkButton.astro

@@ -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}
     >

src/components/Socials.astro

@@ -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

src/data/blog/customizing-astropaper-theme-color-schemes.md

@@ -1,7 +1,7 @@
 ---
 author: Sat Naing
 pubDatetime: 2022-09-25T15:20:35Z
-modDatetime: 2025-06-13T16:46:34.155Z
+modDatetime: 2026-01-04T11:27:37.761Z
 title: Customizing AstroPaper theme color schemes
 featured: false
 draft: false
@@ -110,12 +110,12 @@ To customize your own color scheme, specify your light colors inside `:root, htm
 Here is the detail explanation of color properties.
 
 | Color Property | Definition & Usage                                            |
-| -------------- | ---------------------------------------------------------- |
+| -------------- | ------------------------------------------------------------- |
 | `--background` | Primary color of the website. Usually the main background.    |
 | `--foreground` | Secondary color of the website. Usually the text color.       |
 | `--accent`     | Accent color of the website. Link color, hover color etc.     |
 | `--muted`      | Card and scrollbar background color for hover state etc.      |
-| `--border`     | Border color. Especially used in horizontal row (hr)       |
+| `--border`     | Border color. Used for border utilities and visual separation |
 
 Here is an example of changing the light color scheme.
 

src/layouts/AboutLayout.astro

@@ -18,7 +18,7 @@ const { frontmatter } = Astro.props;
 <Layout title={`${frontmatter.title} | ${SITE.title}`}>
   <Header />
   <Breadcrumb />
-  <main id="main-content">
+  <main id="main-content" class="app-layout">
     <section id="about" class="app-prose mb-28 max-w-app prose-img:border-0">
       <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
       <slot />

src/layouts/Main.astro

@@ -21,11 +21,7 @@ const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";
 ---
 
 <Breadcrumb />
-<main
+<main data-backUrl={backUrl} id="main-content" class="app-layout pb-4">
-  data-backUrl={backUrl}
-  id="main-content"
-  class="mx-auto w-full max-w-app px-4 pb-4"
->
   {
     "titleTransition" in props ? (
       <h1 class="text-2xl font-semibold sm:text-3xl">

src/layouts/PostDetails.astro

@@ -87,10 +87,7 @@ const nextPost =
   <BackButton />
   <main
     id="main-content"
-    class:list={[
+    class:list={["app-layout pb-12", { "mt-8": !SITE.showBackButton }]}
-      "mx-auto w-full max-w-app px-4 pb-12",
-      { "mt-8": !SITE.showBackButton },
-    ]}
     data-pagefind-body
   >
     <h1
@@ -112,7 +109,7 @@ const nextPost =
     </div>
     <article
       id="article"
-      class="app-prose mx-auto mt-8 max-w-app prose-pre:bg-(--shiki-light-bg) dark:prose-pre:bg-(--shiki-dark-bg)"
+      class="app-prose mt-8 w-full max-w-app prose-pre:bg-(--shiki-light-bg) dark:prose-pre:bg-(--shiki-dark-bg)"
     >
       <Content />
     </article>

src/pages/404.astro

@@ -11,7 +11,7 @@ import { SITE } from "@/config";
 
   <main
     id="main-content"
-    class="mx-auto flex max-w-app flex-1 items-center justify-center"
+    class="app-layout flex flex-1 items-center justify-center"
   >
     <div class="mb-14 flex flex-col items-center justify-center">
       <h1 class="text-9xl font-bold text-accent">404</h1>

src/pages/index.astro

@@ -6,7 +6,6 @@ import Footer from "@/components/Footer.astro";
 import Socials from "@/components/Socials.astro";
 import LinkButton from "@/components/LinkButton.astro";
 import Card from "@/components/Card.astro";
-import Hr from "@/components/Hr.astro";
 import getSortedPosts from "@/utils/getSortedPosts";
 import IconRss from "@/assets/icons/IconRss.svg";
 import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
@@ -22,8 +21,8 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
 
 <Layout>
   <Header />
-  <main id="main-content" data-layout="index">
+  <main id="main-content" data-layout="index" class="app-layout">
-    <section id="hero" class="pt-8 pb-6">
+    <section id="hero" class:list={["pt-8 pb-6", "border-b border-border"]}>
       <h1 class="my-4 inline-block text-4xl font-bold sm:my-8 sm:text-5xl">
         Mingalaba
       </h1>
@@ -60,7 +59,7 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
       {
         // only display if at least one social link is enabled
         SOCIALS.length > 0 && (
-          <div class="mt-4 flex flex-col sm:flex-row sm:items-center">
+          <div class="mt-4 flex max-sm:flex-col sm:items-center">
             <div class="me-2 mb-1 whitespace-nowrap sm:mb-0">Social Links:</div>
             <Socials />
           </div>
@@ -68,12 +67,15 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
       }
     </section>
 
-    <Hr />
-
     {
       featuredPosts.length > 0 && (
-        <>
+        <section
-          <section id="featured" class="pt-12 pb-6">
+          id="featured"
+          class:list={[
+            "pt-12 pb-6",
+            { "border-b border-border": recentPosts.length > 0 },
+          ]}
+        >
           <h2 class="text-2xl font-semibold tracking-wide">Featured</h2>
           <ul>
             {featuredPosts.map(data => (
@@ -81,8 +83,6 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
             ))}
           </ul>
         </section>
-          {recentPosts.length > 0 && <Hr />}
-        </>
       )
     }
 

src/styles/global.css

@@ -48,16 +48,16 @@ html[data-theme="dark"] {
   [role="button"]:not(:disabled) {
     cursor: pointer;
   }
-  section,
-  footer {
-    @apply mx-auto max-w-app px-4;
-  }
 }
 
 @utility max-w-app {
   @apply max-w-3xl;
 }
 
+@utility app-layout {
+  @apply mx-auto w-full max-w-app px-4;
+}
+
 .active-nav {
   @apply underline decoration-wavy decoration-2 underline-offset-4;
 }