/* Nexus 5 360 598 Nexus 6 412 690 iPhone 5 320 568 iPhone 6 375 667 iPhone 6+ 414 736 Galaxy 5 360 640 Galaxy 6 360 640 iPad 768 1024 Galaxy 2,3 10" 800 1280 Galaxy 2 7" 600 1024 320-359 small phone portrait 360-567 big phone portrate 568-1023 phone landscape, tablets portrate 1024- tablets landscape, monitor */ html { font-family: sans-serif; font-weight: normal; font-size: 18px; line-height: 1.4em; } input { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; } body { margin: 0; /* There is non-0 default margin on body. */ } /* 320px ~ 20em @ 1 font-size. This is factored in when doing font boosting. Specifying 320px directly seems to mess it up. Font boosting results for font-size:1.1em, min-width:18em on Nexus 5: - about 40 characters in portrait - about 70 characters in landscape - landscape font appears slightly smaller 18em on smaller phones (e.g., iPhone 4) appears to trigger scrolling. 17em works well, however. */ body {min-width: 17em;} @media only screen and (min-width: 360px) { body {min-width: 19em;} } /* * Header. */ #header { width: 100%; background: rgba(0, 0, 0, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.26); /* Off background. */ padding: .3em 0 .3em 0; margin: 0 0 1.4em 0; } #header-menu { /* Same as in #content below. */ max-width: 40em; margin: 0 auto 0 auto; padding: 0 .4em 0 .4em; text-align: right; } #header-menu a:nth-child(n + 2) {padding-left: 1.2em;} #header-menu a {font-size: 1.12em; color: #eee; text-decoration: none;} #header-menu a:visited {color: #eee;} #header-menu a:hover, #header-menu a:active {color: #fff; text-decoration: underline;} /* * Content. */ #content { max-width: 40em; margin: 0 auto 0 auto; padding: 0 .4em 0 .4em; /* Space between text and browser frame. */ } /* * Footer. */ #footer { text-align: center; } /* Until we have actual content in the footer. */ #footer:before {content: "\A0";} #footer:after {content: "\A0";} /* Screen size indicator in the footer. */ #footer { border-left: 1px solid; border-right: 1px solid; margin: 0 1px 0 1px; /* To see the border. */ } @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 {text-align: justify;} code, pre { font-size: 0.94em; } a {color: #006fbf; text-decoration: none;} a:hover, a:active {color: #0087e7; text-decoration: underline;} a:visited {color: #003388;} /* * Form layout table. */ .form-table { width: 100%; border-collapse: collapse; margin-top: 1.5em; } .form-table table, .form-table th, .form-table td { border: none; padding: 0; } /* * Property list table. */ .proplist { /* Extend the table into #content's margins that are used to separate from the browser frame. If this table gets background/stripe, then we want it to cover that extra space so that we get a margin between the text and the background edge. This also means that the background will touch the browser frame. This looks ok as long as we don't use fancy things like rounded corners. */ width: calc(100% + .8rem); /* Fill the page plus #content margin. */ padding-right: .4rem; padding-left: .4rem; margin-left: -.4rem; table-layout: fixed; border: none; border-spacing: 0 0; } .proplist th, .proplist td {padding: .08em 0 .08em 0;} .proplist th { font-family: monospace; font-weight: normal; text-align: left; } .proplist th:after {content: ":";} .proplist td .comment { color: #666; font-size: 0.833em; } /* Flexbox-based left/right aligned value/comment implementation. */ .proplist td { width: 100%; white-space: nowrap; display: -webkit-inline-flex; display: inline-flex; -webkit-justify-content: space-between; justify-content: space-between; } .proplist td .value { display: inline-block; -webkit-flex-shrink: 1; flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proplist td .comment { display: inline-block; margin-left: 1em; -webkit-flex-shrink: 100000; flex-shrink: 100000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Fallback for browsers that still don't support flexbox. */ .proplist td { text-align: right; overflow: hidden; text-overflow: ellipsis; } .proplist td .value { float: left; text-align: left; } /* Re-styling for full page variant. */ .full .proplist td { flex-wrap: wrap; -webkit-flex-wrap: wrap; white-space: normal; } .full .proplist th { vertical-align: top; } .full .proplist td .value { margin-right: 1em; white-space: normal; } .full .proplist td .comment { margin-left: 0; text-align: left; white-space: normal; } /* * Pager. */ #pager { margin-top: 1.8em; font-size: 0.916em; text-align: center; } #pager a { padding: 0 0.4em 0 0.4em; } #pager #prev:before {content: "<\A0";} #pager #curr {font-weight: bold;} #pager #curr:before {content: "["; font-weight: normal;} #pager #curr:after {content: "]"; font-weight: normal;} #pager #next:after {content: "\A0>";}