diff --git a/sscaffold.css b/sscaffold.css index 7be0077..008e12c 100644 --- a/sscaffold.css +++ b/sscaffold.css @@ -1,62 +1,73 @@ -/** - * RESET - * - * Following rules are intended to fix layout quirks in different browsers. - * - */ +/****************************************************************************** +* +* RESET +* +* Following rules are intended to fix layout quirks in different browsers. +* +******************************************************************************/ + +*, +*:after, +*:before { + /* Set default box sizing for all elements. [2] */ + box-sizing: inherit; +} + html { - /* Fix the line height in all browsers. [1] */ - line-height: 1.15; - /* Prevent adjustments of font size after orientation changes in iOS. [1] */ - -webkit-text-size-adjust: 100%; + /* Fix the line height in all browsers. [1] */ + line-height: 1.15; + /* Prevent adjustments of font size after orientation changes in iOS. [1] */ + -webkit-text-size-adjust: 100%; + /* Set a default box sizing. [2] */ + box-sizing: border-box; } body { - /* Remove the margin in all browsers. [1] */ - margin: 0; + /* Remove the margin in all browsers. [1] */ + margin: 0; } main { - /* Render the 'main' element consistently in IE. [1] */ - display: block; + /* Render the 'main' element consistently in IE. [1] */ + display: block; } details { - /* Add the correct display in Edge, IE 10+, and Firefox. [1] */ - display: block; + /* Add the correct display in Edge, IE 10+, and Firefox. [1] */ + display: block; } summary { - /* Add the correct display in all browsers. [1] */ - display: list-item; + /* Add the correct display in all browsers. [1] */ + display: list-item; } template { - /* Add the correct display in IE 10+. [1] */ - display: none; + /* Add the correct display in IE 10+. [1] */ + display: none; } h1 { - /* Fix the font size and margin on 'h1' elements in 'section' and - 'article' contexts in Chrome, Firefox, and Safari. [1] */ - font-size: 2em; - margin: 0.67em 0; + /* Fix the font size and margin on 'h1' elements in 'section' and + 'article' contexts in Chrome, Firefox, and Safari. [1] */ + font-size: 2em; + margin: 0.67em 0; } hr { - /* Add the correct box sizing in Firefox. [1] */ - box-sizing: content-box; - height: 0; - /* Show the overflow in Edge and IE. [1] */ - overflow: visible; + /* Add the correct box sizing in Firefox. [1] */ + box-sizing: content-box; + height: 0; + /* Show the overflow in Edge and IE. [1] */ + overflow: visible; } @@ -64,67 +75,74 @@ pre, code, kbd, samp { - /* Fix the inheritance and scaling of font size in all browsers. [1] */ - font-family: monospace, monospace; - /* Fix the odd 'em' font sizing in all browsers. [1] */ - font-size: 1em; + /* Fix the inheritance and scaling of font size in all browsers. [1] */ + font-family: monospace, monospace; + /* Fix the odd 'em' font sizing in all browsers. [1] */ + font-size: 1em; + /* Ensure that these are block-level elements by default. */ + display: block; + /* Ensure that these elements don't soft-wrap by default. [2] */ + white-space: pre; + /* Since white-space is set to "pre", ensure that the element has + scrollbars as necessary. */ + overflow: auto; } img { - /* Remove the border on images inside links in IE 10. [1] */ - border-style: none; + /* Remove the border on images inside links in IE 10. [1] */ + border-style: none; } a { - /* Remove the gray background on active links in IE 10. [1] */ - background-color: transparent; + /* Remove the gray background on active links in IE 10. [1] */ + background-color: transparent; } abbr[title] { - /* Remove the bottom border in Chrome 57-. [1] */ - border-bottom: none; - /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. [1] */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ + /* Remove the bottom border in Chrome 57-. [1] */ + border-bottom: none; + /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. [1] */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ } b, strong { - /* Add the correct font weight in Chrome, Edge, and Safari. [1] */ - font-weight: bolder; + /* Add the correct font weight in Chrome, Edge, and Safari. [1] */ + font-weight: bolder; } small { - /* Enforce the correct font size in all browsers. [1] */ - font-size: 80%; + /* Enforce the correct font size in all browsers. [1] */ + font-size: 80%; } sub, sup { - /* Prevent 'sub' and 'sup' elements from affecting the line height - in all browsers. [1] */ - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + /* Prevent 'sub' and 'sup' elements from affecting the line height + in all browsers. [1] */ + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - /* Enforce 'sub' positioning in all browsers. [1] */ - bottom: -0.25em; + /* Enforce 'sub' positioning in all browsers. [1] */ + bottom: -0.25em; } sup { - /* Enforce 'sup' positioning in all browsers. [1] */ - top: -0.5em; + /* Enforce 'sup' positioning in all browsers. [1] */ + top: -0.5em; } @@ -133,36 +151,49 @@ input, optgroup, select, textarea { - /* Set the font styles to match the rest of the document in - all browsers. [1] */ - font-family: inherit; - font-size: 100%; - line-height: 1.15; - /* Remove the margin in Firefox and Safari. [1] */ - margin: 0; + /* Set the font styles to match the rest of the document in + all browsers. [1] */ + font-family: inherit; + font-size: 100%; + line-height: 1.15; + /* Remove the margin in Firefox and Safari. [1] */ + margin: 0; } button, input { - /* Show the overflow in Edge. [1] */ - overflow: visible; + /* Show the overflow in Edge. [1] */ + overflow: visible; } button, select { - /* Remove the inheritance of text transform in Edge, Firefox, and IE. [1] */ - text-transform: none; + /* Remove the inheritance of text transform in Edge, Firefox, and IE. [1] */ + text-transform: none; } +.button, button, [type="button"], [type="reset"], [type="submit"] { - /* Fix the inability to style clickable types in iOS and Safari. [1] */ - -webkit-appearance: button; + /* Fix the inability to style clickable types in iOS and Safari. [1] */ + -webkit-appearance: button; + /* Set the correct cursor for these elements. [2] */ + cursor: pointer; +} + + +.button[disabled], +button[disabled], +[type="button"][disabled], +[type="reset"][disabled], +[type="submit"][disabled] { + /* Reset the cursor for disabled button elements. [2] */ + cursor: default; } @@ -170,95 +201,791 @@ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - /* Remove the inner border and padding in Firefox. [1] */ - border-style: none; - padding: 0; + /* Remove the inner border and padding in Firefox. [1] */ + border-style: none; + padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - /* Restore the focus styles unset by the previous rule. [1] */ - outline: 1px dotted ButtonText; + /* Restore the focus styles unset by the previous rule. [1] */ + outline: 1px dotted ButtonText; } fieldset { - /* Fix 'fieldset' padding in Firefox. [1] */ - padding: 0.35em 0.75em 0.625em; + /* Fix 'fieldset' padding in Firefox. [1] */ + padding: 0.35em 0.75em 0.625em; } legend { - /* Fix text wrapping in Edge and IE. [1] */ - box-sizing: border-box; - display: table; - max-width: 100%; - white-space: normal; - /* Fix color inheritance from 'fieldset' elements in IE. [1] */ - color: inherit; - /* Remove padding so developer are not surprised when they zero out - 'fieldset' elements in all browsers. [1] */ - padding: 0; + /* Fix text wrapping in Edge and IE. [1] */ + box-sizing: border-box; + display: table; + max-width: 100%; + white-space: normal; + /* Fix color inheritance from 'fieldset' elements in IE. [1] */ + color: inherit; + /* Remove padding so developer are not surprised when they zero out + 'fieldset' elements in all browsers. [1] */ + padding: 0; } progress { - /* Add the correct vertical alignment in Chrome, Firefox, and Opera. [1] */ - vertical-align: baseline; + /* Add the correct vertical alignment in Chrome, Firefox, and Opera. [1] */ + vertical-align: baseline; } textarea { - /* Remove the default vertical scrollbar in IE 10+. [1] */ - overflow: auto; + /* Remove the default vertical scrollbar in IE 10+. [1] */ + overflow: auto; } [type="checkbox"], [type="radio"] { - /* Add the correct box sizing in IE 10. [1] */ - box-sizing: border-box; - /* Remove the padding present in IE 10. [1] */ - padding: 0; + /* Add the correct box sizing in IE 10. [1] */ + box-sizing: border-box; + /* Remove the padding present in IE 10. [1] */ + padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - /* Fix the cursor style of increment and decrement buttons in Chrome. [1] */ - height: auto; + /* Fix the cursor style of increment and decrement buttons in Chrome. [1] */ + height: auto; } [type="search"] { - /* Fix appearance in Chrome and Safari. [1] */ - -webkit-appearance: textfield; - /* Fix the outline style in Safari. [1] */ - outline-offset: -2px; + /* Fix appearance in Chrome and Safari. [1] */ + -webkit-appearance: textfield; + /* Fix the outline style in Safari. [1] */ + outline-offset: -2px; } [type="search"]::-webkit-search-decoration { - /* Remove the inner padding in Chrome and Safari on MacOS. [1] */ - -webkit-appearance: none; + /* Remove the inner padding in Chrome and Safari on MacOS. [1] */ + -webkit-appearance: none; } ::-webkit-file-upload-button { - /* Fix the inability to sytle clickable types in iOS and Safari. [1] */ - -webkit-appearance: button; - /* Fix the font properties in Safari. [1] */ - font: inherit; + /* Fix the inability to sytle clickable types in iOS and Safari. [1] */ + -webkit-appearance: button; + /* Fix the font properties in Safari. [1] */ + font: inherit; } [hidden] { - /* Add the correct display in IE 10. [1] */ - display: none; + /* Add the correct display in IE 10. [1] */ + display: none; } + + +/****************************************************************************** +* +* FLEXBOX +* +* These classes provide the flexbox-based row-and-columnar layout from +* milligram.css [2]. +* +******************************************************************************/ + +article, +.container { + margin: 0 auto; + max-width: 112.0rem; + padding: 0 2.0rem; + position: relative; + width: 100%; +} + + +.row { + display: flex; + flex-direction: column; + padding: 0; + width: 100%; +} + + +.row.row-no-padding { + padding: 0; +} + + +.row.row-no-padding > .column { + padding: 0; +} + + +.row.row-wrap { + flex-wrap: wrap; +} + + +.row.row-top { + align-items: flex-start; +} + + +.row.row-bottom { + align-items: flex-end; +} + + +.row.row-center { + align-items: center; +} + + +.row.row-stretch { + align-items: stretch; +} + + +.row.row-baseline { + align-items: baseline; +} + + +.row .column { + display: block; + flex: 1 1 auto; + margin-left: 0; + max-width: 100%; + width: 100%; +} + + +.row .column.column-offset-10 { + margin-left: 10%; +} + + +.row .column.column-offset-20 { + margin-left: 20%; +} + + +.row .column.column-offset-25 { + margin-left: 25%; +} + + +.row .column.column-offset-33, .row .column.column-offset-34 { + margin-left: 33.3333%; +} + + +.row .column.column-offset-50 { + margin-left: 50%; +} + + +.row .column.column-offset-66, .row .column.column-offset-67 { + margin-left: 66.6666%; +} + + +.row .column.column-offset-75 { + margin-left: 75%; +} + + +.row .column.column-offset-80 { + margin-left: 80%; +} + + +.row .column.column-offset-90 { + margin-left: 90%; +} + + +.row .column.column-10 { + flex: 0 0 10%; + max-width: 10%; +} + + +.row .column.column-20 { + flex: 0 0 20%; + max-width: 20%; +} + + +.row .column.column-25 { + flex: 0 0 25%; + max-width: 25%; +} + + +.row .column.column-33, .row .column.column-34 { + flex: 0 0 33.3333%; + max-width: 33.3333%; +} + + +.row .column.column-40 { + flex: 0 0 40%; + max-width: 40%; +} + + +.row .column.column-50 { + flex: 0 0 50%; + max-width: 50%; +} + + +.row .column.column-60 { + flex: 0 0 60%; + max-width: 60%; +} + + +.row .column.column-66, .row .column.column-67 { + flex: 0 0 66.6666%; + max-width: 66.6666%; +} + + +.row .column.column-75 { + flex: 0 0 75%; + max-width: 75%; +} + + +.row .column.column-80 { + flex: 0 0 80%; + max-width: 80%; +} + + +.row .column.column-90 { + flex: 0 0 90%; + max-width: 90%; +} + + +.row .column .column-top { + align-self: flex-start; +} + + +.row .column .column-bottom { + align-self: flex-end; +} + + +.row .column .column-center { + -ms-grid-row-align: center; + align-self: center; +} + + +@media (min-width: 40rem) { + .row { + flex-direction: row; + margin-left: -1.0rem; + width: calc(100% + 2.0rem); + } + .row .column { + margin-bottom: inherit; + padding: 0 1.0rem; + } +} + + + +/****************************************************************************** +* +* UTILITY CLASSES +* +* A handful of common utility classes. +* +******************************************************************************/ + +.clearfix:after { + clear: both; + content: ' '; + display: block; +} + +.float-left { + float: left; +} + +.float-right { + float: right; +} + + + +/****************************************************************************** +* +* BASE THEME +* +* The rest of these rules set a default look-and-feel based on milligram.css [2]. +* Override these as needed in your own css to set a custom look-and-feel. +* +******************************************************************************/ + +html { + font-size: 62.5%; +} + + +body { + color: #606c76; + font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + font-size: 1.6em; + font-weight: 300; + letter-spacing: .01em; + line-height: 1.6; +} + + +blockquote { + border-left: 0.3rem solid #d1d1d1; + margin-left: 0; + margin-right: 0; + padding: 1rem 1.5rem; +} + + +blockquote *:last-child { + margin-bottom: 0; +} + + +code { + background: #f4f5f6; + border-radius: .4rem; + font-size: 86%; + margin: 0 .2rem; + padding: .2rem .5rem; +} + + +pre { + background: #f4f5f6; + border-left: 0.3rem solid #9b4dca; + overflow-y: hidden; +} + + +pre > code { + border-radius: 0; + padding: 1rem 1.5rem; +} + + +hr { + border: 0; + border-top: 0.1rem solid #f4f5f6; + margin: 3.0rem 0; +} + + +a { + color: #9b4dca; + text-decoration: none; +} + + +a:focus, a:hover { + color: #606c76; +} + + +b, +strong { + font-weight: bold; +} + + +dl, +ol, +ul { + list-style: none; + margin-top: 0; + padding-left: 0; +} + + +dl dl, +dl ol, +dl ul, +ol dl, +ol ol, +ol ul, +ul dl, +ul ol, +ul ul { + font-size: 90%; + margin: 1.5rem 0 1.5rem 3.0rem; +} + + +ol { + list-style: decimal inside; +} + + +ul { + list-style: circle inside; +} + + +dd, +dt, +li { + margin-bottom: 1.0rem; +} + + +blockquote, +dl, +figure, +form, +ol, +p, +pre, +table, +ul { + margin-bottom: 2.5rem; +} + + +table { + border-spacing: 0; + width: 100%; +} + + +td, +th { + border-bottom: 0.1rem solid #e1e1e1; + padding: 1.2rem 1.5rem; + text-align: left; +} + + +td:first-child, +th:first-child { + padding-left: 0; +} + + +td:last-child, +th:last-child { + padding-right: 0; +} + + +p { + margin-top: 0; +} + + +img { + max-width: 100%; +} + + /** - * Credits: - * [1] normalize.css, https://github.com/necolas/normalize.css/ + * Heading elements. */ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 300; + letter-spacing: -.1rem; + margin-bottom: 2.0rem; + margin-top: 0; +} + + +h1 { + font-size: 4.6rem; + line-height: 1.2; +} + + +h2 { + font-size: 3.6rem; + line-height: 1.25; +} + + +h3 { + font-size: 2.8rem; + line-height: 1.3; +} + + +h4 { + font-size: 2.2rem; + letter-spacing: -.08rem; + line-height: 1.35; +} + + +h5 { + font-size: 1.8rem; + letter-spacing: -.05rem; + line-height: 1.5; +} + + +h6 { + font-size: 1.6rem; + letter-spacing: 0; + line-height: 1.4; +} + + +/** + * Button styling. All buttons start with the "outline" style defined in + * milligram.css [2]. Buttons with a "submit" type or a "default" attribute + * or class get the default style defined in milligram. + */ + +.button, +button, +[type="button"], +[type="reset"], +[type="submit"] { + border: 0.1rem solid #9b4dca; + border-radius: .4rem; + display: inline-block; + font-size: 1.1rem; + font-weight: 700; + height: 3.8rem; + letter-spacing: .1rem; + line-height: 3.8rem; + padding: 0 3.0rem; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + background-color: transparent; + color: #9b4dca; + margin-bottom: 1.0rem; +} + + +.button:focus, +.button:hover, +button:focus, +button:hover, +[type="button"]:focus, +[type="button"]:hover, +[type="reset"]:focus, +[type="reset"]:hover, +[type="submit"]:focus, +[type="submit"]:hover { + outline: 0; + background-color: transparent; + border-color: #606c76; + color: #606c76; +} + + +/** + * Disabled buttons. + */ + +.button[disabled], +button[disabled], +[type="button"][disabled], +[type="reset"][disabled], +[type="submit"][disabled] { + opacity: .5; +} + + +.button[disabled]:focus, +.button[disabled]:hover, +button[disabled]:focus, +button[disabled]:hover, +[type="button"][disabled]:focus, +[type="button"][disabled]:hover, +[type="reset"][disabled]:focus, +[type="reset"][disabled]:hover, +[type="submit"][disabled]:focus, +[type="submit"][disabled]:hover { + border-color: inherit; + color: #9b4dca; +} + + +/** + * Submit buttons and buttons with a "default" class or attribute. + */ + +.button.default, +button.default, +[type="button"][default], +[type="button"].default, +[type="reset"].default, +[type="submit"] { + background-color: #9b4dca; + color: #fff; +} + + +.button.default:focus, +.button.default:hover, +button.default:focus, +button.default:hover, +[type="button"][default]:focus, +[type="button"][default]:hover, +[type="button"].default:focus, +[type="button"].default:hover, +[type="reset"].default:focus, +[type="reset"].default:hover, +[type="submit"]:focus, +[type="submit"]:hover { + background-color: #606c76; + border-color: #606c76; + color: #fff; +} + + +.button.default[disabled]:focus, +.button.default[disabled]:hover, +button.default[disabled]:focus, +button.default[disabled]:hover, +[type="button"][default][disabled]:focus, +[type="button"][default][disabled]:hover, +[type="button"].default[disabled]:focus, +[type="button"].default[disabled]:hover, +[type="reset"].default[disabled]:focus, +[type="reset"].default[disabled]:hover, +[type="submit"].default[disabled]:focus, +[type="submit"].default[disabled]:hover { + background-color: #9b4dca; + border-color: #9b4dca; +} + + +/** + * Other form elements. + */ + +input, +select, +fieldset, +textarea, +label, +legend { + margin-bottom: 1.5rem; +} + + +[type='email'], +[type='number'], +[type='password'], +[type='search'], +[type='tel'], +[type='text'], +[type='url'], +textarea, +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border: 0.1rem solid #d1d1d1; + border-radius: .4rem; + box-shadow: none; + box-sizing: inherit; + height: 3.8rem; + padding: .6rem 1.0rem; + width: 100%; +} + + +[type='email']:focus, +[type='number']:focus, +[type='password']:focus, +[type='search']:focus, +[type='tel']:focus, +[type='text']:focus, +[type='url']:focus, +textarea:focus, +select:focus { + border-color: #9b4dca; + outline: 0; +} + + +[type='checkbox'], +[type='radio'] { + display: inline; +} + + +select { + background: url('data:image/svg+xml;utf8,') center right no-repeat; + padding-right: 3.0rem; +} + + +select:focus { + background-image: url('data:image/svg+xml;utf8,'); +} + + +textarea { + min-height: 6.5rem; +} + + +label, +legend { + display: block; + font-size: 1.6rem; + font-weight: 700; +} + + +fieldset { + border-width: 0; + padding: 0; +} + + +label.inline, +legend.inline { + display: inline-block; + font-weight: normal; + margin-left: .5rem; +} + + + +/****************************************************************************** +* +* CREDITS +* +* [1] normalize.css, https://github.com/necolas/normalize.css/ +* [2] milligram.css, https://github.com/milligram/milligram/ +* +******************************************************************************/