Final style updates

Author: udyux

src/components/BlogFeed.vue

@@ -2,9 +2,7 @@
  <transition-group tag="ul" class="blog__feed" name="preview">
  <li v-for="post in feed" :class="classes" :key="post.id">
  <router-link :to="`/read/${post.id}`">
- <figure class="preview__figure">
- <img :src="post.image"/>
-
+ <figure class="preview__figure" :style="bgImg(post.image)">
  <transition name="fade">
  <figcaption v-if="!reading" class="preview__title">{{ post.title }}</figcaption>
  </transition>
@@ -76,7 +74,10 @@ export default {
  methods: {
  scrollTo,
  kebabify,
- prettyDate
+ prettyDate,
+ bgImg(src) {
+ return { backgroundImage: `url(${src})` }
+ }
  },
 
  beforeMount() {

src/sass/base/_text.scss

@@ -32,6 +32,10 @@
  @extend %ff--500;
  font-size: 3.6vw;
  text-transform: capitalize;
+
+ @media only screen and (min-width: 1440px) {
+ font-size: 3.25rem;
+ }
 }
 
 %txt--title {

src/sass/blocks/_blog.scss

@@ -1,12 +1,15 @@
 .blog {
  position: relative;
  min-height: 100vh;
+ max-width: 1440px;
+ margin: 0 auto;
  padding: 7.5rem 5.5rem 0 4rem;
 
  &__feed {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
+ padding-bottom: 5.5vw;
  }
 
  &__post {

src/sass/blocks/_nav.scss

@@ -47,7 +47,7 @@
  top: 50%;
  right: 100%;
  transform: translate3d(-25%, -50%, 0);
- font-size: 1.2rem;
+ font-size: 1.25rem;
  width: 1em;
  height: 1em;
  box-shadow: inset 0 0 0 0 cc(primary);
@@ -62,19 +62,19 @@
  top: 50%;
  left: 50%;
  width: 10%;
- height: 75%;
+ height: 70%;
  background-color: cc(bg);
  transition: transform 225ms cb();
 	}
 
- &::before { transform: translate3d(-55%, -55%, 0) rotate(-45deg) scaleY(0) }
- &::after { transform: translate3d(-55%, -55%, 0) rotate(45deg) scaleY(0) }
+ &::before { transform: translate3d(-50%, -50%, 0) rotate(-45deg) scaleY(0) }
+ &::after { transform: translate3d(-50%, -50%, 0) rotate(45deg) scaleY(0) }
  }
 
  &:hover &--icon {
  box-shadow: inset 0 0 0 1.1em cc(primary);
- &::before { transform: translate3d(-55%, -55%, 0) rotate(-45deg) scaleY(1) }
- &::after { transform: translate3d(-55%, -55%, 0) rotate(45deg) scaleY(1) }
+ &::before { transform: translate3d(-50%, -50%, 0) rotate(-45deg) scaleY(1) }
+ &::after { transform: translate3d(-50%, -50%, 0) rotate(45deg) scaleY(1) }
  }
  }
 }

src/sass/blocks/_preview.scss

@@ -1,6 +1,5 @@
 .preview {
  position: relative;
- min-height: calc(100vw / 3);
  z-index: 0;
  @include imagePlaceholder;
 
@@ -25,6 +24,8 @@
 
  &__figure {
  position: relative;
+ padding-top: 140%;
+ @include bgCover;
 
  &::before {
  content: '';