|
@@ -23,11 +23,27 @@
|
|
|
.main {
|
|
|
width: 80%;
|
|
|
text-align: justify;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
+ margin-left: 340px;
|
|
|
font-size: 18px;
|
|
|
line-height: 150%;
|
|
|
}
|
|
|
+
|
|
|
+ .sidebar {
|
|
|
+ width: 300px;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar ul {
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
h1 {
|
|
|
font-family: raleway;
|
|
|
font-weight: normal;
|
|
@@ -56,43 +72,32 @@
|
|
|
}
|
|
|
p { margin-left: 20pt; margin-right: 20pt; }
|
|
|
a { text-decoration: none; color: #822; }
|
|
|
- a[href="#backgrounds"]::after {
|
|
|
- content: "Background";
|
|
|
- }
|
|
|
|
|
|
a[href="#traits"]::before {
|
|
|
content: url(data:image/svg+xml;base64,{{trait-icon}});
|
|
|
}
|
|
|
- a[href="#traits"]::after {
|
|
|
- content: "Trait";
|
|
|
- }
|
|
|
|
|
|
a[href="#relationships"]::before {
|
|
|
content: url(data:image/svg+xml;base64,{{relationship-icon}});
|
|
|
}
|
|
|
- a[href="#relationships"]::after {
|
|
|
- content: "Relationship";
|
|
|
- }
|
|
|
|
|
|
a[href="#objects"]::before {
|
|
|
content: url(data:image/svg+xml;base64,{{object-icon}});
|
|
|
}
|
|
|
- a[href="#objects"]::after {
|
|
|
- content: "Object";
|
|
|
- }
|
|
|
|
|
|
a[href="#stats"]::before {
|
|
|
content: url(data:image/svg+xml;base64,{{stat-icon}});
|
|
|
}
|
|
|
- a[href="#stats"]::after {
|
|
|
- content: "Stat";
|
|
|
- }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="main" >
|
|
|
+ <div class="sidebar">
|
|
|
+ <a href="#">The Emissaries of Guenašk</a>
|
|
|
+ $toc$
|
|
|
+ </div>
|
|
|
<div class="header">
|
|
|
- <h1 id="if-the-sky-were-crooked">$if(title)$ $title$ $endif$</h1>
|
|
|
+ <h1 id="title">$if(title)$ $title$ $endif$</h1>
|
|
|
</div>
|
|
|
$body$
|
|
|
<div class="footer">
|