Skip to content

Commit dca2ba1

Browse files
starbopsclaude
starbops
and
claude
committed
fix: improve responsive web design with consistent text widths
- Fix problematic prose styling that removed max-width constraints - Add custom CSS with optimal reading width containers (max-w-4xl) - Standardize container classes across all page sections - Implement responsive typography with consistent font scaling - Create unified section spacing and padding system - Override blog template to use proper text width constraints - Ensure optimal line length (65-75 characters) for readability Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 832707f commit dca2ba1

File tree

10 files changed

+211
-29
lines changed

10 files changed

+211
-29
lines changed

‎assets/css/custom.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
/* Custom CSS overrides for VoidRunner responsive design improvements */
6+
7+
@layer components {
8+
/* Override theme's problematic prose max-width setting */
9+
.prose {
10+
@apply max-w-4xl mx-auto;
11+
}
12+
13+
/* Ensure optimal reading line length for different screen sizes */
14+
.prose-content {
15+
@apply max-w-prose mx-auto px-4 sm:px-6 lg:px-8;
16+
}
17+
18+
/* Responsive text containers with optimal reading widths */
19+
.text-container {
20+
@apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
21+
}
22+
23+
.text-container-narrow {
24+
@apply max-w-3xl mx-auto px-4 sm:px-6 lg:px-8;
25+
}
26+
27+
.text-container-wide {
28+
@apply max-w-5xl mx-auto px-4 sm:px-6 lg:px-8;
29+
}
30+
31+
/* Responsive typography improvements */
32+
.responsive-text {
33+
@apply text-base sm:text-lg leading-relaxed;
34+
}
35+
36+
.responsive-text-sm {
37+
@apply text-sm sm:text-base leading-relaxed;
38+
}
39+
40+
.responsive-title {
41+
@apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-heading font-bold leading-tight;
42+
}
43+
44+
.responsive-subtitle {
45+
@apply text-lg sm:text-xl md:text-2xl text-gray-600 leading-relaxed;
46+
}
47+
48+
/* Ensure consistent section spacing */
49+
.section-content {
50+
@apply py-12 sm:py-16 md:py-20 lg:py-24;
51+
}
52+
53+
/* Hero section responsive improvements */
54+
.hero-text {
55+
@apply max-w-2xl mx-auto lg:mx-0 lg:max-w-none;
56+
}
57+
58+
/* Feature section responsive improvements */
59+
.feature-subtitle {
60+
@apply max-w-3xl mx-auto text-center;
61+
}
62+
}
63+
64+
/* Specific fixes for inconsistent containers */
65+
@layer utilities {
66+
/* Ensure consistent padding across containers */
67+
.container-consistent {
68+
@apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
69+
}
70+
71+
/* Optimal reading width for content */
72+
.reading-width {
73+
@apply max-w-3xl mx-auto;
74+
}
75+
76+
.reading-width-wide {
77+
@apply max-w-4xl mx-auto;
78+
}
79+
80+
.reading-width-narrow {
81+
@apply max-w-2xl mx-auto;
82+
}
83+
}

‎layouts/_default/baseof.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,16 @@
7373
{{ $css = $css | minify | fingerprint | resources.PostProcess }}
7474
{{ end }}
7575
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
76+
77+
<!-- Custom CSS for responsive design improvements -->
78+
{{ $customCSS := resources.Get "css/custom.css" }}
79+
{{ if $customCSS }}
80+
{{ $customCSS = $customCSS | css.PostCSS }}
81+
{{ if hugo.IsProduction }}
82+
{{ $customCSS = $customCSS | minify | fingerprint | resources.PostProcess }}
83+
{{ end }}
84+
<link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
85+
{{ end }}
7686

7787
<!-- Additional Meta Tags from Front Matter -->
7888
{{ with .Params.customMeta }}

‎layouts/_default/single.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
{{ define "main" }}
2+
<div class="container-consistent py-12">
3+
<!-- Two Column Layout for Content and Sidebar -->
4+
<div class="flex flex-col lg:flex-row gap-8 mb-12">
5+
<!-- Main Content -->
6+
<article class="flex-1 min-w-0">
7+
<header class="reading-width-wide mb-8">
8+
{{ with .Params.categories }}
9+
<div class="mb-4">
10+
{{ range . }}
11+
<a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}"
12+
class="inline-block px-3 py-1 text-sm font-medium text-primary-600 bg-primary-50 rounded-full hover:bg-primary-100 mr-2">
13+
{{ . }}
14+
</a>
15+
{{ end }}
16+
</div>
17+
{{ end }}
18+
19+
<h1 class="responsive-title mb-4">{{ .Title }}</h1>
20+
21+
{{ partial "post-meta.html" . }}
22+
</header>
23+
24+
{{ with .Params.featured_image }}
25+
<div class="reading-width-wide mb-8">
26+
<img src="{{ . }}"
27+
alt="{{ $.Title }}"
28+
class="w-full h-auto rounded-lg"
29+
loading="lazy">
30+
</div>
31+
{{ end }}
32+
33+
<!-- Content with optimal reading width -->
34+
<div class="prose prose-lg reading-width-wide">
35+
{{ .Content }}
36+
</div>
37+
</article>
38+
39+
<!-- Sidebar -->
40+
<aside class="lg:w-80 xl:w-96 flex-shrink-0">
41+
{{ partial "sidebar.html" . }}
42+
</aside>
43+
</div>
44+
45+
<!-- Full-width Navigation Section -->
46+
<nav class="border-t border-gray-200 mt-12 pt-8">
47+
<div class="reading-width-wide">
48+
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
49+
{{ with .PrevInSection }}
50+
<a href="{{ .RelPermalink }}"
51+
class="group flex items-center">
52+
<svg class="w-5 h-5 mr-2 text-gray-600 group-hover:text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
53+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
54+
</svg>
55+
<div>
56+
<div class="text-sm text-gray-600">Previous Post</div>
57+
<div class="font-medium group-hover:text-primary-600">{{ .Title }}</div>
58+
</div>
59+
</a>
60+
{{ else }}
61+
<div></div>
62+
{{ end }}
63+
64+
{{ with .NextInSection }}
65+
<a href="{{ .RelPermalink }}"
66+
class="group flex items-center text-right">
67+
<div>
68+
<div class="text-sm text-gray-600">Next Post</div>
69+
<div class="font-medium group-hover:text-primary-600">{{ .Title }}</div>
70+
</div>
71+
<svg class="w-5 h-5 ml-2 text-gray-600 group-hover:text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
72+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
73+
</svg>
74+
</a>
75+
{{ else }}
76+
<div></div>
77+
{{ end }}
78+
</div>
79+
</div>
80+
</nav>
81+
82+
<!-- Full-width CTA Section -->
83+
{{ if and .Site.Params.blog.cta.enable .Site.Params.cta.enable }}
84+
<div class="mt-16">
85+
{{ partial "components/cta.html" . }}
86+
</div>
87+
{{ end }}
88+
</div>
89+
{{ end }}

‎layouts/partials/sections/code-demo.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!-- Code Demo Section -->
2-
<section class="section bg-white">
3-
<div class="container">
2+
<section class="section-content bg-white">
3+
<div class="container-consistent">
44
<div class="text-center mb-16">
5-
<h2 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
5+
<h2 class="responsive-title text-center">
66
{{ .title | markdownify }}
77
</h2>
88
{{ with .subtitle }}
9-
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
9+
<p class="responsive-subtitle text-container-narrow">
1010
{{ . }}
1111
</p>
1212
{{ end }}

‎layouts/partials/sections/cta.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!-- CTA Section -->
2-
<section class="section bg-gradient-to-r from-primary-600 to-secondary-600">
3-
<div class="container">
4-
<div class="text-center max-w-4xl mx-auto">
5-
<h2 class="text-3xl md:text-4xl lg:text-5xl font-heading font-bold text-white mb-6">
2+
<section class="section-content bg-gradient-to-r from-primary-600 to-secondary-600">
3+
<div class="container-consistent">
4+
<div class="text-center reading-width-wide">
5+
<h2 class="responsive-title text-white mb-6">
66
{{ .title | markdownify }}
77
</h2>
88
{{ with .subtitle }}
9-
<p class="text-xl text-primary-100 mb-10 leading-relaxed">
9+
<p class="responsive-subtitle text-primary-100 mb-10">
1010
{{ . }}
1111
</p>
1212
{{ end }}

‎layouts/partials/sections/features.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!-- Features Section -->
2-
<section class="section bg-gray-50">
3-
<div class="container">
2+
<section class="section-content bg-gray-50">
3+
<div class="container-consistent">
44
<div class="text-center mb-16">
5-
<h2 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
5+
<h2 class="responsive-title text-center">
66
{{ .title | markdownify }}
77
</h2>
88
{{ with .subtitle }}
9-
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
9+
<p class="responsive-subtitle feature-subtitle">
1010
{{ . }}
1111
</p>
1212
{{ end }}

‎layouts/partials/sections/hero.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<!-- Hero Section -->
2-
<section class="section bg-gradient-to-b from-blue-50 to-white">
3-
<div class="container">
2+
<section class="section-content bg-gradient-to-b from-blue-50 to-white">
3+
<div class="container-consistent">
44
<div class="flex flex-col lg:flex-row items-center gap-12">
55
<!-- Text Content -->
6-
<div class="lg:w-1/2 space-y-8">
7-
<h1 class="text-4xl md:text-5xl lg:text-6xl font-heading font-bold text-gray-900 leading-tight">
6+
<div class="lg:w-1/2 space-y-8 hero-text">
7+
<h1 class="responsive-title">
88
{{ .title | markdownify }}
99
</h1>
1010
{{ with .subtitle }}
11-
<p class="text-xl text-gray-600 leading-relaxed">
11+
<p class="responsive-subtitle">
1212
{{ . }}
1313
</p>
1414
{{ end }}

‎layouts/partials/sections/pricing-preview.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!-- Pricing Preview Section -->
2-
<section class="section bg-gray-50">
3-
<div class="container">
2+
<section class="section-content bg-gray-50">
3+
<div class="container-consistent">
44
<div class="text-center mb-16">
5-
<h2 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
5+
<h2 class="responsive-title text-center">
66
{{ .title | markdownify }}
77
</h2>
88
{{ with .subtitle }}
9-
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
9+
<p class="responsive-subtitle text-container-narrow">
1010
{{ . }}
1111
</p>
1212
{{ end }}

‎layouts/partials/sections/stats.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!-- Stats Section -->
2-
<section class="section bg-primary-600">
3-
<div class="container">
2+
<section class="section-content bg-primary-600">
3+
<div class="container-consistent">
44
<div class="text-center mb-16">
5-
<h2 class="text-3xl md:text-4xl font-heading font-bold text-white mb-4">
5+
<h2 class="responsive-title text-white mb-4">
66
{{ .title | markdownify }}
77
</h2>
88
</div>

‎layouts/partials/sections/testimonials.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!-- Testimonials Section -->
2-
<section class="section bg-white">
3-
<div class="container">
2+
<section class="section-content bg-white">
3+
<div class="container-consistent">
44
<div class="text-center mb-16">
5-
<h2 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
5+
<h2 class="responsive-title text-center">
66
{{ .title | markdownify }}
77
</h2>
88
{{ with .subtitle }}
9-
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
9+
<p class="responsive-subtitle text-container-narrow">
1010
{{ . }}
1111
</p>
1212
{{ end }}

0 commit comments

Comments
 (0)