-
Notifications
You must be signed in to change notification settings - Fork 0
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
styles: apply tailwind styles from Figma #37
Conversation
Visit the preview URL for this PR (updated for commit e379520): https://mmp-site-b1c9b--pr37-figma-styles-jhy9ro9x.web.app (expires Thu, 25 Apr 2024 13:51:15 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 4eb870c89e876f1812e204af417359065d2a23b1 |
<nav class="flex items-center justify-between"> | ||
<h2 class="m-0 text-lg"><a class="text-black hover:text-gray-600 decoration-0" href="/">{SITE_TITLE}</a></h2> | ||
<header> | ||
<h2><a class="hover:text-gray-600 decoration-0" href="/">{SITE_TITLE}</a></h2> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What does decoration-0
do? Doesn't that just remove the underline? In that case, you could use no-underline
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, you are correct! Looks like this is leftover from the blog post defaults-- not sure why they didn't use no-underline
. Changing now~
<head> | ||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> | ||
</head> | ||
<body class="single-column"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I imagine this should be in a layout component?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, let's plan on a refactor in a different PR
padding: 1em; | ||
} | ||
} | ||
@import url("https://use.typekit.net/jng2int.css"); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Beautiful!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just a few small changes, looks great!
Co-authored-by: Galen Winsor <57297033+galenwinsor@users.noreply.github.com>
This PR seeks to update styles to match the Figma design system.
Files Changed
global.css
: this is where we standardize html elements and classes used throughout the app; we@apply
styles defined intailwind.config.js
tailwind.config.js
: created by runningnpx tailwind init --full
. Within here we chose to override tailwind's default colors and box-shadowBlogPost.astro
: remove style scriptindex.astro
: remove classes from elements so that we can view our changes from global.cssBaseHead.astro
: remove preloaded fontsHeader.astro
: remove classes from elements so that we can view our changes from global.cssFiles Removed
Font files from default astro
Refs
Figma Design System
Tailwind Custom Styles Docs