Skip to content

Improve docs landing page layout and hero section #3794

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mattleibow merged 2 commits into from
Apr 28, 2026
Merged

Improve docs landing page layout and hero section #3794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2e383b7
Reorganize docs landing page cards into 3×3 grid
mattleibow Apr 28, 2026
faa3d8d
Add chevron icon to Get Started button
mattleibow Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 11 additions & 18 deletions documentation/site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,21 @@ <h1 class="hero-title">
SkiaSharp brings Google's powerful <a href="https://skia.org" target="_blank" rel="noopener">Skia</a> graphics engine to .NET.
Draw vector graphics, render text, process images, and build beautiful UIs — everywhere .NET runs.
</p>
<div class="hero-actions hero-actions-primary">
<a href="fiddle/" class="btn btn-primary btn-lg">Try SkiaFiddle in your browser <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px;margin-left:4px"><polygon points="5 3 19 12 5 21 5 3"/></svg></a>
</div>
<div class="hero-actions">
<a href="docs/" class="btn btn-primary">Get Started</a>
<a href="docs/" class="btn btn-secondary">
Browse the Docs
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-left:4px"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</a>
<a href="https://www.nuget.org/packages/SkiaSharp" class="btn btn-secondary" target="_blank" rel="noopener">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
Install via NuGet
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-left:4px"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
</a>
<a href="fiddle/" class="btn btn-secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
Try SkiaFiddle in your browser
</a>
</div>
<div class="hero-install">
<code>dotnet add package SkiaSharp</code>
<div class="hero-install">
<code>dotnet add package SkiaSharp</code>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -357,15 +359,6 @@ <h3 class="card-title">Release Notes</h3>
<p class="card-desc">See what's new in every version — features, fixes, security updates, and breaking changes across 10 years of releases.</p>
<span class="card-link">Browse release notes →</span>
</a>

<a href="https://github.com/mono/SkiaSharp" class="card" target="_blank" rel="noopener">
<div class="card-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
</div>
<h3 class="card-title">Source Code</h3>
<p class="card-desc">Contribute, report issues, or explore the source. SkiaSharp is open-source under the MIT license.</p>
<span class="card-link">View on GitHub ↗</span>
</a>
</div>

<div class="cards-grid cards-grid-resources">
Expand Down
24 changes: 18 additions & 6 deletions documentation/site/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ a:hover {
}

.hero-content {
max-width: 680px;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
Expand All @@ -167,7 +167,8 @@ a:hover {
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.03em;
margin-bottom: 16px;
margin-top: 48px;
margin-bottom: 24px;
}

.accent {
Expand All @@ -178,18 +179,28 @@ a:hover {
font-size: 18px;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 32px;
margin-bottom: 56px;
}

.hero-subtitle a {
font-weight: 500;
}

.hero-actions-primary {
margin-bottom: 12px;
}

.btn-lg {
padding: 16px 36px;
font-size: 18px;
}

.hero-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
flex-wrap: nowrap;
margin-bottom: 24px;
}

Expand Down Expand Up @@ -228,11 +239,12 @@ a:hover {
}

.hero-install {
display: inline-block;
display: inline-flex;
align-items: center;
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px 20px;
padding: 12px 24px;
}

.hero-install code {
Expand Down
Loading