updated CSS for documentation

This commit is contained in:
Matthew Butterick 2017-11-26 13:26:29 -08:00 committed by Matthew Butterick
parent 52f24b0203
commit 7389a4780e
3 changed files with 274 additions and 344 deletions

File diff suppressed because one or more lines are too long

View File

@ -6,9 +6,11 @@
.RktMod, .RktKw, .RktVar, .RktSym, .RktMod, .RktKw, .RktVar, .RktSym,
.RktRes, .RktOut, .RktCmt, .RktVal, .RktRes, .RktOut, .RktCmt, .RktVal,
.RktBlk, .RktErr { .RktBlk, .RktErr {
font-family: 'Source Code Pro', monospace; font-family: 'Fira-Mono', monospace;
white-space: inherit; white-space: inherit;
font-size: 1rem; font-size: 1rem;
line-height: 1.5;
} }
/* this selctor grabs the first linked Racket symbol /* this selctor grabs the first linked Racket symbol
@ -16,14 +18,14 @@ in a definition box (i.e., the symbol being defined) */
a.RktValDef, a.RktStxDef, a.RktSymDef, a.RktValDef, a.RktStxDef, a.RktSymDef,
span.RktValDef, span.RktStxDef, span.RktSymDef span.RktValDef, span.RktStxDef, span.RktSymDef
{ {
font-size: 1.15rem; font-size: 1.1rem;
color: black; color: black;
font-weight: 600; font-weight: 500;
} }
.inheritedlbl { .inheritedlbl {
font-family: 'Fira', sans; font-family: 'Fira', sans-serif;
} }
.RBackgroundLabelInner { .RBackgroundLabelInner {
@ -119,7 +121,6 @@ span.RktValDef, span.RktStxDef, span.RktSymDef
.RktValLink, .RktStxLink, .RktModLink { .RktValLink, .RktStxLink, .RktModLink {
text-decoration: none; text-decoration: none;
color: #07A; color: #07A;
font-weight: 500;
font-size: 1rem; font-size: 1rem;
} }
@ -131,7 +132,7 @@ h2 .RktMod, h3 .RktMod, h4 .RktMod, h5 .RktMod,
h2 .RktVal, h3 .RktVal, h4 .RktVal, h5 .RktVal, h2 .RktVal, h3 .RktVal, h4 .RktVal, h5 .RktVal,
h2 .RktPn, h3 .RktPn, h4 .RktPn, h5 .RktPn { h2 .RktPn, h3 .RktPn, h4 .RktPn, h5 .RktPn {
color: #333; color: #333;
font-size: 1.65rem; font-size: 1.50rem;
font-weight: 400; font-weight: 400;
} }
@ -141,7 +142,7 @@ h2 .RktPn, h3 .RktPn, h4 .RktPn, h5 .RktPn {
color: inherit; color: inherit;
} }
.tocset .RktValLink, .tocset .RktStxLink, .tocset .RktModLink { .tocset .RktValLink, .tocset .RktStxLink, .tocset .RktModLink, .tocset .RktSym {
color: black; color: black;
font-weight: 400; font-weight: 400;
font-size: 0.9rem; font-size: 0.9rem;
@ -195,11 +196,11 @@ tbody > tr:first-child > td > .together {
} }
.defmodule { .defmodule {
font-family: 'Source Code Pro'; font-family: 'Fira-Mono', monospace;
padding: 0.25rem 0.75rem 0.25rem 0.5rem; padding: 0.25rem 0.75rem 0.25rem 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
width: 100%; width: 100%;
background-color: hsl(60, 29%, 94%); background-color: #ebf0f4;
} }
.defmodule a { .defmodule a {
@ -218,6 +219,10 @@ tbody > tr:first-child > td > .together {
font-size: 1rem; font-size: 1rem;
} }
/* make parens ordinary color in defmodule */
.defmodule .RktPn {
color: inherit;
}
.specgrammar { .specgrammar {
float: none; float: none;
@ -288,7 +293,7 @@ tbody > tr:first-child > td > .together {
text-align: right; text-align: right;
z-index: 0; z-index: 0;
font-weight: 300; font-weight: 300;
font-family: 'Source Code Pro'; font-family: 'Fira-Mono', monospace;
font-size: 0.9rem; font-size: 0.9rem;
color: gray; color: gray;
} }
@ -296,7 +301,7 @@ tbody > tr:first-child > td > .together {
.RpackageSpec .Smaller { .RpackageSpec .Smaller {
font-weight: 300; font-weight: 300;
font-family: 'Source Code Pro'; font-family: 'Fira-Mono', monospace;
font-size: 0.9rem; font-size: 0.9rem;
} }

View File

@ -26,7 +26,7 @@
/* Monospace: */ /* Monospace: */
.maincolumn, .refpara, .refelem, .tocset, .stt, .hspace, .refparaleft, .refelemleft { .maincolumn, .refpara, .refelem, .tocset, .stt, .hspace, .refparaleft, .refelemleft {
font-family: 'Source Code Pro', monospace; font-family: 'Fira-Mono', monospace;
white-space: inherit; white-space: inherit;
font-size: 1rem; font-size: 1rem;
} }
@ -40,12 +40,11 @@ h2[x-source-module='(lib "scribblings/main/start.scrbl")'] ~ table a[href="refer
font-weight: bold; font-weight: bold;
} }
.stt {
font-weight: 500;
}
h2 .stt { h2 .stt {
font-size: 2.7rem; font-size: 2.3rem;
/* prevent automatic bolding from h2 */
font-weight: 400;
} }
.toptoclink .stt { .toptoclink .stt {
@ -57,7 +56,7 @@ h2 .stt {
.RpackageSpec .stt { .RpackageSpec .stt {
font-weight: 300; font-weight: 300;
font-family: 'Source Code Pro'; font-family: 'Fira-Mono', monospace;
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -70,8 +69,11 @@ h3 .stt, h4 .stt, h5 .stt {
/* Serif: */ /* Serif: */
.main, .refcontent, .tocview, .tocsub, .sroman, i { .main, .refcontent, .tocview, .tocsub, .sroman, i {
font-family: 'Charter', serif; font-family: 'Charter-Racket', serif;
font-size: 1.18rem; font-size: 1.18rem;
/* Don't use font-feature-settings with Charter,
it fouls up loading for reasons mysterious */
/* font-feature-settings: 'tnum' 1, 'liga' 0; */
} }
@ -79,9 +81,10 @@ h3 .stt, h4 .stt, h5 .stt {
.version, .versionNoNav, .ssansserif { .version, .versionNoNav, .ssansserif {
font-family: 'Fira', sans-serif; font-family: 'Fira', sans-serif;
} }
/* used mostly for DrRacket menu commands */
.ssansserif { .ssansserif {
font-family: 'Fira'; font-family: 'Fira', sans-serif;
font-weight: 500;
font-size: 0.9em; font-size: 0.9em;
} }
@ -107,19 +110,13 @@ li {
} }
h1, h2, h3, h4, h5, h6, h7, h8 { h1, h2, h3, h4, h5, h6, h7, h8 {
font-family: 'Fira'; font-family: 'Fira', sans-serif;
font-weight: 300; font-weight: 300;
font-size: 1.6rem; font-size: 1.6rem;
color: #333; color: #333;
margin-top: inherit; margin-top: inherit;
margin-bottom: 1rem; margin-bottom: 1rem;
line-height: 1.25; line-height: 1.25;
-moz-font-feature-settings: 'tnum=1';
-moz-font-feature-settings: 'tnum' 1;
-webkit-font-feature-settings: 'tnum' 1;
-o-font-feature-settings: 'tnum' 1;
-ms-font-feature-settings: 'tnum' 1;
font-feature-settings: 'tnum' 1;
} }
@ -130,12 +127,15 @@ h3, h4, h5, h6, h7, h8 {
h2 { /* per-page main title */ h2 { /* per-page main title */
font-family: 'Miso'; font-family: 'Cooper-Hewitt';
font-weight: bold;
margin-top: 4rem; margin-top: 4rem;
font-size: 3rem; font-size: 2.3rem;
line-height: 1.1; font-weight: bold;
line-height: 1.2;
width: 90%; width: 90%;
/* a little nudge to make text visually lower than 4rem rule in left margin */
position: relative;
top: 6px;
} }
h3, h4, h5, h6, h7, h8 { h3, h4, h5, h6, h7, h8 {
@ -183,7 +183,7 @@ a:hover {
left: 0; left: 0;
width: 15rem; width: 15rem;
height: 6rem; height: 6rem;
font-family: 'Fira'; font-family: 'Fira', sans-serif;
font-size: 0.9rem; font-size: 0.9rem;
border-bottom: 0px solid hsl(216, 15%, 70%); border-bottom: 0px solid hsl(216, 15%, 70%);
background-color: inherit; background-color: inherit;
@ -260,16 +260,20 @@ a:hover {
} }
.searchbox { .searchbox {
font-size: 1rem; font-size: 0.9rem;
width: 12rem; width: 12rem;
margin: 1rem; margin: 1rem;
padding: 0.25rem; padding: 0.25rem 0.4rem ;
vertical-align: middle; vertical-align: middle;
background-color: white; background-color: white;
font-family: 'Fira-Mono', monospace;
} }
#search_box { #search_box {
font-size: 0.8rem; font-family: 'Fira-Mono', monospace;
font-size: 1rem;
padding: 0.25rem 0.3rem ;
} }
/* Default to local view. Global will specialize */ /* Default to local view. Global will specialize */
@ -375,7 +379,7 @@ a:hover {
} }
.refcontent { .refcontent {
font-family: 'Fira'; font-family: 'Fira', sans-serif;
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
margin: 0 0 0 0; margin: 0 0 0 0;
@ -422,14 +426,7 @@ a:hover {
padding-bottom: 0.4rem; padding-bottom: 0.4rem;
padding-left: 0.2rem; padding-left: 0.2rem;
line-height: 1.1; line-height: 1.1;
font-family: 'Fira'; font-family: 'Fira', sans-serif;
-moz-font-feature-settings: 'tnum=1';
-moz-font-feature-settings: 'tnum' 1;
-webkit-font-feature-settings: 'tnum' 1;
-o-font-feature-settings: 'tnum' 1;
-ms-font-feature-settings: 'tnum' 1;
font-feature-settings: 'tnum' 1;
} }
.tocset td a { .tocset td a {
@ -499,11 +496,23 @@ table.tocsublist {
font-size: 1rem; font-size: 1rem;
} }
.tocviewsublist td, .tocviewsublistbottom td, .tocviewsublisttop td, .tocsub td, .tocviewsublist td,
.tocviewsublistbottom td,
.tocviewsublisttop td,
.tocsub td,
.tocviewsublistonly td { .tocviewsublistonly td {
font-size: 90%; font-size: 90%;
} }
/* shrink the monospaced text (`stt`) within nav */
.tocviewsublist td .stt,
.tocviewsublistbottom td .stt,
.tocviewsublisttop td .stt,
.tocsub td .stt,
.tocviewsublistonly td .stt {
font-size: 95%;
}
.tocviewtoggle { .tocviewtoggle {
font-size: 75%; /* looks better, and avoids bounce when toggling sub-sections due to font alignments */ font-size: 75%; /* looks better, and avoids bounce when toggling sub-sections due to font alignments */
@ -541,7 +550,7 @@ table.tocsublist {
.tocsubtitle { .tocsubtitle {
display: block; display: block;
font-size: 62%; font-size: 62%;
font-family: 'Fira'; font-family: 'Fira', sans-serif;
font-weight: bolder; font-weight: bolder;
font-style: normal; font-style: normal;
letter-spacing: 2px; letter-spacing: 2px;
@ -595,20 +604,29 @@ blockquote {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
/* put a little air between lines of code sample */
/* Fira Mono appears taller than Source Code Pro */
.SCodeFlow td {
padding-bottom: 1px;
}
.boxed { .boxed {
margin: 0; margin: 0;
margin-top: 2em; margin-top: 2em;
padding: 0.25em; padding: 0.25em;
padding-bottom: 0.5em; padding-top: 0.3em;
padding-bottom: 0.4em;
/* set default font for incidental chars (like arrows) */
font-family: 'Fira', sans-serif;
background: #f3f3f3; background: #f3f3f3;
box-sizing:border-box; box-sizing:border-box;
border-top: 1px solid #99b; border-top: 1px solid #99b;
background: hsl(216, 78%, 95%); background: hsl(216, 78%, 95%);
background: -moz-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 78%, 95%) 100%); background: -moz-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 62%, 95%) 100%);
background: -webkit-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 78%, 95%) 100%); background: -webkit-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 62%, 95%) 100%);
background: -o-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 78%, 95%) 100%); background: -o-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 62%, 95%) 100%);
background: -ms-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 78%, 95%) 100%); background: -ms-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 62%, 95%) 100%);
background: linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 78%, 95%) 100%); background: linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 62%, 95%) 100%);
} }
blockquote > blockquote.SVInsetFlow { blockquote > blockquote.SVInsetFlow {
@ -623,7 +641,6 @@ blockquote > blockquote.SVInsetFlow {
.SVInsetFlow a, .SCodeFlow a { .SVInsetFlow a, .SCodeFlow a {
color: #07A; color: #07A;
font-weight: 500;
} }
.SubFlow { .SubFlow {
@ -641,11 +658,11 @@ blockquote > blockquote.SVInsetFlow {
.SAuthorListBox { .SAuthorListBox {
position: static; position: static;
float: none; float: none;
font-family: 'Fira'; font-family: 'Fira', sans-serif;
font-weight: 300; font-weight: 300;
font-size: 110%; font-size: 110%;
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 3rem; margin-bottom: 2rem;
width: 30rem; width: 30rem;
height: auto; height: auto;
} }