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

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

static/css/style.css

@@ -728,3 +728,36 @@ 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;
+  }
+}

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/style.css" | relURL }}">
-    <link rel="stylesheet" href="{{ "css/story.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">