A Medium Style Layout

a-medium-style-layout.markdown

A Medium Style Layout

A Pen by Filip Wieland on CodePen.

License.

index.html

<div class="container">
  <article class="main">
    <aside class="post-meta">
      <div class="author-avatar"></div>
      <div class="post-info">
        <p><a href="http://www.filipwieland.com/" class="author-name">Filip Wieland</a></p>
        <p class="text-muted">Created on <strong>1st of January 2016</strong>.</p>
      </div>
    </aside>
    <h1>A Medium Style Layout</h1>
    <p>In this article, I will show that it <i>is</i> possible to create a Medium-style article with beautiful typography and <b>not</b> have it take up over a megabyte on the wire. I will include fonts and other CSS bells and whistles, but <a href="#">not a smidgen of JS</a> outside of embedded content. Because when you run something like Medium, you should be able to get all the analytics you need from your goddamned server logs.</p>
    <p>Something to add another paragraph here.</p>
    <h2>Why do I bother</h2>
    <p>I bother because for some reason Medium, the "publishing platform", is slow to load even for really simple, text-only documents. I believe the issue is that it loads unnecessary scripts that don't add to much. And they also strongly recommend using an app on mobile devices - why is this even necessary to view text files with an occasional image?</p>
    <ul>
      <li>This is a normal, unordered list. It's rendered by your browser.</li>
      <li>It means that the bullets might look a bit different in different browsers, or the margins might not <i>quite</i> match up.</li>
      <li>But this is fine, because at least I am not wasting CSS on doing my own list bullets.</li>
    </ul>
    <h2>Some other heading</h2>
    <blockquote>Someone important said this. <cite>Simone Importe-Ante</cite></blockquote>
    <h3>Recipe for total panic:</h3>
    <ol>
      <li>Cats</li>
      <li>Dogs</li>
      <li>Living together</li>
    </ol>
    <h2>Some code</h2>
    <pre>#include &lt;stdio.h>

int main(int argc, char* argv[]) {
  puts(<strong>"Hello, world!"</strong>);
  return 0;
}</pre>
    <p>I'm fine with this code rendering with different fonts on different systems.</p>
    <h2>What about images</h2>
    <p class="image-p">
      <img src="https://images.unsplash.com/photo-1449168013943-3a15804bb41c?crop=entropy&fit=crop&fm=jpg&h=550&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80" alt="A rumbling wave" />
      <span class="caption">A rumbling wave off the coast of California, presumably. <a href="https://unsplash.com/photos/n3t4fIuVzLA">Source.</a></span>
    </p>
    <h2>Conclusion</h2>
    <p>What now, Medium?</p>
  </article>
</div>

style.css

html { margin: 0; padding: 0 }
body {
  margin: 0;
  font: normal 16px/150% Merriweather, Lucida Grande, Georgia, serif;
  color: #222;
}
* { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 {
  font-family: Lato, Helvetica Neue, Arial, sans-serif;
  font-weight: 300;
  margin: 1.5em 0 0.25em;
  color: #5b5b5b;
}
h1 {
  color: #222;
  font-weight: 700;
  font-size: 2.5em;
  margin: 1em 0 0.125em;
}
h1 + p {
  margin-top: 1.75em;
}

.container {
  max-width: 700px;
  margin: 0 auto;
}

article.main {
  margin: 1em 0;
}

.post-meta {
  display: flex;
  font: 14px/125% Lato, Helvetica Neue, Arial, sans-serif;
  margin-bottom: 20px;
}
.post-info > p {
  margin: 5px 0;
}
.author-avatar {
  width: 50px;
  height: 50px;
  background: rgb(127, 127, 127);
  border-radius: 100%;
  margin-right: 1em;
}
.author-name, .author-name:link, .author-name:visited {
  font-weight: 700;
  color: #00ab6b;
  text-decoration: none;
}
.author-name:hover, .author-name:active {
  color: #1c9963;
}

p, ul > li, ol > li {
  margin: 0 0 0.75em;
}

blockquote {
  margin-left: -1em;
  margin-right: -1em;
  border-left: 4px solid #ababab;
  padding: 0.25em 0.75em;
  font-size: 150%;
}
blockquote > cite {
  display: block;
  margin-top: 1.5em;
  font-variant: italics;
  font-size: 16px;
  color: #ababab;
}

pre {
  display: block;
  padding: 0.5em;
  background-color: #ebebeb;
}

.image-p > img {
  display: block;
  max-width: 100%;
}
.image-p > .caption {
  display: block;
  width: 100%;
  font-size: 80%;
  border-bottom: 1px solid #ababab;
  color: #5b5b5b;
}

article a, article a:link {
  color: #000;
}
article a:visited {
  color: #444;
}
article a:hover, article a:active {
  color: #a0a0a0;
}