Book Layout // CSS Grid // Flexbox // WIP

book-layout-css-grid-flexbox-wip.markdown

Book Layout // CSS Grid // Flexbox // WIP

Image Credit: https://www.pexels.com/photo/night-building-forest-trees-42263/

Goal: Convert this into a Vue.js component.

A Pen by Andrew Bennett on CodePen.

License.

index.html

<div class="book"> 

  <div class="content">
    <div class="page-header">
      <h1 class="chapter-title">Deep in the Woods</h1>
      <h6 class="chapter-number">Chapter 4</h6>
    </div>
    <div class="story-content">
      <p><span class="first-letter">L</span>orem ipsum dolor sit amet consectetur, adipisicing elit. Libero ex obcaecati error possimus sed! Explicabo harum quae iusto quod quisquam ullam mollitia eum praesentium ea nostrum nihil, suscipit provident molestiae
        soluta quo vitae accusantium Iure dolor ducimus quis totam sint? Possimus quae nisi sit porro in amet voluptates quo vitae. Facilis, consequatur architecto quod tempora. accusantium Iure dolor ducimus quis totam sint? Possimus quae nisi sit porro
        in amet voluptates quo vitae. Facilis, consequatur.</p>
      <p>Asperiores provident ad cumque adipisci voluptate perspiciatis. Sint aspernatur sapiente alias modi velit, quos ad sit maiores recusandae obcaecati! Sunt alias necessitatibus repellendus perferendis aperiam.</p>
    </div>
  </div>

  <div class="image-content">
    <div class="image"></div>
  </div>

  <div class="controls">
    <div class="chapter-selector">Select Chapter</div>
    <ul class="pagination">
      <li>Previous</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>...</li>
      <li>Next</li>
    </ul>
  </div>

</div>  

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

// BASE STYLES
* {
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: white;
  font-size: 16px;
}

body {
  font-family: "Roboto", sans-serif;
  color: #555;
  background-color: #222;
  position: relative;
  min-height: 100vh;
  padding: 1rem;
}

img {
  max-width: 100%;
}

a {
  color: #f6b352;
  text-decoration: none;
}

p {
  margin-bottom: 1rem;

  &::selection {
    background-color: #e2b648;
    color: #222;
  }

  &:last-child {
    margin: 0;
  }
}

// DEMO STYLES
.book {
  display: grid;
  height: calc(100vh - 2rem);
  grid-template-columns: minmax(400px, 40%) 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: 
    "content image" 
    "controls controls";
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 5px 8px 6px rgba(0, 0, 0, 0.2);

  .content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    background-color: #fff9ea;
    padding: 1.6rem;

    h1.chapter-title {
      font-family: "Bitter";
      font-weight: 700;
      font-size: 1.5rem;
      margin-bottom: 0.6rem;
    }

    h6.chapter-number {
      font-size: 0.8rem;
      color: #aaa;
    }

    .story-content {
      line-height: 1.5;
      font-size: 1.1rem;
      font-family: "Droid+Serif";

      .first-letter {
        font-size: 200%;
        line-height: 1;
      }
    }
  }

  .image-content {
    grid-area: image;
    overflow: hidden;
    background-color: #000;

    .image {
      height: 100%;
      width: 100%;
      background-image: url("https://static.pexels.com/photos/42263/foggy-mist-forest-trees-42263.jpeg");
      background-size: cover;
      background-position: top center;
      -webkit-filter: blur(0);
      transform: scale(1);
      -webkit-animation: image-reveal 0.6s ease;
    }
  }

  .controls {
    grid-area: controls;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background-color: #111;

    .chapter-selector {
      flex: 0 0 auto;

      &:after {
        content: "|";
        padding-left: 10px;
        color: #262626;
      }

      &:hover {
        color: #999;
        cursor: pointer;

        &:after {
          color: #555;
        }
      }
    }

    ul.pagination {
      display: flex;

      li {
        padding: 0 10px;
        transition: color 0.125s;

        &:last-child {
          padding-right: 0;
        }

        &:hover {
          color: #999;
          cursor: pointer;
        }
      }
    }
  }
}

@-webkit-keyframes image-reveal {
  0% {
    -webkit-filter: blur(16px);
    transform: scale(0.8);
  }
  100% {
    -webkit-filter: blur(0);
    transform: scale(1);
  }
}