Stay Classy (CSS classes for GMBinder)

.phb div.signature {
  text-align: right;
  margin-bottom: .2em;
  font-family: ScalySansSmallCaps;
  font-size: .423cm;
  font-weight: 900
}

.phb div.spelldc {
  font-family: ScalySans;
  font-size: 110%;
  text-align: center;
}

.phb div.story::first-line {
  font-style: none;
  font-family: ScalySansSmallCaps;
  font-size: 110%;
}

.phb div.spellList.narrow {
    column-span: none;
    column-count: 2;
}

.floating-caption {
    position: absolute;
    font-family: ScalySans;
    color: #58180d; 
    
    background-color: rgba(255,255,255,.5);
    padding: 4px 8px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(255,255,255.3);
}

.floating-caption p {
    margin: 0;
}

.phb .left { text-align: left; }
.phb .center { text-align: center; }
.phb .right { text-align: right; }
.phb .justify { text-align: justify; }
.phb .nowrap { white-space: nowrap; }

</style>

# Stay Classy

<div class='signature'>by Alice Witchfire</div>

### What is this?
A collection of CSS classes that can be used with any GMBinder theme (shown here using the UA theme). Created by Alice Witchfire.

### How to Use
1. Disable 'Use Default GMB Theme' for your document, otherwise these won't work.
2. Copy and paste the source code into your document.
3. Apply the appropriate class (or classes) to your divs. You can use these alone or add them to existing class lists.

```
<div class='descriptive story credit'> Here be text weary traveler! </div>
```

### Source Code
Copy and paste the following into your document. It won't steal your credit card number, I swear.

```
<style>
.phb div.credit{width:100%;font-family:ScalySans;text-align:right}.phb div.signature{text-align:right;margin-bottom:.2em;font-family:ScalySansSmallCaps;font-size:.423cm;font-weight:900}.phb div.spelldc{font-family:ScalySans;font-size:110%;text-align:center}.phb div.story::first-line{font-style:none;font-family:ScalySansSmallCaps;font-size:110%}.phb div.spellList.narrow{column-span:none;column-count:2}.floating-caption{position:absolute;font-family:ScalySans;color:#58180d;background-color:rgba(255,255,255,.5);padding:4px 8px;border-radius:8px;box-shadow:0 0 5px rgba(255,255,255.3)}.floating-caption p{margin:0}.phb .left{text-align:left}.phb .center{text-align:center}.phb .right{text-align:right}.phb .justify{text-align:justify}.phb .nowrap{white-space:nowrap}
</style>
```

\columnbreak

### Quick Reference

#### Credits
```
Right aligned:
<div class='credit'>...</div>

Center aligned:
<div class='credit center'>...</div>

Bold and brash:
<div class='signature'>...</div>
```

#### Spell Calculations
```
<div class='spelldc'>...</div>
```

#### First Line Fancy
```
Normal:
<div class='story'>...</div>

Descriptive (Stories):
<div class='descriptive story'></div>

Story credit:
<div class='story credit'></div>
```

#### Single Line (no wrap)
```
<div class='nowrap'></div> 
<span class='nowrap'></span>

For tables:
| <span class='nowrap'></span> |
```

#### Narrow Spell List
```
<div class='spellList narrow'></div>
```

\pagebreak

### Examples

#### Credit
A quick way to add some credit text.

<div class='credit'>— Albert Einstein</div>

```
<div class='credit'>— Albert Einstein</div>
```

#### Signature
This is essentially h4 but right aligned. It's intended as a more prominent version of credit.

<div class='signature'>Albert Einstein</div>

```
<div class='signature'>Albert Einstein</div>
```

#### Spell DC
This makes the text inside it match the spell save calculations found in the PHB. I recommend bolding the first part, but you need two lines after the opening tag for it to work.

**Spell save DC =** 8 + your Proficiency Bonus + your Hunger modifier

</div>

```
<div class='spelldc'>

**Spell save DC =** 8 + your Proficiency Bonus + your Hunger modifier

</div>
```

#### Story (Default)
This is good for stories and quotes. It makes the first line of text look all fancy schmancy. It can be found occasionally throughout the PHB, mostly on stories and short blurbs. I recommend using it with the 'descriptive' and 'credit' classes.

<div class='story'> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?' </div>

```
<div class='story'> Alice was beginning to... </div>
```

\columnbreak

#### Story (Descriptive)
This is how it appears when used in a descriptive block. You can apply it to the credits again to make the credits fancy.

<div class='descriptive story'> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'

— Lewis Carroll  
Alice in Wonderland
</div>
</div>

```
<div class='descriptive story'> Alice was beginning to...

— Lewis Carroll  
Alice in Wonderland
</div>
</div>
```

#### Narrow
This is used alongside 'spellList' to reduce it from 4 columns to 2. However, it exhibits strange behavior if you use ```\columnbreak``` inside of it.

##### Cantrips (0 Level)
- Cantrip A
- Cantrip B

##### 1st Level
- Spell A
- Spell B

##### 2nd Level
- Spell A
- Spell B

</div>

```
<div class='spellList narrow'> Your spells here </div>
```

#### Floating Captions

```
<div class='floating-caption' style='right:10%;'> This is a floating caption </div>
```

Floating captions are intended to be placed next to images and other places where credit is due. Though not seen here, they have a translucent white background. They can be moved by adding `left:x, right:x, top:x, bottom:x` to the style attribute. You can also add `left, right, center` to the class name to justify the text.

This is a floating caption  
with two lines  
and class='floating-caption right'

</div>

\pagebreak

#### Semi-Indented Text
While this isn't necessarily a new class, it is a neat little utility that is worth highlighting. To create a block of text that is indented on every line *except* the first, you can do the following. 
___
* **Semi-Indented Text.** Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'

```
___
* Big block of text goes here
```

#### Utility Classes
The following classes are meant for utility, and are simply shortcuts for specific CSS properties. They can be used alone or alongside other classes (space separated).

### Right-Floating Headers
To enable this feature, add the following line of code somewhere in your document.
___
With style tags: `<style>h3 em,h4 em,h5 em{float:right;font-variant:small-caps;font-size:.9em}</style>`
___
No tags: `h3 em,h4 em,h5 em{float:right;font-variant:small-caps;font-size:.9em}`

##### Extra Attack *5th level*

This feature allows you to create right-floating labels in headers by surrounding them in asterisks. Note the "5th level" label to the right of this header.
___
```##### Extra Attack *5th level*```

### The Em-Dash (—)
Wizards of the Coast uses these very heavily, most notably as placeholders in class tables. The quickest way to add an emdash is to type ```—```.

| Caster Level | 1st | 2nd | 3rd | 4th | 5th |
|:-:|:-:|:-:|:-:|:-:|:-:|
| 1st | 2 | — | — | — | — |
| 2nd | 3 | — | — | — | — |
| 3rd | 4 | 2 | — | — | — |
| 4th | 4 | 3 | — | — | — |
| 5th | 4 | 3 | 2 | — | — |

##### Other Useful Escapes
Here are a few other useful escape sequences worth memorizing.

(A complete list of ASCII escapes can be found [here](https://www.freeformatter.com/html-entities.html))