Generalize content box styles to style.css

static/css/story.css

@@ -1,15 +1,5 @@
 /* Story Page Styles with Visual Boxes */
 
-.story-page {
-    min-height: 100vh;
-    padding: 40px 20px;
-}
-
-.story-page .container {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
 .story-page h1 {
     color: #FF6B35;
     font-size: 2.5rem;
@@ -119,7 +109,7 @@
 /* Responsive */
 @media (max-width: 768px) {
     .story-page {
-        padding: 20px 15px;
+        /*padding: 20px 15px;*/
     }
     
     .story-page h1 {

static/css/style.css

@@ -657,3 +657,75 @@ main {
 .content tr:hover {
   background: rgba(255, 107, 53, 0.05);
 }
+
+/* Content Box Styles - Applied to all pages with .content */
+.content > h2 {
+  background: linear-gradient(135deg, #FF6B35 0%, #ff8c5a 100%);
+  color: white;
+  padding: 20px 25px;
+  border-radius: 12px;
+  margin: 40px 0 25px 0;
+  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
+  font-size: 1.5rem;
+}
+
+.content > h3 {
+  background: rgba(255, 107, 53, 0.15);
+  border: 1px solid rgba(255, 107, 53, 0.3);
+  color: #FF8F65;
+  padding: 15px 20px;
+  border-radius: 10px;
+  margin: 30px 0 20px 0;
+  font-size: 1.2rem;
+}
+
+.content > h4 {
+  color: #FF6B35;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(255, 107, 53, 0.2);
+  margin: 25px 0 15px 0;
+  font-size: 1.1rem;
+}
+
+.content p,
+.content ul,
+.content ol {
+  color: #e2e8f0;
+  line-height: 1.8;
+  margin-bottom: 1rem;
+}
+
+.content li {
+  margin-bottom: 0.75rem;
+  padding-left: 1.5rem;
+  position: relative;
+}
+
+.content li::marker {
+  color: #FF6B35;
+}
+
+.content > h2 + p,
+.content > h2 + ul,
+.content > h2 + ol,
+.content > h2 + h3,
+.content > h3 + p,
+.content > h3 + ul,
+.content > h3 + ol {
+  background: rgba(30, 41, 59, 0.8);
+  border: 1px solid rgba(255, 107, 53, 0.15);
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.content hr {
+  border: none;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.5), transparent);
+  margin: 40px 0;
+}
+
+.content strong {
+  color: #FF8F65;
+}

themes/dontbechad/layouts/_default/baseof.html

@@ -51,7 +51,7 @@
 
     <footer class="footer">
         <div class="footer-container">
-            <p>&copy; {{ now.Year }} {{ .Site.Params.author }}. I made the mistakes so you don't have to.</p>
+            <p><a href="mailto:chad@dontbechad.com">chad@dontbechad.com</a></p>
             <p class="footer-disclaimer">This is educational content. Not financial advice.</p>
         </div>
     </footer>

themes/dontbechad/layouts/_default/single.html

@@ -10,24 +10,5 @@
     <div class="content">
         {{ .Content }}
     </div>
-
-    {{ if .Params.related_mistakes }}
-    <section class="related-section">
-        <h2>Related Mistakes</h2>
-        <div class="card-grid">
-            {{ range .Params.related_mistakes }}
-            {{ $mistake := . }}
-            {{ with site.GetPage $mistake }}
-            <article class="card">
-                <div class="card-content">
-                    <h3 class="card-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
-                    <p class="card-excerpt">{{ .Summary }}</p>
-                </div>
-            </article>
-            {{ end }}
-            {{ end }}
-        </div>
-    </section>
-    {{ end }}
 </div>
 {{ end }}

themes/dontbechad/layouts/story/single.html

@@ -56,6 +56,7 @@
     <footer class="footer">
         <div class="footer-container">
             <p>&copy; {{ now.Format "2006" }} {{ .Site.Params.author }}. I made the mistakes so you don't have to.</p>
+            <p><a href="mailto:chad@dontbechad.com">chad@dontbechad.com</a></p>
             <p class="footer-disclaimer">This is educational content. Not financial advice.</p>
         </div>
     </footer>