407 lines
7.3 KiB
CSS
407 lines
7.3 KiB
CSS
/* Trent Mick's blog's CSS. Based heavily (at least initially) on
|
|
* <http://html5boilerplate.com/> and on <http://lessframework.com/>.
|
|
*/
|
|
|
|
/* ---- reset
|
|
* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
|
|
* v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
|
|
* html5doctor.com/html-5-reset-stylesheet/
|
|
*/
|
|
html, body, div, span, object, iframe,
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
abbr, address, cite, code,
|
|
del, dfn, em, img, ins, kbd, q, samp,
|
|
small, strong, sub, sup, var,
|
|
b, i,
|
|
dl, dt, dd, ol, ul, li,
|
|
fieldset, form, label, legend,
|
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
article, aside, figure, footer, header,
|
|
hgroup, menu, nav, section,
|
|
time, mark, audio, video {
|
|
margin:0;
|
|
padding:0;
|
|
border:0;
|
|
outline:0;
|
|
font-size:100%;
|
|
vertical-align:baseline;
|
|
background:transparent;
|
|
}
|
|
|
|
article, aside, figure, footer, header,
|
|
hgroup, nav, section { display:block; }
|
|
|
|
nav ul { list-style:none; }
|
|
|
|
blockquote, q { quotes:none; }
|
|
|
|
blockquote:before, blockquote:after,
|
|
q:before, q:after { content:''; content:none; }
|
|
|
|
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
|
|
ins { background-color:#ff9; color:#000; text-decoration:none; }
|
|
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
|
|
del { text-decoration: line-through; }
|
|
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
|
|
sub { vertical-align: sub; }
|
|
sup { vertical-align: super; }
|
|
|
|
/* tables still need cellspacing="0" in the markup */
|
|
table { border-collapse:collapse; border-spacing:0; }
|
|
|
|
input, select { vertical-align:middle; }
|
|
|
|
|
|
|
|
/* ---- 24px vertical rhythm
|
|
* <http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/>
|
|
* All tags except 'pre' because 24px line-height is way too much, want 18px.
|
|
* Tough.
|
|
*/
|
|
body {
|
|
line-height: 24px;
|
|
font-family: helvetica, arial, freesans, clean, sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
h1,h2,h3,h4,h5,h6 {
|
|
font-family: Georgia,serif;
|
|
font-weight: bold;
|
|
/* http://www.aestheticallyloyal.com/public/optimize-legibility/ */
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
h1 {
|
|
font-size: 28px;
|
|
line-height: 48px;
|
|
padding: 24px 0 24px 0;
|
|
}
|
|
h2 {
|
|
font-size: 21px;
|
|
line-height: 24px;
|
|
padding: 24px 0 24px 0;
|
|
}
|
|
h3 {
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
padding: 24px 0 0 0;
|
|
}
|
|
h4 {
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
padding: 24px 0 0 0;
|
|
}
|
|
h5 {
|
|
color: #666;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
padding: 24px 0 0 0;
|
|
}
|
|
h6 {
|
|
color: #666;
|
|
font-size: 12px;
|
|
line-height: 24px;
|
|
padding: 0;
|
|
}
|
|
hr {
|
|
padding-bottom: 24px;
|
|
margin: 24px 0;
|
|
height: 0;
|
|
border: none;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
hr:after {
|
|
content: "\2767";
|
|
}
|
|
p + p {
|
|
padding-top: 24px;
|
|
}
|
|
dl {
|
|
margin: 24px 0;
|
|
}
|
|
dt {
|
|
font-weight: bold;
|
|
margin-top: 24px;
|
|
}
|
|
dd {
|
|
margin: 0 0 0 48px;
|
|
}
|
|
|
|
|
|
|
|
/* ---- layout */
|
|
|
|
body {
|
|
margin: 12px;
|
|
}
|
|
#wrapper {
|
|
margin: 0 auto;
|
|
max-width: 700px;
|
|
position: relative;
|
|
}
|
|
#main {
|
|
min-height: 300px;
|
|
}
|
|
#fadeout {
|
|
z-index: 50;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
height: 210px;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 255)), to(rgba(255, 255, 255, 0)));
|
|
background: -moz-linear-gradient(top, rgba(255, 255, 255, 255), rgba(255, 255, 255, 0));
|
|
}
|
|
#header {
|
|
position: fixed;
|
|
z-index: 100;
|
|
padding: 48px 0 24px 0;
|
|
top: 0;
|
|
left: auto;
|
|
right: auto;
|
|
width: 100%;
|
|
background: white;
|
|
}
|
|
#content {
|
|
position: relative;
|
|
top: 150px;
|
|
overflow: auto;
|
|
padding-bottom: 200px;
|
|
}
|
|
#footer {
|
|
position: relative;
|
|
padding-top: 60px;
|
|
}
|
|
|
|
/* ---- base styles */
|
|
|
|
blockquote {
|
|
font-family: Georgia,serif;
|
|
font-size: 18px;
|
|
color: #555;
|
|
margin: 24px 15% 24px 15%;
|
|
margin: 24px 10% 24px 10%;
|
|
}
|
|
blockquote cite:before {
|
|
content: "\2014 ";
|
|
}
|
|
blockquote p.hangquotes, blockquote.hangquotes {
|
|
text-indent: -0.5em;
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-family: Consolas, Monaco, "Lucida Console", "Courier New", monospace;
|
|
font-size: 12px;
|
|
background-color: #f5f5f5;
|
|
border: 1px solid #ccc;
|
|
}
|
|
code {
|
|
padding: 0 0.2em;
|
|
}
|
|
pre {
|
|
font-size: 80%;
|
|
line-height: 18px;
|
|
padding: 5px;
|
|
margin: 18px 0;
|
|
|
|
/* "overflow:auto" does NOT yield scrollbars in mobile browsers. iPhone
|
|
* *does* support two-finger scrolling inside the pre-block, but that
|
|
* is undiscoverable. Let's pre-wrap.
|
|
*/
|
|
white-space: pre;
|
|
white-space: -moz-pre-wrap;
|
|
white-space: -hp-pre-wrap;
|
|
white-space: -o-pre-wrap;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
pre code {
|
|
border: medium none;
|
|
padding: 0;
|
|
}
|
|
a code {
|
|
text-decoration: underline;
|
|
}
|
|
h1 + pre,
|
|
h2 + pre,
|
|
h3 + pre,
|
|
h4 + pre,
|
|
h5 + pre,
|
|
h6 + pre {
|
|
margin-top: 0;
|
|
}
|
|
|
|
table {
|
|
margin: 24px 0;
|
|
}
|
|
th,
|
|
td {
|
|
border: solid #aaa;
|
|
border-width: 1px 0;
|
|
line-height: 23px;
|
|
padding: 0 12px;
|
|
text-align: left;
|
|
}
|
|
th {
|
|
border-collapse: separate;
|
|
}
|
|
tbody tr:nth-child(odd) {
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
ol, ul {
|
|
padding: 12px 0;
|
|
margin: 0 0 0 24px;
|
|
}
|
|
ol ol, ul ul, ul ol, ol ul {
|
|
margin-left: 24px;
|
|
}
|
|
ol { list-style-type: decimal; }
|
|
ol ol { list-style-type: lower-alpha; }
|
|
ol ol ol { list-style-type: upper-roman; }
|
|
ol ol ol ol { list-style-type: lower-roman; }
|
|
ul { list-style-type: circle; }
|
|
ul ul { list-style-type: disc; }
|
|
ul ul ul { list-style-type: circle; }
|
|
|
|
:link { color: hsl(206, 100%, 23%); }
|
|
:visited { color: hsl(240, 20%, 50%); }
|
|
:link:hover, :visited:hover { color: hsl(206, 100%, 38%); }
|
|
|
|
|
|
/* ---- larger screens */
|
|
|
|
@media only screen and (min-width: 481px) {
|
|
pre {
|
|
overflow: auto;
|
|
white-space: pre;
|
|
word-wrap: normal;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 700px) {
|
|
ol, ul {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* ---- custom classes */
|
|
|
|
pre.shell,
|
|
pre.shell code {
|
|
background:#444;
|
|
color:#fff;
|
|
border-width:0px;
|
|
}
|
|
pre.shell code::before {
|
|
content: '$ ';
|
|
display: inline;
|
|
}
|
|
|
|
.copy {
|
|
font-size: 90%;
|
|
text-align: center;
|
|
color: #777;
|
|
}
|
|
|
|
/* ----- top header */
|
|
a#homelink:link {
|
|
color: #008000;
|
|
text-decoration: none;
|
|
}
|
|
a#homelink:visited {
|
|
color: #008000;
|
|
text-decoration: none;
|
|
}
|
|
a#homelink:active {
|
|
color: #008000;
|
|
text-decoration: none;
|
|
}
|
|
a#homelink:hover {
|
|
color: #008000;
|
|
text-decoration: none;
|
|
}
|
|
#logo {
|
|
font-family: Georgia,serif;
|
|
font-weight: bold;
|
|
font-size: 60px;
|
|
top: 55px;
|
|
}
|
|
#apibox,
|
|
#tocbox {
|
|
position: relative;
|
|
}
|
|
#tocbox {
|
|
margin-left: 24px;
|
|
}
|
|
.navbutton {
|
|
border: 1px solid #ccc;
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 120px;
|
|
text-align: center;
|
|
top: -7px;
|
|
font-size: 70%;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
.navbutton:hover {
|
|
cursor: pointer;
|
|
background-color: #f3f3f3;
|
|
}
|
|
.popup {
|
|
border: 1px solid #ccc;
|
|
padding: 5px 10px;
|
|
background-color: white;
|
|
font-size: 80%;
|
|
line-height: 1.6em;
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 0px;
|
|
width: 200px;
|
|
}
|
|
.popup a {
|
|
text-decoration: none;
|
|
}
|
|
.popup a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.popup ul {
|
|
margin: 0;
|
|
padding: 0px;
|
|
list-style-type: none;
|
|
}
|
|
.popup ul ul {
|
|
margin-left: 24px;
|
|
}
|
|
#githubfork {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0px;
|
|
}
|
|
#indextagline {
|
|
font-size: 24px;
|
|
font-style: italic;
|
|
text-align: center;
|
|
color: green;
|
|
}
|
|
a#indextaglink:link {
|
|
color: #008000;
|
|
text-decoration: none;
|
|
}
|
|
a#indextaglink:visited {
|
|
color: #008000;
|
|
text-decoration: none;
|
|
}
|
|
a#indextaglink:active {
|
|
color: #008000;
|
|
text-decoration: none;
|
|
}
|
|
a#indextaglink:hover {
|
|
color: #008000;
|
|
text-decoration: none;
|
|
}
|