Align project card titles with their icons on /downloads and /docs - #904
Merged
Conversation
The theme sets `h1..h6 { padding-top: 1.1rem }` globally. Both card titles
are `<h5>` and reset only `margin`, never `padding`, so that 17.6px sat
inside the flex item — `align-items: center` centered the padded box and
dropped the visible name ~9px below the icon on every project card, on
both /downloads and /docs.
Reset `padding` on `.dl-card-title`, `.docs-card-title`, and the Docker
card's `h5` (same page, same inherited padding). With the padding gone a
wrapped 2-line docs title is 36.25px, which overflowed `.docs-card-head`'s
30px min-height and would have pushed that card's description below its
neighbours', so raise it to 37px. `.dl-card-head`'s 44px already covers
the new, shorter content.
Also normalize two release dates that were still in ISO form —
NodeJS Agent 0.9.0 and Python Agent 1.2.0 — to the site's
`Mon. DDth, YYYY` format.
❌ Deploy Preview for skywalking-website-preview failed.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Project names sat about 9px below their icons on every card of
/downloadsand/docs.Why
The theme sets a global heading rule:
Both card titles are
<h5>and reset onlymargin, neverpadding. That 17.6px lived inside the flex item, soalign-items: centercentered the padded box rather than the text — pushing the visible name down on every card, on both pages.Changes
padding: 0on.dl-card-title(downloads cards) and.docs-card-title(documentation cards).padding: 0on the Docker card'sh5— same page, same inherited padding, so its title would otherwise sit lower than its neighbours'..docs-card-headmin-height 30px → 37px. 30px only covered the icon; with the padding gone, a wrapped 2-line title is 36.25px and would have pushed that card's description below its neighbours'. 37px covers both..dl-card-head's existing 44px already covers the new, shorter content, so it is unchanged.Also normalizes two release dates in
data/releases.ymlthat were still in ISO form — NodeJS Agent 0.9.0 (2026-06-26) and Python Agent 1.2.0 (2025-05-11) — to the site'sMon. DDth, YYYYformat. They were the only two left.Verification
Built the site with Hugo and screenshotted both pages headless at 1440px. Icon and name are now centered on each other, and the blocks below line up across each row — including the wrapped "SkyWalking GraalVM Distro" card, whose SOURCE/DISTRIBUTION rows stay level with its neighbours'.