/** * Typography resets for entries and comments: */ $journal-content-font-size: 1rem !default; .entry, #comments, .reply-page-wrapper, #talkpost-wrapper { // Intended behavior: // - Skins that don't specify otherwise will display entries and comments // in the default font size. (That's not the browser default, though, // because Foundation hard-sets the default font size to 16px.) // - Skins that want a different base text size for entries and comments (the // Tropos, at the moment) can set a rem or px font size for `.entry, // #comments, .reply-page-wrapper`; everything inside those will scale. // In order to GET that intended behavior, we basically need to do a partial // CSS reset and make new em-based sizes for all the internal content on these // pages; Foundation sets individual rem font sizes for almost every element, // so you can't scale them by just setting a new size on the container. font-size: $journal-content-font-size; // An attempt to get a more readable line-length. The ideal width seems to be // incalculable, and definitely depends on the specific font's metrics. This // width is specifically for Verdana; revisit this carefully if updating the // font stack. max-width: 72em; margin: 0 auto; // The em-based sizes below are based on a combination of foundation/_settings // and the hardcoded defaults, depending on what we seem to be using. // Things we leave alone: // tables, and form elements other than textareas. // Things that are normal text: p, ul, ol, dl, label { font-size: 1em; } // Things that are a little askew from normal text: aside { font-size: 0.875em; } blockquote cite { font-size: 0.8125em; } // This Foundation-ism isn't commonly used in journal posts, and is here for completeness' sake. blockquote { margin: 1.25em; } // Things that are their own thing: h1 { font-size: 1.814em; } h2 { font-size: 1.618em; } h3 { font-size: 1.3055em; } h4 { font-size: 1.121em; } h5 { font-size: 1em; } h6 { font-size: .9em; } pre code { display: block; } // Specific to journal content: .comment-title { font-size: 1.3em; } .partial .comment-title { font-size: 1em; display: inline; font-weight: normal; font-family: inherit; } textarea { font-family: monospace; font-size: 16px; } // Foundation likes stretching selects to 100% for some reason select { width: auto; } // People use textareas to share code sometimes. textarea { width: unset; height: unset; } .usercontent, .currents, .comment-title { word-wrap: break-word; overflow-wrap: break-word; } // RPers especially love to abuse tables for decorative layout, but Foundation // default styles assume tables are for tabular data. (Leaving Foundation's // cell padding in place, though, since old skins also had some.) table, table tr { background: none; border: none; } } /** * Typography resets for icons page: */ .icon-container .icon-info { font-size: $journal-content-font-size; ul, li { font-size: $journal-content-font-size; } }