tweaks on style and readme

Author: c25vdw

README.md

@@ -10,7 +10,7 @@
 
 ---
 
-every file and char is made with heart. If you find it flawed or yet to improve, please inform me via github issues. 
+files and chars are considered and created. If you find it flawed or yet to improve, please inform me via github issues. 
 
 My target of mocking is https://vue-hn.now.sh, made with Vue, please do check it out.
 

src/components/NavBar.js

@@ -1,15 +1,17 @@
 import React from 'react'
-import {Link} from 'react-router-dom'
+import {NavLink} from 'react-router-dom'
 
 export default function NavBar () {
   return (
     <div className="nav">
       <ul className="nav-container">
-        <Link to="/top" className="nav-link">Top</Link>
-        <Link to="/new" className="nav-link">New</Link>
-        <Link to="/show" className="nav-link">Show</Link>
-        <Link to="/ask" className="nav-link">ask</Link>
-        <Link to="/job" className="nav-link">jobs</Link>
+        <NavLink to="/" className="nav-link nav-title">HN</NavLink>
+        <NavLink to="/top"  activeClassName="is-active" className="nav-link">Top</NavLink>
+        <NavLink to="/new"  activeClassName="is-active" className="nav-link">New</NavLink>
+        <NavLink to="/show" activeClassName="is-active" className="nav-link">Show</NavLink>
+        <NavLink to="/ask"  activeClassName="is-active" className="nav-link">ask</NavLink>
+        <NavLink to="/job"  activeClassName="is-active" className="nav-link">jobs</NavLink>
+        <a className="github-link" href="https://github.com/LucasZeng99/react-hackernews">with &hearts; by Lucas Zeng</a>
       </ul>
     </div>
   )

src/css/itemView.css

@@ -2,7 +2,9 @@
 
 .item-content {
     max-width: 800px;
-    margin: 0 auto;
+    margin: auto;
+    display: block;
+    overflow-x: hidden;
 }
 
 .item-head {

src/css/layout.css

@@ -34,8 +34,27 @@ body {
     margin-right: 1.8em;
     font-weight: 400;
 }
+.nav-container > a:hover {
+    text-decoration: underline;
+}
+.nav-container > a.nav-title {
+    font-weight: 800;
+    padding: 3px;
+    line-height: 16px;
+    border: 2px solid rgb(255, 252, 252);
+}
 
+.nav-container > .is-active {
+    font-weight: 600;
+}
 
+.github-link {
+    margin-left: auto;
+}
+.github-link:hover {
+    text-decoration: underline;
+    color: #222;
+}
 /* list-view > list-paginator > paginator-container
 /*           > item > ... */
 
@@ -76,4 +95,10 @@ body {
 .item {
     margin-top: 50px;
     background-color: #fff;
+}
+
+@media screen and (max-width : 560px) {
+    .github-link {
+        display: none;
+    }
 }

src/css/listView.css

@@ -42,6 +42,7 @@ a:hover {
 .li-meta {
     margin-top: 9px;
     display: flex;
+    flex-wrap: wrap;
     font-weight: 400;
     font-size: 0.9rem;
     color: #666;