Website Docs Visual Separation

[marashad001]

Changes

#941 - Adds visual separation in between different sections of demos to make them more distinct

Before:

After:

Testing

N/A (yet, maybe)

Docs

N/A (we're just making the docs look cleaner)

[mayank99]

Can you use our css variables (--space-1, --space-2, etc) instead of magic numbers?

Also can you include "Before" vs "After" screenshots in PR description?

[LostABike]

Does this change affect all the other pages? Or just the getting started page?

Also, just personal opinion but I think in this case h2 and h3 would look better with a smaller gap, something like this

[marashad001]

Does this change affect all the other pages? Or just the getting started page?

Also, just personal opinion but I think in this case h2 and h3 would look better with a smaller gap, something like this

Yes, it affects the entire doc website. I agree, I was having trouble coming up with a way to narrow the gap between h2 and h3. Do you have any suggestions for how this could be implemented?

[LostABike]

https://github.com/iTwin/iTwinUI/blob/13518490f2bb926f4d0b3f2eba45d8fab85c02f1/apps/website/src/pages/docs/_layout.astro#L214C1-L216

I found the related padding in this file, maybe try meddling with this number? also make sure all other pages still look ok too

[mayank99]

what problem is this PR actually trying to solve? because the previous spacing looks better to me.

[marashad001]

what problem is this PR actually trying to solve? because the previous spacing looks better to me.

The spacing between the different sections of the documents are too close together, they need more visual separation

#941 (comment)

The new styling does seperate the sections, but it does need refining to keep the website looking clean and polished.

[mayank99]

i believe that comment was already addressed in #1193

[marashad001]

i believe that comment was already addressed in #1193

OK. I'll close the PR, it seems redundant to try to fix a resolved comment.

[mayank99]

is there some spacing you personally think still needs to be improved? because maybe that PR didn't fully solve the problem.

[marashad001]

is there some spacing you personally think still needs to be improved? because maybe that PR didn't fully solve the problem.

The main thing I notice is the lack of space between the <h2> headers and the other blocks of content. Since they are their own section with their own <h3> headers within them, they should have a little bit more space in between sections.

For example:

Breadcrumbs

Surface

Getting Started - this is the most prominent one I've seen

[LostABike]

LGTM 👍