/* file : common.css * license : MIT; see accompanying LICENSE file */ html { font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; font-weight: normal; font-size: 18px; line-height: 1.4em; letter-spacing: 0.01em; color: #292929; } body {margin: 0;} /* There is non-0 default margin for body. */ /* See notes on what's going on here. */ body {min-width: 17em;} @media only screen and (min-width: 360px) { body {min-width: 19em;} } /* * Header (optional). */ #header-bar { width: 100%; background: rgba(0, 0, 0, 0.04); border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: .4em 0 .42em 0; margin: 0 0 1.4em 0; } #header { /* Same as in #content. */ max-width: 41em; margin: 0 auto 0 auto; padding: 0 .4em 0 .4em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; display: table; border: none; border-collapse: collapse; } #header-logo, #header-menu { display: table-cell; border: none; padding: 0; vertical-align: middle; } #header-logo {text-align: left;} #header-menu {text-align: right;} /* These overlap with #header's margin because of border collapsing. */ #header-logo {padding-left: .4em;} #header-menu {padding-right: .4em;} #header-logo a { color: #000; text-decoration: none; outline: none; } #header-logo a:visited {color: #000;} #header-logo a:hover, #header-logo a:active {color: #000;} #header-menu a { font-size: 0.889em; line-height: 1.4em; text-align: right; margin-left: 1.2em; white-space: nowrap; letter-spacing: 0; } #header-menu a { color: #000; outline: none; } #header-menu a:visited {color: #000;} #header-menu a:hover, #header-menu a:active { color: #3870c0; text-decoration: none; } /* Flexbox-based improvements though the above works reasonably well. */ #header-menu-body { width: 100%; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: flex-end; justify-content: flex-end; } /* Whether we want it (and at which point) depends on the size of the menu. */ /* @media only screen and (max-width: 567px) { #header-menu-body { -webkit-flex-direction: column; flex-direction: column; } } */ /* * Content. */ #content { max-width: 41em; margin: 0 auto 0 auto; padding: 0 .4em 0 .4em; /* Space between text and browser frame. */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* * Footer (optional). */ #footer { color: #767676; font-size: 0.7223em; line-height: 1.3em; margin: 2.2em 0 1em 0; text-align: center; } #footer a { color: #767676; text-decoration: underline; } #footer a:visited {color: #767676;} #footer a:hover, #footer a:active {color: #3870c0;} /* Screen size indicator in the footer. The before/after content is in case we don't have any content in the footer. Margin is to actually see the border separate from the browser frame. */ /* #footer:before {content: "\A0";} #footer:after {content: "\A0";} #footer { border-left: 1px solid; border-right: 1px solid; margin-left: 1px; margin-right: 1px; } @media only screen and (max-width: 359px) { #footer {border-color: red;} } @media only screen and (min-width: 360px) and (max-width: 567px) { #footer {border-color: orange;} } @media only screen and (min-width: 568px) and (max-width: 1023px) { #footer {border-color: blue;} } @media only screen and (min-width: 1024px) { #footer {border-color: green;} } */ /* * Common elements. */ p, li, dd {text-align: justify;} .code {text-align: left;} /* Manually aligned. */ pre {text-align: left;} /* If it is inside li/dd. */ /* Notes. */ .note { color: #606060; } div.note { margin: 2em 0 2em 0; /* The same top/bottom margings as pre box. */ padding-left: 0.5em; border: 0.25em; border-left-style: solid; border-color: #808080; page-break-inside: avoid; } div.note :first-child {margin-top: 0;} div.note :last-child {margin-bottom: 0;} span.note::before {content: "[Note: "} span.note::after {content: "]"} /* Links. */ a { color: #3870c0; /*color: #4078c0;*/ text-decoration: none; } a:hover, a:active { /*color: #006fbf;*/ /*color: #0087e7;*/ text-decoration: underline; } a:visited { /*color: #003388;*/ color: #00409c; } /* Standard paragraph. */ p, pre {margin: 1em 0 1em 0;} /* Standard lists. */ ul, ol, dl {margin: 1em 0 1em 0;} ul li, ol li {margin: 0 0 .4em 0;} ul li {list-style-type: circle;} dl dt {margin: 0 0 0 0;} dl dd {margin: 0 0 .6em 1.8em;} code, pre { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.92em; letter-spacing: 0; } pre {white-space: pre-wrap;} @media only screen and (max-width: 567px) { pre {word-break: break-all;} } /* Use page rather than system font settings. */ input { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; }