/* CSS file for making things pretty. NOTE: If sizes are all screwed up on mobile devices, make sure you have the following magic incantation in the HTML's block: */ /* Basic defaults page-wide */ body { background-color: ivory; font-family: serif; margin: 1em; } section { margin: 3.5em 0 3.5em 0; } blockquote { font-style: italic; } /* Common headers, footers, etc. */ header { max-width: 7in; margin: 0 auto; } header .story-tags { font-weight: bold; } header .story-tags a { font-size: x-small; } .related-stories { float: right; background-color: tan; padding: 0.5em; } .related-stories div { font-weight: bold; } article { max-width: 7in; margin: 0 auto; } footer { background-color: tan; padding: 1em; max-width: 7in; margin: 0 auto; } article hr { width: 25%; } /* Chat-app style communications, like IMs or Skype. * The classes chat-log and chat-row are mandatory, * but the first and second divs in each chat-row are * automatically styled as the name and the chat text * respectively. This is probably bad form, but since * I'm writing these stories directly in HTML, I * figured it would be worth it to save the keystrokes * and eye-strain. */ div.chat-log { margin-left: 2em; margin-right: 2em; font-family: sans-serif; display: table; border-spacing: 0.5em; } div.chat-row { position: relative; display: table-row; } div.chat-row div:nth-child(1) { font-weight: bold; display: table-cell; vertical-align: middle; } div.chat-row div:nth-child(2) { margin-left: 0.5em; margin-right: 0.5em; margin-bottom: 0.5em; margin-top: 0.5em; background-color: wheat; border-radius: 0.5em; padding: 0.5em; display: table-cell; } /* Email-style block */ div.email { padding: 0.5em; margin-left: 2em; margin-right: 2em; background-color: wheat; } div.email div.email-header { font-weight: bold; } /* Inner voice - words in a character's head not said aloud. */ .inner-voice { font-style: italic; } /* Adjustments for small screens or windows. */ @media screen and (max-width: 700px) { body { margin: 6px; } .related-stories { float: none; } div.chat-log { margin: 0em 0em 0em 0em; } blockquote { margin: 0em 0em 0em 0em; } }