adm/dontbechad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Optimize CSS: merge story.css into style.css

Browse source 
- 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
This commit is contained in:
Chad 2026-04-05 07:33:41 -05:00
parent f4ae2625c8
commit 46524d79d9
3 changed files with 34 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
static/css/story.css
View file

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

33
static/css/style.css
View file

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

3
themes/dontbechad/layouts/story/single.html
View file

@ -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">