LP - POST

by Dejan Munjiza

HTML

<!DOCTYPE html>
<html>
  <head>
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900|Lora|Sunflower:300,500,700" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="content">
        <div class="article">
          <div class="title">
            <h1>Lorem Ipsum Dolor Sit Amet</h1>
          </div>
          <div class="date">
            Posted on: <span>August 01, 2018.</span>
          </div>
          <div class="featured-image">
            <img src="http://clashclansonline.com/wp-content/uploads/2018/05/2560x1440-wallpaper-lovely-marmolada-mountains-italy-2560x1440-imgur-of-2560x1440-wallpaper.jpg" />
          </div>
          <div class="author">
            <div class="author-image">
              <img src="https://www.ebunch.ca/wp-content/uploads/avatar-7-300x300.png" />
            </div>
            <div class="author-info">
              <h3>Lorem Ipsum</h3>
              <span class="occupation">front-end developer</span>
            </div>
          </div>
          <div class="post">
            <p>Phasellus suscipit condimentum bibendum. Aliquam erat volutpat. Aenean odio leo, rhoncus quis dui nec, venenatis ultrices ex. Maecenas vehicula nulla leo, quis posuere odio feugiat id. Nullam lectus nulla, tristique in fermentum non, accumsan ut erat. Integer at magna leo. Vivamus consequat interdum nisi vitae malesuada. Nam placerat est velit, eu fermentum turpis sollicitudin nec.</p>
            <p>Fusce quis eros ut dolor euismod laoreet vestibulum id tellus. Donec porta, ante sed pretium feugiat, dui nisl vehicula elit, ac semper leo neque at orci. Quisque aliquam eros non erat mattis, quis dignissim sem congue. Praesent eget varius nisi. Fusce euismod sapien eu dui lacinia, vel eleifend ante dignissim. Suspendisse a ante vitae lectus dapibus tristique ac quis dui. In urna metus, tincidunt et turpis nec, tempus pretium tellus. Vestibulum molestie pellentesque tellus, a viverra justo pellentesque...

SCSS

// Variables
$gap-xs: 5px;
$gap-s: 10px;
$gap-m: 10px;
$gap-xl: 15px;
$gap-xxl: 20px;
$gap-xxxl: 30px;
$gap-xxxxl: 40px;

$color-primary: #000;
$color-secondary: #000;
$color-dark: #000;
$color-dark-lighter: rgba(0, 0, 0, 0.84);
$color-gray: #C1C1C1;

$font-family-title: 'Sunflower', sans-serif; 
$font-family-subtitle: 'Lato', sans-serif;
$font-family-common: 'Lora', serif;

$font-size-article: 20px;
$line-height-article: 1.58;
$letter-spacing-article: -.003em;
$font-weight-article: 400;

/* $box-shadow-img: 0 0 50px -10px black; */
$box-shadow-img: 0 0 0 0;

// Style
.container {
  width: 100%;
  float: left;
}

.content {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.article {
  position: relative;
  float: left;
  width: 100%;
  padding: $gap-xxl;
  box-sizing: border-box;
  .title {
    float: left;
    width: 100%;
    h1 {
      font-family: $font-family-subtitle;
      font-weight: 600;
      padding: 0;
      margin: 0;
    }
  }
  .date {
    float: left;
    width: 100%;
    padding: $gap-xl 0;
    font-family: $font-family-subtitle;
    font-weight: 100;
    margin-bottom: $gap-xxxl;
    color: $color-gray;
  }
  .featured-image {
    float: left;
    width: 100%;
    float: left;
    img {
      width: 100%;
      float: left;
      object-fit: cover;
      box-shadow: $box-shadow-img;
    }
  }
  .author {
    display: flex;
    flex-direction: row;
    align-items: center;
    float: left;
    width: 100%;
    margin: $gap-xxl 0;
    .author-image {
      float: left;
      width: 100px;
      height: 100px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }
    }
    .author-info {
      width: auto;
      float: left;
      padding: 0 0 0 35px;
      h3 {
        float: left;
        width: 100%;
        padding: 0;
        margin: 0;
        font-family: $font-family-subtitle;
        font-weight: 600;
      }
      span {
        float: left;
        width: 100%;
    ...