My Site

by Sam Fereday

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css">
<div class="container float-left">
  <div class="row">

    <header class="column column-33">
      <div class="sticky-header">
        <h2 class="heading">
          Site Title
          <span class="sub-title">
            Site title description
          </span>
        </h2>
        <nav>
          <ul>
            <li><a href="#">// Archive</a></li>
            <li><a href="#">// Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="column column-66 posts">

      <!-- Post start -->
      <div class="post">
        <img src="http://icanbecreative.com/resources/files/articles/40-high-resolution-wallpapers-for-minimalist-lovers/sources/flying-turtle.png" />
        <h4>
      Title
      <span>21/11/2090</span>
      </h4>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
        <pre><code>
.milligram {
  color: #9b4dca;
}
</code></pre>
        <p>
          <a href="#">
        Read &gt;
      </a>
        </p>
        <hr />
      </div>
      <!-- Post end -->

      <!-- Post start -->
      <div class="post">
        <img src="http://icanbecreative.com/resources/files/articles/40-high-resolution-wallpapers-for-minimalist-lovers/sources/flying-turtle.png" />
        <h4>
      Title
      <span>21/11/2090</span>
      </h4>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to...

SCSS

// https://cdnjs.com/libraries/milligram
$brand: #880000;
$brandlight: #990000;
$white: #fff;
$grey: #ccc;
$greydark: #222;

body {
  margin: 0;
  padding: 0;
  background: $white;
}

.heading {
  width: 100%;
  padding: 3em 0 1em;
  margin-bottom: 0.5em;
  float: left;
  border-bottom: 1px solid $grey;
}

.sticky-header {
  position: fixed;
  top: 0;
}

nav {
  float: left;
  ul {
    list-style: none;
    padding: 0;
    margin: 1.5em 0 0;
  }
  li {
    padding: 0;
    margin: 0;
  }
  a {
    padding-right: 2em;
    display: block;
    color: $brand;
    transition: all 0.2s ease;
    &:hover {
      color: $brandlight;
    }
  }
}

h2 span {
  display: block;
  font-size: 0.5em;
}

h4 span {
  display: block;
  font-size: 0.6em;
}

.post a {
  color: $brandlight;
  font-size: 0.9em;
  border-bottom: 1px dotted $brandlight;
}

.posts {
  padding-top: 2em;
  pre {
    border-color: $brand;
  }
}

footer {
  text-align: center;
  padding-top: 1em;
  font-size: 0.8em;
}

JavaScript

// http://macyjs.com/