blog and header progress

src/components/PostList.js

@@ -20,10 +20,7 @@ export default class IndexPage extends React.Component {
                   {post.title}
                 </Link>
                 <div className="post-meta">
-                  {post.date} - posted by{' '}
-                  <Link to={`/author/${post.author.slug}`}>
-                    {post.author.name}
-                  </Link>
+                  {post.date}
                 </div>
               </header>
               <div>

src/css/base.scss

@@ -2,12 +2,6 @@
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  &:focus {
-    outline: none;
-    padding-bottom: 0.1rem;
-    margin-bottom: 0.1rem;
-    border-bottom: 1px solid $color-link;
-  }
 }
 
 html {

src/css/blog.scss

@@ -97,12 +97,16 @@
   .section-title {
     font-size: 4rem;
     line-height: 1.14;
+    @media (max-width: $media-s) {
+      font-size: 2.6rem;
+    }
   }
   .post-meta, .section-title {
     max-width: $width-l;
     margin: 0 auto 1rem;
   }
   .post-meta {
+    margin-bottom: 3rem;
     p {
       margin-left: 0;
     }

src/css/header.scss

@@ -2,6 +2,7 @@
   padding: 1rem 2rem;
   background: $color-black;
   display: flex;
+  justify-content: space-between;
 }
 
 .logo {
@@ -15,11 +16,16 @@
 
 .site-nav {
   display: block;
-  height: 100%;
   a {
     text-decoration: none;
     display: inline-block;
-    vertical-align: middle;
-    margin-right: 1rem;
+    margin-right: 1.6rem;
+
+    color: $color-white;
+    font-weight: 500;
+
+    &:hover {
+      color: $color-orange;
+    }
   }
 }

src/css/variables.scss

@@ -16,4 +16,6 @@ $color-hover: $color-yellow;
 $width-xs: 24rem;
 $width-s: 32rem;
 $width-m: 42rem;
-$width-l: 54rem;
+$width-l: 54rem;
+
+$media-s: 700px;

src/templates/post.js

@@ -19,8 +19,7 @@ export const BlogPostTemplate = ({
       </h1>
       <div className="post-meta">
         <p>
-          {date} - posted by{' '}
-          <Link to={`/author/${author.slug}`}>{author.name}</Link>
+          {date} av <Link to={`/author/${author.slug}`}>{author.name}</Link>
         </p>
       </div>
       <div className="post-content" dangerouslySetInnerHTML={{ __html: content }} />