Skip to content

Commit 7c3a92b

Browse files
phil-scott-78phil-scott-78
committed
Refine homepage layout and typography for better responsiveness and consistency. Replace <img> with reusable Screenshot component. Adjust hero section styling and borders.
1 parent 6fa860d commit 7c3a92b

2 files changed

Lines changed: 13 additions & 20 deletions

File tree

‎Spectre.Docs/Components/Pages/Home.razor‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,10 @@
2525
</div>
2626
<!-- Console Output Showcase -->
2727
<section class="w-full">
28-
<div class="transition-all bg-base-800 border border-base-700 p-1 md:p-4 rounded-sm md:rounded-2xl shadow-2xl">
2928
<div class="max-w-5xl mx-auto">
30-
<div class="overflow-hidden rounded">
29+
<Screenshot src="/assets/hero.svg" />
3130

32-
<img src="/assets/hero.svg"
33-
alt="Spectre.Console rich terminal output demonstration"
34-
class="w-full h-auto block"
35-
loading="lazy">
36-
</div>
3731
</div>
38-
</div>
3932
</section>
4033

4134
<!-- Feature Cards -->
@@ -46,15 +39,15 @@
4639
<div class="p-6 md:p-8">
4740
<div class="flex items-center mb-4">
4841
<div class="p-3 bg-tertiary-two-600 dark:bg-tertiary-two-500 rounded-lg text-white">
49-
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
42+
<svg class="w-4 h-4 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5043
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
5144
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
5245
</svg>
5346
</div>
54-
<h2 class="text-2xl font-bold ml-4"><a href="/console">Console Documentation</a></h2>
47+
<h2 class="text-xl md:text-2xl font-bold ml-4"><a href="/console">Console Documentation</a></h2>
5548
</div>
5649

57-
<p class="text-base-600 dark:text-tertiary-two-100 mb-6">
50+
<p class="text-sm md:text-base text-base-600 dark:text-tertiary-two-100 mb-6">
5851
Learn how to create beautiful console output with tables, charts, progress bars, and rich text
5952
formatting.
6053
</p>
@@ -75,15 +68,15 @@
7568
d="M9 5l7 7-7 7"></path>
7669
</svg>
7770
<span
78-
class="group-hover:translate-x-1 transition-transform">@p.FrontMatter.Title</span>
71+
class="text-sm md:text-base group-hover:translate-x-1 transition-transform">@p.FrontMatter.Title</span>
7972
</a>
8073
</li>
8174
}
8275
</ul>
8376
</div>
8477

8578
<a href="/console"
86-
class="inline-flex items-center text-tertiary-two-700 dark:text-tertiary-two-200 font-medium hover:text-tertiary-two-800 dark:hover:text-tertiary-two-300 group/link">
79+
class="inline-flex items-center text-sm md:text-base text-tertiary-two-700 dark:text-tertiary-two-200 font-medium hover:text-tertiary-two-800 dark:hover:text-tertiary-two-300 group/link">
8780
View all Console docs
8881
<svg class="ml-1 w-4 h-4 group-hover/link:translate-x-1 transition-transform" fill="none"
8982
stroke="currentColor" viewBox="0 0 24 24">
@@ -99,15 +92,15 @@
9992
<div class="p-6 md:p-8">
10093
<div class="flex items-center mb-4">
10194
<div class="p-3 bg-tertiary-one-600 dark:bg-tertiary-one-500 rounded-lg text-white">
102-
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
95+
<svg class="w-4 h-4 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
10396
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
10497
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
10598
</svg>
10699
</div>
107-
<h2 class="text-2xl font-bold ml-4"><a href="/cli">CLI Documentation</a></h2>
100+
<h2 class="text-xl md:text-2xl font-bold ml-4"><a href="/cli">CLI Documentation</a></h2>
108101
</div>
109102

110-
<p class="text-base-600 dark:text-tertiary-one-100 mb-6">
103+
<p class="text-sm md:text-base text-base-600 dark:text-tertiary-one-100 mb-6">
111104
Build powerful command-line applications with type-safe commands, argument parsing, and dependency
112105
injection.
113106
</p>
@@ -122,22 +115,22 @@
122115
{
123116
<li>
124117
<a href="@p.Url"
125-
class="flex items-center text-tertiary-one-700 dark:text-tertiary-one-400 hover:text-tertiary-one-800 dark:hover:text-tertiary-one-300 group/link">
118+
class="flex items-center text-tertiary-one-700 dark:text-tertiary-one-400 hover:text-tertiary-one-800 dark:hover:text-tertiary-one-300 group/link">
126119
<svg class="w-4 h-4 mr-2 opacity-0 group-hover:opacity-100 transition-opacity"
127120
fill="none" stroke="currentColor" viewBox="0 0 24 24">
128121
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
129122
d="M9 5l7 7-7 7"></path>
130123
</svg>
131124
<span
132-
class="group-hover:translate-x-1 transition-transform transition-300">@p.FrontMatter.Title</span>
125+
class="group-hover:translate-x-1 text-sm md:text-base transition-transform transition-300">@p.FrontMatter.Title</span>
133126
</a>
134127
</li>
135128
}
136129
</ul>
137130
</div>
138131

139132
<a href="/cli"
140-
class="inline-flex items-center text-tertiary-one-700 dark:text-tertiary-one-400 font-medium hover:text-tertiary-one-800 dark:hover:text-tertiary-one-300 group/link">
133+
class="text-sm md:text-base inline-flex items-center text-tertiary-one-700 dark:text-tertiary-one-400 font-medium hover:text-tertiary-one-800 dark:hover:text-tertiary-one-300 group/link">
141134
View all CLI docs
142135
<svg class="ml-1 w-4 h-4 group-hover/link:translate-x-1 transition-transform" fill="none"
143136
stroke="currentColor" viewBox="0 0 24 24">

‎Spectre.Docs/Components/Shared/Screenshot.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="not-prose bg-base-800 rounded-xl p-1 lg:p-2 mt-4 -mx-3 lg:mx-0 shadow lg:shadow-xl">
1+
<div class="not-prose bg-base-800 border-1 dark:border-base-500/10 border-base-500/50 rounded-lg lg:rounded-xl p-1 lg:p-2 mt-4 -mx-3 lg:mx-0 shadow-sm lg:shadow-xl">
22
<div class="not-prose flex flex-col rounded-xl">
33
<!-- Terminal buttons -->
44
<div class="flex justify-end-safe gap-2 py-2 px-4 bg-base-800">

0 commit comments

Comments
 (0)