bloggg

styles.css

@@ -31,13 +31,39 @@ a:hover { color:#991b1b; text-decoration:underline; }
 .blog-title { margin:0 0 8px 0; font-size:1.5rem; }
 .blog-meta { margin:0 0 16px 0; color:#7f1d1d; font-size:0.95rem; }
 
+/* ----- Blog body with fade-out ----- */
+.blog-body-wrapper {
+  position: relative;
+  margin-bottom: 0.5rem;
+  /* No max-height by default (full) */
+}
+
 .blog-body {
   white-space: pre-line;
-  margin: 0 0 1em 0;
+  margin: 0;
 }
 .blog-body p { margin:0 0 1em 0; }
 .blog-body p:last-child { margin-bottom:0; }
 
+/* When collapsed, limit height and show gradient fade */
+.blog-body-wrapper.collapsed {
+  max-height: 300px;          /* ~6 lines, adjust as needed */
+  overflow: hidden;
+  /* The gradient overlay is done via ::after */
+}
+
+.blog-body-wrapper.collapsed::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;              /* fade height */
+  background: linear-gradient(to bottom, transparent, #fff);
+  pointer-events: none;      /* allow clicking through to the button */
+  /* If your blog background is not white, change #fff to match */
+}
+
 /* Toggle button */
 .blog-toggle {
   background: none;
@@ -53,6 +79,7 @@ a:hover { color:#991b1b; text-decoration:underline; }
   text-decoration: underline;
 }
 
+/* Other existing styles (photography, modal, etc.) */
 .blog-attachment-list { margin:16px 0 0 0; padding:0; list-style:none; }
 .blog-attachment-list li { margin:0.5em 0; }
 .blog-attachment-list a { color:#dc2626; text-decoration:none; }