NG: Theme modernization, last inches #510

msbt · 2024-07-19T14:41:54Z

About

The first bunch of ng-fixes. Mostly taking care about styling anomalies reported by others.

Fonts.
Admonitions.
Paragraphs in <ul> elements.

Preview

https://crate-docs-theme--510.org.readthedocs.build/en/510/

amotl · 2024-07-20T11:48:27Z

Thank you very much. We've just released version 0.34.0.dev2, including your improvements.

amotl · 2024-07-20T13:29:59Z

src/crate/theme/rtd/crate/static/css/custom.css

+/* remove margin from paragraphs in ul & ol li's */
+main ul li p,
+main ol li p {
+  margin: 0;
+}


Hi. Thanks a stack for those improvements. In my other patch crate/cratedb-guide#53, I was running such inline CSS directives, apparently also adjust some undesired rendering behavior.

<style> .field-list dd { margin-bottom: 1em !important; } .field-list p { margin-bottom: 0.5em; } </style>

Do you think they are related to your improvements, made obsolete by them, and could potentially be removed from the inline spots of that patch, when using the newest and shiniest of our modernizations?

@amotl not as of now, since we specifically target ul and ol's, not dl's, so none of those would be targeted by the other css.

amotl · 2024-07-20T13:31:26Z

src/crate/theme/rtd/crate/static/css/crateio.css

 h2 {
  font-size: 30px;
  line-height: 36px; /*           this heading font-size * 1.2  */
-  margin-top: 0px; /*           this heading font-size        */
+  margin-top: -18px;
  margin-bottom: 15px; /*           this heading font-size * 0.5  */
  padding-top: 30px;
 }

 h3 {
-  font-size: 27px; /* round(previous heading font-size * 0.9) */
+  font-size: 26px; /* round(previous heading font-size * 0.9) */
  line-height: 32px; /* round(    this heading font-size * 1.2) */
-  margin-top: 0px; /*           this heading font-size        */
+  margin-top: -14px;
  margin-bottom: 14px; /* round(    this heading font-size * 0.5) */
  padding-top: 27px;
 }

 h4 {
  font-size: 24px; /* round(previous heading font-size * 0.9) */
  line-height: 29px; /* round(    this heading font-size * 1.2) */
-  margin-top: 0; /*           this heading font-size        */
+  margin-top: -12px;
  margin-bottom: 12px; /* round(    this heading font-size * 0.5) */
  padding-top: 24px;
 }

-h5 {
-  font-size: 22px; /* round(previous heading font-size * 0.9) */
-  line-height: 26px; /* round(    this heading font-size * 1.2) */
-  margin-top: 0; /*           this heading font-size        */
-  margin-bottom: 11px; /* round(    this heading font-size * 0.5) */
-  padding-top: 22px;
-}
-
 h5 {
  font-size: 20px; /* round(previous heading font-size * 0.9) */
  line-height: 24px; /* round(    this heading font-size * 1.2) */
-  margin-top: 0; /*           this heading font-size        */
+  margin-top: -10px;
  margin-bottom: 10px; /* round(    this heading font-size * 0.5) */
  padding-top: 20px;
 }

 h6 {
  font-size: 18px; /* round(previous heading font-size * 0.9) */
  line-height: 22px; /* round(    this heading font-size * 1.2) */
-  margin-top: 0; /*           this heading font-size        */
+  margin-top: -9px;
  margin-bottom: 9px; /* round(    this heading font-size * 0.5) */
  padding-top: 18px;
 }


Wouldn't it be applicable to just remove all custom style directives on the <h[1-6]> elements? Is there any reason to adjust them at all? What would happen otherwise?

@amotl since we don't import the fontstuff from furo yet, the only fallback we have is the h1 of normalize.css, everything else would fall back to the browsers default sizes which doesn't look great. Howevery, this part needs one more round of finetuning, the scrollpositions aren't quite right. Or do you want to try and use furos typography styles?

amotl · 2024-07-20T23:35:12Z

Another request for this fixup patch: Please compare the margins / paddings of the <li> item paragraphs between vanilla Furo and our theme.

In our theme, something seems to be configured too tight in this area. Furo offers a much better appearance and reading flow. Can we improve that? Maybe it's all just my fault by adding those custom styles to the CrateDB Guide project?

msbt · 2024-07-22T08:28:31Z

In our theme, something seems to be configured too tight in this area. Furo offers a much better appearance and reading flow. Can we improve that? Maybe it's all just my fault by adding those custom styles to the CrateDB Guide project?

Most of those styles aren't applied since we don't have that .wrapper-content-right container anymore. I might have been too strict with the margins the last time, I took some inspiration of the furo styles and applied them to our theme, need to re-check all critical pages though ;)

amotl · 2024-07-22T19:30:22Z

Hi again. I would like to report when the promotion header is displayed, it hides the headline. Can you adjust the stickyness behaviour in that area? Example: https://cratedb.com/docs/guide/feature/

I guess it is difficult to spot in preview mode, because on the RTD preview page, there is a another custom header inlined, which shifts the headline towards the bottom, that's why it is still visible. On a local workstation, it is also difficult, because it doesn't do any ESI, so it doesn't display any promotion header at all. Right?

msbt · 2024-07-24T10:26:55Z

@amotl correct, the promo header ESI is only triggered when served via reverse proxy (i.e. on a live-domain like cratedb.com). I made a few fixes in the last commit which removes a lot of the logic that we were using and made the banner non-sticky and positioned the other elements relative to it, so it shouldn't overlap anything and hide when scrolling down.

amotl · 2024-07-24T18:38:39Z

Thanks. I will run a another devX release later.

amotl · 2024-07-31T11:59:51Z

@proddata mentioned that something is not ok with table renderings? Was it different on dev3, and what's the problem? Missing border lines?

Georg:
Yes, missing border lines and quite a bit more spacing

amotl · 2024-07-31T12:50:36Z

Yes, missing border lines and quite a bit more spacing.

Thanks. Let's wait for another iteration then. @msbt: Let's talk about it tomorrow?

Before: https://cratedb.com/docs/cloud/en/latest/reference/services.html#shared
After: https://crate-cloud--79.org.readthedocs.build/en/79/reference/services.html#shared

amotl · 2024-08-05T16:33:51Z

@proddata mentioned that something is not ok with table renderings?

@msbt fixed it. Thanks!

See https://crate-cloud--79.org.readthedocs.build/en/79/reference/services.html#dedicated.

amotl · 2024-08-05T16:45:40Z

Vertical spacing between <li> link elements, for example on rendered page tocs, is also much better now. Thanks, @msbt!

Before / After, on https://crate--16344.org.readthedocs.build/en/16344/concepts/clustering.html.

amotl · 2024-08-05T16:51:22Z

@matkuliak, @proddata, and @matriv / @mkleen / @BaurzhanSakhariev / @surister: If you don't see any other flaws that would block the release of the revamped documentation theme, we may be able to release it before heading into the summer breaks.

All of those use 0.34.0.dev6 now, based on recent improvements from this PR, and also includes changes from GH-515.

/cc @mfussenegger, @romseygeek, @simonprickett, @widmogrod

proddata · 2024-08-06T07:00:29Z

If you don't see any other flaws that would block the release of the revamped documentation theme, we may be able to release it before heading into the summer breaks.

Fine for the CrateDB Cloud docs 👍
Smaller bugs can be fixed afterwards.

amotl

@msbt: Thanks a stack for all the aftermath fixes to GH-390. Your patch will be merged and included into the upcoming release.

Chore: Update changelog

6276e5e

amotl changed the base branch from main to amo/basic-ng July 19, 2024 14:43

This comment was marked as duplicate.

Sign in to view

amotl reviewed Jul 20, 2024

View reviewed changes

amotl changed the title ~~Admonition and font/paragraph styling~~ NG: Theme modernization, last inches Jul 22, 2024

amotl mentioned this pull request Jul 31, 2024

Update to crate-docs-theme==0.34.0.dev4, for evaluation purposes crate/cratedb-guide#109

Merged

amotl mentioned this pull request Jul 31, 2024

Theme: Update to crate-docs-theme==0.34.0.dev6 crate/cloud-docs#79

Merged

msbt added 11 commits August 7, 2024 17:12

NG: Remove margin from paragraphs in ul/ol lists

e860e9d

NG: Adjust headline spacing and remove h5 duplicate

50b8457

NG: Adjust admonitions

20b1771

NG: Readjust ul/ol spacing

f31bc6a

NG: Fix headline margins

5579898

NG: Style field-lists that got lost due to basic.css removal

e5d607c

NG: Adjust line-height in toctree

40c6fab

NG: Remove unneeded js/css styling for mobile nav and abandoned elements

2467a1c

NG: Harmonize ul li margin/padding with code from furos _lists.sass

edf29a8

NG: Make header and promobar non-sticky

2895247

NG: Add styles for tables

49db649

msbt and others added 2 commits August 7, 2024 17:13

NG: Add styles for tables and finetune ul/ol/p margins

82e3138

Link Checker: Ignore unsplash.com. It has been blocked by GitHub.

c013bba

amotl force-pushed the matthias/first-bunch-of-ng-fixes branch from 8f3437c to c013bba Compare August 7, 2024 15:14

amotl marked this pull request as ready for review August 7, 2024 15:16

amotl approved these changes Aug 7, 2024

View reviewed changes

amotl merged commit 3764f89 into amo/basic-ng Aug 7, 2024
8 checks passed

amotl deleted the matthias/first-bunch-of-ng-fixes branch August 7, 2024 15:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NG: Theme modernization, last inches #510

NG: Theme modernization, last inches #510

msbt commented Jul 19, 2024 •

edited by amotl

Loading

amotl commented Jul 20, 2024

This comment was marked as duplicate.

amotl Jul 20, 2024

msbt Jul 22, 2024

amotl Jul 20, 2024

msbt Jul 22, 2024

amotl commented Jul 20, 2024 •

edited

Loading

msbt commented Jul 22, 2024

amotl commented Jul 22, 2024 •

edited

Loading

msbt commented Jul 24, 2024

amotl commented Jul 24, 2024

amotl commented Jul 31, 2024 •

edited

Loading

amotl commented Jul 31, 2024 •

edited

Loading

amotl commented Aug 5, 2024

amotl commented Aug 5, 2024

amotl commented Aug 5, 2024 •

edited

Loading

proddata commented Aug 6, 2024

amotl left a comment •

edited

Loading

NG: Theme modernization, last inches #510

NG: Theme modernization, last inches #510

Conversation

msbt commented Jul 19, 2024 • edited by amotl Loading

About

Preview

amotl commented Jul 20, 2024

This comment was marked as duplicate.

amotl Jul 20, 2024

Choose a reason for hiding this comment

msbt Jul 22, 2024

Choose a reason for hiding this comment

amotl Jul 20, 2024

Choose a reason for hiding this comment

msbt Jul 22, 2024

Choose a reason for hiding this comment

amotl commented Jul 20, 2024 • edited Loading

msbt commented Jul 22, 2024

amotl commented Jul 22, 2024 • edited Loading

msbt commented Jul 24, 2024

amotl commented Jul 24, 2024

amotl commented Jul 31, 2024 • edited Loading

amotl commented Jul 31, 2024 • edited Loading

amotl commented Aug 5, 2024

amotl commented Aug 5, 2024

amotl commented Aug 5, 2024 • edited Loading

proddata commented Aug 6, 2024

amotl left a comment • edited Loading

Choose a reason for hiding this comment

msbt commented Jul 19, 2024 •

edited by amotl

Loading

amotl commented Jul 20, 2024 •

edited

Loading

amotl commented Jul 22, 2024 •

edited

Loading

amotl commented Jul 31, 2024 •

edited

Loading

amotl commented Jul 31, 2024 •

edited

Loading

amotl commented Aug 5, 2024 •

edited

Loading

amotl left a comment •

edited

Loading