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: logo and font update #2132

Merged
merged 5 commits into from
May 17, 2024
Merged

Conversation

alexiscolin
Copy link
Member

@alexiscolin alexiscolin commented May 17, 2024

This PR aims to replace the GnoLand logo by the new one and to swap monospaced body font by a non-mono one.

  • From what I understood, we are gonna use only one version of the logo for both light and dark theme, so I had to update the header background color for visibility and contrast matter. I already made some iterations on the colors with Eunice. I also adapted the horizontal logo - navigation balance by updating the margin.

  • I replaced the standalone logo.svg by a SVG embedded version of the new one. I know there is pros and cons about that but it's temporary before the revamp of gnoweb, when we will be able to discuss it. As we want to go fast, I think this is easier to customize as we can iterate by tweaking few lines of css instead of re-uploading new images (and hosting multiples related to different theme). It's also faster to display and handy to interact with.

  • I renamed the go template to make it more generic since we also use the logo in the footer.

  • Finally, I got rid of monospaced font (for body text only) to make a test with ui-system one. It's the one used for titles right now (the main difference with title being the font-size, font-weight and letter-spacing). Using a ui-system font means all OS will have different font displayed (eg. San Francisco for MacOS / Roboto for Android / Ubuntu font for Linux...), what is not the best for branding matter, but it is very fast to display (actually nothing to load, so no FOUT issue), common to see for users (default os font) and maybe a good choice as the branding is not fully finished yet. This would be a consensual but good way to start because this font is already a part of the website.

  • We can also quickly make a test with Inter font, that is very simple, elegant and used in many of our websites, and otherwise looking for other fonts to tests.

Screenshots:

Light theme:

127 0 0 1_8888_

dark theme:

127 0 0 1_8888_ (1)

@github-actions github-actions bot added the 📦 ⛰️ gno.land Issues or PRs gno.land package related label May 17, 2024
@alexiscolin alexiscolin changed the title Style/logo font update style: logo and font update May 17, 2024
@alexiscolin alexiscolin requested a review from jaekwon May 17, 2024 03:27
@alexiscolin alexiscolin marked this pull request as draft May 17, 2024 08:06
@ltzmaxwell
Copy link
Contributor

maybe off the topic, but here looks a bit wired.
image

@alexiscolin
Copy link
Member Author

@ltzmaxwell Yeah there is few small gaps like this one. They are tracked and should be fixed in another PR very soon. Also, we are gonna update gnoweb design and front-end very soon. No worry 👍

Copy link

codecov bot commented May 17, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 49.03%. Comparing base (aa2a0da) to head (49c7457).

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #2132   +/-   ##
=======================================
  Coverage   49.03%   49.03%           
=======================================
  Files         576      576           
  Lines       77556    77556           
=======================================
  Hits        38030    38030           
  Misses      36441    36441           
  Partials     3085     3085           
Flag Coverage Δ
gno.land 61.69% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@jaekwon jaekwon marked this pull request as ready for review May 17, 2024 19:25
@moul moul merged commit c4cffb5 into gnolang:master May 17, 2024
143 checks passed
leohhhn pushed a commit to leohhhn/gno that referenced this pull request May 21, 2024
<!-- please provide a detailed description of the changes made in this
pull request. -->

**This PR aims to replace the GnoLand logo by the new one and to swap
monospaced body font by a non-mono one.**

- From what I understood, we are gonna use only one version of the logo
for both light and dark theme, so I had to update the header background
color for visibility and contrast matter. I already made some iterations
on the colors with Eunice. I also adapted the horizontal logo -
navigation balance by updating the margin.
- I replaced the standalone `logo.svg` by a SVG `embedded` version of
the new one. I know there is pros and cons about that but it's temporary
before the revamp of `gnoweb`, when we will be able to discuss it. As we
want to go fast, I think this is easier to customize as we can iterate
by tweaking few lines of css instead of re-uploading new images (and
hosting multiples related to different theme). It's also faster to
display and handy to interact with.
- I renamed the go template to make it more generic since we also use
the logo in the footer.

- Finally, I got rid of monospaced font (for body text only) to make a
test with `ui-system` one. It's the one used for titles right now (the
main difference with title being the font-size, font-weight and
letter-spacing). Using a `ui-system` font means all OS will have
different font displayed (eg. San Francisco for MacOS / Roboto for
Android / Ubuntu font for Linux...), what is not the best for branding
matter, but it is very fast to display (actually nothing to load, so no
`FOUT` issue), common to see for users (default os font) and maybe a
good choice as the branding is not fully finished yet. This would be a
consensual but good way to start because this font is already a part of
the website.
- We can also quickly make a test with `Inter` font, that is very
simple, elegant and used in many of our websites, and otherwise looking
for other fonts to tests.

## Screenshots:
### Light theme: 
![127 0 0
1_8888_](https://github.com/gnolang/gno/assets/7622257/9af2b1f6-bb2b-4514-90e1-0ca74e42024f)

### dark theme:
![127 0 0 1_8888_
(1)](https://github.com/gnolang/gno/assets/7622257/53372b03-bc67-444b-a54a-5b1fbb62824a)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📦 ⛰️ gno.land Issues or PRs gno.land package related
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

5 participants