paper style

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;

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:

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