A jist.in stylesheet for RPG gists.

custom.css

/*
 * Custom stylesheet for jist.in RPG markdown documents
 * Obsessively crafted by Chris Keele
 */

@import url(http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911);
@import url(http://fonts.googleapis.com/css?family=UnifrakturMaguntia);

body {
  background: #cbbe9f url(https://gist.github.com/christhekeele/e27d25ee70290eaadf2a/raw/33dbf2f0034599f8e7692757531837c970bf809f/paper-dark.jpg);
}



/*
 * MEDIA QUERIES
 */

/* Default mobile-first */
@media only screen {
  body {
    font-size: 14px;
    line-height: 1.1;
  }
  .container-fluid {
    /*max-width: 1000px;*/
  }
  .section {
    padding: 1.5em 1em;
  }
  p {
    text-indent: 0.5em;
  }
  blockquote {
    border-left-width: 0.2em;
    padding: 0.1em 0.2em 0.1em 0.4em;
  }
  th, td {
    padding: 0.25em;
  }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) { /* inherit everything */}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  body {
    font-size: 16px;
    line-height: 1.2;
  }
  .container-fluid {
    max-width: 750px;
  }
  .section {
    padding: 1.5em 1em;
  }
  p {
    text-indent: 0.5em;
  }
  blockquote {
    border-left-width: 0.25em;
    padding: 0.25em 0.5em 0.25em 0.75em;
  }
  th, td {
    padding: 0.8em;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  body {
    font-size: 18px;
    line-height: 1.3;
  }
  .container-fluid {
    max-width: 800px;
  }
  .section {
    padding: 2em 1.3em;
  }
  p {
    text-indent: 1.5em;
  }
  blockquote {
    border-left-width: 0.3em;
    padding: 0.5em 0.75em 0.5em 1.05em;
  }
  th, td {
    padding: 0.5em;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  body {
    font-size: 20px;
    line-height: 1.4;
  }
  .container-fluid {
    max-width: 1000px;
  }
  .section {
    padding: 3em 2em;
  }
  p {
    text-indent: 1.5em;
  }
  blockquote {
    border-left-width: 0.3em;
    padding: 0.5em 0.75em 0.5em 1.05em;
  }
  th, td {
    padding: 0.5em;
  }
}



/*
* STRUCTURE
*/

#wrapper {}

#content {}



/*
 * TYPOGRAPHY
 */

body {
  font-family: 20px/1.4 'Goudy Bookletter 1911', 'Bodoni MT,Didot', 'Didot LT STD', 'Hoefler Text', 'Garamond', 'Times New Roman', serif;
  color: #333;
}

h1 {
  text-align: center;
}
h1, h5, h6 {
  text-transform: uppercase;
}

li p {
  text-indent: inherit;
}
li {
  text-indent: inherit;
}

p:first-letter {
  font-family: 'UnifrakturMaguntia', 'Goudy Bookletter 1911', 'Bodoni MT,Didot', 'Didot LT STD', 'Hoefler Text', 'Garamond', 'Times New Roman', serif;
  text-transform: uppercase;
  font-size: 1.5em;
  line-height: 1em;
}

ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
ul li {
  position: relative;
  margin-left: 1em;
}
ul li:before {
  position: absolute;
  left: -1em;
  content: "⚔";
}

a {
  -o-transition:      all 0.5s;
  -ms-transition:     all 0.5s;
  -moz-transition:    all 0.5s;
  -webkit-transition: all 0.5s;
  transition:         all 0.5s;
  text-decoration: none;
}
a:link {
  color: #A16119;
}
a:visited {
  color: #555;
}
a:hover {
  color: #e78b24;
  text-decoration: underline;
}

.section th {
  font-weight: bolder;
  text-transform: uppercase;
}



/*
 * OUTSIDE SECTIONS
 */

/* double with symbol */
#content > hr {
  padding: 0 0 1.5em 0;
  margin: 2em 0 -2em 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}
#content > hr:after {
  content: "∭";
  display: inline-block;
  position: relative;
  top: -0.8em;
  font-size: 1.75em;
  padding: 0 0.25em;
  /*background: white;*/
}



/*
* INSIDE SECTIONS
*/

.section {
  background: #dfd8c5 url(https://gist.github.com/christhekeele/e27d25ee70290eaadf2a/raw/6dc1d68144dad3edd8b126ac42fd5469a138b158/paper-light.jpg);
  box-shadow: 0 0 4em rgba(84,75,49,.7);
}

/* flaired */
.section hr {
  margin: 25px 0 6px 0;
  height: 30px;
  border-style: solid;
  border-color: black;
  border-width: 1px 0 0 0;
  border-radius: 20px;
}
.section hr:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: black;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}

table {
  min-width: 50%;
  margin-bottom: 1.5em;
  border: none;
}
thead {
  border-bottom: 2px;
}
tbody, tfoot {
  border: black 1px solid;
}
tr, td {
  border: inherit;
}



/*
* INSIDE BLOCK QUOTES
*/

blockquote {
  border-left-style: solid;
  border-left-color: #A16119;
  background: #cbbe9f url(https://gist.github.com/christhekeele/e27d25ee70290eaadf2a/raw/33dbf2f0034599f8e7692757531837c970bf809f/paper-dark.jpg);
}

blockquote h1, blockquote h2, blockquote h3, blockquote h4, blockquote h5, blockquote h6 {
  font-weight: lighter;
}

blockquote {
  font-size: 0.9em;
}
blockquote p {
  font-size: inherit;
  text-indent: inherit;
}
blockquote p:first-letter {
  font-size: 1.2em;
}

paper-dark.jpg

paper-light.jpg

RPG-stylesheet.md

This is a custom css stylesheet for Markdown gists using the jist.in service.

To use, simply add the custom.css file to your gist.

Below is a demonstration of all markdown components and how they appear styled.

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

A simple paragraph. This paragraph contains links, some of which you've probably visited. Some things are emphasized, embolded, or both. Some are even struck through. It also has inline code snippets.

This is a long paragraph. Lorem ipsum ivamus risus elit, rhoncus id dignissim ut, laoreet sit amet enim. Cras egestas neque dapibus purus feugiat efficitur. Mauris vitae lectus dictum, bibendum est vel, sagittis leo. Morbi vel dolor sit amet purus aliquet sodales. Curabitur sollicitudin pretium luctus. Aenean est ipsum, tempor quis elit eget, congue egestas metus. Praesent blandit tristique tellus, vitae lacinia tellus fermentum et. Integer mattis est in lacus suscipit, sed elementum velit rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat elit lorem, porta pharetra erat rhoncus in. Vestibulum vel dignissim libero. Aenean consectetur tellus lobortis, tempor tortor ornare, elementum nunc. Sed malesuada mi enim, eget aliquam sapien tempor tincidunt. In nec egestas ligula. Morbi ac metus lacinia, scelerisque nisi vel, pretium justo. Sed quis luctus nibh, ut laoreet tortor. Sed posuere a odio pharetra eleifend. Aliquam sit amet lacus lectus. Aenean condimentum libero nec sollicitudin finibus. Aliquam risus erat, porttitor egestas metus quis, laoreet lobortis libero. Integer id eleifend purus, in tincidunt justo. Donec ante tellus, aliquam tempor velit vitae, faucibus sagittis lectus. Quisque vitae ullamcorper est. Integer enim enim, sagittis eget commodo vitae, pretium sit amet eros. In suscipit dignissim ex vel elementum. Vestibulum pretium ante eu ipsum sagittis accumsan. Donec ut maximus dolor

This is an inline image:

This is an image:

• A
• simple
• list

1. A

2. numbered

3. list

4. A

5. list

6. with

• nested

• sublists

• A list

  with multiline

• content

  An indented code block.

**A fenced code block *(with syntax highlighting)*.**

This is a horizontal rule:

---

This is content after a horizontal rule.

This is a table:

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

This is a block quote.

Block quotes have custom styles so they can act as callouts:

This is a multiline block quote with a lot of stuff going on.

• A
• simple
• list

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

A simple paragraph. This paragraph contains links, some of which you've probably visited. Some things are emphasized, embolded, or both. Some are even struck through. It also has inline code snippets.

A code block.

This is an inline image:

This is an image:

secondary_file.md

This is a secondary markdown file. These are also supported by jist.in–it just renders file in alphabetical order.