dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

center phone hero and gym note, drop hero CTA pills

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 13:43:03 +00:00
commit 46e52cf9c2
3 changed files with 22 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/app/components/WebLayout.tsx
View file

@ -228,15 +228,6 @@ export default function WebLayout() {
Welcome to my personal website! Here I show off my projects and the hardware I
own, as well as my self-hosted services.
</p>
<div className="web-hero-actions">
<a className="web-pill" href="#projects">
View projects
</a>
<a className="web-pill ghost" href="#services">
Self-hosted services
</a>
</div>
<div className="web-social-strip">
<span className="web-eyebrow">Find me</span>
<Socials />

49
src/app/web.css
View file

@ -350,40 +350,6 @@ html[data-theme="web"] body {
font-size: 1rem;
color: var(--web-muted);
}
.web-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.web-pill {
display: inline-flex;
align-items: center;
padding: 10px 18px;
border-radius: 999px;
background: linear-gradient(120deg, var(--accent), var(--accent2));
color: #ffffff;
font-size: 0.84rem;
font-weight: 650;
text-decoration: none;
box-shadow: 0 12px 26px -12px var(--accent);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.web-pill:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px -12px var(--accent);
}
.web-pill.ghost {
background: var(--btn-bg, var(--glass-lo));
color: var(--fg);
border: 1px solid var(--btn-border, var(--glass-border));
box-shadow: var(--btn-shadow, none);
}
.web-pill.ghost:hover {
background: var(--btn-bg-hi, var(--glass-hi));
border-color: var(--accent-line);
}
/* ============================================================
QUICK TILES
============================================================ */
@ -1114,6 +1080,21 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
.web-title {
font-size: 1.7rem;
}
/* Phone hero: center the heading/lead (the block, not just the text) and the
social-button labels. The desktop hero stays left-aligned. */
.web-hero {
text-align: center;
}
.web-lead {
margin-inline: auto;
}
.social-button {
justify-content: center;
}
/* Center the note under the gym PR tiles. */
.web-tile-note {
text-align: center;
}
/* Section nav: fit every link on screen instead of a sideways-scrolling row,
so the collapsed top panel never scrolls horizontally — a 3-up button
grid (2-up on very narrow phones, see the 374px block below) styled like