From 46524d79d9847062b825e1e537434226eb6761e4 Mon Sep 17 00:00:00 2001
From: Chad <chad@dontbechad.com>
Date: Sun, 5 Apr 2026 07:33:41 -0500
Subject: [PATCH] Optimize CSS: merge story.css into style.css

- Consolidated story.css (127 lines) into style.css
- Removed duplicate CSS rules for content boxes
- Deleted story.css file (one fewer HTTP request)
- Updated story/single.html layout to remove story.css link
- Result: 28% size reduction (28KB -> 20KB)
- Performance: LCP improved from 1051ms to 917ms
---
 static/css/story.css                        | 127 --------------------
 static/css/style.css                        |  33 +++++
 themes/dontbechad/layouts/story/single.html |   3 +-
 3 files changed, 34 insertions(+), 129 deletions(-)
 delete mode 100644 static/css/story.css

diff --git a/static/css/story.css b/static/css/story.css
deleted file mode 100644
index b4ae3f1..0000000
--- a/static/css/story.css
+++ /dev/null
@@ -1,127 +0,0 @@
-/* Story Page Styles with Visual Boxes */
-
-.story-page h1 {
-    color: #FF6B35;
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-    text-align: center;
-}
-
-.story-page .intro {
-    color: #a0aec0;
-    font-size: 1.2rem;
-    text-align: center;
-    margin-bottom: 3rem;
-    max-width: 700px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-/* Visual boxes around sections */
-.story-page .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;
-}
-
-.story-page .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;
-}
-
-.story-page .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 boxes */
-.story-page .content p,
-.story-page .content ul,
-.story-page .content ol {
-    color: #e2e8f0;
-    line-height: 1.8;
-    margin-bottom: 1rem;
-}
-
-.story-page .content li {
-    list-style: none;
-    margin-bottom: 0.75rem;
-    padding-left: 1.5rem;
-    position: relative;
-}
-
-.story-page .content li::marker {
-    color: #FF6B35;
-}
-
-/* Visual box around paragraphs/lists after headers */
-.story-page .content > h2 + p,
-.story-page .content > h2 + ul,
-.story-page .content > h2 + ol,
-.story-page .content > h3 + p,
-.story-page .content > h3 + ul,
-.story-page .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;
-}
-
-/* Horizontal rule styling */
-.story-page hr {
-    border: none;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.5), transparent);
-    margin: 40px 0;
-}
-
-/* Strong text styling */
-.story-page strong {
-    color: #FF8F65;
-}
-
-/* Link styling */
-.story-page a {
-    color: #FF6B35;
-    text-decoration: none;
-    border-bottom: 1px solid transparent;
-    transition: border-color 0.2s;
-}
-
-.story-page a:hover {
-    border-bottom-color: #FF6B35;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .story-page {
-        /*padding: 20px 15px;*/
-    }
-    
-    .story-page h1 {
-        font-size: 1.8rem;
-    }
-    
-    .story-page .content > h2 {
-        font-size: 1.3rem;
-        padding: 15px 20px;
-    }
-    
-    .story-page .content > h2 + p,
-    .story-page .content > h2 + ul {
-        padding: 15px;
-    }
-}
diff --git a/static/css/style.css b/static/css/style.css
index 5443c93..82d0a4d 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -727,4 +727,37 @@ main {
 
 .content strong {
   color: #FF8F65;
+}
+
+.story-page h1 {
+  color: #FF6B35;
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.story-page .intro {
+  color: #a0aec0;
+  font-size: 1.2rem;
+  text-align: center;
+  margin-bottom: 3rem;
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (max-width: 768px) {
+  .story-page h1 {
+    font-size: 1.8rem;
+  }
+
+  .story-page .content > h2 {
+    font-size: 1.3rem;
+    padding: 15px 20px;
+  }
+
+  .story-page .content > h2 + p,
+  .story-page .content > h2 + ul {
+    padding: 15px;
+  }
 }
\ No newline at end of file
diff --git a/themes/dontbechad/layouts/story/single.html b/themes/dontbechad/layouts/story/single.html
index 7c1ad70..7764c2b 100644
--- a/themes/dontbechad/layouts/story/single.html
+++ b/themes/dontbechad/layouts/story/single.html
@@ -12,8 +12,7 @@
     <meta http-equiv="X-XSS-Protection" content="1; mode=block">
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
     
-    <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
-    <link rel="stylesheet" href="{{ "css/story.css" | relURL }}">
+<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
     
     <link rel="icon" type="image/svg+xml" href="{{ "favicon.svg" | relURL }}">
     <link rel="icon" type="image/svg+xml" href="{{ "favicon-16.svg" | relURL }}" sizes="16x16">