Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Book Layout // CSS Grid // Flexbox // WIP
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
// 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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment