Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style updates for examples and API docs #13917

Merged
merged 1 commit into from
Aug 1, 2022
Merged

Style updates for examples and API docs #13917

merged 1 commit into from
Aug 1, 2022

Conversation

tschaub
Copy link
Member

@tschaub tschaub commented Jul 31, 2022

Following up on #13908, this updates styles for examples and API docs. Aside from code syntax highlighting, the one color is #00AAFF (the new brand color), and the rest is grayscale. The included logo-light.svg and logo-dark.svg can be used over light and dark backgrounds.

New style for API docs:

image

New style for examples:

image

(The cookie consent form has colors that stray from the theme, but that will be removed in #13916.)

@github-actions
Copy link

📦 Preview the examples and docs from this branch here: https://deploy-preview-13917--ol-site.netlify.app/.

@MoonE
Copy link
Contributor

MoonE commented Jul 31, 2022

Here 'HTML 5 Geolocation spec' is actually a link, but there is no visual distinction from normal text:
image
Unfortunately code formatting is also rather hard to make out, here 'change' is code:
image

I do like the reduced colors. Maybe a background color for code and and undefline for links would work?

@tschaub
Copy link
Member Author

tschaub commented Aug 1, 2022

@MoonE - Thanks for the feedback. I also thought that the links were not obvious enough and that the inline code style was too subtle. I've updated both (and included screenshots in the description). The links now use the brand color and are decorated with an underline on focus or hover. The inline code now has a background that contrasts with the default background.

Copy link
Member

@ahocevar ahocevar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the clean look. Thanks!

Copy link
Contributor

@MoonE MoonE left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you considered removing the background color from the big code boxes?
image

image

Either way it looks great, @tschaub

@jipexu
Copy link
Contributor

jipexu commented Aug 1, 2022

Hi
Nice !!
Just a notice, I dont know why but all the link(internal) in the Docs menu are not found ??
ie : https://deploy-preview-13917--ol-site.netlify.app/doc/quickstart.html
== page not found
???

@tschaub tschaub merged commit 973c411 into openlayers:main Aug 1, 2022
@tschaub tschaub deleted the doc-style branch August 1, 2022 11:44
@tschaub
Copy link
Member Author

tschaub commented Aug 1, 2022

I dont know why but all the link(internal) in the Docs menu are not found ??

@jipexu - The branch preview builds don’t include all the docs currently - just the examples and API docs.

@jipexu
Copy link
Contributor

jipexu commented Aug 1, 2022

@tschaub ah ok thank for the light !

@tschaub tschaub mentioned this pull request Aug 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants