fix(css): Typography and layout

common/app/helperComponents/SlimWidthRow.js

@@ -5,7 +5,7 @@ import { Row, Col } from 'react-bootstrap';
 function SlimWidthRow({ children, ...restProps }) {
   return (
     <Row {...restProps}>
-      <Col md={ 4 } mdOffset={ 4 } sm={ 12 }>
+      <Col md={ 6 } mdOffset={ 3 } sm={ 12 }>
         { children }
       </Col>
     </Row>

news/NewsApp.js

@@ -13,11 +13,33 @@ const styles = `
 .app-layout li,
 .app-layout a,
 .app-layout span {
-  font-size: 18px;
+  font-size: 21.5px;
 }
 .app-layout hr {
   background-image: linear-gradient(to right, rgba(0, 100, 0, 0), rgba(0, 100, 0, 0.75), rgba(0, 100, 0, 0));
 }
+
+.app-layout p {
+  paddin-top: 8px;
+}
+
+ .app-layout h1, .app-layout h2, .app-layout h3, .app-layout h4, .app-layout h5, .app-layout h6
+ {
+   padding-top: 35px;
+   padding-bottom: 0px;
+ }
+
+.app-layout h1 {
+  font-size: 42px;
+}
+
+.app-layout h2 {
+  font-size: 34px;
+}
+
+.app-layout h3 {
+  font-size: 32px;
+}
 `;
 /* eslint-enable max-len */
 function NewsApp() {

news/routes/Show/Show.js

@@ -13,6 +13,9 @@ const propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func.isRequired
   }),
+  location: PropTypes.shape({
+    state: PropTypes.object
+  }),
   match: PropTypes.shape({
     params: PropTypes.shape({
       username: PropTypes.string,
@@ -29,17 +32,6 @@ const youtubeOpts = {
 };
 
 const styles = `
-  article figure {
-    width: calc(100vw - 30px);
-    position: relative;
-    left: 50%;
-    right: 50%;
-    margin-left: -50vw;
-    margin-right: -50vw;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
 
   .feature-image-wrapper {
     padding-top: 32px;
@@ -91,6 +83,7 @@ class ShowArticle extends Component {
     }
     if (article) {
       const [, shortId] = slug.split('--');
+      /* eslint-disable react/no-did-mount-set-state */
       return this.setState(
         {
           fetchState: {

news/routes/Show/components/Author.js

@@ -21,12 +21,16 @@ const styles = `
   .author-bio {
     display: flex;
     flex-direction: column;
-    margin-left: 10px;
+    margin-left: 30px;
   }
 
   .author-bio span {
     font-size: 16px;
   }
+
+  .author-block {
+    text-decoration: none;
+  }
 `;
 
 function Author({ author: { name, avatar, bio } }) {
@@ -38,7 +42,7 @@ function Author({ author: { name, avatar, bio } }) {
       <img height='50px' src={avatar} />
       <div className='author-bio'>
         <a href='https://www.freecodecamp.org/quincylarson'>
-          <span>{name}</span>
+          <span>By {name}</span>
         </a>
         <span>{bio.slice(0, 101)}</span>
       </div>