fractive
Version:
Fractive is a hypertext authoring tool, primarily intended for the creation of interactive fiction.
216 lines (211 loc) • 5.63 kB
HTML
<html>
<head>
<title><!--{title}--></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--{opengraph}-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
:root {
--main-background-color: #FAFAFA;
--main-text-color: #555555;
--sidebar-background-color: rgb(66, 53, 90);
--sidebar-text-color: rgb(30, 25, 41);
--chapter-background-color: rgb(122, 99, 167);
--chapter-text-color: rgb(36, 29, 50);
--topic-background-color: rgb(36, 29, 50);
--topic-text-color: rgb(188, 152, 255);
--code-block-background-color: rgb(19, 18, 20);
--code-block-text-color: #bababa;
--code-inline-background-color: #e9e9e9;
--code-inline-text-color: #ff0000;
--inline-text-color: #bababa;
--link-text-color: rgb(155, 101, 255);
--sidebar-link-text-color: rgb(188, 152, 255);
--link-hover-color: #FF6666;
}
/* ------------------------------------------------------------------------------------
/* Sidebar */
#__sidebarContainer {
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
overflow: auto;
background-color: var(--sidebar-background-color);
}
#__sidebar {
padding: 0px;
}
#__sidebar h1 {
width: calc(100% - 20px);
padding: 10px;
margin: 10px 0px;
background-color: var(--chapter-background-color);
color: var(--chapter-text-color);
font-size: 18pt;
font-weight: bold;
text-transform: uppercase;
}
#__sidebar h2 {
width: calc(100% - 20px);
padding: 5px 10px;
margin: 10px 0px;
background-color: var(--topic-background-color);
color: var(--topic-text-color);
font-size: 15pt;
font-weight: bold;
}
#__sidebar p {
width: calc(100% - 20px);
padding: 0px 10px;
background-color: var(--sidebar-background-color);
color: var(--sidebar-text-color);
font-size: 13pt;
}
#__sidebar a:link, #__sidebar a:visited {
color: var(--sidebar-link-text-color);
text-decoration: none;
}
#__sidebar a:active, #__sidebar a:hover {
color: var(--link-hover-color);
text-decoration: none;
}
/* ------------------------------------------------------------------------------------
/* Main section */
#__contentContainer {
position: absolute;
top: 0px;
left: 300px;
width: calc(100% - 300px);
height: 100%;
overflow: auto;
}
#__content {
max-width: 900px;
margin-left: 50px;
margin-right: 50px;
}
#__topNav * {
font-size: 13pt;
font-weight: bold;
}
#__topNav a:link, #__topNav a:visited {
color: var(--link-text-color);
text-decoration: none;
}
#__topNav a:active, #__topNav a:hover {
color: var(--link-hover-color);
text-decoration: none;
}
#__currentSection {
color: var(--main-text-color);
}
.__inlineMacro {
color: var(--inline-text-color);
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32pt;
margin-top: 28pt;
margin-bottom: 0pt;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 22pt;
margin-top: 28pt;
margin-bottom: 0pt;
font-weight: bold;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18pt;
margin-top: 28pt;
margin-bottom: 0pt;
font-weight: bold;
}
body {
background-color: var(--main-background-color);
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
line-height: 1.5em;
}
a:link, a:visited {
color: var(--link-text-color);
}
a:active, a:hover {
color: var(--link-hover-color);
}
li {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
line-height: 1.5em;
margin-left: 20px;
}
blockquote p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
font-style: italic;
line-height: 1.5em;
}
pre {
background-color: var(--code-block-background-color);
padding: 10px 20px;
max-height: 600px;
white-space: pre-wrap;
overflow-y: auto;
}
pre code {
line-height: 1.25em;
font-family: "Courier New", "Courier", monospace;
font-size: 14pt;
font-weight: bold;
background-color: var(--code-block-background-color);
color: var(--code-block-text-color);
}
code {
font-family: "Courier New", "Courier", monospace;
font-size: 12pt;
padding: 4px;
border-radius: 6px;
background-color: var(--code-inline-background-color);
color: var(--code-inline-text-color);
}
img {
margin: 20px 0px;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(var(--main-text-color), var(--main-text-color));
margin-top: 36pt;
margin-bottom: 36pt;
}
</style>
<!--{script}-->
</head>
<body>
<div id="__history" hidden>
<!-- History is included so we can have a functional back button, but we never actually show it directly -->
</div>
<div id="__sidebarContainer">
<div id="__sidebar">
<!-- Sidebar table of contents is dynamically populated from script at init time -->
</div>
</div>
<div id="__contentContainer">
<div id="__content">
<!--{story}-->
<div id="__topNav">
<p>
<!-- Don't use the default back button. Use this: -->
<a class="__topNav" href="javascript:;" onclick="Core.GotoPreviousSection();"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i> Back</a>
</p>
</div>
<div id="__currentSection"></div>
</div>
</div>
</body>
</html>