From 13d8d21071ad88a1ead6e984437144ae1bb15b4e Mon Sep 17 00:00:00 2001
From: Dan <dan@unbo.lt>
Date: Tue, 13 Jan 2026 07:00:20 +0000
Subject: [PATCH] paper style

---
 assets/sass/pages/buttons.scss | 31 ++++++++++++++++++++++++++++++-
 content/buttons/index.md       |  2 +-
 layouts/buttons/single.html    |  8 +++++---
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/assets/sass/pages/buttons.scss b/assets/sass/pages/buttons.scss
index b364826..e68ed2d 100644
--- a/assets/sass/pages/buttons.scss
+++ b/assets/sass/pages/buttons.scss
@@ -72,7 +72,7 @@
   }
 
   .buttons-header {
-    width: 300px;
+    width: 400px;
     margin: auto;
     margin-top: 2rem;
     transform: rotate(-3deg);
@@ -274,6 +274,35 @@
   max-width: 800px;
   margin: 4rem auto 0;
   padding: 2rem;
+  perspective: 400px;
+
+  // Show as a grid with 2 colums
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+
+  .buttons-paper {
+    position: relative;
+    // Paper-like background
+    background: #f9f9f9;
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e0e0e0;
+    // Lined background
+    background-image: linear-gradient(
+      to bottom,
+      #f9f9f9 0%,
+      #f9f9f9 95%,
+      #e0e0e0 95%,
+      #e0e0e0 100%
+    );
+    background-size: 100% 24px;
+    // Add a slight perspective so it looks like its on the table
+    transform: rotateX(25deg) translateZ(20px);
+    transform-style: preserve-3d;
+    transform-origin: bottom center;
+  }
 
   p {
     margin-bottom: 1.5rem;
diff --git a/content/buttons/index.md b/content/buttons/index.md
index 7ed7670..7945d2f 100644
--- a/content/buttons/index.md
+++ b/content/buttons/index.md
@@ -1,5 +1,5 @@
 ---
-title: "88x31 Buttons"
+title: "Button Collection"
 description: "A collection of 88x31 IndieWeb buttons collected from around the web"
 layout: buttons
 buttons:
diff --git a/layouts/buttons/single.html b/layouts/buttons/single.html
index 5e99fb9..cb6c5ec 100644
--- a/layouts/buttons/single.html
+++ b/layouts/buttons/single.html
@@ -20,8 +20,8 @@
   <article class="buttons-page">
     <header>
       <div class="buttons-header">
-        {{ partial "elements/lcd-screen.html" (dict "text" "Buttons"
-        "placeholder" "") }}
+        {{ partial "elements/lcd-screen.html" (dict "text" .Title "placeholder"
+        "") }}
       </div>
     </header>
 
@@ -41,7 +41,9 @@
       </div>
     </div>
 
-    <section class="buttons-content">{{ .Content }}</section>
+    <section class="buttons-content">
+      <div class="buttons-paper">{{ .Content }}</div>
+    </section>
   </article>
 </div>
 {{ end }}