Design adjustments #225
Design adjustments #225
Conversation
Codecov Report
@@ Coverage Diff @@
## master #225 +/- ##
=======================================
Coverage 95.87% 95.87%
=======================================
Files 30 30
Lines 291 291
Branches 37 37
=======================================
Hits 279 279
Misses 12 12
Continue to review full report at Codecov.
|
|
This is great! Thank you so much for these contributions! Do you think you could follow the instructions for deploying a version of this for people to look at? I was just thinking yesterday that the font was too thin, I think you may have made it too thick though, maybe somewhere in the middle? 😉 |
styles/base.js
Outdated
| @@ -144,7 +141,7 @@ export default () => ` | |||
| /* to be used by our code blocks */ | |||
| .prism-code { | |||
| display: block; | |||
| white-space: pre; | |||
| white-space: pre-wrap !important; | |||
There was a problem hiding this comment.
If !important is needed here, let's add a comment explaining why.
components/docs-page.js
Outdated
| @@ -68,12 +71,12 @@ function PageSections({title, note, heading, sections}) { | |||
| <PageWrapper> | |||
| <Title dangerouslySetInnerHTML={{__html: mdToHTMLUnwrapped(title)}} /> | |||
| <Div | |||
| maxWidth="70rem" | |||
| maxWidth="35rem" | |||
There was a problem hiding this comment.
I feel that 35rem is a little too narrow... How about 50rem? I think that's where we had it at one time...
|
Your wish is my url link.
|
|
Ok, the font actually looks great 👍 thanks! I still think it's a bit too narrow. Especially on my 4k monitor 😅
In all seriousness, it also makes the interactive code blocks pretty narrow:
We take a lot of hints from styled-components.com and they're doing Thanks again! This is great 👍 |
| @@ -144,8 +141,10 @@ export default () => ` | |||
| /* to be used by our code blocks */ | |||
| .prism-code { | |||
| display: block; | |||
| white-space: pre; | |||
|
|
|||
| white-space: pre-wrap !important; | |||
There was a problem hiding this comment.
These styles in particular are borrowed from react-live, which injects them again. We could probably tell react-live to not inject the styles. But this is ok for now.
|
Would you like to add yourself to the contributors table? |
|
NP! Happy to help! I've learned a lot from watching your Egghead videos so I'm stoked to be able to give a little back! |
|
Haha, @motleydev, could you fix this on the advanced page please? 😂
|
|
Those are shields.io badges and should not have a width of 100% 😄 |
|
Just sat down to do this but looks like @tdeschryver just beat me to it with #231 |
|
Oh sorry, I didn't see this 😄 |
|
That went pretty quick! You seem to be interested in design! Maybe you can help with this! #219 |
|
Love to! Heading in to take a look. |
|
Wrapping up my day here in DE. I'm going to have to take a look at this tomorrow. |
What:
I've made a series of design changes such as layout, margins and max-width settings.
Why:
The readability is not very good in its current state.
How:
Exclusively through style adjustments.
Before
After
My feelings won't be hurt if you hate my style preference! :) Thanks!