112 lines
3.1 KiB
SCSS
112 lines
3.1 KiB
SCSS
|
/**
|
||
|
|
* 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;
|
||
|
|
}
|
||
|
|
}
|