💄 Updating the UI and style files.

_sass/bangsring/_page.scss

@@ -0,0 +1,235 @@
+.wrapper.post {
+  max-width: -webkit-calc(#{660px} - (#{$spacing-unit} * 2));
+  max-width: calc(#{660px} - (#{$spacing-unit} * 2));
+
+  @include media-query($on-mobile) {
+    padding-left: $spacing-unit - 10;
+    padding-right: $spacing-unit - 10;
+  }
+}
+
+/**
+ * Post title
+ */
+.header {
+  margin-top: 125px;
+
+  .header-title {
+    text-align: center;
+    font-size: 2em;
+    font-family: $first-font-family;
+    line-height: 1.2;
+    font-weight: 700;
+    color: $black;
+    margin-bottom: 20px;
+
+    @include media-query($on-mobile) {
+      font-size: 1.9em;
+    }
+  }
+}
+
+/**
+ * Post meta 
+ */
+.post-meta {
+  font-family: $first-font-family;
+  text-align: center;
+  font-size: $small-font-size;
+  margin-bottom: 5em;
+  padding-top: 3px;
+  line-height: 1.3;
+
+  time {
+    color: $gray;
+    position: relative;
+    margin-right: 24px;
+
+    &::after {
+      background: $light;
+      bottom: 1px;
+      content: " ";
+      display: block;
+      height: 2px;
+      position: absolute;
+      right: -20px;
+      width: 12px;
+    }
+  }
+
+  span[itemprop="author"] {
+    color: $gray;
+    border-bottom: 1px dotted $light;
+  }
+
+  .tags {
+    max-width: 200px;
+    margin: 27px auto 0 auto;
+
+    .tag {
+      color: $gray;
+      line-height: 1;
+      font-weight: 800;
+      display: inline-block;
+      font-size: $small-font-size - 4;
+      border-bottom: 0;
+
+      &:hover {
+        color: $black;
+        border-color: $black;
+      }
+    }
+  }
+}
+
+/**
+ * Post content
+ */
+.page-content {
+  font-size: 1em;
+  color: $gray;
+  padding-top: 8px;
+
+  iframe {
+    text-align: center;
+  }
+
+  figure {
+    margin: auto -2em;
+
+    img {
+      border-radius: 2px;
+    }
+
+    figcaption {
+      margin-top: 5px;
+      font-style: italic;
+      font-size: 15px;
+    }
+  }
+
+  >p {
+    margin: 0;
+    padding-top: $spacing-unit - 15;
+    padding-bottom: $spacing-unit - 15;
+  }
+
+  ul.task-list {
+    list-style: none;
+    margin: 0;
+
+    li input[type="checkbox"] {
+      margin-right: 10px;
+    }
+  }
+
+  dl dt {
+    font-weight: 700;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: $first-font-family;
+    color: $black;
+    font-weight: 700;
+    margin-top: $spacing-unit;
+    margin-bottom: 0;
+  }
+
+  h1 {
+    @include relative-font-size(1.75);
+  }
+
+  h2 {
+    @include relative-font-size(1.563);
+  }
+
+  h3 {
+    @include relative-font-size(1.438);
+    border-bottom: 1px solid $light;
+    padding-bottom: 4px;
+  }
+
+  h4 {
+    @include relative-font-size(1.188);
+  }
+
+  h5 {
+    @include relative-font-size(1);
+  }
+
+  h6 {
+    @include relative-font-size(0.875);
+  }
+}
+
+hr {
+  border-bottom: 0;
+  border-style: solid;
+  border-color: $light;
+}
+
+.post-nav {
+  font-family: $first-font-family;
+  font-size: $small-font-size;
+  display: flex;
+  position: relative;
+  margin-top: 5em;
+  border-top: 1px solid $light;
+  line-height: 1.4;
+
+  .post-nav-item {
+    border-bottom: 0;
+    font-weight: 800;
+    padding-bottom: 10px;
+
+    &:hover,
+    &:focus {
+      h4 {
+        color: $blue;
+      }
+    }
+
+    h4 {
+      color: $gray;
+      font-size: $small-font-size;
+      margin: 0;
+    }
+
+    width: 50%;
+    padding-top: 10px;
+    text-decoration: none;
+    box-sizing: border-box;
+
+    &:nth-child(odd) {
+      padding-left: 0;
+      padding-right: 20px;
+    }
+
+    &:nth-child(even) {
+      text-align: right;
+      padding-right: 0;
+      padding-left: 20px;
+    }
+  }
+
+  @include media-query($on-mobile) {
+    display: block;
+    font-size: $small-font-size;
+
+    .post-nav-item {
+      display: block;
+      width: 100%;
+    }
+
+    .post-nav-item:nth-child(even) {
+      border-left: 0;
+      padding-left: 0;
+      border-top: 1px solid $light;
+    }
+  }
+}