chore: modify divider

openscript · openscript · commit 38d833471828 · 2025-08-24T11:34:36.000Z
diff --git a/.changeset/sad-cities-build.md b/.changeset/sad-cities-build.md
@@ -0,0 +1,5 @@
+---
+"r.obin.ch": patch
+---
+
+Modify divider
diff --git a/.editorconfig b/.editorconfig
@@ -11,5 +11,6 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = false
 
+
 [{.*,*.md,*.json,*.toml,*.yml,*.json5}]
 indent_style = space
diff --git a/src/components/Divider.astro b/src/components/Divider.astro
@@ -0,0 +1,33 @@
+---
+type Props = {
+  flipHorizontally?: boolean;
+  flipVertically?: boolean;
+};
+
+const flipHorizontally = Astro.props.flipHorizontally ? -1 : 1;
+const flipVertically = Astro.props.flipVertically ? -1 : 1;
+---
+
+<style
+  define:vars={{
+    "flip-horizontally": flipHorizontally,
+    "flip-vertically": flipVertically,
+  }}
+>
+  .rebound-divider {
+    width: 100%;
+    height: 1rem;
+    background: var(--color-primary, #000);
+    transform: scaleX(var(--flip-horizontally)) scaleY(var(--flip-vertically));
+    clip-path: polygon(0 0, var(--padding-page, 24px) 100%, calc(100% - var(--padding-page, 24px)) 100%, 100% 0, 0 0);
+    border-bottom: 5px solid var(--color-border, var(--color-primary-120));
+  }
+
+  @media (max-width: 1280px) {
+    .rebound-divider {
+      clip-path: none;
+    }
+  }
+</style>
+
+<div class="rebound-divider"></div>
diff --git a/src/components/ReboundDivider.astro b/src/components/ReboundDivider.astro
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
@@ -6,7 +6,7 @@ import Head from "./groups/Head.astro";
 import Header from "./groups/Header.astro";
 import Footer from "./groups/Footer.astro";
 import Topbar from "./groups/Topbar.astro";
-import ReboundDivider from "../components/ReboundDivider.astro";
+import Divider from "../components/Divider.astro";
 import Meta from "./groups/Meta.astro";
 
 type Props = {
@@ -26,11 +26,11 @@ const { translations } = Astro.props;
   <body>
     <Topbar translations={translations} />
     <Header />
-    <ReboundDivider />
+    <Divider />
     <main data-pagefind-body transition:animate="fade">
       <slot />
     </main>
-    <ReboundDivider flipHorizontally flipVertically />
+    <Divider flipHorizontally flipVertically />
     <Footer />
   </body>
 </html>
diff --git a/src/layouts/DefaultLayout.css b/src/layouts/DefaultLayout.css
@@ -72,7 +72,7 @@ body > header {
   font-size: 2.2rem;
   column-gap: 4rem;
   padding-top: 2rem;
-  padding-bottom: 2rem;
+  padding-bottom: 1rem;
   font-family: var(--font-headings);
 
   & > a {
@@ -253,7 +253,7 @@ footer {
   display: flex;
   justify-content: space-between;
   height: 3rem;
-  padding-top: 1.75rem;
+  padding-top: 0.75rem;
 }
 
 footer nav ul {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"r.obin.ch": patch
 +---
++
 +Modify divider