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/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 }]}>
-  <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 &#169; {currentYear}</span>
       <span class="hidden sm:inline">&nbsp;|&nbsp;</span>