Adding a voice and tone page #2812
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
This is a bit hacky, but the blocks get really large when there is no sidecar
|
|
||
| **Our tone** is how we speak and say things to our users. Tone sets the mood of your writing and can change depending on the type of content you’re creating. | ||
|
|
||
| <Doc::Layout @spacing="12px"> |
There was a problem hiding this comment.
[idea] general consideration: since this is a "special" (non-standard) page, we could also consider having a special custom content layout / visual treatment for it, think of the "principles" page for example (in which case, we can implement it per your design specs); if you instead want to keep it simple, as you've implemented it it's OK but I would probably use a CSS class instead of Doc::Layout so we can have a more responsive layout at small screens (stacked content, instead of side by side)
There was a problem hiding this comment.
This is a great suggestion. I've given this a try and am curious to see what you think of the new approach.
There was a problem hiding this comment.
The layout doesn't seem to be working quite right. The Do & Dont blocks stack at almost all browser window widths. They line up side by side only within a small range of widths. Maybe that's the intention though?
It seems to me like there should/could be a greater range of views in which they display side by side.
There was a problem hiding this comment.
Unfortunately, it's because the sidecar is still displaying in the Vercel deployment. When I test it locally, the sidecar isn't there (which is the intention, but there's a bug being looked at in #2815), so they're side by side more often. I'll drop some screenshots in the description, but feel free to test locally as well.
There was a problem hiding this comment.
I see, thanks for explaining
Instead of using <Doc::Layout> i've added a special class that will display do and dont elements in a single row, then adjust to stacked as the browser shrinks.
There was a problem hiding this comment.
I agree with @KristinLBradley , the responsive layout still needs a bit of work, but I think the content is good. It's a combination of the viewport width changing, plus the sidecar being hidden that is causing things to jump around a bit. Let me know if you want to pair on it, might be a slightly different way to approach it.
|
@jorytindall, thanks for taking a look! This is a byproduct of the broken sidecar. Once the sidecar is fixed, it won't jump back and forth like this. Here's what it looks like without the sidecar on local: Voice.and.tone._.Helios.Design.System.mp4 |
📌 Summary
If merged, this PR will add a "Voice and tone" page adapted from the Marketing team's guidelines: https://hashicorp.atlassian.net/wiki/spaces/CCAS/pages/3377922084/Our+tone
👉🏻 Preview: https://hds-website-git-hl-docs-tone-voice-hashicorp.vercel.app/content/voice-tone
✔️ TODO
Figure out how to hide the sidecar(This is being addressed in Fix sidecar in website #2815)📷 Screenshots
Since the Sidecar is still broken (#2815), they won't display appropriately in the Vercel deployment. This is what it looks like locally at various screen sizes:
🔗 External links
Jira ticket: HDS-4291
👀 Component checklist
💬 Please consider using conventional comments when reviewing this PR.