Increase author link visibility & link avatars in blog posts + previe…

…ws (#5813) * Increase author link visibility and link avatars in blog posts + previews Increase author link visibility and link avatar - `www/src/components/blog-post-preview-item.js` - `www/src/templates/template-blog-post.js` Ref #3199 #4354 #5396 Confirmed addition of `transform: translateZ(0)` in blog-post-preview-item.js prevents image twitch in Chrome when hovering the card, way to go @fk * lose font-size increase and bold * lose font-size increase and bold for post too * move keys that require !important to the && selector ...which glamor offers to increase specifity (ref. https://github.com/threepointone/glamor/blob/master/docs/selectors.md) via @fk review `src/components/blog-post-preview-item.js` * remove !important from blog preview and post layout
gatsbyjs · Jun 27, 2018 · 0e5aa1b · 0e5aa1b
1 parent 3396f38
commit 0e5aa1b
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 28 deletions.
diff --git a/www/src/components/blog-post-preview-item.js b/www/src/components/blog-post-preview-item.js
@@ -25,19 +25,35 @@ class BlogPostPreviewItem extends React.Component {
             marginBottom: rhythm(2),
           }}
         >
-          <Img
-            alt=""
-            fixed={avatar}
+          <Link
+            to={post.frontmatter.author.fields.slug}
             css={{
-              borderRadius: `100%`,
-              display: `inline-block`,
-              marginRight: rhythm(1 / 2),
-              marginBottom: 0,
-              verticalAlign: `top`,
-              // prevents image twitch in Chrome when hovering the card
-              transform: `translateZ(0)`,
+              position: `relative`,
+              zIndex: 1,
+              "&&": {
+                boxShadow: `none`,
+                borderBottom: `0`,
+                fontWeight: `normal`,
+                ":hover": {
+                  background: `transparent`,
+                },
+              },
             }}
-          />
+          >
+            <Img
+              alt=""
+              fixed={avatar}
+              css={{
+                borderRadius: `100%`,
+                display: `inline-block`,
+                marginRight: rhythm(1 / 2),
+                marginBottom: 0,
+                verticalAlign: `top`,
+                // prevents image twitch in Chrome when hovering the card
+                transform: `translateZ(0)`,
+              }}
+            />
+          </Link>
           <div
             css={{
               display: `inline-block`,
@@ -56,15 +72,13 @@ class BlogPostPreviewItem extends React.Component {
               <Link
                 to={post.frontmatter.author.fields.slug}
                 css={{
-                  boxShadow: `none !important`,
-                  borderBottom: `0 !important`,
                   position: `relative`,
                   zIndex: 1,
                   "&&": {
+                    color: `${colors.gatsby}`,
                     fontWeight: `normal`,
                     ":hover": {
-                      color: colors.gatsby,
-                      background: `transparent`,
+                      background: colors.ui.bright,
                     },
                   },
                 }}

diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js
@@ -61,7 +61,7 @@ class BlogPostTemplate extends React.Component {
 
     return (
       <Layout location={this.props.location}>
-        <Container className="post" css={{ paddingBottom: `0 !important` }}>
+        <Container className="post" css={{ paddingBottom: `0` }}>
           {/* Add long list of social meta tags */}
           <Helmet>
             <title>{post.frontmatter.title}</title>
@@ -133,17 +133,19 @@ class BlogPostTemplate extends React.Component {
                 flex: `0 0 auto`,
               }}
             >
-              <Img
-                fixed={post.frontmatter.author.avatar.childImageSharp.fixed}
-                css={{
-                  height: rhythm(2.3),
-                  width: rhythm(2.3),
-                  margin: 0,
-                  borderRadius: `100%`,
-                  display: `inline-block`,
-                  verticalAlign: `middle`,
-                }}
-              />
+              <Link to={post.frontmatter.author.fields.slug}>
+                <Img
+                  fixed={post.frontmatter.author.avatar.childImageSharp.fixed}
+                  css={{
+                    height: rhythm(2.3),
+                    width: rhythm(2.3),
+                    margin: 0,
+                    borderRadius: `100%`,
+                    display: `inline-block`,
+                    verticalAlign: `middle`,
+                  }}
+                />
+              </Link>
             </div>
             <div
               css={{
@@ -157,9 +159,23 @@ class BlogPostTemplate extends React.Component {
                     ...scale(0),
                     fontWeight: 400,
                     margin: 0,
+                    color: `${colors.gatsby}`,
                   }}
                 >
-                  {post.frontmatter.author.id}
+                  <span
+                    css={{
+                      borderBottom: `1px solid ${colors.ui.bright}`,
+                      boxShadow: `inset 0 -2px 0 0 ${colors.ui.bright}`,
+                      transition: `all ${presets.animation.speedFast} ${
+                        presets.animation.curveDefault
+                      }`,
+                      "&:hover": {
+                        background: colors.ui.bright,
+                      },
+                    }}
+                  >
+                    {post.frontmatter.author.id}
+                  </span>
                 </h4>
               </Link>
               <BioLine>{post.frontmatter.author.bio}</BioLine>