```metadata
title: OneRingTemplate
description: A template for fan content for The One Ring RPG by Free League Publishing
tags:
  - onering
  - theme
systems: []
renderer: V3
theme: 5ePHB

```

```css
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Brygada+1918&family=Lora&family=Voltaire&display=swap');

/* 
homebrew resources - has EPS versions of some overlay icons
https://drive.google.com/drive/folders/1BJKocWknTW3g5XkOCGiJeSqHg4dIAcrI
from here: https://forum.frialigan.se/viewtopic.php?f=129&t=7811
*/


:root {
--empty										:	rgba(  0,   0,   0,  0);	
--background							:	rgba(254,	252,	244,  1);
--background							:	rgba(255,	255,	255,  1);
--golden									: rgba(190, 180, 160,  1);	
	
--frame										: rgba(200, 185, 160, .4);
--table										: rgba(180, 170, 140, .3);
--table2									: rgba( 80,  180, 80, .1);
--title										: rgba( 40,  60,  40, .5);		
	
--bright									:	rgba( 95, 149, 155,  1);
--medium									:	rgba( 95, 149, 155, .8);	
--highlight								:	rgba(185, 225, 228,  1);
	
--white 									: rgba(255, 255, 255,  1);	
--light										:	rgba(210, 227, 237,  1);	
--dark										:	rgba( 40,  37,  32,  1);
--black 									: rgba( 11,  15,  11,  1);
				
--gradient								: linear-gradient(180deg, var(--dark) 0%, var(--empty) 150%);	

--red                     : #9A342F;
--brown                   : #614F3D;
--light-red               : rgba( 180,  100,  100,  1);
--off-white               : #FBFAF8;
--HB_Color_Accent         : rgba(230,	223,	210, 1);
--HB_Color_Background     : #000;
--table-light             : rgba(243,	239,	230, 1);	
--table-dark              : rgba(230,	223,	210, 1);

}

/* 
FONT notes
Official Typefaces
Headings 1&2 - Aniron
Body/Headings 3 Levels Deep - New Baskerville
Sidebar/Tables - Niveau Grotesk
Logo - Albertus

Free Substitutes
Logo - Infini (Sandrine Nugue)
Headings - Aniron (free noncommercial)
Body - Vollkorn (Google Font)
Sidebar - Urbanist (Google Font)

*/

@font-face {
  font-family: Aniron;
  src: url(https://un-tor.github.io/media/Fonts/Aniron%20Bold.ttf);
  font-weight: bold;
  /* Free for personal use */
}


/* PAGE SETUP AND BACKGROUNDS */
.page {
	/* background-image				: url(https://un-tor.github.io/media/Page%20Design/Elf%20Left%20Leaf.png); */	
  background-image				: url(https://un-tor.github.io/media/Page%20Design/Elf%20Left%20Leaf.png),     url(https://un-tor.github.io/media/Page%20Design/Background-Left%20Leaf.png);	
  background-color				: var(--background);
  background-repeat				: no-repeat;
  background-size					: cover;
  padding-top             : 3.5cm;
 }
.page:nth-child(even) {
		background-image				: url(https://un-tor.github.io/media/Page%20Design/Elf%20Right%20Leaf.png),     url(https://un-tor.github.io/media/Page%20Design/Background-Right%20Leaf.png);	
}
.page:after {
	background-image				: none;
  /* Remove default bottom border */
}
.page .columns {
		column-count					: 2;
		column-gap          	: 0.9cm;
		column-width        	: 8cm * @multiplier;
		-webkit-column-count	: 2;
		-moz-column-count   	: 2;
		-webkit-column-width	: 8cm * @multiplier;
		-moz-column-width   	: 8cm * @multiplier;
		-webkit-column-gap  	: 0.9cm;
		-moz-column-gap     	: 0.9cm;
}
.columnWrapper {
/* 	background-image				: url(https://images.fallenlondon.com/static/bg-paper.png);*/
/* 	background-color				: var(--background); 
 */ 	border-style						: unset;
	margin									: -20px -50px 0px -50px;
	padding 								: 30px 60px 20px 60px;
	height									: 2100px;
/* 	border									: 2px solid var(--golden);
	outline									: 5px solid var(--background);
 */}



/* HEADERS STYLE */
.page h1,
.page h2
{
	font-family							:	"Aniron", Georgia, Times, serif;
	color										: var(--red);
	font-weight							: 700;
	letter-spacing					: 0.2px;	
}
.page h1 {	
	letter-spacing					: 1px;	
	padding-bottom					: 0.7em;	
}
.page h2 {
	font-family							:	"Aniron", Georgia, Times, serif;	
	font-size								: 15px;
	padding-bottom					: 8px;
  margin-top             : 12px;
}
.page h3,
.page h4 {
	font-size								: 14px;
  letter-spacing					: -0.2px;	
  font-family							:	Vollkorn, Georgia, Times, serif;
	border-bottom						: unset;
  text-transform: uppercase;
}
.page * + h2 {
  margin-top							: 0.4cm;	
}
.page * + h3 {
  margin-top							: 0.4cm;	
}
.page * + h4 {
  margin-top							: 0.4cm;	
}

.page h4 {
	color										: var(--red);
  display: inline-block;
  margin-right: 2px;
  text-transform          : uppercase;
  font-size:90%;
  font-weight:bold;
}
.page h4 + p{
  display:inline;
}
.page h5 {
	font-size								: 1.1em;
}
.page h6 {
	font-weight							: 700;
	letter-spacing					: 0.2px;	
}
.page .note h5,
.page .descriptive h5 {	
  margin-top							: .15em;	
}
.page h1 {
  text-align              : center;
	color										: var(--dark);
}
.page h5 {
  color                   : var(--red);
  text-transform          : uppercase;
  font-family							:	Urbanist, Helvetica, Arial, sans-serif;	
  padding-left: 4px;
}


/* Removes Drop Caps */
/* .page h1+p:first-letter {
	all: unset;
}
 */

/* Removes Small-Caps in first line */
.page h1+p:first-line {
	all: unset;
}

/* TEXT AND LINK STYLE */
.page p, 
.page dl, 
.page ul, 
.page ol,
.page h6,
.page .note p,
.page .note.wrap p {
	font-family							:	Vollkorn, Georgia, Times, serif;
	color										: var(--dark)
	font-weight							: 400;
	font-size								: 0.95em;
	line-height 						: 1.33em;
  text-align              : justify;
}
.page strong {
  letter-spacing					: unset;
}
.page a:-webkit-any-link {
	color										: var(--red);
}
.page a:link,
.page a:visited {
  text-decoration					: none;
}
.page a:hover,
.page a:active {
	color										: var(--dark);	
  text-decoration					: underline;
}

.page h1+p::first-letter {
/*   background-image: linear-gradient(-45deg, var(--light-red), var(--red), var(--light-red));
 */  background-image				: url("https://un-tor.github.io/media/Borders/red-bg.png");
  font-size: 2.5cm;
}

.page .footnote {
    position: absolute;
    left: 30px;
    top: 27px;
    z-index: 150;
    width: 200px;
    font-size: 0.9em;
    font-family: Vollkorn, Georgia, Times, serif;
    color: var(--red);
    text-align: left;
    text-transform: uppercase;
}
 .page .pageNumber {
    position: absolute;
    left: 21px;
    bottom: 45px;
    width: 50px;
    font-size: 1.2em;
    color: var(--brown);
    text-align: center;
    text-indent: 0;
} 
.page:nth-child(even) .pageNumber {
    left:unset;
    right: 21px;
}
.page:nth-child(even) .footnote {
    left:unset;
    right: 30px;
    text-align: right;
}

/*  */

img.imgfade {
  margin-left:-10px;
  width:100%;
  -webkit-mask-image: url(/assets/waterColorMasks/center/0001.webp);
/*   -webkit-mask-image: url('https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fstar-mask-gradient.png?v=1597757011489'); */
  -webkit-mask-size:120%;
  -webkit-mask-position:50% 60%;
}
img.imgfade2 {
  margin-left:-10px;
  width:100%;
  -webkit-mask-image: url(/assets/waterColorMasks/center/0001.webp);
   -webkit-mask-size:120% 160%;
  -webkit-mask-position:50% 50%;
    margin: 0 auto;
    border: 1px solid black;
 }


.centered-image {
  display: block;
  margin: 0 auto;
}


/* TABLES */
.page table {
  width: 100%;
  line-height: 16px;
  font-family:      Urbanist, Helvetica, Arial, sans-serif;
  font-weight:      500;
  color:            var(--brown);
  letter-spacing:   unset;	
  font-size:        0.95em;
  border-collapse:separate;
}
.page table {
  margin-top:0px;
  padding-bottom:8px;
}
.page table thead tr th {
  text-transform: uppercase;
  padding: 4px 6px;
 }

tr:nth-child(even):not(:first-child) {
  background-color:var(--table-light);
} 
.page table tbody tr td {
  padding: 6px 6px;
 border-top: 1px solid var(--brown);  
  border-width: 2px 0px 0px 0px; 
  border-style: solid; 
  border-image-source: url('https://un-tor.github.io/media/Borders/Table Brown Border.png'); 
  border-image-slice: 22 22 22 22; 
  border-image-repeat: stretch; 
  
}

.page table tbody tr:first-child td {
  border-top: 1px solid var(--brown);  
  border-width: 2px 0px 0px 0px; 
  border-style: solid; 
  border-image-source: url('https://un-tor.github.io/media/Borders/Table Red Border.png'); 
  border-image-slice: 22 22 22 22; 
  border-image-repeat: stretch; 
}



/* LISTS */
.page ul, .page ol {
  list-style: none; /* Remove default bullets */
  margin-top:0px;
}


.page ul > li::before {
  content: "♦";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: var(--red); /* Change the color */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.75em; 
  margin-left: -1em; 
  font-size: 0.75em;
}

.page .checklist ul {
  list-style-type:none;
  padding-left: 0px;
  margin-top: 0.4em;
}
.page .checklist li {
  margin-top: 0.1em;
  text-indent:-2em;
  margin-left:2em;

}
.page .checklist ul li::before {
  all:unset;
}

.page .checklist input[type="checkbox"] {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 0.4em;
  height: 0.4em;
/*   border: 0.15em solid currentColor;  */
/*   border-radius: 0.05em; */
  outline: max(1px, 0.15em) solid currentColor;
  outline-offset: max(1px, 0.15em); 
  transform: translateY(-0.1em) rotate(45deg);  
  margin-right: 0.75em;
  margin-left:0.5em;

}
.page .checklist input[type="checkbox"]:checked {
  background-color: var(--red);
}

.page .checklist input[type="checkbox"]:disabled {
  color: var(--red);
} 

.page ol {
  /* Change the color of the list numbers */
  list-style: none; 
  counter-reset: my-counter; 
  margin-left: -0.7em; 
}
.page ol ol {
  /* Need a second counter for a nested list */
  /* NOTE: this can only support two layers! */
  counter-reset: my-counterB; 
  margin-left: -0.2em; 
}
.page ul ol {
  margin-left: -0.6em; 
}
.page ol > li::before {
  content: counter(my-counter) ".";
  counter-increment: my-counter; 
  color: var(--red);
  display: inline-block; 
  font-weight: 500; 
  width: 1.1em; 
/*   margin-right: 5px;  */
}
.page ol ol > li::before {
  content: counter(my-counter) "." counter(my-counterB) ".";
  counter-increment: my-counterB; 
    width: 1.6em; 
}
.page ol ul > li::before {
  /* Make sure that unordered lists don't get numbers or adjust the counter  */
  content: "♦";  
  color: var(--red); 
  display: inline-block; 
  width: 1.8em; 
/*   margin-right: 5px;  */
  margin-left: -2em; 
  font-size: 0.75em;
  counter-increment: none; 
}

.num-paragraph {
  background-image: url('https://un-tor.github.io/media/Borders/Diamond.svg');
  background-size: 55px; /* Adjust the size of the SVG */
  background-repeat: no-repeat;
  background-position: 0 50%; /* Adjust the position to center vertically or as needed */
  padding: 17px; 
  width: 55px;
/*   margin: 1px 2px 1px 0px; */
  display: inline-block;
  float: left;
  margin-top:6px;
  font-size: 2.4em;
  text-align: center;
  color: var(--red);
  font-family	:	Times, serif;
}
span.num-paragraph + h3 {
  color:red;
}


.page blockquote {
  font-weight:      600;
  color:            var(--brown);
  letter-spacing:   unset;	
  font-size:        0.95em;
  padding-left:         20px;
  padding-right:        20px;
  border-width: 0 10px; /* Set the border width for the left and right sides only */
  border-style: solid; /* Use a solid border style */
  border-image-source: url('https://un-tor.github.io/media/Borders/focus-border-both.png'); /* Replace 'border-image.png' with the path to your border image */
  border-image-slice: 0 30 0 30 fill; /* Adjust the '30' to control the width of the border image */
  border-image-repeat: round; /* Stretch the border image to fit the width of the div */
  margin-bottom: 10px;
}


.page hr {
  height: 4px;
  background: url('https://un-tor.github.io/media/Borders/Example Border.png') no-repeat center;
  background: url('https://un-tor.github.io/media/Borders/hr-double.png') no-repeat center;
  background-size: cover;
  border: none;
  visibility:visible;
  margin:unset;
  margin-bottom:5px;
}
 
 
/* CUSTOM DIVS  */
.page .popupR, .page .popupL, .page .popdownL, .page .popdownR {
  background-color: unset;
  border-style: solid;
  border-width: 5px;
  border-image: url('https://un-tor.github.io/media/Borders/Box Border.png') 100 repeat;
  border-image-outset: 29px 20px;
  border-image-width: 50px;
  padding: .3cm .3cm;
  box-shadow: unset;
  margin-left: 10px;
  margin-top: 30px;
  position:absolute;
  width: 295px;
  bottom: 65px;
  right:90px;
}
.page .popupL, .page .popdownL {
  left:80px;
}
.page .popdownL, .page .popdownR {
  top: 85px;
  bottom: unset;
    border-image: url('https://un-tor.github.io/media/Borders/Box Border Down.png') 100 repeat;
  border-image-outset: 29px 20px;
  border-image-width: 50px;
  margin-top: 0px;
}

.page .popupR p, .page .popupL p, .page .popdownR p, .page .popdownL p {
  font-family:      Urbanist, Helvetica, Arial, sans-serif;
  font-weight:      600;
  color:            var(--brown);
  letter-spacing:   unset;	
  font-size:        0.95em;
}

.page .popupR h5, .page .popupL h5, .page .popdownL h5, .page .popdownR h5 {
  padding-left: 0px;
}


.page .example {
  padding-left:         30px;
  padding-right:        30px;
  text-align: justify;
  font-style: italic;
  border-width: 5px 0px; 
  border-style: solid; 
  border-image-source: url('https://un-tor.github.io/media/Borders/example-border.png'); 
  border-image-slice: 22 22 22 22; 
  border-image-repeat: stretch; 
  margin-bottom: 10px;

}
.page .example h4 {
  margin-top:5px;
  display:block;
  font-style: normal;
}

.page .quote {
  color: var(--red);
  font-style: italic;
}


/* .page .note::after {
  content: 'fdasfd asf dsaf dsaf dsaf dsa fdas fdsa fdfsa fdas ';
  background: url("https://unsplash.it/200/300");
  background-position: center center;
  background-size: cover;
  opacity: 0.3;
  height: 69px;
  margin: -10px;
  width: 300px;
/*   position: absolute;
  right: 10px;
 */  /* border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: 0;
}  */

/* ******* */
/* SYMBOLS */
/* ******* */
.eye {
  background-image: url('https://un-tor.github.io/media/Symbol/Eye Inline.png'); 
  height: 0.9em;
  background-size: auto 10px; 
  background-repeat: no-repeat; 
  background-position: bottom; 
  padding-left: 18px;
}

.gandalf {
  background-image: url('https://un-tor.github.io/media/Symbol/Gandalf Inline.png'); 
  height: .9em;
  background-size: auto 12px; 
  background-repeat: no-repeat; 
  background-position: bottom; 
  padding-left: 16px;
}
.success {
  background-image: url('https://un-tor.github.io/media/Symbol/Success Inline.png'); 
  height: .9em;
  background-size: auto 10px; 
  background-repeat: no-repeat; 
  background-position: bottom; 
  padding-left: 14px;
}

[class^="inline-block fdie"] {
  height: .9em;
  background-size: auto 12px;
  background-repeat: no-repeat;
  background-position: bottom;
  padding-left: 20px;
}
.fdie1 {
  background-image: url('https://un-tor.github.io/media/Symbol/1.png');
}

.fdie2 {
  background-image: url('https://un-tor.github.io/media/Symbol/2.png');
}

.fdie3 {
  background-image: url('https://un-tor.github.io/media/Symbol/3.png');
}

.fdie4 {
  background-image: url('https://un-tor.github.io/media/Symbol/4.png');
}

.fdie5 {
  background-image: url('https://un-tor.github.io/media/Symbol/5.png');
}

.fdie6 {
  background-image: url('https://un-tor.github.io/media/Symbol/6.png');
}

.fdie7 {
  background-image: url('https://un-tor.github.io/media/Symbol/7.png');
}

.fdie8 {
  background-image: url('https://un-tor.github.io/media/Symbol/8.png');
}

.fdie9 {
  background-image: url('https://un-tor.github.io/media/Symbol/9.png');
}

.fdie10 {
  background-image: url('https://un-tor.github.io/media/Symbol/10.png');
}

.fdieeye, .fdie11 {
  background-image: url('https://un-tor.github.io/media/Symbol/eye.png');
}
.fdiegandalf, .fdie12 {
  background-image: url('https://un-tor.github.io/media/Symbol/rune.png');
}

[class^="inline-block sdie"] {
  height: .9em;
  background-size: auto 12px;
  background-repeat: no-repeat;
  background-position: bottom;
  padding-left: 20px;
}
.sdie1 {
  background-image: url('https://un-tor.github.io/media/Symbol/S1.png');
}
.sdie2 {
  background-image: url('https://un-tor.github.io/media/Symbol/S2.png');
}

.sdie3 {
  background-image: url('https://un-tor.github.io/media/Symbol/S3.png');
}

.sdie4 {
  background-image: url('https://un-tor.github.io/media/Symbol/S4.png');
}

.sdie5 {
  background-image: url('https://un-tor.github.io/media/Symbol/S5.png');
}

.sdie6 {
  background-image: url('https://un-tor.github.io/media/Symbol/S6.png');
}

.sdie7 {
  background-image: url('https://un-tor.github.io/media/Symbol/S7.png');
}

.sdie8 {
  background-image: url('https://un-tor.github.io/media/Symbol/S8.png');
}

.sdie9 {
  background-image: url('https://un-tor.github.io/media/Symbol/S9.png');
}

.sdie10 {
  background-image: url('https://un-tor.github.io/media/Symbol/S10.png');
}

.sdie11 {
  background-image: url('https://un-tor.github.io/media/Symbol/S11.png');
}






/* Defintion Lists for small headings -- CUT THESE??? */
.page dt {
  display: inline;
  margin-right: 5px;
  margin-left: -1em;
  color                   : var(--red);
  text-transform          : uppercase;
  font-size:90%;
  font-weight:bold;
}
.page dd {
  display: inline;
  margin-left: 0px;
  text-indent: 0px;
/*   padding-left: 10px; */
}
```

{{pageNumber 1}}
{{footnote Homebrew}}

# TOR: homebrewey
{color:var(--red)}

This guide is to help players and loremasters create fan content for The One Ring RPG by Free League Publishing using [Naturalcrit's Homebrewery Tool](https://homebrewery.naturalcrit.com/). The Homebrewery was designed for making custom D&D 5E rulesets, but provides a flexible platform for creating content for many games. With basic knowledge of [Markdown](https://help.github.com/articles/markdown-basics/) and CSS you will be able to easily create documents in a similar style to this!

{{popupR
##### Warning: This was never finished!
I worked on this for a while, but never quite finished. I hope someone will pick it up and make it a tool for the TOR community! 
}}

## The Journey so Far
These features have been implemented or are planned:

{{checklist 
  - [X] Headers (`h1, h2, h3, h4, h5`)
  - [X] TOR-style fonts for headers and body 
  - [X] Background images and header/footer
  - [X] Lists, numbers, and checkboxes
  - [X] Focus boxes with side borders (`>`)
  - [X] Double red line for `<hr>` tag 
  - [X] Example boxes with top/bottom borders
  - [X] Table shading and borders
  - [X] Easily add {{gandalf}}/{{eye}}/{{success}} symbols 
  - [X] Feat die symbols {{fdie1}}-{{fdie10}}, {{fdie11}} and {{fdie12}}
  - [X] Success die symbols {{sdie1}}-{{sdie6}}
  - [ ] Enemy stat block template
  - [ ] Support both white and beige backgrounds 
  - [ ] Quotes in red italics
  - [ ] More!?
}}

## Credits
This template uses images from The One Ring by Free League Publishing and is intended only for non-commercial fan use. Free League Publishing retains copyright to all of its material. The {{font-family:aniron;font-size:70% Aniron Font}} by [Pete Klassen](https://www.thehutt.de/tolkien/fonts.html) is used for some headers; this font is only available for personal use. Other fonts ({{font-family:urbanist Urbanist}} and {{font-family:vollkorn Vollkorn}}) are provided by Google Fonts.

> This is a fan project that hopefully others will find useful. 



![desk](https://un-tor.github.io/media/Examples/desk.jpg){imgfade2}


{{example
#### Example:
You could use this tool to create a new landmark, present new homebrew rules, or even just as a nicely formatted log of your adventure. I'm sure you'll come up with something amazing!
}}

{{quote
"You have nice manners for a thief and a liar," said the Dragon.
}}




### The Rest of this document
The remaining pages in this document give example formats and code. You will find the following sections:

1. [Headers and Formatting](#headers-and-formatting)
2. [Tables](#tables)
3. Page Elements
4. Images and Symbols


#### How to use Hombrewery
Hombrewery pages render best in the Chrome browser; other browsers, especially on mobile devices are unlikely to work properly. If you opened this page in a web browser via a share link, then there should be a button at the top of the page to Save as a PDF or view the Source. You can also "Clone to New" to create your own content using this template. 



\page
{{pageNumber,auto}}
{{footnote Homebrew}}

# Headers and Formatting 
The level 1 header is the most impressive of all. It sits centered at the top of the page in a large, dark Aniron font. The line following an `h1` header begins with a fancy drop cap letter.

## Header 2
Level 2 headers are red and use a smaller Aniron font.

### Header 3
Level 3 headers are a dark brown Volkorn serif font.

#### Header 4:
Level 4 headers are red and inline with the text that follows. Typically separated with a colon.

##### Header 5
Level 5 switches to the sans serif font Urbanist, and is typically used for table headings (slightly indented) and pop up/down notes. Don't use them for body text like this.


{{popupL,font-size:88%,height:380px
##### Code to generate headers:
```
# Headers and Formatting 
A level 1 header is the most impressive of all. It sits centered at the top of the page in a large, dark Aniron font. The line following an `h1` header begins with a fancy drop cap letter.

## Header 2
Level 2 headers are red and use a smaller Aniron font.

### Header 3
Level 3 headers are a dark brown Volkorn serif font.

#### Header 4:
Level 4 headers are red and inline with the text that follows. Typically separated with a colon.

##### Header 5
Level 5 switches to the sans serif font Urbanist, and is typically used for table headings (slightly indented) and pop up/down notes. 

```
}}

\column
## Emphasis and Lists

Text can be *Italic* / _Italic_ or **Bold** / __Bold__


1. Numbered Item 1
   1. Subitem 1.1
2. Numbered Item 2
   - Subitem 
3. Numbered Item 3

- Bulleted item
- Bulleted item
  1. Sub numbered item
  2. Sub numbered item


The One Ring book often uses a single bulleted item below a paragraph to emphasize a point.
  - Like this.

[This is a link](https://freeleaguepublishing.com/)

### Horizontal Rule

---

### Blockquotes / Focus Section

> This makes a focus section.


{{popupR,font-size:88%,height:380px
##### Code for Basic Formatting
```
### Emphasis

Text can be *Italic* / _Italic_ or **Bold** / __Bold__

### Lists

1. Numbered Item 1
   1. Subitem 1.1
2. Numbered Item 2
   - Subitem 
3. Numbered Item 3

- Bulleted item
- Bulleted item


[This is a link](https://freeleaguepublishing.com/)

### Horizontal Rule

---

### Blockquotes / Focus Section

> This makes a focus section.

```
}}

\page

::::::::::::::::

{{popdownL
##### Using Classes in Markdown+
Homebrewery uses an extended version of Markdown that allows you to easily create sections of text that are tagged with a CSS class. Use two curly braces followed by a list of class names, IDs, and styles with no spaces. For example, this popdown box was created with code like:

```
{{popdownL
##### Using Classes in Markdown+
Homebrewery uses an extended...
}}
```
}}


{{num-paragraph 1}} 
### Numbered Paragraphs
You can generate a paragraph with a large number preceding it by using syntax like:<br> `{{num-paragraph X}}`. Just replace `X` with a number less than 10.

{{num-paragraph 2}} 
### Popups and Popdowns
You can create boxes that pop up from the bottom of the page or down from the top of the page with the `popupL`, `popupR`, `popdownL`, and `popdownR` classes. If you use a popdown box like on this page, you'll need to add empty lines so it doesn't overlap your text. Homebrewery allows a shortcut of putting `:` on an empty line to create vertical space. Use multiple colons for more space.

{{num-paragraph 3}} 
### Focus, examples, and Quotes
Three more useful class types are:
:

- **Focus boxes** are created by preceding text with a `>` or using the `<blockquote>` HTML tag.
> This is a focus box with a nice border on each side. The Core rules use this when emphasizing a specific rule.
- **Quotes** are used throughout the TOR materials to add flavor. Quotes are done in red italicized text.
{{quote
"Here is a quote. It could be multiple lines long, preferably from some sort of interesting book." -- Anonymous
}}
- **Example boxes** have a double red line border above and below them and have italic text. The "EXAMPLE" heading can be changed to anything else and should use an `h4` style.


{{example
#### Example:
This box was generated with code like:

}}


```
{{example
#### Example:
This box was generated with code like...
}}
```
:


{{popupR,font-size:88%
##### Another Example Popup Right
Da pretium lectus quam id leo in. Consectetur adipiscing elit ut aliquam purus sit. Aliquet enim tortor at auctor urna nunc id cursus. Amet porttitor eget dolor morbi non arcu. Risus commodo viverra maecenas accumsan lacus vel. At quis risus sed vulputate odio
}}


{{num-paragraph 4}} 
### Die Symbols
The template includes shortcuts for {{gandalf}}/{{eye}}/{{success}} and Feat die symbols {{fdie1}}-{{fdie10}}, {{fdie11}} and {{fdie12}}. You can generate these with code like: 

```
{{gandalf}}, {{eye}}, {{success}}, {{fdie1}}-{{fdie10}}, {{fdie11}} and {{fdie12}}
```
:


{{num-paragraph 5}} 
### Images
The images and fonts used to style the document are all hosted at [https://un-tor.github.io/media](https://un-tor.github.io/media) and can be updated in this public github repository [https://github.com/un-tor/media](https://github.com/un-tor/media). These files were gathered by members of the One Ring fan community, but are owned by Free League Press.

{{num-paragraph 6}} 
### Template Source
The best way to learn to use this template will be to examine its source code! Homebrewery will allow you to clone and modify it to create something new.




\page
{{pageNumber,auto}}
{{footnote Homebrew}}

# Tables
Tables can be declared in several ways. This page has examples of tables declared with standard markdown syntax or with HTML. Markdwon is simpler, but HTML gives greater control over column widths. To match the formatting in the books, tables should be preceded by an H5 header (`#####`).

##### A Simple Markdown Table
| Feat Die   |Result|
|:-----------|:----------------------|
| {{eye}}    |Very bad things happen.|
| 1-5        |Not so terrible.|
| 6-10       |Maybe something good.|
| {{gandalf}}|Something great!|


##### Journey Roles
| Role |Function|
|:------------------|:-----|
| Guide   |In charge of all decisions concerning route, rest, and supplies.|
| Hunter | In charge of finding food in the wild.|
| Lookout | In charge of keeping watch. |
| Scout | In charge of setting up camp, opening new trails.|










{{wide
##### A Wide Table
| Name                    | Cost  | Damage          | Weight  | Properties |
|:------------------------|:-----:|:----------------|--------:|:-----------|
| *Simple Melee Weapons*  |       |                 |         |            |
| &emsp; Club             | 1 sp  | 1d4 bludgeoning | 2 lb.   | Light      |
| &emsp; Dagger           | 2 gp  | 1d4 piercing    | 1 lb.   | Finesse    |
| &emsp; Spear            | 1 gp  | 1d6 piercing    | 3 lb.   | Thrown     |
| *Simple Ranged Weapons* |       |                 |         |            |
| &emsp; Dart             | 5 cp  | 1d4 piercig     | 1/4 lb. | Finesse    |
| &emsp; Shortbow         | 25 gp | 1d6 piercing    | 2 lb.   | Ammunition |
| &emsp; Sling            | 1 sp  | 1d4 bludgeoning | &mdash; | Ammunition |
}}

\page
{{pageNumber,auto}}
{{footnote Homebrew}}

{{wide
## More Homebrewery Docs
Learning CSS and markdown basics will get you pretty far, but Homebrewery also has some of its own unique syntax. These resources may be useful.


- An excellent Homebrewery Formatting Guide is available here: 
  - https://homebrewery.naturalcrit.com/share/J0G093rTmPxE 
- If you got this guide as a PDF, you can find the original source here:
  - https://homebrewery.naturalcrit.com/share/TrAWSNONs-PT


}}