Skip to content

Instantly share code, notes, and snippets.

@DrGo

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

Created September 13, 2022 17:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DrGo/03cdae581c0e4f7c5cf9c72190907c78 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DrGo/03cdae581c0e4f7c5cf9c72190907c78 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. DrGo created this gist Sep 13, 2022.
    11 changes: 11 additions & 0 deletions book-layout-css-grid-flexbox-wip.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    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](https://codepen.io/helloandyb/pen/QqpEqx) by [Andrew Bennett](https://codepen.io/helloandyb) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/QqpEqx).
    35 changes: 35 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    <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>
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    170 changes: 170 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,170 @@
    // 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);
    }
    }