-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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
Increase author link visibility & link avatars in blog posts + previews #5813
Changes from 1 commit
37f7bab
3aad32e
b9c097e
c495ea7
8508952
980aea5
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -25,7 +25,21 @@ class BlogPostPreviewItem extends React.Component { | |
marginBottom: rhythm(2), | ||
}} | ||
> | ||
<Img | ||
<Link | ||
to={post.frontmatter.author.fields.slug} | ||
css={{ | ||
boxShadow: `none !important`, | ||
borderBottom: `0 !important`, | ||
position: `relative`, | ||
zIndex: 1, | ||
"&&": { | ||
fontWeight: `normal`, | ||
":hover": { | ||
background: `transparent`, | ||
}, | ||
}, | ||
}} | ||
><Img | ||
alt="" | ||
resolutions={avatar} | ||
css={{ | ||
|
@@ -37,7 +51,7 @@ class BlogPostPreviewItem extends React.Component { | |
// prevents image twitch in Chrome when hovering the card | ||
transform: `translateZ(0)`, | ||
}} | ||
/> | ||
/></Link> | ||
<div | ||
css={{ | ||
display: `inline-block`, | ||
|
@@ -56,15 +70,14 @@ class BlogPostPreviewItem extends React.Component { | |
<Link | ||
to={post.frontmatter.author.fields.slug} | ||
css={{ | ||
boxShadow: `none !important`, | ||
borderBottom: `0 !important`, | ||
color: `${colors.gatsby} !important`, | ||
fontSize: `102%`, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We don't need to increase font-size here because we don't mix Futura with Spectral. |
||
position: `relative`, | ||
zIndex: 1, | ||
"&&": { | ||
fontWeight: `normal`, | ||
fontWeight: `bold`, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I mirrored these requested changes to the preview on post as well, thinking we would want agreement, but I split them into 2 commits so it would be easy to revert if you liked the bold in the post view. I will add a screenshot comparison in a sec. |
||
":hover": { | ||
color: colors.gatsby, | ||
background: `transparent`, | ||
background: colors.ui.bright, | ||
}, | ||
}, | ||
}} | ||
|
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.
You could move the keys (here and also the ones below) that require
!important
to the&&
selector which glamor offers to increase specifity (ref. https://github.com/threepointone/glamor/blob/master/docs/selectors.md).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.
Seems like I should do the same here then?
https://github.com/gatsbyjs/gatsby/pull/5813/files/b9c097e3eba19af0a824098aefe1e812ed00125b#diff-3f9ee2e9c0e318b6189a8f786092c9f5R164
template-blog-post.js
L164
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 went ahead and committed a change with suggestion above. Changed my mind about the last comment though, and maybe the commit. Color me puzzled. Perhaps I am not understanding Glamor but I do not see how given HTML like
the resulting CSS:
is more specific than
.css-9rkwk9.css-9rkwk9
seems redundant to me. If it is I can revert the last commit. If it makes sense to you then this is ready unless you want me to wrapin an
&&
section intemplate-blog-post.js
as well per above.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.
The chained selectors (e.g.
.css-9rkwk9.css-9rkwk9
) are what is actually doing the trick. To quote the genius named Harry Roberts (@csswizardry):(via https://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/#safely-increasing-specificity)
Also see
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.
So what about previous comment then?
(add
&&
selector totemplate-blog-post.js
and movecolor: `${colors.gatsby} !important`,
to it?)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.
L164 seems to work fine without the
!important
: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.
Generally we should avoid (and have avoided—I'm quite sure I'm guilty here as I wasn't aware of
&&
when I first started using Glamor ;-)) using!important
(see e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception).If you need to override styles try if Glamor's
&&
will do and make!important
a last resort.