Try redesigning the style of authoring-html

[xfq]

Try redesigning the style of Internationalization techniques: Authoring web pages. Let me know what you think!

Current page: https://www.w3.org/International/techniques/authoring-html

Preview

[netlify]

✅ Deploy Preview for i18n-drafts ready!

Name	Link
🔨 Latest commit	6e5ecd7
🔍 Latest deploy log	https://app.netlify.com/projects/i18n-drafts/deploys/68667ae3d2efad00083e3c78
😎 Deploy Preview	https://deploy-preview-665--i18n-drafts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[r12a]

It's certainly colourful. There are however a number of things i think we need to consider changing. Perhaps a topic for our next 1:1. Note also the comments on a previous commit about line lengths, that were shortened by the move to a new base style sheet.

Also, note that the headings overlap the expanded TOC - another result i think of the style sheet change.

[xfq]

the headings overlap the expanded TOC

I fixed a few issues, but not this one. I couldn't find the source of this issue, and I didn't modify any z-index related style...

[xfq]

the headings overlap the expanded TOC

I fixed a few issues, but not this one. I couldn't find the source of this issue, and I didn't modify any z-index related style...

I just found that even if I deleted all the code I added, the problem still occurs:

---

I will take a closer look to find out what caused it.

[xfq]

Should be fixed now. Please take a look.

[xfq]

@r12a After I discussed with you, I further modified the style, please take a look.

[r12a]

There's still a problem with overlapping content when the browser window is narrow:

I think the width needs to be applied to the column, perhaps, rather than the menu? (Btw, fwiw, i thought 15rem was probably wide enough when i did some testing — that also helps for narrow windows.)