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

Styling improvements for landing page #181

Open
bmigirl opened this issue May 13, 2020 · 5 comments
Open

Styling improvements for landing page #181

bmigirl opened this issue May 13, 2020 · 5 comments
Assignees
Labels
📖 Docs Improvements or additions to documentation

Comments

@bmigirl
Copy link

bmigirl commented May 13, 2020

Describe the feature

Improvements to the landing page styling

Stuff that feels improvable:

  1. In the dark mode this dark seem practically black when set against the white screenshot - would make it a bit lighter

Screenshot 2020-05-13 at 14 27 40

  1. On the most left and right item the margin between it and side of the page seems a bit too small - even smaller than e.g. between the right menu options

Screenshot 2020-05-13 at 14 27 50

  1. These 0 px border radius corners seem very sharp when set aside the very rounded borders of the code block. Maybe add a tiny border radius to reduce the contrast?

Screenshot 2020-05-13 at 14 28 14

  1. Maybe make these headlines either larger or bolded? They don't stand out that much from the paragraph right now.

Screenshot 2020-05-13 at 14 28 23

  1. More bottom padding here? The tiny QR code seems to be shoved to the bottom by the vastness of the black background (# poetic)

Screenshot 2020-05-13 at 14 28 35

  1. Definitely more margin between the items and Callstack logo

Screenshot 2020-05-13 at 14 28 45

And finally: 7. This Get started button seems to be placed a bit randomly, isn't?

Screenshot 2020-05-13 at 14 36 07

Motivation

It could look a bit better. Wdyt?

@adamTrz
Copy link
Member

adamTrz commented May 13, 2020

  • p#1 We're using prism themes here:
    prism: {
    theme: require('prism-react-renderer/themes/github'),
    darkTheme: require('prism-react-renderer/themes/dracula'),
    },
    navbar: {

    I guess you can search for some not so contrast heavy dark theme and apply it there ;)
  • p#2. & pp#6. Footer and header are generated by Dosocaurus but I'm sure you can override some styles (I think...)
  • p#3. This is an image, so applying border-radius to css shouldn't be a problem.
    Also, idea - would be nice if we could have dark image rendered if dark theme is active, wdyt? (dev note - we would need to have two images, screenshots from app when both dark and light themes are active), and swap them when activeTheme changes. Shouldn't be a problem imho 😉 )
  • p#4, p#5, p#7 - Awesome! Please adjust those items 🙂

@adamTrz adamTrz added 📖 Docs Improvements or additions to documentation and removed 📖 Docs labels May 18, 2020
@Jy411
Copy link

Jy411 commented May 25, 2020

Can I get assigned this? So from my understanding, this is just some CSS style changes?

@Jy411
Copy link

Jy411 commented May 25, 2020

Also, I think the enhancement label would be more appropriate.

@adamTrz
Copy link
Member

adamTrz commented May 25, 2020

Hey. @Jy411 , sure, you are more than welcome to creating a PR with the fixes. :)

@Jy411
Copy link

Jy411 commented May 26, 2020

Thanks! Will get to it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📖 Docs Improvements or additions to documentation
Projects
None yet
Development

No branches or pull requests

3 participants