/* RJO'S MASTER STYLESHEET - (c) Robert J. O'Hara - rjohara@post.harvard.edu */ /* contextual "+" selectors have been removed; many of the text-indent:0 that remain are redundant and can be removed */ /* Cascading stylesheet for webpages authored by Robert J. O'Hara (rjohara@post.harvard.edu). The master copy of this document is https://rjohara.net/rjo.css. If you like the typography generated by this style sheet you are welcome to adapt it for your own use. I come from the academic world and the convention of that community is to borrow freely but always to credit the original source when doing so. If you make use of these designs, a reference to rjohara.net as their source would be appreciated. THIS STYLE SHEET IS ALWAYS UNDER DEVELOPMENT. I WELCOME COMMENTS ON THE TYPOGRAPHY GENERATED AND ESPECIALLY ON ANY FAILURES OF GRACEFUL DEGRADATION. All pages authored by RJO should be valid XHTML 1.0. They are all are encoded as utf-8, and all deprecated elements (applet, basefont, center, dir, font, isindex, menu, s, strike, and u) have been removed except 'u' which is needed for legacy documents. Frames remain only in the peabody pages. The auto-generated Reunion genealogy pages in rjohara.net/gen are *not* valid (X)HTML and are beyond repair until the Reunion program itself learns to output valid markup. */ /* "Don't compose without a scale," says Robert Bringhurst (2001: 45). Many of the compositional features of this style sheet have been inspired by the work of Todd Fahrner (style.cleverchimp.com), one of the real pioneers who first understood the typographic potential of CSS. The HORIZONTAL scale used here is based on pi (3.14): each value, multiplied or divided by pi, yields the next value: 43.00 em width of div.content or div.main 13.69 em width of div.menu 4.36 em width of blockquote right margin (3.14) em width of div.content or div.main padding 1.39 em width of body padding, div.menu padding, text-indent, list inset, and other values 0.44 em width of hanging indent of p.argument 0.14 em width of colophon padding and figure caption padding 0.04 [em letter-spacing on caps and small-caps (to be eliminated?)] [Revise to: 42.00, 13.38, 4.26, 1.36, 0.43, 0.14, 0.04 ?] The VERTICAL scale is based on Todd Fahrner's extended pentatonic scale for font sizes as described in his brilliant proposal for a CSS user interface (style.cleverchimp.com/cssui): 200% 2.00 em 2/1 167% 1.67 em 5/3 150% 1.50 em 3/2 125% 1.25 em 5/4 body line-height 112% 1.12 em 9/8 pre and table line-height 100% 1.00 em 1/1 89% 0.89 em 8/9 75% 0.75 em 3/4 body padding; topmenu and colophon font-size 60% 0.60 em 3/5 0.95em now used above and below blockquotes etc (1.5 white lines) Perhaps a single scale could be devised for both horizontal and vertical dimensions? (Another clever scale to use would be one based on the Lydo-Milesian weight standard: 14.10, 7.05, 4.70, 2.35, 1.18, 0.59, 0.29, 0.15, 0.08.) */ /* File created 16 August 2000 - Last updated 15 May 2008 */ /* SPECIAL ADVERTISING FORMATS */ p.banner { text-align: left; padding: 0; margin-top: -0.4em; margin-bottom: 1.5em; } /* used now on coin pages */ /* HTML, BODY, AND BLOCKS IN GENERAL */ html { color: black; background: url("https://rjohara.net/images/background.gif") silver repeat fixed; padding: 0; margin: 0; } body { color: black; background: transparent; padding: 0.75em 1.39em; margin: 0 auto; max-width: 43em; /* Preformatted elements may overflow at widths below 41em. */ min-width: 41em; /* testing to improve mobile format */ font: normal normal normal 97%/1.25 Palatino, "Book Antiqua", serif; } /* Body padding set in ems because percents trigger nasty 'jumping text' bug in Win IE6. Percents would be better but just can't be used at present. */ blockquote, div, h1, h2, h3, h4, h5, h6, iframe, object, p, pre { padding: 0; margin: 0.63em 0; } div.content { color: black; background: #FCFCFC; /* Barely off-white to reduce glare. #fff7f0 #f0f7ff */ padding: 0.6em 3.14em 1em 3.14em; margin: 0; border: #555555 solid 1px; /* Dark gray. */ } /* need to specify div.main width for mobile devices? */ address { font-style: italic; padding: 0; margin: 1em 0; } address.byline { margin: 0.63em 0; } /* Usually for one-line addreses at the beginning of a page; same format as p.item. */ address cite, address em, address strong.small-caps { font-style: normal; } form { padding: 0; margin: 0.93em 1.39em; } iframe.right { float: right; padding: 0; margin: 0.63em 0 0.63em 1.39em; } iframe.left { float: left; padding: 0; margin: 0.63em 1.39em 0.63em 0; } /* These are clumsy, but at least every iframe has one of these classes. An objective is to replace any self-served amazon images with their iframes. */ hr { padding: 0; margin: 0.63em auto; } pre { font-family: monospace; line-height: 1.12; white-space: pre; font-size: 0.89em; } /* Should have white line above and below. Search and replace for consistency in this. */ div.pre { font-family: monospace; margin: 0.93em 0; } div.pre p { line-height: 1.12; } /* These simulate teletype pages but permit line wrapping, and so are much superior to regular pre elements. See D-L files for examples. */ /* TABLES AND THEIR FAMILIARS - EXPERIMENTAL AND ROUGH! [default] white line above and below; usually centered */ table { padding: 0; margin: 0.93em auto; border-top: solid black 1px; border-bottom: solid black 1px; line-height: 1.12; } /* Basic format for text tables; margins may be redundant with align=center markup; cell alignments declared on colgroups (as per HTML specs) is not well supported across browsers. */ caption { caption-side: top; text-align: left; vertical-align: baseline; line-height: 1.25; font-style: italic; margin-bottom: 0; padding-bottom: 0.2em; } /* Caption for entire table, roughly Chicago style; vertical spacing very inconsistent across browsers. */ th { color: black; background: transparent; font-weight: normal; } /* works */ thead th { text-align: center; vertical-align: middle; /* inconsistent across browsers */ border-bottom: 1px solid black; } /* Spanner headings; works. */ tfoot { border-top: 1px solid black; } /* does not seem to work anywhere */ td { vertical-align: top; } td.note {line-height: 1.25;} /* for footnotes to tables, within tfoot */ colgroup.spacer { } thead th.spacer { width: 0.44em; border-bottom: none; } /* These spacer classes work around limitations of the HTML/CSS table model that prevent margins from being set on columns; they have no semantic function and should be hidden in aural renderings. */ /* END EXPERIMENTAL TABLES */ /* HEADINGS AND THEIR FAMILIARS [default] as specified subtitle one step down in size, spacing reduced [check innovista page] */ h1, h2, h3, h4, h5, h6 { color: #660000; background: transparent; } h1 { padding: 0; margin: 0.75em 0 0 0; font-size: 2em; font-weight: normal; } h2, h1.two { padding: 0; margin: 1em 0 0 0; font-size: 1.5em; font-weight: 600; } h3, h2.three, h1.three { padding: 0; margin: 1em 0 -0.13em 0; font-size: 1em; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; } h4, h3.four, h2.four, h1.four { padding: 0; margin: 1em 0 -0.13em 0; font-size: 1em; font-weight: bold; text-transform: none; letter-spacing: 0; } h5, h4.five, h3.five, h2.five, h1.five { padding: 0; margin: 1em 0 -0.13em 0; font-size: 1em; font-weight: normal; font-style: italic; text-transform: none; letter-spacing: 0; } /* h6 not in use. */ .subtitle { /* Used only on CW title page (and Peabody); buggy; double check. */ padding: 0; margin-top: 0.25em; } h2.subtitle { /* Used only on CW title page (and Peabody); buggy; double check. */ padding: 0; margin: 0.16em 0 -0.31em 0; } /* BLOCKQUOTES AND THEIR FAMILIARS [default] inset 1.39em, white line above and below dialogue contained p's have hanging indent epigraph contains p.epigraph-author items contained p's are block style (could be made a list class) letter no style per se but contains several special p classes poem displayed as table for centering; contained p's are block style */ blockquote { margin: 0.93em 1.39em; } blockquote.dialogue p { margin-left: 1.39em; text-indent: -1.39em; } blockquote.epigraph { margin: 0.93em 4.36em 0.93em 1.39em; font-size: 0.89em; } p.epigraph-author { margin-top: -0.31em; margin-left: 2.39em; text-indent: -1em; } blockquote.items p { } blockquote.letter { } p.letterhead { text-align: center; } p.letterdate { margin: 0.5em 0; text-align: right; /* May be redundant with markup. */ } p.address, p.salutation, p.closing { } p.signature { margin: 0.5em 0 0.63em 0; font-style: italic; } p.postscript { } blockquote.poem { display: table; margin: 0 auto; } /* Centers poem on the measure. */ blockquote.poem p { } /* PARAGRAPHS AND THEIR FAMILIARS [default] half line above and below argument hanging indent for old-style tables of contents; TEI element break white line above indicating thematic break continuation no indentation; works around DTD prohibition of bq in p dateline ellipsis item block lists; semantically diff. from note; convert to li's? note blocks, fine print; for notes and asides [others] (see blockquote and table for additional p classes and contexts) */ p.argument { padding: 0; margin: 0.31em 0 0.89em 0.44em; font-size: 0.89em; text-indent: -0.44em; } p.break { margin-top: 1.25em; } p.continuation { } p.dateline { font-size: small; color: gray; background: transparent; } p.ellipsis { text-align: center; letter-spacing: 1.39em; margin: -0.31em 0 1em 0; } /* Used only on CW thus far. */ /* Replace with width: 100%? (would be better, but doesn't work). Should be able to use text-align:justify but doesn't work in Mozilla 1.5. */ p.item { } /* Check for leftover p.item's from when p was indented by default */ p.note { font-size: 0.89em; } /* LISTS AND THEIR FAMILIARS [default] set in 1.39em, half line above and below plain no bullets references like paragraphs, with hanging indents */ ol, ul { padding: 0; margin: 0.63em 1.39em; } li { padding: 0; margin: 0; } ol { list-style: decimal; } ol ol { list-style: lower-alpha; } ol ol ol { list-style: lower-roman; } ul { list-style-type: circle; } li ol, ol ol, ol ol ol, li ul, ul ul, ul ul ul { /* Are all these needed? */ padding: 0; margin: 0 0 0 1.39em; } ul.plain { list-style-type: none; } /* rename "prose"? */ ul.references { margin: 0.63em 0; } ul.references li { margin: 0.17em 1em 0.25em 1.39em; text-indent: -1.39em; list-style-type: none; } ul.references ul { padding: 0; margin: 0.25em 0; } dl { } dt { font-style: italic; padding: 0; margin: 0.17em 1em 0 0; } dd { padding: 0; margin: 0 1em 0.25em 1.39em; } /* CUSTOM DIVs AND THEIR FAMILIARS [default] half-line above and below colophon author/date colophon on each page pubnote publication note on legacy documents (replace with p.note?) topmenu navigation menu on all pages (replace with a p.navmenu?) figure creates scalable captioned figures */ div.colophon { clear: both; text-align: center; font-family: Verdana, Arial, sans-serif; color: gray; background: transparent; padding: 1.25em 0.14em 0 0.14em; margin: 2em 0 1.67em 0; border-top: 1px gray solid; font-size: 0.60em; } div.colophon hr { display: none; } div.colophon a, div.colophon a:hover { color: gray; background: transparent; } div.contents { float: right; width: 33%; margin: 0.33em 0 1em 3.14em; font-size: small; } /* Page's table of contents, always placed right after a heading; being tested on coins pages; cannot set both width and padding on an element because it breaks IE. div.contents should begin with an h4 header "Contents of this page" */ div.contents h4 { font-size: 0.89em; margin-bottom: 0.33em; } div.contents ul, div.contents ul li { list-style-type: none; padding: 0; margin: 0;} div.contents ul li { margin-left: 1em; text-indent: -1em; } div.contents ol { padding: 0; margin: 0; } /* this should display on screen only? */ div.pubnote p { } /* Usually marked up small. Move hr's inside and replace with borders? Can this be replaced entirely with p.note? */ /* In use only of IUB and Kampert CW stories; to be used on CW reading page */ div.sidebar { background-color: #F5F5F5; margin: 0.63em 0.44em; font-size: 0.89em; } /* need to make this work with .left and .right */ div.sidebar p, div.sidebar h4 { padding: 0 0.44em; } /* padding shifted inside div to work around IE5 box model bug; see rjo-cw.css; that's only needed when the div.sidebar is floated, yes? It isn't in the IUB and Kampert articles. */ div.topmenu { font-family: Verdana, Arial, sans-serif; font-size: 0.60em; text-align: right; margin: -0.25em -3.14em 3.25em 0; padding: 0; } /* Figure-divs and their supporters */ div.figure { /* padding: 10px; Needed to support centering of almost-full-width figures ? margin: 0.93em auto; */ border: thin solid silver; } div.full { width: 90%; padding: 10px; margin: 0.63em auto; } /* "full" should be unnecessary, but this responds to the box model bugs in IE */ div.half { width: 50%; padding: 10px; margin: 0.63em 0.44em; } div.third { width: 33%; padding: 10px; margin: 0.63em 0.44em; } div.quarter { width: 25%; padding: 5px; margin: 0.63em 0.5em; } div.fifth { width: 20%; padding: 5px; margin: 0.63em 1%; } div.figure img { width: 100%; } div.figure p { /* This is default "legend" style, as opposed to "caption". */ font-family: Verdana, Arial, sans-serif; font-size: 0.75em; padding: 0 0.14em; margin: 0.25em auto 0 auto; } div.figure p.caption { text-align: center; } /* Chicago "caption" for short phrases; "legend" (default) for continuous prose. */ /* SHOULD make p within figure.fifth (or otherwise small) into small type; search for pre-existing uses of "detail" in this context and replace with contextual selector */ .full { width: 90%; padding: 10px; margin: 0.63em auto; } /* "full" should be unnecessary, but this responds to the box model bugs in IE */ .half { width: 50%; padding: 10px; margin: 0.63em 0.44em; } .third { width: 33%; padding: 10px; margin: 0.63em 0.44em; } .quarter { width: 25%; padding: 5px; margin: 0.63em 0.44em; } .fifth { width: 20%; padding: 5px; margin: 0.63em 1%; } .right { float: right; } .left { float: left; } /* End figure-divs */ /* INLINE ELEMENTS - ANCHORS */ a { padding-left: 1px; padding-right: 1px; text-decoration: none; } /* Padding improves appearance of a:hover backgrounds. */ a:link { color: #0000AA; background: transparent; } a:visited { color: purple; background: transparent; } a:hover { background: #E0E0E0; } a:active { color: red; background: #E0E0E0; } a.disabled { color: gray; background: transparent; cursor: help; } a.disabled:hover { color: gray; background: #E0E0E0; } a.ext:hover { color: green; background: #E0E0E0; } /* a.ext:after {content: "*"} */ a img:hover { background: transparent; } /* Insures linked transparent images don't change color on hover. */ a.here { border-bottom: 1px solid gray; } a.here:hover { background: transparent; } p.argument a.this-page { font-weight: bold; text-decoration: none; color: #660000; background: transparent; } /* a.here is a 'You are here' marker in topmenu; to be replaced with a.this-page and a.this-section (already used in rjo-sidebar.css)? This is very irregular and needs to be cleaned up. */ /* INLINE ELEMENTS - GENERAL */ abbr, acronym { border: none; } /* Deletes default border added by some browsers; should not be used anywhere. Need standard for speak-as/spell-out with abbr. */ abbr[title]:hover, acronym[title]:hover, dfn[title]:hover, span[title]:hover { color: teal; background: transparent; cursor: help; } /* For annotations via title attribute. */ abbr[title="Anno Domini"], abbr[title="Anno Hegirae"], abbr[title="Bachelor of Arts"], abbr[title="before Christ"], abbr[title="before the Common Era"], abbr[title="International Standard Book Number"], abbr[title="International Standard Serial Number"], abbr[title="Master of Arts"] { text-transform: lowercase; font-variant: small-caps; letter-spacing: 1px; speak-as: spell-out; } b { font-weight: bold; } big { font-size: 1.12em; } cite, dfn, em, i, var { font-style: italic; } strong dfn { font-style: normal; } cite cite, cite em, em cite, em em { font-style: normal; } pre cite, pre em { font-style: normal; text-decoration: underline; } code, kbd, samp, tt { font-family: monospace; } code, kbd { color: #660000; background: transparent; } /* Maroon is standard code color used by W3C. */ del { text-decoration: line-through; } em.dateline { /* font-style: normal; color: #660000; background: transparent; */ } /* Used on CW news pages; "dateline" is a TEI element. */ em.ship { } /* No special style; added to give semantic richness. TEI has an attribute 'type' which may take the value 'ship' on elements [referring string] or [proper noun]. */ /* img, q { } Not yet in use. */ ins { color: teal; background: transparent; text-decoration: none; } /* DTD wrongly prohibits ins within pre. RJO's house style surrounds ins elements with {braces}. */ small { font-size: 0.89em; } /* Very troublesome; cross-browser consistency is very difficult. */ span[lang="grc"] { font-family: Gentium, "Lucida Grande", serif; line-height: 1.0; } /* Are all grc passages in spans? Line-height is dubious as it depends on font metrics. */ span.incipit { text-transform: uppercase; letter-spacing: 1px; } /* The following is typographically superior, but rendering of small caps is poor in many browsers. Move to print stylesheet? span.incipit { text-transform: none; font-variant: small-caps; letter-spacing: 1px; } text-transform: none (reverses a rule that cascades in before this one which sets incipits to all caps in browsers that don't support font-variant) */ strong { color: #660000; background: transparent; font-weight: bold; } strong.small-caps { color: inherit; background: transparent; font-weight: normal; font-variant: small-caps; letter-spacing: 1px; } sub, sup { font-size: 0.8em; } sup { vertical-align: super; } sub { vertical-align: sub; } u { text-decoration: underline; } /* Deprecated in HTML4 but needed for legacy document representation. */ /* GENERIC CLASSES */ .alert { color: red; background: transparent; font-family: Verdana, sans-serif; } .center { text-align: center; } /* Not semantic but often needed. Is there a better way? */ .detail { font-size: 0.89em; } /* For "fine print"; can replace many uses of . */ .print { display: none; } /* For elements that appear in print but are not displayed on screen. */ /* Need .spell for speak-as:spell-out? */ /* cursor should always change to ? when there is a title attribute present? */ /* SPECIAL RULES FOR FRAMED /peabody/survey/ PAGES */ body.wide { color: black; background: #FCFCFC; padding: 0.5em 3em 20em 3em; margin: 0; max-width: none; } /* Used on peabody left-framed pages, with no div.content elements. */ body.fullwide { color: black; background: #FCFCFC; padding: 0.5em 0.5em 25em 0.5em; margin: 0; max-width: none; } /* For right-framed image groups. */ .abut { margin-top: 0.1em; } /* Collapses top margin of an image caption; still used in CW pages also. */ div.bottommenu { font-family: Verdana, sans-serif; font-size: 0.75em; text-align: right; margin: 0; padding: 0; } /* For special small menus on right-framed image groups. */ /* END SPECIAL PEABODY RULES */ /* MEDIA-SPECIFIC RULES (experimental) */ /* @page { margin-top: 10%; margin-bottom: 10%; } */ @media print { html { color: black; background: none transparent 0% 0% no-repeat scroll; padding: 0; margin: 0; } body { color: black; background: none transparent 0% 0% no-repeat scroll; max-width: none; font-family: "Palatino", "Book Antiqua", serif; font-size: 10pt; line-height: 1.12; padding: 0; margin: 0; } iframe, div.masthead, table.masthead, div.topmenu, div.announce-colophon, p.screen { display: none; } div.menu { width: 0; float: none; display: none; } div.content, div.main { width: auto; padding: 0; margin: 0; border: none; } h1, h2, h3, h4, h5, h6 { color: black; background: transparent; page-break-after: avoid; page-break-inside: avoid; } img { page-break-inside: avoid; } blockquote, ol, p, ul { widows: 2; orphans: 2; } table, caption, thead, tbody, tr, th, td { font-size: 10pt; } blockquote.epigraph p, p.note { font-size: 9pt; line-height: 1.25; } div.colophon { color: black; background: transparent; text-align: right; border-top: none; font-family: "Palatino", "Book Antiqua", serif; font-style: italic; page-break-before: avoid; page-break-inside: avoid; } div.colophon a { color: black; background: transparent; border-bottom: none; } div.colophon img { display: none; } div.figure { page-break-inside: avoid; } div.pre { font-size: 10pt; } span.incipit { text-transform: none; font-variant: small-caps; } /* Should force all l.c. first and then force cap on first letter only so no internal letters are capitalized. (Can't do this because :first-letter only applies to block level elements! That makes no sense at all.) */ span.toctoggle { display: none; } /* hides javascript contents toggle */ span#tocinside { display: inline; } /* shows contents block (if hidden by js) DOESN'T WORK */ strong.small-caps { letter-spacing: normal; } a { color: black; background: transparent; /*border-bottom: thin solid silver;*/ } a:link[href|=mailto] { border-bottom: none; } a:link, a:visited, code, ins, strong { color: black; background: transparent; } address.print { display: block; } } /* END MEDIA-SPECIFIC RULES */ /* END RJO'S MASTER STYLE SHEET */