Fate SRD Theme by

# Fate SRD Theme

The following is a special theme built around how the [Fate SRD](https://fate-srd.com/) is formatted.

While the page size is derived from physical Fate publications. Note that this differs from published Fate books, and may not be as appropriate for physical printing.

## Blocks
The following are blocks, used for specific and detached text. They are generally denoted as `div` elements with special classes.

### Callouts
Used to explain rules or concepts. Denoted with the `callout` class. May include an optional header in the first line, which will be standardized regardless of actual level. Thus;

#### Example Callout

This is a deeper dive of associated information!
</div>

Is implemented via;

```
<div class="callout">

#### Example Callout

Import information!
</div>
```

\pagebreak

### Index Cards
Formatted to look like index cards for more aesthetic appeal, as seen on the front page of the Fate SRD. Denoted with the `index-card` class. May include an optional header in the first line, which will be standardized regardless of actual level. Thus;

#### Example Index Card
* <span class="aspect">Conflicting Prophecies</span>
* <span class="aspect">No Way Out</span> 
</div>

Is implemented via;

```
<div class="index-card">

### Example Index Card
* <span class="aspect">Conflicting Prophecies</span>
* <span class="aspect">No Way Out</span> 
</div>
```

### Blockquotes
Used to denote examples of actual play. Unlike other blocks, they are implemented via standard markdown; see [Blockquotes](#standard-markdown-demonstration-blockquotes).

### Tables
While rarely used in Fate, tables deserve mention.

While the content of tables is implemented via standard Markdown (see [Tables](#standard-markdown-demonstration-tables)), There are at least three styles of Tables withing the Fate SRD. Since giving tables their own classes is not supported by GM Binder at time of writing, this theme implements classes on surround `div` elements to style such tables.

\pagebreak

#### Headless Tables
Markdown does not support headless tables by default; this theme implements them by adding the `headless` class. See [Ladder Tables](#fate-srd-special-formatting-blocks-tables-ladder-tables) for an example.

#### Ladder Tables
Ladder tables are denoted with the `ladder` class. Thus;

|||
|-|-|
|+8|Legendary|
|+7|Epic|

</div>

Is implemented via

```
<div class="ladder headless">

|||
|-|-|
|+8|Legendary|
|+7|Epic|

</div>
```

\pagebreak

#### Skill Lists
Skill list tables are denoted by the `skill-list` class. Thus;

|Approach|Attack|Defend|Overcome|Create an Advantage|
|-|-|-|-|-|
|Forceful|X|X|X|X|

</div>

Is implemented via;

```
<div class="skill-list">

|Approach|Attack|Defend|Overcome|Create an Advantage|
|-|-|-|-|-|
|Forceful|X|X|X|X|

</div>
```

\pagebreak

## Inline
The following features are implemented inline, and can be combined with other text. They are denoted as `span` elements with special classes.

### Aspects
Aspects are denoted with the `aspect` class. Thus;

* <span class="aspect">Starry eyed youth</span>
* <span class="aspect">Something to prove</span>
* <span class="aspect">Haunted, Hunted, and Unphazed</span>

Is implemented via;

```
* <span class="aspect">Starry eyed youth</span>
* <span class="aspect">Something to prove</span>
* <span class="aspect">Haunted, Hunted, and Unphazed</span>
```

### Glyphs
Fate Glyphs are denoted with the `fate-glyph` class. Thus;

* Roll the bones: <span class="fate-glyph">++--</span> = 0
* Actions include <span class="fate-glyph">CADO</span>

Is implemented via

```
* Roll the bones: <span class="fate-glyph">++--</span> = 0
* Actions include <span class="fate-glyph">CADO</span>
```

\pagebreak

#### Big Glyphs
`fate-glyph` also supports the `big` class. Thus;

* <span class="fate-glyph big">A++-0</span> Attack!

Is implemented via;

```
* <span class="fate-glyph big">A++-0</span> Attack!
```

\pagebreak

# Standard Markdown
This section demonstrates standard Markdown as supported by GM binder, and how such elements look in this theme.

## Headlines, 2
### Headlines, 3
#### Headlines, 4

## Type Faces
* **Bold**
* *Italics*
* ~~Strikethrough~~
* Script^Super^
* Script<sup>Super</sup>
* Script<sub>Sub</sub>
* [Internal Link](https://www.gmbinder.com)
* [External Link](https://www.reddit.com/r/uneartherarcana)

1. Item 1
2. Item 2
3. Item 3

* Item 1
* Item 2
* Item 3

\pagebreak

## Blockquotes
Used to denote examples of actual play per [Blockquotes](#fate-srd-special-formatting-blocks-blockquotes).

> "Wait, it's all blockquotes?"
>
> "Always has been."

## Tables
Additional options for tables are made available by this theme; see [Tables](#fate-srd-special-formatting-blocks-tables).

|Result|Odd of rolling|Odd of rolling this or higher|
|-|-|-|
|-4|1.23%|100%|
|-3|4.94%|98.77%|
|-2|12.35%|93.83%|
|-1|19.75%|81.48%|
|0|23.46%|61.73%|
|1|19.75%|38.27%|
|2|12.35%|18.52%|
|3|4.94%|6.17%|
|4|1.23%|1.23%|

\pagebreak

# Legal
To use this document as a template, you'll need to pick out a [Fate License](https://www.faterpg.com/licensing/). The following attributions apply to both this document and any derivatives.

*This publication is not affiliated with Evil Hat Productions, LLC.*

*Fate™ is a trademark of Evil Hat Productions, LLC. The Powered by Fate logo is © Evil Hat Productions, LLC and is used with permission.*

*The Fate Core font is © Evil Hat Productions, LLC and is used with permission. The Four Actions icons were designed by Jeremy Keller.*

/* Wipe out unwanted GMB effects */
.phb {
    column-count:1;
    background: unset;
    background-color: white;
    padding: unset;
}

.phb:after {
    content: unset;
}

.phb h1+p:first-letter {
    font-size: unset;
    font-family: unset;
    float: unset;
    line-height: unset;
    color: unset;
}

.phb p+p {
    margin-top: unset;
}

.phb p+p, .phb ul+p, .phb ol+p {
    text-indent: unset;
}

.phb h3 {
    border-bottom: unset;
}

.phb blockquote {
    font-family: unset;
    background: unset;
    border: unset;
    box-shadow: unset;
    padding: unset;
}

.phb strong {
    font-weight: unset;
    letter-spacing: unset;
}

.phb h1,
.phb h2,
.phb h3,
.phb h4,
.phb h5,
.phb h6 {
    stroke-width: 0;
    -webkit-text-stroke-width: 0;
}

.phb table {
    font-family: unset;
    width: unset;
    margin-bottom: unset;
    font-size: unset;
    line-height: unset;
}

.phb table em {
    font-family: unset;
    font-style: unset;
}

.phb table strong {
    font-family: unset;
    font-weight: unset;
    letter-spacing: unset;
}

.phb table thead {
    font-weight: unset;
}

.phb table thead th {
    vertical-align: unset;
    padding: unset;
}

.phb table tbody tr td {
    padding: unset;
}

.phb table tbody tr:nth-child(odd) {
    background-color: unset;
}

/* Fate SRD Style */
.phb {
    background-color: #f9f9f9;
    border-radius: 4px;
    box-shadow: 2px 2px 19px 0 rgbA(0,0,0,.7);
    
    color: #333;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    line-height: 1.2;
    padding: 2.5em;
    
    /* HACK: Due to manual page breaks, manual text sizing is necessary */
    font-size: 16px;
    
    /* HACK: Sizing per published Fate books */
    height: 9in;
    width: 6in;
}

.phb h1,
.phb h2,
.phb h3,
.phb h4,
.phb h5,
.phb h6 {
    font-weight: 700;
    margin: 0;
    margin-top: 1.25em;
    margin-bottom: 0.625em;
    color: #0a497a;
    line-height: 1;
    
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.phb h3 {
    line-height: 1.1;
    font-size: 1.17em;
}

.phb h1 {
    font-size: 3em;
    line-height: 1;
}

.phb h2 {
    margin-top: .625em;
    margin-bottom: .3125em;
    font-size: 2.25em;
    line-height: 1.1;
}

.phb h4,
.phb h5,
.phb h6 {
    font-size: 1em;
    line-height: 1.1;
}

.phb blockquote {
    display: block;
    
    margin: 1.875em 1.25em 1.875em 0;
    border-left: #b9b9b9 2px solid;
    color: #666;
    font-size: .9em;
    padding-left: 1.25em;
}

.phb .aspect {
    background: #fff8b9;
    color: #4d4d4d;
    font-size: .95em;
    font-weight: 400;
    font-style: italic;
    padding: 0 .3125em;
}

.phb .aspect,
.phb blockquote {
    font-family: Georgia,"Times New Roman",Times,serif;
}

.phb div.callout {
    background: #ececec;
    padding: .625em 1.25em;
    margin-bottom: .625em;
    margin-top: .625em;
    border-radius: 4px;
}

.phb div.callout h1,
.phb div.callout h2,
.phb div.callout h3,
.phb div.callout h4,
.phb div.callout h5,
.phb div.callout h6 {
    margin: .625em 0;
    border-bottom: 1px solid #c6c6c6;
    font-size: 1em;
    padding: 0 0 .625em;
    text-transform: uppercase;
}

.phb strong {
    font-weight: 700;
}

.phb li,
.phb p {
    margin: 0 0 .625em;
}

.phb a,
.phb a:link {
    color: #1b75bc;
    text-decoration: none;
    transition: all .15s ease-in;
}

.phb a {
    background: 0 0;
}

.phb a:active,
.phb a:hover,
.phb a:link:active,
.phb a:link:hover {
    color: #9a4699;
}

@font-face {
    font-family: fate;
    src: url(https://fate-srd.com/sites/all/themes/custom/fate/fonts/fate_core_font-webfont.eot);
    src: url(https://fate-srd.com/sites/all/themes/custom/fate/fonts/fate_core_font-webfont.eot?#iefix) format("embedded-opentype"),url(https://fate-srd.com/sites/all/themes/custom/fate/fonts/fate_core_font-webfont.woff) format("woff"),url(https://fate-srd.com/sites/all/themes/custom/fate/fonts/fate_core_font-webfont.ttf) format("truetype"),url(https://fate-srd.com/sites/all/themes/custom/fate/fonts/fate_core_font-webfont.svg#fate_core_glyphsregular) format("svg");
    font-weight: 400;
    font-style: normal
}

.phb span.fate-glyph {
    font-family: fate;
    font-weight: 400;
}

.phb span.fate-glyph.big {
    font-size: 2em;
    line-height: 1.2em;
}

.phb .index-card::before {
    content: '';
    position: absolute;
    width: 4px;
    top: 0;
    left: 1.25em;
    bottom: 0;
    border: 1px solid;
    border-color: transparent #efe4e4;
}

.phb .index-card {
    padding: 16px 2em 1em;
    position: relative;
    vertical-align: top;
    background: #FFF;
    background: linear-gradient(#d9eaf3 0,#FFF 8%) 0 4px;
    background-size: 100% 20px;
    border-radius: 4px;
    box-shadow: 1px 1px 1px rgba(0,0,0,.3);
    margin-bottom: 1.25em;
    border: 1px solid #b9b9b9;
    width: 100%;
}

.phb .index-card h1,
.phb .index-card h2,
.phb .index-card h3,
.phb .index-card h4,
.phb .index-card h5,
.phb .index-card h6 {
    margin: 0 auto .3125em;
    font-size: 1.5em;
    line-height: 1;
}

.phb table tbody tr td,
.phb table thead tr th {
    padding: .3125em .625em
}

.phb table {
    border-collapse: collapse;
    border-spacing: 0
}

.phb div.headless table thead {
    visibility: collapse;
}

.phb div.ladder table tr td,
.phb div.bordered table tr td {
    border-bottom: 1px solid #c6c6c6;
    padding: .25em .5em
}

.phb div.ladder table {
    border-collapse: collapse;
    margin-bottom: 2em
}

.phb div.skill-list table {
    width: 100%
}

.phb div.skill-list table th {
    background: #d3d3d3;
    text-align: center;
}

code,.phb div.skill-list table tr:hover {
    background: #ececec
}

.phb div.skill-list table th:first-child {
    padding-left: 0
}

.phb div.skill-list table td {
    border-bottom: 1px solid #d3d3d3;
    padding: .5em 0;
    text-align: center;
}

.phb div.skill-list table td:first-child {
    padding-left: .5em;
    text-align: left
}

.phb div.skill-list table td span {
    font-size: 0
}

.phb div.skill-list table td span:after {
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    margin-left: 0;
    position: relative;
    top: 1px;
    content: "";
    font-family: icomoon;
    text-decoration: none;
    text-rendering: auto;
    font-size: 16px
}

.phb div.skill-list table tr {
    transition: all .1s
}

/* HACK: Section title */
.phb:before {
    margin: 0;
    content: "Fate SRD Style";
    display:block;
    
    margin: 0;
    color: #0a497a;
    font-weight: 700;
    text-transform: uppercase;
}

.phb:after {
    background: unset;
    font-style: italic;
    content: "Fate™ is a trademark of Evil Hat Productions, LLC."
}

/* HACK: No special class for titles, so reimplementing the selectot for page-titles */
div > section:first-of-type > h1,
div > section:first-of-type > h2,
div > section:first-of-type > h3,
div > section:first-of-type > h4,
div > section:first-of-type > h5,
div > section:first-of-type > h6
{
    margin-top: 0;
}

/* HACK: No hosted powered-by-fate dark theme logo, so make our own background */
.powered-by-fate {
    display: block;
    margin: auto;
    background: #0a497A;
    padding: 1em;
    border-radius: 2em;
}

</style>