diff --git a/dev/droidserif-bold.woff2 b/dev/droidserif-bold.woff2 new file mode 100644 index 00000000000..5679b49bd68 Binary files /dev/null and b/dev/droidserif-bold.woff2 differ diff --git a/dev/droidserif-bolditalic.woff2 b/dev/droidserif-bolditalic.woff2 new file mode 100644 index 00000000000..3df689691ab Binary files /dev/null and b/dev/droidserif-bolditalic.woff2 differ diff --git a/dev/droidserif-italic.woff2 b/dev/droidserif-italic.woff2 new file mode 100644 index 00000000000..604807a77b5 Binary files /dev/null and b/dev/droidserif-italic.woff2 differ diff --git a/dev/droidserif.woff2 b/dev/droidserif.woff2 new file mode 100644 index 00000000000..f94d9dfa54a Binary files /dev/null and b/dev/droidserif.woff2 differ diff --git a/dev/mplus-2p-heavy.woff b/dev/mplus-2p-heavy.woff new file mode 100644 index 00000000000..9f589f48887 Binary files /dev/null and b/dev/mplus-2p-heavy.woff differ diff --git a/dev/styles.css b/dev/styles.css new file mode 100644 index 00000000000..4f1f2f40502 --- /dev/null +++ b/dev/styles.css @@ -0,0 +1,490 @@ +@font-face { + font-family: "M+2pheavy"; + src: url("mplus-2p-heavy.woff"); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: "Droid Serif"; + font-style: normal; + font-weight: 400; + src: local("Droid Serif"), local("DroidSerif"), url("./droidserif.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; +} + +@font-face { + font-family: "Droid Serif"; + font-style: normal; + font-weight: 700; + src: local("Droid Serif Bold"), local("DroidSerif-Bold"), url("./droidserif-bold.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; +} + +@font-face { + font-family: "Droid Serif"; + font-style: italic; + font-weight: 400; + src: local("Droid Serif Italic"), local("DroidSerif-Italic"), url("./droidserif-italic.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; +} + +@font-face { + font-family: "Droid Serif"; + font-style: italic; + font-weight: 700; + src: local("Droid Serif Bold Italic"), local("DroidSerif-BoldItalic"), url("./droidserif-bolditalic.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; +} + +/* GENERAL ELEMENTS */ + +/* Resets */ +body, h1, h2, h3, h4, h5, h6, p, a, ul, ol, dl, dt, dd, table, caption, th, td, fieldset, legend, blockquote { + font-weight: normal; + margin: 0; + padding: 0; + color: inherit; + box-sizing: border-box; +} + +a img, form, legend { + border: 0; +} + +fieldset, abbr { + border: none; +} + +/* Basics */ + +body { + font-size: 14px; + line-height: 1.45em; + font-family: "Droid Serif", Georgia, serif; + color: #222; + width: 760px; + margin: 4em auto; + padding: 0 1em; +} + +/* Headings */ + +h1 { + font-size: 300%; +} + +h2:not(#dev-edition-h2) { + font-size: 160%; + text-transform: uppercase; + letter-spacing: 0.2em; + line-height: 1.5em; + font-family: "M+2pheavy", "Helvetica Neue", Arial, Helvetica, sans-serif; + margin: 2em 0; +} + +h2 .secno { + position: absolute; + display: block; + left: -2em; + text-align: right; +} + +h3 .secno, h4 .secno, h5 .secno, h6 .secno { + display: none; +} + +h3 { + font-size: 140%; +} + +h4, h5 { + font-size: 120%; +} + +h6 { + font-size: 100%; +} + +h5, h6 { + font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; +} + +h2, h3, h4, h5, h6 { + position: relative; +} + +h3, h4, h5, h6 { + margin: 3em 0 1em 0; +} + +h4, h5, h6 { + color: #450b09; +} + +h4, h6 { + font-weight: bold; +} + +h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { + font-style: normal; +} + +/* Self-links */ + +a.self-link { + position: absolute; + top: 0; + left: -2.5em; + width: 2em; + height: 2em; + text-align: center; + transition: opacity 0.2s; + opacity: 0.5; + text-decoration: none; +} +a.self-link:hover { + opacity: 1; + text-decoration: none; +} + +h2 > a.self-link, h3 > a.self-link, h4 > a.self-link, h5 > a.self-link, h6 > a.self-link { + font-size: 83%; + color: inherit; + border-bottom: none; +} + +h2 > a.self-link { + left: -4em; +} + +a.self-link::before { + content: "¶"; +} + +h2 > a.self-link::before, h3 > a.self-link::before, h4 > a.self-link::before, +h5 > a.self-link::before, h6 > a.self-link::before { + content: "§"; +} + + +/* Links */ + +a:link { + color: #0773ca; + text-decoration: none; + border-bottom: 1px solid #aaa; +} + +a:visited { + color: #033b68; + border-bottom: 1px solid #ccc; +} + +a:hover { + color: #000; + border-bottom: 1px solid #000; +} + +a:active { + color: #CC211B; + border-bottom: none; +} + +/* Paragraphs and lists */ + +p { + line-height: 1.7em; +} + +p, ul, ol, dl { + margin-bottom: 1em; + width: 520px; +} + +hr { + display: block; + background: none; + border: none; + padding: 0; + margin: 3em 0; + height: auto; +} + +ul li ul { + margin: 0; +} + +li li { + margin-left: 1.2em; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: 0.5em; +} + +ul.domTree li { + margin-bottom: 0; + list-style: none; +} + +/* Tables */ + +table { + border: 0; +} + +table th, table td { + border: 0; + border-bottom: 1px solid #acc; + padding: 4px; + vertical-align: top; +} + +table th li, table td li { + margin: 0 0 0 1.5em; +} + +table caption, table th { + text-align: left; + color: #450b09; +} + +table th { + font-weight: bold; +} + +table td { + vertical-align: top; + padding: 0.25em 1.25em 0.25em 0em; +} + +table tr, table tbody { + border: 0px; +} + +/* Code */ + +code, pre { + font-family: "DejaVu Sans Mono", Inconsolata, Consolas, "Lucida Console", monospace; + display: inline-block; + font-style: normal; +} + +pre { + display: block; + padding: 0.25em 0.3em; + margin: 1em 0em 1em -2.6em; + border: 1px solid #eee; + white-space: pre-wrap; +} + +/* Variables */ + +var sub { + vertical-align: bottom; + font-size: smaller; + top: 0.1em; +} + +var > var::before { + content: "⟨"; + font-style: normal; +} + +var > var::after { + content: "⟩"; + font-style: normal; +} + +/* + Typographic conventions + (http://developers.whatwg.org/introduction.html#typographic-conventions) +*/ +.note, .example, .XXX, .warning, pre { + width: 580px; +} + +.note { + padding: 3px; + background-color: #eee; +} + +.note pre { + background-color: #fff; +} + +.example { + color: #555; + font-style: italic; +} + +.XXX { + background-color: #fceaea; + padding: 0.5em; +} + +.warning { + background-color: #f6bfbd; + border: 1px solid #CC211B; + padding: 0.5em; +} + +.css::before { + content: "CSS:"; + color: #888888; + font-size: 1em; + display: block; + background: transparent; +} + +/* SPECIFIC ELEMENTS */ +/* Header */ + +header#head { + position: relative; +} + +header#head h1 { + line-height: 1em; + font-family: "M+2pheavy", "Helvetica Neue", Arial, Helvetica, sans-serif; + font-weight: bold; + color: black; +} + +header#head a:link, header.head a:visited { + border-bottom: 0; +} + +header#head a { + color: black; +} + +header#head h1 a:hover { + text-shadow: 0 0 5px rgba(0, 0, 0, 0.6); +} + +header#head h2 { + font-size: 12px; + margin-bottom: 0.5em; + font-family: "Droid Serif", Georgia, serif; + font-style: italic; + font-weight: normal; + color: #555; +} + +header#head .logo { + position: absolute; + left: -120px; + top: -20px; +} + +/* Nav and table of contents */ + +body > nav { + margin: 2em 0; +} + +ol.toc a:link { + border-bottom: 1px solid #bbb; +} + +ol.toc a:visited { + border-bottom: 1px solid #eee; +} + +ol.toc a:hover { + color: #000; + border-bottom: 1px solid #000; +} + +ol.toc li { + list-style: none; +} + +ol.toc .secno { + color: #888888; +} + +html.index ol.toc li { + position: relative; +} + +html.index ol.toc li .secno { + position: absolute; + left: -1.7em; +} + +html.index ol.toc li li { + margin-left: 1.6em; +} + +html.index ol.toc li li .secno { + left: -1.7em; +} + +html.index ol.toc li li a { + margin-left: 1em; +} + +html.index ol.toc li ol ol { + display: none; +} + +html:not(.index) ol.toc li { + margin-bottom: 0.2em; +} +html:not(.index) ol.toc ol { + margin: 0; +} + +/* RESPONSIVE STYLES */ + +@media screen and (max-width: 767px) { + body { + font-size: 110%; + line-height: 1.6em; + max-width: 580px; + margin: 1em auto; + padding: 0 2em; + } + + header#head { + text-align: center; + } + + header#head .logo { + width: 60px; + position: static; + left: 0; + } + + img { + max-width: 100%; + height: auto; + } + + h2:not(#dev-edition-h2) { + font-size: 18px; + } + + .note, .example, .XXX, .warning, pre { + width: 560px; + } + + pre { + margin-left: -0.6em; + word-wrap: break-word; + } + + /* Don't position self-link in headings off-screen */ + h2 > a.self-link, h3 > a.self-link, h4 > a.self-link, h5 > a.self-link, h6 > a.self-link { + left: auto; + top: auto; + margin-left: 0.5em; + } +} diff --git a/source b/source index 8f5faa6d09f..c4d266e076a 100644 --- a/source +++ b/source @@ -28,6 +28,7 @@ HTML Standard + -