naturalcrit / homebrewery

Create authentic looking D&D homebrews using only markdown
https://homebrewery.naturalcrit.com
MIT License
1.04k stars 317 forks source link

Here is some code for "Descriptive Text Boxes" #158

Closed calculuschild closed 7 years ago

calculuschild commented 7 years ago

Since there have been so many people asking for the descriptive text boxes, and I have needed them myself, I finally just made some CSS styles for one.

Code is here: http://homebrewery.naturalcrit.com/share/rJjS4SOu

<div class="descText">
You see a small, round wooden table before you.  A scattering of papers sheets, roughly-used books, and some half-eaten pizza lay atop it.

"So, you've found your way to our little table, I see," says a voice from the far chair.  Illuminated in the bright glow of a laptop computer, you can just make out the features of his face. "I'm the DM.  and I'm currently reading from this Homebrewery page."
</div>

Just add the CSS style code from below in the source code somewhere on your page, and you'll be good to go!

<style>
    .test {
        background-color: #faf7ea;
    }

    .descText {
        font-family : ScalySans;
        background-color: #faf7ea;
        border-style: solid;
        border-width: 7px;
        border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA8CAMAAADG+c2+AAAAM1BMVEUAAAAAAAAAAAAkAAA1GwA0GgA5GgA5GwA4HgA7HgA5HgA7HgA7HwA7HgA8HgA7HgA8HwDn6RpAAAAAEHRSTlMAAQcHMDExQ1ZW1dXY3t7+02zZCAAAAKNJREFUWMPt2LEOwyAMBNCkSXGpKfb/f20G3AGUiWOJdNlueYrt6di2J3xHrmZF9mVCdnd3T/NgCO+ItUWdB0P4RrQWfR4chOVggUcu/cgCH0X6o+ynuivg3QjIAm8FggQJEiRIkCBBggQJEoTApO56An15EFIrVgJ4vaAtlnlwEKKbGrLATlgOxg9XeORfv9IMH+Xzb7tSzGo+gL7chNcjXpUulIwXVrjWS+0AAAAASUVORK5CYII=") 12 round;
        border-image-outset: 4px;
        margin-bottom: 1em;
        box-shadow: 0px 0px 6px #faf7ea;
        display: block-inline;
    }
    .descText p{
        display: block;
        line-height: 1.5em;
        padding-bottom: 0px;
    }
    .descText p + p {
        padding-top: .8em;

    }
    .descText em {
            font-family : ScalySans;
            font-style  : italic;
        }
    .descText strong {
      font-family    : ScalySans;
      font-weight    : 800;
      letter-spacing : -0.02em;
    }
</style>

It might not be exactly the same as the PHB but it's close.

stolksdorf commented 7 years ago

Love it. I've tweaked it and added it as a base style and as a new snippet in v2.2.7. Thanks so much!