<!--
I designed my blog based on this layout: http://www.ykst.de/
some tweaks are added. 

blog post about this design(in Japanese) :
http://www.ykst.de/blog-new-layout/
-->
<header>
    <h3 class="site-title">Site Title</h3>
    <ul>
      <li>Blog</li>
      <li>Work</li>
      <li>About</li>
    </ul>
 </header>
 <section>
    <article>
      <div class="article-wrapper">
        <div class="blog-label">
        <div class="home-label">
        <h4 class="home-label-title">BLOG</h4>
        </div>
        </div>
        <div class="blog-list-home">
          <div class="blog-thumbnail">
            <div class="thumbnail-frame">

            </div>
          </div>
          <div class="blog-list-content">
            <h4>Blog Title Sample</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam, vero facilis sint dolorem numquam veniam consequuntur repudiandae pariatur ipsa.
          </div>

        </div>
        <div class="blog-list-home">
          <div class="blog-thumbnail">
           <div class="thumbnail-frame">

           </div>
          </div>
          <div class="blog-list-content">
            <h4>Blog Title Sample</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam, vero facilis sint dolorem numquam veniam consequuntur repudiandae pariatur ipsa.
          </div>

        </div>
        <div class="blog-list-home">
          <div class="blog-thumbnail">
            <div class="thumbnail-frame">

            </div>
          </div>
          <div class="blog-list-content">
            <h4>Blog Title Sample</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam, vero facilis sint dolorem numquam veniam consequuntur repudiandae pariatur ipsa.
          </div>

        </div>
        <div class="blog-list-home">
          <div class="blog-thumbnail">
            <div class="thumbnail-frame">

            </div>
          </div>
          <div class="blog-list-content">
            <h4>Blog Title Sample</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam, vero facilis sint dolorem numquam veniam consequuntur repudiandae pariatur ipsa.
          </div>

        </div>
        <div class="blog-list-home">
          <div class="blog-thumbnail">
            <div class="thumbnail-frame">

            </div>
          </div>
          <div class="blog-list-content">
            <h4>Blog Title Sample</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam, vero facilis sint dolorem numquam veniam consequuntur repudiandae pariatur ipsa.
          </div>

        </div>
      </div>

      </div>
    </article>
    <aside>
      <div class="aside-about">
        <div class="home-label aside-label">
          <h4 class="home-label-title">ABOUT</h4>
        </div>
        <div class="aside-content-home">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum nam neque non rem rerum ipsa in doloremque aspernatur eius iste, cupiditate repudiandae, quis laboriosam ipsam, architecto sed dolorem quos enim optio eveniet dignissimos aliquam temporibus? Laboriosam ipsa veritatis nemo ab.
        </div>
      </div>
      <div class="aside-work">
        <div class="home-label aside-label">
          <h4 class="home-label-title">WORK</h4>
        </div>
        <div class="aside-content-home">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum nam neque non rem rerum ipsa in doloremque aspernatur eius iste, cupiditate repudiandae, quis laboriosam ipsam, architecto sed dolorem quos enim optio eveniet dignissimos aliquam temporibus? Laboriosam ipsa veritatis nemo ab.
        </div>
      </div>
    </aside>
 </section>
 <footer>
    footer
 </footer>
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body * {
  box-sizing: border-box;
}

/*
  ======  550px ======
*/

@media (min-width: 550px) {
/*
 this is to apply flexbox to header and section when the window width is more than 550px.
  */
header {
  display: flex;
  }

section {
	display: flex;
  }
}

header {
  height: 45px;
  border-bottom: 1px solid #eee;
}

header h3 {
  flex: 3;
  margin-left: 30px;
  margin-top: 15px;
}

header ul {
  flex: 1;
}

header li{
  display: inline-block;
  margin-left: 15px;
  font-size: 0.9rem;
}


article {
  flex-basis: 70%;
  border: 1px solid #F8F8F8;
}

aside {
  flex-basis: 30%;
  background: #F8F8F8;
  padding: 10px;
}

footer {
  height: 200px;
  background: #888;
  color: #fff;
  text-align: center;
  padding-top: 20px;
}



.article-wrapper {
  width: 90%;
  background: #eee;
  margin: 0 auto;
}

.home-label {
  border-bottom: 1px #333 solid;
}

.aside-label {
  width: 90%;
}

.home-label-title {
  display: inline-block;
  background: #333;
  color: #fff;
  margin-bottom: 0;
  padding: 8px 15px 3px 15px;
  border-radius: 5px 5px 0 0;
  font-weight: 200;
  font-size: 0.9rem;
}


.blog-list-home {
  display: flex;
  flex-direction: row;
  border-bottom: solid 1px #B8B8B8;
}

.blog-thumbnail {
  flex-basis: 30%;
  background: #ccc;
  padding: 15px;
}

.thumbnail-frame {
  width: 130px;
  background: #eee;
  height: 80px;
  display: block;
}

.blog-list-content {
  flex-basis:  70%;
  background: #F0F0F0;
  line-height: 1.2rem;
  color: #303030;
  font-size: 0.9rem;
  padding: 8px;
}

.blog-list-content h4 {
  font-size: 1.2rem;
  margin: 10px 0;
}

.aside-content-home {
  padding: 10px;
  line-height: 1.2rem;
  color: #303030;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.