tesscodes | Story Time: Chapter-Based Reader

LIVE PREVIEW

Information

Hey guys! I've still got some layouts to post for the month, but for the last code of the month we've fot a fun HTML page! This page is great for thread logs, fanfics, original stories, or even game info if you reword things a little!

You can easily add images to any part of this code if you want them added to your table of contents, above chapter titles, or if you have art to accompany your writing.

This page is very easy to edit and has just enough in all the right places to personalize this to your story's content. I've also added super easy instructions for deleting the splash title header and the menu, just in case you want to use this code but don't really need one or either of those elements. Enjoy, and I hope you're all having a wonderful holiday season! ♥

The Coding

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Title Here</title>
	<link rel="shortcut icon" href="ICOURL" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<style>

/*-- STORY TIME - TESSISAMESS - 2017 --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* GENERAL */

::selection{background:#ccc;}
::-moz-selection{background:#ccc;}

@font-face{font-family:Jetamie;src:url(https://dl.dropbox.com/s/ls7jvrk6jt8o8rt/Je-Taime.otf);}

body{margin:0;padding:0;background:#eee url(https://i.imgur.com/mD4wsu8.png)center fixed repeat;font-family:Open Sans,helvetica,arial,sans-serif;font-size:14px;color:#111;}

a{font-weight:bold;color:#000;text-decoration:none;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
a:hover{opacity:0.5;}

h1,h2,h3{color:#000;text-align:center;text-transform:uppercase;font-family:;}

/* TABLE OF CONTENTS */

#contents{position:fixed;left:-292px;top:10px;background:#fff;border:1px solid rgba(0,0,0,0.1);padding:20px;width:250px;border-radius:0 6px 6px 0;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}

#contents:hover{left:0;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.2);}

#contents:after{content:'';display:block;position:absolute;top:8px;left:290px;width:40px;height:40px;text-align:center;background:#fff url(https://i.imgur.com/YH2wF13.png)center no-repeat;background-size:20px;border:1px solid rgba(0,0,0,0.1);border-left:none;border-radius:0 6px 6px 0;box-shadow:2px 1px 3px 0 rgba(0,0,0,0.2);}

#contents img{max-width:100%;}
#contents h3{font-size:12px;letter-spacing:1px;}
#contents a{display:block;padding:7px;border-bottom:1px solid rgba(0,0,0,0.1);}
#contents a:last-of-type{border:none;padding-bottom:0;}

/* TITLE CARD */

#title{height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;font-size:100px;font-family:Jetamie;}
#title-inner{width:100%;}

/* WHOLE CONTAINER */

#container-outer{margin:50px;}
#container{max-width:650px;margin:0 auto;padding:100px;background:#fbfbfb;border:1px solid rgba(0,0,0,0.1);line-height:190%;font-size:15px;color:#111;text-align:justify;}

#container img{max-width:100%;}
#container h2:first-of-type{margin-top:0;padding-top:0;border-top:none;}
#container h2{margin-top:100px;padding-top:100px;border-top:1px solid rgba(0,0,0,0.1);}

/* CREDIT - LEAVE THIS */

#credit{position:fixed;right:-83px;width:102px;bottom:15px;background:#fff;border:1px solid rgba(0,0,0,0.1);padding:5px;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.2);font-weight:normal;font-size:10px;letter-spacing:1px;line-height:16px;height:16px;}
#credit:hover{right:-1px;opacity:1;}
#credit span{font-size:16px;font-weight:bold;display:block;float:left;padding:0 5px;margin-right:1px;}

</style>

</head>

<body>

<aside id="contents">
	<h3>Table of Contents</h3>
		<a href="#1">Chapter 1</a>
		<a href="#2">Chapter 2</a>
		<a href="#3">Chapter 3</a>
		<a href="#4">Chapter 4</a>
		<a href="#5">Chapter 5</a>
</aside>

<header id="title">
	<div id="title-inner">
		Title/Header Content Here
	</div>
</header>

<h2 id="1">Chapter One</h2>

Content here

<h2 id="2">Chapter Two</h2>

Content here

<h2 id="3">Chapter Three</h2>

Content here

<h2 id="4">Chapter Four</h2>

Content here

<h2 id="5">Chapter Five</h2>

Content here

</article>
</article>

</body>
</html>

Installation Guide

Paste into a custom style (or off-site equivalent if you don't have a paid account) and fill in the following!

Title Here - Page title
ICOURL - Page icon
Title/Header Content Here - Header title (can also be an image, multiple titles, or a combination of)
Chapter 1 through Chapter 5 - Menu chapter links
Chapter One through Chapter Five - Page chapter titles
Content here (x5) - Each chapter's body text

*Make sure to keep track of your anchor links. Each menu link has a #number for the a href and each chapter header has the same number for its id. For example the link for chapter one is a href="1" and the id for the corresponding chapter header is h2 id="1".

This enables the links to skip through the page to the correct sections. You can retitle these to anything you like as long as the link and the corresponding header have the same href and name to link them together.

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

Jetamie - Title font
Open Sans,helvetica,arial,sans-serif - Page text

IMAGES

https://i.imgur.com/mD4wsu8.png - Page background; add background-size:cover; to the body specs for a fullsize image

TO DELETE SPLASH HEADER

<header id="title">
	<div id="title-inner">
		Title/Header Content Here
	</div>
</header>

TO DELETE MENU

<aside id="contents">
	<h3>Table of Contents</h3>
		<a href="#1">Chapter 1</a>
		<a href="#2">Chapter 2</a>
		<a href="#3">Chapter 3</a>
		<a href="#4">Chapter 4</a>
		<a href="#5">Chapter 5</a>
</aside>

COLORS

#fff - Menu and credit background
#fbfbfb - Main content background
#eee - Page background
#ccc - Selection/highlight background
#111 - Overall text
#000 - Links and headers (change this for a bolder accent color)
0,0,0 - All borders and box shadows (semi-transparent rgba value)

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!