remove !important from blog preview and post layout

gatsbyjs · Jun 27, 2018 · 980aea5 · 980aea5
1 parent 8508952
commit 980aea5
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 31 deletions.
diff --git a/www/src/components/blog-post-preview-item.js b/www/src/components/blog-post-preview-item.js
@@ -31,27 +31,29 @@ class BlogPostPreviewItem extends React.Component {
               position: `relative`,
               zIndex: 1,
               "&&": {
-                boxShadow: `none !important`,
-                borderBottom: `0 !important`,
+                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>
+          >
+            <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`,
@@ -73,7 +75,7 @@ class BlogPostPreviewItem extends React.Component {
                   position: `relative`,
                   zIndex: 1,
                   "&&": {
-                    color: `${colors.gatsby} !important`,
+                    color: `${colors.gatsby}`,
                     fontWeight: `normal`,
                     ":hover": {
                       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`,
               }}
             >
-              <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>
+              <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,10 +159,11 @@ class BlogPostTemplate extends React.Component {
                     ...scale(0),
                     fontWeight: 400,
                     margin: 0,
-                    color: `${colors.gatsby} !important`,
+                    color: `${colors.gatsby}`,
                   }}
                 >
-                  <span css={{
+                  <span
+                    css={{
                       borderBottom: `1px solid ${colors.ui.bright}`,
                       boxShadow: `inset 0 -2px 0 0 ${colors.ui.bright}`,
                       transition: `all ${presets.animation.speedFast} ${
@@ -170,7 +173,9 @@ class BlogPostTemplate extends React.Component {
                         background: colors.ui.bright,
                       },
                     }}
-                  >{post.frontmatter.author.id}</span>
+                  >
+                    {post.frontmatter.author.id}
+                  </span>
                 </h4>
               </Link>
               <BioLine>{post.frontmatter.author.bio}</BioLine>