style: add global css #18
Conversation
| @@ -0,0 +1,151 @@ | |||
| :root { | |||
| --font-primary: 'Uai', 'Source Sans Pro', 'Montserrat', 'Roboto', Helvetica, Arial, sans-serif; | |||
There was a problem hiding this comment.
question: Did we get the font files from Cadu?
There was a problem hiding this comment.
@manvinderjit @madcampos Which font format are you using? I've shared the OTF font files with the design team, but they're not proper for web browsers. I've attached the WOFF2 font files, with a link below.
There was a problem hiding this comment.
@manvinderjit @madcampos I've also added a small CSS font-face snippet, you just need to place the files and import in the global CSS.
There was a problem hiding this comment.
@madcampos I am not sure if there is an issue with the font or was it just a comment. @caducarvalho Thank you for the files, we will use these just in case.
There was a problem hiding this comment.
Was just a comment to check if you got the files. I didn't see a css file with @font-face declarations so was just double checking.
Thank you @caducarvalho for providing the files! 😎
| --text-base: 18px; | ||
| --text-scale-ratio: 1.067; | ||
| --spacing-base: 8px; | ||
| --rounded-base: 2px; | ||
| --leading-base: 1.6em; | ||
| --shadow-base: 2px; |
There was a problem hiding this comment.
nitpick: Can we make those values relative to the text size?
Like this:
:root {
/* Here we need a unitless number so we can do ✨ math ✨ */
--REFERENCE_BASE_SIZE: 18;
/* This is a decent assumption for a browser default font setting. */
/* (i.e. "medium font size") */
/* Also a unitless value for ✨ math reasons ✨ */
--BROWSER_DEFAULT: 16;
/* Here we get the ratio between the size we want and the assumed browser default. */
/* Then multiply by 1rem to force the browser to calculate a value out of it, */
/* instead of having a unitless number. */
/* Now: 1rem = 18px, for the default font size configuration in all major browsers. */
--text-base: calc((var(--REFERENCE_BASE_SIZE) / var(--BROWSER_DEFAULT)) * 1rem);
/* This is the single value everything will be based off and be relative to. */
/* We set the root font size so it cascades to everything else. */
/* And rem units work. */
font-size: var(--text-base);
/* ✨ MOAR MATH ✨ */
/* But now normalized to the new rem value */
--spacing-base: calc((8 / var(--REFERENCE_BASE_SIZE)) * 1rem); /* 8px / 18px = 0.444...rem */
--rounded-base: calc((2 / var(--REFERENCE_BASE_SIZE)) * 1rem); /* 2px / 18px = 0.111...rem */
--shadow-base: calc((2 / var(--REFERENCE_BASE_SIZE)) * 1rem); /* Same as --rounded-base */
/* NOTE: we just need to do this for the base values 😅 */
}Here is a minimal demo to showcase this difference: https://codepen.io/madcampos/pen/MYWKYjN
Go to your browser settings and change the font size and see the font change on all paragraphs but the one with a fixed pixel size. (This should be under "Appearance" or something.)
Here is it the setting in Edge:
There was a problem hiding this comment.
@madcampos Tagging @caducarvalho
There was a problem hiding this comment.
@madcampos Thanks for comment! We might skip this for now and think about it later.
src/index.css
Outdated
| --rounded-lg: calc(8 * var(--rounded-base)); | ||
| --rounded-xl: calc(12 * var(--rounded-base)); | ||
| --rounded-full: 50%; | ||
| --border: 1px solid var(--color-border); |
There was a problem hiding this comment.
suggestion: There should be a --border-base value for the border thickness
| line-height: var(--leading-base); | ||
| } | ||
|
|
||
| a { color: var(--color-accent); } |
There was a problem hiding this comment.
suggestion: Also add accent-color to the :root declaration.
There was a problem hiding this comment.
:root {
// ...
accent-color: var(--color-accent);
}Like this?
Can you tell me why we need this?
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6, | ||
| .text-h1, | ||
| .text-h2, | ||
| .text-h3, | ||
| .text-h4, | ||
| .text-h5, | ||
| .text-h6, |
There was a problem hiding this comment.
nitpick: It is more readable this way:
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| .text-h1, | |
| .text-h2, | |
| .text-h3, | |
| .text-h4, | |
| .text-h5, | |
| .text-h6, | |
| h1, h2, h3, h4, h5, h6, | |
| .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6, |
And please use dprint to format the code instead of effing prettier.
Prettier is a complete and utter garbage, it messes up code in unintuitive ways for AST sake and not humab sake, and I will die on this hill!
Add these files/lines to the project please:
There was a problem hiding this comment.
It's weird. We already have dprint settings and its script(npm run format on pre-commit) is working well. I think there's no css config in dprint settings. Can you check this again? @madcampos
Co-authored-by: Manvinderjit Rupal <manvinderjit@users.noreply.github.com>
sounmind
force-pushed
the
style/global-css
branch
from
b466922 to
38e5b19
Compare
Deploying volunteer with
|
| Latest commit: |
38e5b19
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://790519ca.volunteer-ekr.pages.dev |
| Branch Preview URL: | https://style-global-css.volunteer-ekr.pages.dev |
Summary
Tests
Additional information