Medium article style

index.html

<div class="navbar-container">
  <div class="center-content-1040px">
    <nav class="navbar navbar-expand navbar-dark">

      <a class="navbar-brand" href="/">U</a>

        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href='https://www.medium.com'>MEDIUM</a></li>
          <li class="nav-item"><a class="nav-link" href='https://www.github.com'>GITHUB</a></li>
          <li class="nav-item"><a class="nav-link" href='#'>ABOUT</a></li>
        </ul>

      <ul class="navbar-nav ml-auto">
        <a href="https://www.github.com/ryandav">
         <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ei-sc-github.svg/240px-Ei-sc-github.svg.png" alt="github.com" class="navbar-social-icon">
        </a>
        </ul>
      </div>
    </nav>
  </div>
</div>

<div class="container center-content-740px mt-4 mb-4">
  <div class="row">

    <div class="ml-3 w-60 d-flex align-items-center">
      <img src="https://cdn-images-1.medium.com/max/350/1*i10UgUx7cDMZelll8OhIJA@2x.png"
           class="avatar-60px align-middle">
    </div>

    <div class="col">

      <div class="text-small text-small-black">
        <a href="/">
          User name
        </a>
      </div>

      <div class="text-small text-light-grey truncate-line-2">
        Software Developer and  Medium fan.
      </div>

      <div class="text-small text-light-grey truncate-line-1">
        <a href="#">
          Github.com/username
        </a>
        <span>&middot;</span>
        <a href="#">
          Twitter.com/@username
        </a>
      </div>

    </div>
  </div>
</div>

<div class="container center-content-740px mb-4">
  <h1>Your styled webpage</h1>
  <p>You can use this HTML and CSS to style to your webpage with the look and feel of a Medium article,
     and then extend it by adding your own brand and personality to your website.  
  </p>
</div>

medium-article-style.markdown

Medium article style

A Pen by Less on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>

style.scss

$primary-color: #006400;
$primary-foreground-color: white;

$body-font-size: 20px;
$body-line-height: 180%;

$font-light: gray;
$opacity-translucent: 0.8;

$font-small: 14px;
$font-large: 32px;

$font-small-single-line-height: 20px;
$font-small-double-line-height: 40px;

$header-height: 80px;

$avatar-size: 60px;

@import url("https://fonts.googleapis.com/css?family=Lora|Open+Sans:400,900|Playfair+Display:900");

p,
ul,
li {
  font-family: "Lora", serif;
  font-size: $body-font-size;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans";
  font-weight: 900;
  margin-bottom: 20px !important;
}

.nav-link {
  font-family: "Open Sans", sans-serif;
}

.navbar-container {
  background-color: $primary-color;
  color: $primary-foreground-color;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.35);
}

.navbar-brand {
  color: $primary-color !important;
  background-color: $primary-foreground-color;
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  width: 42px;
  height: 42px;
  text-align: center;
  line-height: 100%;
  white-space: nowrap;
  opacity: 0.9;
}

.dropdown-toggle::after {
    display:none;
}

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

.center-content-740px {
  max-width: 740px;
  margin: 0 auto;
}

body {
  min-width: 320px !important;
}

.navbar-social-icon {
  filter: invert(100%);
  width: 60px;
}

.header-avatar {
  vertical-align: middle;
}

.avatar-60px {
  width: $avatar-size;
  height: $avatar-size;
  border-radius: 50%;
  background-color: black;
  border: 2px solid black;
  vertical-align: middle;
}

.truncate-line-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  height: $font-small-single-line-height;
}

.truncate-line-2 {
  overflow: hidden;
  display: -webkit-box;
  // -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  // height: $font-small-double-line-height;
}

.text-small {
  font-size: $font-small;
  font-weight: normal;
  text-decoration: none;
}

.text-small > a {
  color: $font-light;
  text-decoration: none;
}

.text-small > a:hover {
  color: black;
  text-decoration: none;
}

.text-small-black > a {
  color: black;
  text-decoration: none;
}

.text-small-black > a:hover {
  color: black;
  text-decoration: underline;
}

.text-light-grey {
  color: $font-light;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />