HB ToAStyle
HB ToAStyle
```
```css
/* FONT IMPORTS ____________________________________________________ */
/* _________________________________________________________________ */
@import url('https://rawcdn.githack.com/Kaiburr-kath-hound/HomebreweryStyles/
be88dc909ce74e765dc546aed91b1499fa5d6e7b/FrostmaidenFonts.css');
@import url('https://rawcdn.githack.com/Kaiburr-kath-hound/HomebreweryStyles/
6ade797a215521264f7a7aca9355489333d9caba/EberronFonts.css');
/* PAGE TEXTURE */
.page {
background-image : url(https://i.imgur.com/aYSBMuF.jpg);
background-size : cover;
background-position : 0 -14px;
}
.page:nth-of-type(odd) {
background-image : url(https://i.imgur.com/LofkTZk.jpg);
}
/* HEADERS */
.page h1,
.page h2,
.page h3,
.page h4 {
letter-spacing : 1px;
font-weight : normal;
}
.page h5 {
font-weight : bold;
text-shadow : #000 0 0 0.1px;
letter-spacing : 1px;
}
.page h1+p {
margin-top : 5px;
}
/* NOTES */
.page .note {
background-color : #d9d9bf;
border-image : url(https://i.imgur.com/KtrHa62.png) 14 stretch;
border-image-outset : 6px 0;
border-image-width : 11px;
}
/* IMAGES */
.page img:not(.logo img):not(.frontcredit img) {
position : absolute;
z-index : -2;
user-select : none;
}
.page .emblem img {
z-index : 1!important;
}
/* DESCRIPTIVE NOTES */
.page .descriptive {
background-color : #dcddd9;
border-image-outset : 4px;
}
/* TABLES */
.page table:not(.monster table) tr:nth-child(odd) td {
background-color : #d2d4c9;
}
/* MONSTER STATBLOCKS */
.page .monster.frame {
background-color : #f7efb6;
}
/* ARTIST CREDITS */
.page .artist {
position : absolute !important;
bottom : 100px;
left : 60px;
transform : rotate(-90deg);
transform-origin : bottom left;
text-align : left;
font-family : ScalySansSmallCapsRemake;
font-size : 13px;
text-transform : lowercase;
color : #7c7b5f;
}
.page:nth-of-type(even):not(:has(.insideCover)) .artist {
left : unset;
right : 60px;
transform : rotate(90deg);
transform-origin : bottom right;
}
/* SMALL CAPS */
.page caps {
font-variant : small-caps;
}
.page .backcover caps {
font-size : 120%;
}
/* DROP CAP */
.page h1+p::first-letter,
.page h1+p::first-line {
all : unset;
}
/* FOOTER IMAGE */
.page:after {
height : 185px;
background-image : url(https://i.imgur.com/Y4giJX8.png);
mix-blend-mode : multiply;
opacity : 30%;
}
/* WATERCOLOR STAIN */
.page [class*="watercolor"] {
background-color : #405828;
z-index : -3;
}
/* FOOTER TEXT */
.page:not(:has(.frontCover),:has(.credits)) .footnote {
left : 75px;
bottom : 30px;
font-size : 10.5px;
color : #822317;
text-transform : uppercase;
text-align : left;
width : 400px;
letter-spacing : 0.5px;
z-index : -3;
}
.page:nth-child(even):not(:has(.frontCover),:has(.credits)) .footnote {
left : unset;
right : 75px;
text-align : right;
}
/* PAGE NUMBER */
.page .pageNumber{
left : 25px;
bottom : 20px;
font-size : 13px;
color : #822317;
text-align : left;
z-index : -3;
}
.page:nth-child(even) .pageNumber{
left : unset;
right : 25px;
text-align : right;
}
/* HYPERLINKS */
.page a {
color : inherit;
text-decoration : none;
font-weight : inherit;
}
.page a:hover{
text-decoration : underline;
}
/* QUOTE */
.page .quote {
font-family : Cormorant;
font-size : 15px;
line-height : 1em;
margin-top : 0px;
padding-bottom : 4px;
}
.page:has(.frontCover) .logo {
top : 24px;
}
.page:has(.frontCover) {
padding-top : 78px;
}
.page:has(.frontCover) h1 {
margin-top : 12px;
text-transform : none;
font-size : 98px;
}
.page:has(.frontCover) hr {
margin : 12px auto;
width : 10cm;
}
.page:has(.frontCover) h2,
.page:has(.frontCover) h3 {
filter : drop-shadow(0 0 1.3px black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
font-family : 'Modesto Expanded';
font-size : 0.8cm;
letter-spacing : 0.1cm;
margin-top : 10px;
transform : ScaleX(0.9);
}
.page:has(.frontCover) h3 {
color : white;
border-bottom : none;
font-size : 0.64cm;
}
.page:has(.frontCover) .footnote {
font-family : VeraCruz;
letter-spacing : 1px;
z-index : 1;
width : fit-content;
}
.page small {
position : relative;
text-transform : lowercase;
bottom : 10px;
font-size : 90%;
}
.page:has(.frontCover) .emblem,
.page:has(.frontCover) .color {
position : absolute;
top : 0;
left : 0;
background-size : 100% 100%;
background-repeat : no-repeat;
}
.page:has(.frontCover) .color {
height : 19px;
width : 650px;
background-color : black;
opacity : 75%;
z-index : -1;
-webkit-mask-image : url(https://i.imgur.com/bURATrX.png);
-webkit-mask-size : 100% 100%;
}
.page:has(.frontCover) .emblem {
height : 80px;
width : 340px;
z-index : 0;
background-image : url(https://i.imgur.com/y2xctk4.png);
}
.page:has(.frontCover) .emblem img {
left : 20px;
top : 0;
min-width : unset;
max-width : 50%;
max-height : 100%;
z-index : 1;
}
.page:has(.insideCover) h1 {
font-size : 88px;
}
.page:has(.insideCover) h2 {
font-family : Nodesto;
font-size : 3em;
letter-spacing : 0.8px;
}
.page:has(.insideCover) h3 {
font-family : 'Modesto Expanded';
font-weight : normal;
font-size : 31px;
letter-spacing : 1px;
border-bottom : unset;
margin : 10px -72px 20px;
width : 816px;
}
.page:has(.insideCover) hr {
margin : 12px auto;
}
.page .credits h1 {
font-size : 40px;
}
.page .credits p {
font-family : Martel_SansRegular;
font-style : normal;
font-size : 0.83em;
line-height : 1.5em;
text-indent : -1em;
margin-left : 1em;
}
.page .credits a {
color : #6f1511;
font-weight : 900;
}
.page .frontcredit {
position : relative;
right : 16px;
width : 340px;
height : 240px;
margin-top : 15px;
margin-bottom : 110px;
}
.page .frontcredit::before {
content : '';
position : absolute;
top : 4px;
left : -5.1mm;
height : 97.7%;
width : 105.7%;
background-image : url(https://i.imgur.com/dJQSJuT.png);
background-size : 100% 100%;
}
.page .frontcredit h5 {
margin-top : 10px;
margin-bottom : -2px;
text-shadow : #000 0 0 0.1px;
}
.page .frontcredit p {
text-indent : 0;
margin-left : 0;
}
.page .toc h1 {
text-align : left;
font-size : 40px;
}
.page .toc h3 {
font-family : BookInsanityRemake;
font-size : 12.5px;
font-weight : 800;
letter-spacing : 0px;
border-bottom : unset;
}
.page .toc h4 {
margin-top : 2px;
margin-bottom : 0px;
font-family : BookInsanityRemake;
font-weight : 100;
color : black;
font-size : 13px;
letter-spacing : 0px;
}
.page .toc ul li + li h3 {
margin-top : 8px;
}
.page .toc a {
font-weight : inherit;
}
.page .toc.wide {
columns : 3;
column-gap : 16px;
}
.page .chapter {
column-span : all;
display : block;
}
.page .chapter:not(.intro) {
padding-top : 11px;
padding-bottom : 542px;
text-align : center;
}
.page .chapter h1 {
font-weight : normal;
letter-spacing : 0;
font-size : 32px;
margin-bottom : 16px;
}
.page .chapter+p::first-letter,
.page .chapter+.quote::first-letter {
float : left;
font-family : SolberaImitationRemake;
line-height : 1em;
font-size : 13.9em;
margin-left : -20px;
margin-top : -58px;
margin-bottom : -24px;
padding-left : 20px;
padding-right : 2px;
color : black;
}
.page h1+.quote::first-letter,
.page .chapter+.quote::first-letter {
font-size : 88px;
margin-left : -4px;
}
.page .chapter+.quote::first-line,
.page .chapter+p:first-line {
font-variant : small-caps;
font-family : BookInsanityRemake;
font-size : 14px;
text-transform : lowercase;
line-height : 14px;
}
.page .chapter.intro::before {
content : '';
position : absolute;
top : 0px;
left : -35px;
height : 380px;
width : 230px;
background-image : url(https://i.imgur.com/TdFzZRS.png);
background-size : 100% 100%;
mix-blend-mode : multiply;
opacity : 25%;
z-index : -3;
}
.page:has(.chapter) .colors,
.page:has(.chapter):not(.page:has(.colors,.intro))::before {
content : '';
position : absolute;
top : 439px;
left : 0;
height : 490px;
width : 100%;
-webkit-mask-image : url(https://i.imgur.com/Y0iLMfi.png);
-webkit-mask-position : top;
-webkit-mask-size : 100% 100%;
-webkit-mask-repeat : no-repeat;
z-index : -3;
background : radial-gradient(
closest-side at 60px 340px,
var(--color1),
transparent),
radial-gradient(
closest-side at 300px 290px,
var(--color2) 40%,
var(--background) 100%);
--color1 : #000;
--color2 : #637750;
--background : #303e23;
mix-blend-mode : multiply;
opacity : 80%;
}
.page:has(.chapter) img {
top : 0;
left : 0;
min-width : 100%;
height : 671px;
-webkit-mask-image : url(https://i.imgur.com/Re87Msk.png);
-webkit-mask-position : left;
-webkit-mask-size : 816px 671px;
-webkit-mask-repeat : no-repeat;
z-index : -2;
}
.page:has(.chapter):nth-child(odd) .colors,
.page:has(.chapter):nth-child(odd):not(.page:has(.colors,.intro))::before {
top : 11.62cm;
}
.page:nth-child(odd):has(.chapter) img {
-webkit-mask-image : url(https://i.imgur.com/TZGTcc9.png);
}
.page:nth-child(odd) .colors,
.page:nth-child(odd):not(.page:has(.colors))::before {
transform : ScaleX(-1);
margin-top : 12px;
}
.page:not(.page:has(.colors))::before {
margin-top : 12px;
}
/* If you change the last "0" in the line below to "0.75", the backcover will
project a red shadow over the background image. Feel free to change the other three
rgba values to whatever color you'd like (I recommend using
https://www.hexcolortool.com/ to pick a color */
.page:has(.backCover) .backCover {
filter : drop-shadow(0 0 30px rgba(237, 31, 36, 0));
}
.page:has(.backCover) h1 {
font-size : 58px;
font-weight : normal;
}
.page:has(.backCover) p {
font-family : martel_sanssemibold;
font-size : 11.7px;
line-height : 1.6em;
text-indent : 0;
color : white;
}
.page:has(.backCover) caps {
font-size : 125%;
}
```
<!---
Here is a link to all my other Homebrewery templates, if you're interested:
https://homebrewery.naturalcrit.com/user/KaiburrKathHound?sort=alpha&dir=asc
Also, IF you want to buy me a coffee (or something), here's my Ko-fi page:
https://ko-fi.com/kaiburrkathhound
--->
{{frontCover}}
{{logo }}
{{emblem
 {opacity:70%}
}}
{{color,background-color:#fff}}
{{banner HOMEBREW}}
{{footnote
Dare to defy this template made for <br> the world's greatest roleplaying game
}}
\page
{{insideCover}}
<hr style='filter:saturate(0.8)'></hr>
{width:340px,left:235px,top:310px,z-
index:1}
{width:780px,right:0,top:200px,mix-blend-
mode:multiply,opacity:60%}
{{watercolor2,top:320px,left:260px,width:350px,background-
color:#3a5321,opacity:50%,mix-blend-mode:multiply}}
{{watercolor10,top:420px,left:160px,width:390px,background-
color:#3a5321,opacity:50%,mix-blend-mode:multiply}}
{{artist
[Ben Oliver](http://benoliverart.blogspot.com/)
}}
{{logo,filter:saturate(0.8) }}
\page
{{credits,wide
{{columns:2
# Credits
**Template Designer:**
[u/Kaiburr_Kath-Hound](https://www.reddit.com/user/Kaiburr_Kath-Hound/)
\column
::
**Page 7:** *Tomb of the Nine Gods* by unknown artist, @Wizards of the Coast
}}
{{frontcredit
<!---
Replace the url below with whatever image you use for the front cover; the image
will automatically arrange itself inside the display box.
If however your image is too tall, it might push the "On the Cover" section down
the page. If you need, you can adjust the "margin-bottom:0px" line below to be a
negative amount, for example: "margin-bottom:-100px".
--->
 {margin-bottom:10px;}
}}
{{footnote
The contents of this document is unofficial Fan Content permitted under the Fan
Content Policy. Not approved/endorsed by Wizards. Portions of the materials used
are property of Wizards of the Coast. ©Wizards of the Coast LLC.
}}
}}
\page
{{toc,wide
# Contents
\page
<!---
The Introduction chapter is formatted quite differently than other chapters, just a
heads up.
--->
{{chapter,intro
# Introduction
}}
Something evil is trapping the souls of the dead and draining life from all who
have been raised from death by magic. This worldwide "death curse" not only
prevents the raising of the dead but also causes creatures that were previously
raised from the dead to wither and die. The source of this death curse lies in a
trap-riddled tomb
hidden beneath a lost city in the depths of a vast jungle.
{{watercolor2,top:100px,right:50px,width:430px,opacity:20%}}
{{pageNumber,auto}}
{{footnote Introduction}}
\page
<!---
The chapter class is pretty simple, you just need to include some h1 chapter title
within the chapter class (see the code just below). As such, rather than making
separate classes for each chapter, you can actually adjust the colors for the
"vines" to better match the image you select for the chapter.
To do so, you need to place some image on the page, and use the "colors" class,
used further down the page.
--->
{{chapter
# Chapter 4: Fane of the Night Serpent
}}
Under the ruined palace of Omu lies a yuan-ti temple dedicated to an apoca- lyptic
god known as Dendar the Night Serpent. The temple was originally part of the
palace, but the yuan-ti have expanded and modified it to suit their needs over the
years. When Ras Nsi steals one of Omu's puzzle cubes (see chapter 3), the
characters must delve into the temple to recover it. Characters captured by yuan-ti
also end up here.
{{note
##### Time to Drop Knowledge
Use notes to point out some interesting information.
\column
{{descriptive
##### Time to Drop Knowledge
Use descriptive boxes to highlight text that should be read aloud.
<!---
For images on chapter pages, JUST include the image, try not to change the
formatting or position, since the layout of the chapter will start to look off.
--->
 {}
<!---
This is the "colors" class that you can use to specify three colors for the vines
that appear below the cover image, each of which covers a different section of the
gradient.
https://www.w3schools.com/cssref/css_colors.php
^This is a great reference for seeing which your browser will recognize.
If you don't want to choose specific colors, you can just type {{colors}}, which is
the example shown below. This will load up the default three colors, which
generically match the aesthetic of the rest of the template.
--->
{{colors}}
{{pageNumber,auto}}
{{footnote Chapter 1 | A Friend in Need}}
\page
{{chapter
# Chapter 5: Tomb of the Nine Gods
}}
Acererak built the Tomb of the Nine Gods not only to house the remains of Omu's
trickster gods, but also to slay inter-lopers. However, few today even know the
tomb exists, and thus it remains an enigma. Rare are the tavern tales that lure
adventu-ers to its gates, and its horrors remain un-documented in the libraries of
Candlekeep. The reason for this is simple: not one person who has entered the tomb
has lived to tell the tale.
<!---
This is an example of choosing colors that complement the image.
The overall color of the image is a dark green, which makes for a great "--
background" color.
There is a tiny bit of gold reflecting off the temple, which makes for a good "--
color1" highlight color.
Last, there is a lot of turqoise in the general center of the image where the light
shines off the temple, which makes for a great "--color2".
--->
{{colors,--color1:gold,--color2:DarkTurquoise,--background:darkgreen}}
 {}
{{watercolor11,top:690px,right:100px,width:330px,opacity:20%}}
{{pageNumber,auto}}
{{footnote Chapter 6 | The Final Enemy}}
\page
<!---
There is only one, copyright-friendly monster here of course, from none the books
above. Just like Woody's new sewn-on arm from Toy Story 2, this statblock is "for
display ONLY."
--->
{{monster,frame
## Anime Sphinx
*Tiny beast, manic-depressive evil*
___
**Armor Class** :: 19 (chain mail, shield)
**Hit Points** :: 100(1d4 + 5)
**Speed** :: 30ft.
___
| STR | DEX | CON | INT | WIS | CHA |
|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|
|14 (+2)|2 (-4)|1 (-4)|13 (+2)|3 (-3)|1 (-4)|
___
**Condition Immunities** :: melancholy, drunk
**Senses** :: darkvision 60 ft., passive Perception 16
**Languages** :: Pottymouth
**Challenge** :: 10 (8682 XP)
___
***Onion Stench.*** Any creatures within 5 feet of this thing develops an
irrational craving for onion rings.
:
***Hangriness.*** This creature is angry, and hungry. It will refuse to do anything
with you until its hunger is satisfied.
When in visual contact with this creature, you must purchase an extra order of
fries, even if they say they aren't hungry.
### Actions
***Bulldog Rake.*** *Melee Weapon Attack:* +4 to hit, reach 5ft., one target. *Hit*
5 (1d6 + 2)
:
***Team Foot.*** *Melee Weapon Attack:* +4 to hit, reach 5ft., one target. *Hit* 5
(1d6 + 2)
:
***Turnbuckle Roll.*** *Melee Weapon Attack:* +4 to hit, reach 5ft., one target.
*Hit* 5 (1d6 + 2)
:
***Dual Throw.*** *Melee Weapon Attack:* +4 to hit, reach 5ft., one target. *Hit* 5
(1d6 + 2)
}}
{{watercolor10,top:500px,right:60px,width:450px,opacity:70%}}
{{pageNumber,auto}}
{{footnote Appendix C | Monsters and NPCs}}
\page
{{backCover}}
 {left:0px,height:103%}
# Welcome <br> to the Jungle!
:
A napping curse has befallen everyone who's been raised from their beds. Its
victims are nodding off, and all efforts to awaken them have failed.
:
The shoes of the unconscious are being stolen by someone and trapped inside an
insomniac artifact. Only its destruction will free the trapped footwear and allow
the sleepwalkers to walk once more.
:
All paths lead to Chult, a mysterious land of volcanoes, jungles, and the ruins of
fallen kingdoms. Below them all awaits a sleepy tomb. The trap is set. Will you
take the bait?
___
{{logo

[homebrewery.naturalcrit.com](https://homebrewery.naturalcrit.com)
}}