style page, grid progress

src/components/Pagination.js

@@ -6,22 +6,16 @@ const Pagination = ({ pageContext, pathPrefix }) => {
 
   return (
     <nav className="pagination" role="navigation">
-      <div className="navbar navbar-menu">
-        {previousPagePath && (
-          <div className="navbar-item">
-            <Link to={previousPagePath} rel="prev">
-              Previous
-            </Link>
-          </div>
-        )}
-        {nextPagePath && (
-          <div className="navbar-item">
-            <Link to={nextPagePath} rel="next">
-              Next
-            </Link>
-          </div>
-        )}
-      </div>
+      {previousPagePath && (
+        <Link to={previousPagePath} rel="prev">
+          &larr; Forrige
+        </Link>
+      )}
+      {nextPagePath && (
+        <Link to={nextPagePath} rel="next">
+          Neste &rarr;
+        </Link>
+      )}
     </nav>
   )
 }

src/css/base.scss

@@ -46,7 +46,7 @@ a {
 }
 
 p {
-  max-width: 32rem;
+  max-width: $width-s;
   margin: 0 auto 2rem;
 }
 
@@ -69,8 +69,19 @@ h3 {
 
 img {
   max-width: 100%;
+  height: auto;
 }
 
-.section-title {
-  margin-bottom: 1.6rem;
+.table-wrap {
+  max-width: 100%;
+  overflow: scroll;
+
+  line-height: 1.3;
+
+  table, td, th {
+    border: 1px solid black;
+  }
+  td, th {
+    padding: 0.6rem 0.8rem;
+  }
 }

src/css/blog.scss

@@ -1,5 +1,6 @@
 .blog {
   background: $color-yellow;
+  padding-bottom: 1rem;
 }
 
 .post-list {
@@ -8,7 +9,7 @@
 }
 
 .post {
-  width: 26rem;
+  width: $width-xs;
   padding: 1.2rem;
   margin: 0 1rem 1rem 0;
 
@@ -31,6 +32,29 @@
     font-size: 0.8rem;
     margin-bottom: 1rem;
   }
+
+  &-content {
+    max-width: $width-m;
+    margin: 0 auto;
+
+    img, div {
+      max-width: 100%;
+    }
+
+    ul {
+      max-width: $width-s;
+      margin: 0 auto 1rem;
+    }
+
+    ul, p {
+      margin: 0 auto 1.6rem;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      max-width: $width-s;
+      margin-top: 3.6rem;
+    }
+  }
 }
 
 .read-more {
@@ -47,4 +71,49 @@
     background: $color-yellow;
     color: $color-black;
   }
+}
+
+.pagination {
+  text-align: center;
+  background: $color-yellow;
+  padding-bottom: 3rem;
+  a {
+    display: inline-block;
+    padding: 0.3rem 1rem;
+    background: $color-black;
+    color: $color-orange;
+    text-decoration: none;
+    border-radius: 10rem;
+    margin-right: 0.6rem;
+
+    &:hover {
+      background: $color-orange;
+      color: $color-black;
+    }
+  }
+}
+
+.post-page {
+  .section-title {
+    font-size: 4rem;
+    line-height: 1.14;
+  }
+  .post-meta, .section-title {
+    max-width: $width-l;
+    margin: 0 auto 1rem;
+  }
+  .post-meta {
+    p {
+      margin-left: 0;
+    }
+  }
+}
+
+.wp-caption {
+  max-width: 100%;
+  margin-bottom: 3rem;
+
+  &-text {
+    font-size: 0.8rem;
+  }
 }

src/css/main.scss

@@ -4,4 +4,5 @@
 @import 'base.scss';
 
 @import 'header.scss';
-@import 'blog.scss';
+@import 'blog.scss';
+@import 'page.scss';

src/css/page.scss

@@ -0,0 +1,29 @@
+.section-title {
+  margin-bottom: 1.6rem;
+  font-weight: 900;
+}
+
+.page {
+  &-content {
+    max-width: $width-m;
+    margin: 0 auto;
+
+    img, div {
+      max-width: 100%;
+    }
+
+    ul {
+      max-width: $width-s;
+      margin: 0 auto 1rem;
+    }
+
+    ul, p {
+      margin: 0 auto 1.6rem;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      max-width: $width-s;
+      margin-top: 3.6rem;
+    }
+  }
+}

src/css/variables.scss

@@ -11,4 +11,9 @@ $color-white: #FAFAFA;
 $color-background: $color-black;
 $color-text: $color-white;
 $color-link: $color-orange;
-$color-hover: $color-yellow;
+$color-hover: $color-yellow;
+
+$width-xs: 24rem;
+$width-s: 32rem;
+$width-m: 42rem;
+$width-l: 54rem;

src/templates/page.js

@@ -8,7 +8,7 @@ export const PageTemplate = ({ title, content }) => {
     <section className="page">
       <h1 className="section-title">{title}</h1>
       <div
-        className="content"
+        className="page-content"
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </section>

src/templates/post.js

@@ -23,7 +23,7 @@ export const BlogPostTemplate = ({
           <Link to={`/author/${author.slug}`}>{author.name}</Link>
         </p>
       </div>
-      <div dangerouslySetInnerHTML={{ __html: content }} />
+      <div className="post-content" dangerouslySetInnerHTML={{ __html: content }} />
         {categories && categories.length ? (
           <div>
             <h4>Categories</h4>