mirror of
https://github.com/clagnut/webtypography.git
synced 2025-09-03 01:52:48 +02:00
635 lines
8.6 KiB
CSS
635 lines
8.6 KiB
CSS
@font-face {
|
|
font-family: 'Premiera';
|
|
src: url('/fonts/Premiera-Book.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: fallback;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Premiera';
|
|
src: url('/fonts/Premiera-Bold.woff2') format('woff2');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-display: fallback;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Premiera';
|
|
src: url('/fonts/Premiera-Italic.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
font-display: fallback;
|
|
}
|
|
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
color: #000;
|
|
background: #fff8e5;
|
|
font-family: "Premiera", "Cambria", "Roboto Slab", "Georgia", "Times New Roman", serif;
|
|
font-size: 100%;
|
|
text-rendering: optimizeLegibility;
|
|
-moz-font-feature-settings:"onum" 1;
|
|
-ms-font-feature-settings:"onum" 1;
|
|
-o-font-feature-settings:"onum" 1;
|
|
-webkit-font-feature-settings:"onum" 1;
|
|
font-feature-settings:"onum" 1;
|
|
}
|
|
|
|
html>body, html>body#cover {
|
|
font-size: 19px;
|
|
}
|
|
|
|
abbr, acronym, .caps {
|
|
-moz-font-feature-settings:"c2sc" 1, "onum" 1;
|
|
-ms-font-feature-settings:"c2sc" 1, "onum" 1;
|
|
-o-font-feature-settings:"c2sc" 1, "onum" 1;
|
|
-webkit-font-feature-settings:"c2sc" 1, "onum" 1;
|
|
font-feature-settings:"c2sc" 1, "onum" 1;
|
|
font-style: normal;
|
|
font-variant: small-caps;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
abbr {
|
|
text-underline-position: under;
|
|
}
|
|
|
|
blockquote abbr, blockquote acronym, blockquote .caps,
|
|
em abbr, em acronym, em .caps,
|
|
cite abbr, cite acronym, cite .caps {
|
|
|
|
font-style: normal;
|
|
}
|
|
|
|
cite, em {
|
|
font-style: italic;
|
|
|
|
}
|
|
|
|
strong {
|
|
|
|
font-weight: bold;
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
}
|
|
|
|
/* @group layout */
|
|
|
|
#main {
|
|
|
|
width:61.8%;
|
|
|
|
float:left;
|
|
}
|
|
|
|
|
|
|
|
#supp {
|
|
|
|
margin-left:61.8%;
|
|
}
|
|
|
|
#main h1, #main h2, #main p, #main pre, #main ul, #main ol, #main dl, #supp ul, #supp h3, #supp ol, #supp p, form, .example, #supp #deck {
|
|
padding: 0 11.8%;
|
|
}
|
|
|
|
h1 span, #supp span, #toc li span, .quote-from-book .ic, .thumb {
|
|
position: absolute;
|
|
text-align:right;
|
|
display:block;
|
|
}
|
|
|
|
h1 span, #toc li span, .thumb {
|
|
left: -0.75em;
|
|
width:7.29%;
|
|
|
|
}
|
|
|
|
h1 span {
|
|
left: -0.3em;
|
|
}
|
|
|
|
#supp span {
|
|
left: -0.5em;
|
|
width: 11.8%;
|
|
}
|
|
|
|
#nextprev, h3 {
|
|
position: relative;
|
|
}
|
|
/* @end */
|
|
|
|
/* @group typography */
|
|
#main, #supp, #footer, #cover, .amzbox {
|
|
font-size: 1em;
|
|
line-height: 1.375em;
|
|
|
|
}
|
|
|
|
h1, h2, h3, #header, #big-title #ts {
|
|
}
|
|
|
|
|
|
h1#big-title span {
|
|
font-style: italic;
|
|
|
|
}
|
|
|
|
a, a:visited, a:link, a:active, a:hover {
|
|
|
|
color: #00408f;
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
a:visited {
|
|
color:#666;
|
|
}
|
|
|
|
html>body a, html>body a:visited, html>body a:link, html>body a:active, html>body a:hover {
|
|
/* need to hide borders on links from ie6 due to text-jog bug */
|
|
|
|
text-decoration: none;
|
|
border-bottom: 1px solid #f2ecda;
|
|
|
|
}
|
|
|
|
|
|
|
|
html>body a:active, html>body a:hover {
|
|
border-bottom: 1px solid #999;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 1.5em;
|
|
line-height: 1.083333333333333em;
|
|
margin: 0 0 1.5em 0;
|
|
}
|
|
|
|
h2, h3 {
|
|
font-weight: normal;
|
|
font-size: 1.1875em; /* 19px */
|
|
margin: 1.157894736842105em 0; /* 22px */
|
|
text-indent: -0.052631578947368em; /* 1px */
|
|
}
|
|
h4 {
|
|
font-weight: normal;
|
|
font-size: 1em;
|
|
margin: 0 0 0.6875em 0;
|
|
}
|
|
|
|
#supp h2 { /* header*/
|
|
font-weight: normal;
|
|
font-size: 1em;
|
|
margin: 0;
|
|
position:absolute;
|
|
right: 4.5076%;
|
|
top: 1.375em;
|
|
}
|
|
|
|
#supp h2 a {
|
|
text-decoration: none;
|
|
border: 0;
|
|
color: #e7e7e7;
|
|
}
|
|
|
|
#supp h2 a:active, #supp h2 a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
#supp h3 {
|
|
margin-bottom: 0.578947368421053em; /* 11px */
|
|
margin-top: 1.736842105263158em; /* 33px*/
|
|
}
|
|
|
|
|
|
blockquote {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
font-style: italic;
|
|
|
|
}
|
|
|
|
.quote-from-book {
|
|
position: relative;
|
|
}
|
|
|
|
.quote-from-book .ic {
|
|
left: 0px;
|
|
width: 11.8%;
|
|
}
|
|
|
|
ul, ol, dl {
|
|
margin: 1.375em 0 1.375em 0;
|
|
}
|
|
|
|
li, dd, dt {
|
|
margin: 0;
|
|
}
|
|
|
|
dd {
|
|
margin-left: 1.375em;
|
|
}
|
|
|
|
p {
|
|
margin-top: 1.375em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
p + p {
|
|
margin-top: 0;
|
|
text-indent: 1.375em;
|
|
}
|
|
|
|
p.imgholder {
|
|
margin-top: 1.375em;
|
|
margin-bottom: 1.375em;
|
|
text-align: center;
|
|
text-indent: 0;
|
|
}
|
|
|
|
q {
|
|
font-style:italic;
|
|
quotes: '\2018' '\2019' '\201c' '\201d';
|
|
|
|
}
|
|
|
|
q:before {
|
|
content: '\2018';
|
|
}
|
|
|
|
q:after {
|
|
content: '\2019';
|
|
}
|
|
|
|
html > body q {
|
|
font-style:normal;
|
|
}
|
|
|
|
body blockquote q {
|
|
font-style:italic;
|
|
}
|
|
|
|
code {
|
|
font-family: inconsolata, consolas, "andale mono", "droid sans mono", menlo, monospace;
|
|
font-size: 16px;
|
|
font-size-adjust: 0.457;
|
|
}
|
|
|
|
code code {
|
|
font-size: 1em;
|
|
}
|
|
|
|
pre {
|
|
margin: 1.375em 0 0 1.375em;
|
|
}
|
|
|
|
blockquote em {
|
|
font-style: normal;
|
|
|
|
}
|
|
|
|
ul ul, ol ol {
|
|
margin-left: 1.375em;
|
|
}
|
|
|
|
#main li p {
|
|
padding: 0;
|
|
}
|
|
|
|
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
|
|
color: #333;
|
|
border: 0;
|
|
}
|
|
|
|
h2 a:link, h2 a:visited, h2 a:hover, h2 a:active {
|
|
text-decoration:none;
|
|
color: #fff;
|
|
border: 0;
|
|
}
|
|
|
|
#supp ul {
|
|
list-style:circle;
|
|
margin-top: 0.6875em;
|
|
}
|
|
|
|
ol#annotations {
|
|
list-style:lower-roman;
|
|
}
|
|
|
|
#nextprev li {
|
|
list-style: none;
|
|
}
|
|
/* @end */
|
|
|
|
|
|
/* @group header */
|
|
#header {
|
|
font-size: 1.25em;
|
|
line-height: 1.1em;
|
|
color: #fff;
|
|
background: #400300 url(/i/newdrop.png) repeat-x bottom;
|
|
padding: 1.1em 1.1em 2.2em 1.1em;
|
|
margin:0 0 2.2em 0;
|
|
}
|
|
|
|
#header a {
|
|
color: #e7e7e7;
|
|
border: none;
|
|
}
|
|
|
|
#header a:hover, #header a:active {
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
#header a span {
|
|
font-style: italic;
|
|
|
|
}
|
|
|
|
span.of {
|
|
margin-right: 0.1em;
|
|
}
|
|
/* @end */
|
|
|
|
/* @group footer */
|
|
#footer {
|
|
font-size: 0.875em;
|
|
clear:both;
|
|
margin: 0;
|
|
padding: 4.571428571em 7.29% 1.571428571em;
|
|
color: #999;
|
|
}
|
|
|
|
#footer a {
|
|
color: #999;
|
|
}
|
|
html>body #footer a {
|
|
border-bottom: 1px solid #f2ecda;
|
|
}
|
|
/* @end */
|
|
|
|
/* @group bits and pieces */
|
|
.author {
|
|
text-indent:0;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.bits h1 {
|
|
margin-top: -0.166666666666667em;
|
|
margin-bottom: 0.916666666666667em;
|
|
}
|
|
|
|
.bits #supp {
|
|
padding-top: 0.6875em;
|
|
}
|
|
|
|
#toc h3 {
|
|
margin-top: 1.736842105263158em; /* 33px */
|
|
margin-bottom: 0.578947368421053em; /* 11px */
|
|
}
|
|
|
|
ol#toc {
|
|
padding-right:0;
|
|
}
|
|
|
|
ol#toc ol {
|
|
margin-left: 0;
|
|
padding-left:0;
|
|
padding-right:0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
ol#toc ol ol {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.nobullets {
|
|
list-style:none;
|
|
}
|
|
|
|
#toc *:target {
|
|
background: #f2ecda;
|
|
}
|
|
|
|
.thumb img {
|
|
height: 2.5em;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
.bracket {
|
|
font-style: normal;
|
|
}
|
|
|
|
/* @end */
|
|
|
|
/* @group forms */
|
|
form {
|
|
margin: 0 0 1.375em 0;
|
|
}
|
|
form dt {
|
|
margin:1em 0 0 0;
|
|
}
|
|
form dd {
|
|
margin: 0 0 1em 0;
|
|
}
|
|
input, textarea {
|
|
font-size: 1em;
|
|
line-height: 1.375em;
|
|
font-family: inherit;
|
|
}
|
|
input.textbox, textarea {
|
|
border: 1px solid #999;
|
|
font-size: 1em;
|
|
line-height: 1.375em;
|
|
font-family: inherit;
|
|
width:100%;
|
|
}
|
|
input.button {
|
|
border-width: 1px;
|
|
}
|
|
/* @end */
|
|
|
|
/* @group examples */
|
|
#main #box1, #main #box2 { /* 2.1.1 */
|
|
font-size:12px;
|
|
width:1em;
|
|
height:1em;
|
|
border:1px solid black;
|
|
margin-left: 11.8%;
|
|
text-align: center;
|
|
color: #aaa;
|
|
margin-top: 1.5em;
|
|
line-height: 1em;
|
|
}
|
|
|
|
#main #box2 { /* 2.1.1 */
|
|
font-size:60px;
|
|
margin-top: 0.3em;
|
|
}
|
|
|
|
.inex { /* inline example */
|
|
background-color: #aaa;
|
|
}
|
|
|
|
div.ex2-1-7 {
|
|
font-family: "univers bold condensed", impact, haettenschweiler, sans-serif;
|
|
font-size: 200%;
|
|
letter-spacing:0.1em;
|
|
margin-top:0.75em;
|
|
margin-left:0.75em;
|
|
}
|
|
|
|
div.ex2-1-8 {
|
|
margin-top:0.75em;
|
|
margin-left:0.75em;
|
|
font-size: 200%;
|
|
}
|
|
|
|
.ex2-1-8i {
|
|
letter-spacing: -0.1em;
|
|
}
|
|
|
|
div.ex2-1-9 {
|
|
margin-top:0.75em;
|
|
margin-left:0.75em;
|
|
font-size: 200%;
|
|
letter-spacing: -0.1em;
|
|
}
|
|
|
|
.ex2-1-10-toc1 {
|
|
margin: 0 3em 0 auto;
|
|
}
|
|
|
|
.ex2-1-10-toc1 th {
|
|
font-weight: normal;
|
|
text-align: right;
|
|
padding:0;
|
|
}
|
|
|
|
.ex2-1-10-toc1 td {
|
|
font-style: italic;
|
|
|
|
text-align: right;
|
|
padding: 0 0 0 0.5em;
|
|
}
|
|
|
|
.ex2-1-10-toc2 {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ex2-1-10-toc2 th {
|
|
font-weight: normal;
|
|
text-align: right;
|
|
padding: 0 0.5em 0 0;
|
|
}
|
|
|
|
.ex2-1-10-toc2 td:before {
|
|
content: "\2022";
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
.ex2-1-10-toc2 td {
|
|
font-style: italic;
|
|
|
|
text-align: left;
|
|
padding:0;
|
|
}
|
|
|
|
.ex2-2-1ii {
|
|
font-size: 1.5em;
|
|
line-height: 0.85;
|
|
text-indent: -0.5em;
|
|
margin-top: 1.5em;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.ex2-2-1i {
|
|
line-height: 3;
|
|
border-top:1px solid #ccc;
|
|
border-bottom:1px solid #ccc;
|
|
margin-top: 1.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
.ex2-2-2 {
|
|
margin-left: 1.5em;
|
|
margin-right: 3em;
|
|
position:relative;
|
|
}
|
|
|
|
.ex2-2-2 .basictext {
|
|
margin-left: 10em;
|
|
}
|
|
|
|
.ex2-2-2 .sidenote {
|
|
width: 9.6em;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
text-indent: 0;
|
|
font-size: 0.8333em;
|
|
line-height:1.8;
|
|
}
|
|
|
|
.ex2-3-2i {
|
|
text-indent:-1.5em;
|
|
}
|
|
|
|
.ex2-3-2ii:before {
|
|
content: "\2767";
|
|
padding-right: 0.4em;
|
|
}
|
|
|
|
.ex2-3-2iii {
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
#main .ex2-3-2iii p {
|
|
display: inline;
|
|
padding: 0;
|
|
}
|
|
.ex2-3-2iii p + p:before {
|
|
content: "\2761";
|
|
padding-right: 0.1em;
|
|
padding-left: 0.4em;
|
|
}
|
|
.ex2-3-4 {
|
|
margin-left:0;
|
|
margin-right:0;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ex2-3-4 pre {
|
|
font-family: inherit;
|
|
display: table;
|
|
width: auto;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* @end */
|
|
|
|
|
|
/* @group deck ad */
|
|
|
|
#deck {
|
|
margin-top: 3em;
|
|
width: 13.636363636363636em;
|
|
}
|
|
|
|
#supp #deck p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
padding: 0;
|
|
}
|
|
|
|
/* @end */
|