/* Custom Take Control CSS styles for Leanpub EPUB and Mobi */ /* This CSS file is for a RED look, for "Yosemite: A Take Control Crash Course" */ /* Last edited on 2014-09-02. */ /* Change List * 2013-07-05: Converted most px values to em (everything but borders). -ace * 2013-09-25: Fixed a variety of margin-related issues in iBooks, which doesn't like certain margin settings. Also set the H3 horizontal rules to 1px and colored. -ace * 2013-10-05: Expanded the outdent for notes nested in lists from 0.85em to 1.65em since the former wasn't enough. Also reduced space below H1/H2 to .5em from 1em. -ace * 2013-10-20: Tweaked the code outdenting images in lists - they needed a .center after the div.image-with-caption to match properly. -ace * 2014-02-11: Added page-break-inside: avoid to headings, screenshots, and sidebar elements to keep them from breaking across pages. Also added widows and orphans controls for non-iBooks EPUB readers that do support them. Tried to add page-break-after: avoid to headings but it didn't seem to take in iBooks. -ace * 2014-03-07: Added code necessary to indent images, which required using box-sizing, setting a width:100% and then a padding-left:1.5em, along with various cleanup to get other usages of images to indent comparably. We can't identify 2-bullet-list images, so those aren't indented more. -ace * 2014-04-26: Changed the padding-left in "ul,ol" and "div.image-with-caption" from 1.5em to 2em to avoid cutting off two-digit list item numbers. First saw this in "Take Control of 1Password" v1.2. * 2014-06-25: Added "margin-top: 0.7em;" to the li element to make sure there was enough space before on the first item of nested lists. Also added "pre" to the "code" element so code blocks manually formatted with {lang=text} in the Leanpub Markdown will look like the rest of the code. Also added div.code-block {font-size: 100%;} so code blocks wouldn't look smaller than normal code. * 2014-07-28: Added italic to H5 and H6; check to see if better spacing is needed too. */ /* Set a body font and bring in the right and left margins slightly */ body { font-family: "Avenir Next", sans-serif; margin-left: 1.5em; margin-right: 1.5em; /* font-size: 85%; UNNECESSARY IN CC */ } /* Force Helvetica Neue (no small caps for TOC) for headings. The page-break-after:avoid doesn't seem to be honored in iBooks. */ h1#toc, h1, h2, h3, h4, h5, h6, h7 { font-family: "Helvetica Neue", sans-serif; font-variant: normal; color: #BA001C; /* HEADING COLOR TO CHANGE */ page-break-inside: avoid; page-break-after: avoid; } /* Put a background color on H2s (really our H1s), and make the font bigger */ h1#toc, h1, h2 { width: 100%; background-color: #BA001C; /* HEADING COLOR TO CHANGE */ color: white; font-size: 2em; line-height: 100%; padding-top: 0.75em; padding-bottom: 0.75em; padding-left: 0.25em; margin-top: 0em; margin-bottom: 0.5em; text-align: left; font-weight: bold; } /* Put borders around H3s (really our H2s) but avoid the sidebar H3s */ h3 { /* border-width: 1px; border-style: solid none solid none; border-color: #BA001C; HEADING COLOR TO CHANGE */ font-size: 1.3em; } /* Keep sidebar headings black - comment out for some colors */ div.sidebarish h3 { border-style: none; /* color: black; */ } /* Define H4 a little larger than H5 and H6 SHRANK FOR TC3*/ h4 { font-size: 1em; } /* Define H6 for Quick Start NOT EVEN IN TC3!!*/ h5,h6 { font-size: 1em; font-style: italic; } /* Increase the line height of standard text. Added widows and orphans controls for non-iBooks EPUB readers that do support them. */ p { line-height: 125%; widows: 2; orphans: 2; } /* Make sure the links are blue (new) and purple (visited) and underline (hover) */ a:link { color: #333399; text-decoration: none; } a:hover { color: purple; text-decoration: underline; } a:visited { color: purple; text-decoration: none; } /* Shrink the font size of captions, and add a little padding underneath */ p.caption { /* font-family: "Avenir Next", sans-serif; UNNECESSARY IN CC*/ color: #BA001C; /* HEADING COLOR TO CHANGE */ font-weight: 500; font-size: 90%; } /* Bring down the heaviness of bold a bit. */ strong { font-weight: 600; } /* This sets the color and size of code and pre text, both of which have to match due to how Leanpub sometimes does code. And the div.code-block below makes sure the blocks are the same size as our normal code, which can be inline. */ code, pre { color: #5215C0; font-family: "Courier", monospace; font-size: 95%; } div.code-block { font-size: 100%; } blockquote { font-style: italic; } /* Prevents overflow in non-iBooks EPUB readers */ img { max-width: 75%; } /* Indent screenshots and captions slightly, to match the list-indent - the trick is to set a width and use a padding-left in em, after turning on the box-sizing approach. The bottom margin is necessary to prevent note boxes after screenshots from being too close. If you want screenshots bordered, uncomment the border styles in the third directive down. Added page-break-inside:avoid to prevent breaks across pages.*/ div.image-with-caption { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ text-align: left; margin-bottom: 0.75em; width: 100%; padding-left: 2em; page-break-inside: avoid; } div.image-with-caption p.caption { text-align: left; } div.image-with-caption img { margin-top: 0.75em; /* border-style: solid; border-width: 1px; */ } /* Outdent screenshots that are nested in lists. Not all screenshots in lists are actually nested properly in the HTML, but the 8% indent should work for them as well. */ li > div.image-with-caption.center { padding-left: 0em; margin-left: 0em; } /* Increase the line height in lists to match p tags, and pad out each list item. Also, left-align bullets and numbers. */ ul,ol { line-height: 125%; list-style-position: outside; padding-left: 2em; } li { margin-top: 0.7em; margin-bottom: 0.7em; } /* Fix line height of p tags embedded in li tags */ li p { line-height: 125%; margin-top: 0.7em; } /* Make nested lists use letters and different bullets, and numbers for numbered lists inside bullet lists */ li ol { list-style-type: lower-alpha; } li ul { list-style-type: square; } ul li ol { list-style-type: decimal; } /* San-serif font for TOC list items and better padding for TOC */ .toc li { font-family: "Avenir Next", sans-serif; margin-bottom: 0.3em; line-height: 125%; } /* Chapters for ToC without Parts */ .toc.no-parts > li { font-size: 110%; margin-top: .8em; margin-bottom: 1em; } /* Sections for a ToC without parts */ .toc.no-parts > li > ul > li { font-size: 90%; } /* Sub-sections and below for a ToC without parts */ .toc.no-parts > li > ul > li > ul { font-size: 85%; } /* Style the tips and warnings and whatnot with a background color and rounded rectangle box. It's important that the margin settings be left and right only so there's space when multiple boxes stack. Added page-break-inside:avoid to prevent breaks across pages. */ div.sidebarish { font-family: "Avenir Next", sans-serif; font-size: 95%; margin-left: 0em; margin-right: 0em; padding-top: 0.45em; padding-bottom: 0em; padding-left: 0.85em; padding-right: 0.85em; background-color: #FFE5E9; /* SIDEBAR COLOR TO CHANGE */ border-color: white; /*border: 1px solid;*/ /*border-radius: 10px;*/ page-break-inside: avoid; } /* Bring the font size of captions in asides back up, and indents of captions in asides back out, which is necessary because sidebars add some left margin */ div.sidebarish p.caption { font-size: 100%; margin-left: -0.8em !important; } /* Bring indents of images in asides back out, which is necessary because sidebars add some left margin. */ div.sidebarish > div.image-with-caption img { margin-left: -0.8em; } /* Outdent notes that are nested in lists. Ignored in iBooks too, I think. */ li > div.aside { margin-left: -1.65em; } div.sharebox.aside.sidebarish { border-left: none; border-right: none; border-top: 2px solid; border-bottom: 2px solid; border-color: #BA001C; /* HEADING COLOR TO CHANGE */ } div.sharebox.aside.sidebarish img { vertical-align: top; } div.sharebox.aside.sidebarish h5 { font-size: 1.1em; font-style: normal; margin-top: 0px; margin-bottom: 10px; text-align: center; } div.sharebox.aside.sidebarish p { font-size: 0.9em; font-weight: 600; margin-bottom: 10px; text-align: center; }