UI tweaks (#6)

* fix breakpoints

* fix missed brace

* adjust link-in-the-title styles

* refactorPostTitle

* fix font smoothing

*  made images go from edge to edge

* fix images

Author: ltclmbdev

src/components/Layout.js

@@ -21,7 +21,7 @@ export const globalStyles = css`
   }
   ${bpMaxSM} {
     h1 {
-      font-size: 30px;
+      font-size: 28px;
     }
     h2 {
       font-size: 24px;
@@ -41,6 +41,14 @@ export const globalStyles = css`
       font-family: ${fonts.semiboldItalic};
     }
   }
+  h1,
+  h2,
+  h3,
+  h4 {
+    a {
+      color: inherit;
+    }
+  }
   input {
     border-radius: 4px;
     border: 1px solid ${theme.colors.gray};

src/lib/breakpoints.js

@@ -10,7 +10,7 @@ export const bpMinLG = `@media (min-width: ${minLG}px)`
 export const bpMinXL = `@media (min-width: ${minXL}px)`
 export const bpMinXXL = `@media (min-width: ${minXXL}px)`
 
-export const bpMaxXS = `'@media (max-width: ${minSM - 1}px)'`
-export const bpMaxSM = `'@media (max-width: ${minMD - 1}px)'`
-export const bpMaxMD = `'@media (max-width: ${minLG - 1}px)'`
-export const bpMaxLG = `'@media (max-width: ${minXL - 1}px)'`
+export const bpMaxXS = `@media (max-width: ${minSM - 1}px)`
+export const bpMaxSM = `@media (max-width: ${minMD - 1}px)`
+export const bpMaxMD = `@media (max-width: ${minLG - 1}px)`
+export const bpMaxLG = `@media (max-width: ${minXL - 1}px)`

src/lib/reset.js

@@ -30,7 +30,9 @@ ul, ol {
     box-sizing: border-box;
     -ms-overflow-style: scrollbar;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
   body {
     color: ${theme.colors.body_color};
     background-color: ${theme.colors.bg_color};

src/pages/index.js

@@ -47,15 +47,6 @@ const Hero = ({ description }) => (
   </section>
 )
 
-const PostTitle = styled.h2`
-  margin-bottom: ${rhythm(0.3)};
-  transition: ${theme.transition.ease};
-  :hover {
-    color: ${theme.brand.primary};
-    transition: ${theme.transition.ease};
-  }
-`
-
 const Description = styled.p`
   margin-bottom: 10px;
   display: inline-block;
@@ -81,12 +72,22 @@ export default function Index({ data: { site, allMdx } }) {
               margin-bottom: 40px;
             `}
           >
-            <Link
-              to={post.frontmatter.slug}
-              aria-label={`View ${post.frontmatter.title}`}
+            <h2
+              css={css({
+                marginBottom: rhythm(0.3),
+                transition: theme.transition.ease,
+                ':hover': {
+                  color: theme.brand.primary,
+                },
+              })}
             >
-              <PostTitle>{post.frontmatter.title}</PostTitle>
-            </Link>
+              <Link
+                to={post.frontmatter.slug}
+                aria-label={`View ${post.frontmatter.title}`}
+              >
+                {post.frontmatter.title}
+              </Link>
+            </h2>
             <Description>
               {post.excerpt}{' '}
               <Link

src/templates/blog.js

@@ -6,7 +6,7 @@ import Container from 'components/Container'
 import SEO from '../components/SEO'
 import Layout from '../components/Layout'
 import Link from '../components/Link'
-import { bpMaxSM } from '../lib/breakpoints'
+import { bpMaxSM, bpMinMD } from '../lib/breakpoints'
 
 const Blog = ({
   data: { site, allMdx },
@@ -18,8 +18,9 @@ const Blog = ({
     .map(id =>
       allMdx.edges.find(
         edge =>
-          edge.node.id === id && edge.node.parent.sourceInstanceName !== 'pages'
-      )
+          edge.node.id === id &&
+          edge.node.parent.sourceInstanceName !== 'pages',
+      ),
     )
     .filter(post => post !== undefined)
 
@@ -58,25 +59,25 @@ const Blog = ({
                   margin-top: 20px;
                 }
               }
-              .gatsby-image-wrapper {
-              }
               background: white;
               padding: 40px;
               ${bpMaxSM} {
-                padding: 20px;
+                padding: ${post.frontmatter.banner
+                  ? '0 20px 20px 20px'
+                  : '20px'};
               }
               display: flex;
               flex-direction: column;
             `}
           >
             {post.frontmatter.banner && (
               <div
-                css={css`
-                  padding: 60px 60px 40px 60px;
-                  ${bpMaxSM} {
-                    padding: 20px;
-                  }
-                `}
+                css={css({
+                  margin: '0 -20px 30px -20px',
+                  [bpMinMD]: {
+                    margin: '0 0 40px 0',
+                  },
+                })}
               >
                 <Link
                   aria-label={`View ${post.frontmatter.title} article`}
@@ -88,8 +89,7 @@ const Blog = ({
             )}
             <h2
               css={css`
-                margin-top: 30px;
-                margin-bottom: 10px;
+                margin: 0 0 20px 0;
               `}
             >
               <Link

src/templates/post.js

@@ -8,7 +8,7 @@ import Container from 'components/Container'
 import Layout from '../components/Layout'
 import Share from '../components/Share'
 import config from '../../config/website'
-import { bpMaxSM } from '../lib/breakpoints'
+import { bpMaxSM, bpMinMD, bpMinLG } from '../lib/breakpoints'
 import get from 'lodash/get'
 
 export default function Post({
@@ -29,36 +29,45 @@ export default function Post({
         isBlogPost
       />
       <article
-        css={css`
-          width: 100%;
-          display: flex;
-        `}
+        css={css({
+          width: '100%',
+          display: 'flex',
+          '.gatsby-resp-image-link': {
+            margin: '0 -20px',
+            [bpMinMD]: {
+              margin: 0,
+            },
+          },
+        })}
       >
         <Container>
           <h1
-            css={css`
-              text-align: center;
-              margin-bottom: 20px;
-            `}
+            css={css({
+              textAlign: 'center',
+              margin: '0 0 30px 0',
+              [bpMinMD]: {
+                margin: '0 0 50px 0',
+              },
+            })}
           >
             {title}
           </h1>
           {banner && (
             <div
-              css={css`
-                padding: 30px;
-                ${bpMaxSM} {
-                  padding: 0;
-                }
-              `}
+              css={css({
+                margin: '0 -20px 30px -20px',
+                [bpMinMD]: {
+                  width: '90%',
+                  margin: '0 auto 50px auto',
+                },
+              })}
             >
               <Img
                 sizes={banner.childImageSharp.fluid}
                 alt={site.siteMetadata.keywords.join(', ')}
               />
             </div>
           )}
-          <br />
           <MDXRenderer>{mdx.code.body}</MDXRenderer>
         </Container>
         {/* <SubscribeForm /> */}