/* ============================================= kroc camen of camen design ============================================== this css is designed for acid2 and above only. there are no ids. no divs. no classes, none. enjoy! ----------------------------------------------------------------------------------------------------------------------- */ /* styles shared between browser and printer: ======================================================================================================================= */ header, nav, footer, section, /* convert some html5 elements into structural elements */ aside, article, figure {display: block;} /* --- document structure ------------------------------------------------------------------------------------------------ */ p {margin: 0 0 18px;} section p+p {text-indent: 2em;} section small {/* HTML5 small now means “small print” (i.e. side text / legese) */ font-size: 100%; font-family: Georgia, serif; vertical-align: top;} :not(p)>small {/* I use as a paragraph itself too; yes, it’s valid */ display: block; margin-bottom: 18px;} /* lists */ ul, ol {margin: 0 18px 18px 18px; padding: 0;} dt {font-weight: bold;} dd {margin-bottom: 18px; margin-left: 40px; text-align: justify;} dt+dt {/* when a definiton term `
` is given without a definition `
`, then space the two adjacent terms */ margin-top: 18px;} /* images and objects at root (outside a `

`), are centered */ section>img, dd>img {display: block; margin: 0 auto 18px auto !important;} /* --- headings ---------------------------------------------------------------------------------------------------------- */ h1, h2, h3, h4 {text-align: left;} h2 {margin-top: 35px !important; border-bottom: 1px solid black; font: normal small-caps 20px/36px Georgia, serif !important; letter-spacing: 1px;} h3 {font: 18px/18px Georgia, serif;} h4 {font: italic 16px Georgia, serif;} /* non small-caps ``s in titles, for fancy “of”, “and”’s &c. */ /* note: `inherit` is used so that captial letters in the HTML source remain so, but the `small-caps` applied is effectively ‘switched off’ instead of merely being forced into lower-case, which would remove wanted capitals */ h2 em, h2 code {font-variant: normal; text-transform: inherit;} /* monospace at large sizes stands out a bit too much */ h1 code, h2 code, h3 code {font-size: 0.9em;} /* don’t italicise citations, it just adds to the confusion */ h1 cite, h2 cite, h3 cite {font-style: inherit;} /* drop cap proceeding a title, */ h1+p:first-letter, h2+p:first-letter, hr+p:first-letter, /* and an `

` */ small+p:first-letter {font: 18px/12px "Apple Chancery", "Palatino Linotype Italic", cursive; letter-spacing: 1px;} /* hack: I *HATE* having to do this. but when printing, browsers will not download new content, so the print-specific logo does not work. I have to hide it on the normal browser view, in order to cache it */ body>header h1 a {background: url("print-logo(c)camen-design.png") no-repeat -65px -64px;} /* --- table of contents & numbered headings ----------------------------------------------------------------------------- */ /* use an `
    ` as the very first element in the blog entry to generate an auto numbered table of contents, plus numbers will be added to all the headings that have ids */ /* the toc is floated to the left, where an introductionary paragraph can fit on the right */ h1+ol {float: left; margin-right: 0px !important; padding: 0 10px 0 0; background-color: inherit;} /* when a toc is reached, reset the counters used for numbering. this is recursive */ h1+ol, h1+ol ol {padding-left: 0; counter-reset: toc h2 h3; list-style-type: none;} /* add the numbering. `counters` is recursive,giving us “1.1”, “1.1.1” &c. */ h1+ol li:before {counter-increment: toc; content: counters(toc, ".") ". ";} /* shunt the first numbered heading below the toc */ h1+ol~h2[id] {clear: left;} h1+ol a {text-decoration: none;} /* heading numbering following a toc */ h1+ol~h2[id]:before {counter-increment: h2; content: counter(h2) ". ";} h1+ol~h2[id] {counter-reset: h3;} h1+ol~h3[id]:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". ";} /* --- inline stuff ------------------------------------------------------------------------------------------------------ */ a img, abbr {border: 0;} /* because I’m no longer using a CSS reset */ sup {vertical-align: text-top;} /* `` extends the line-height, don’t do this */ sub {vertical-align: baseline;} /* and `` too */ i {font-style: normal;} /* `i` does not mean italic in HTML5, it’s spare */ cite {font-style: inherit;} /* for reasons unknown `` does not align correctly with the baseline and causes the line-height to increase */ /* yes, just `monospace` is correct here, it forces Macs to use Courier and Windows Courier New */ samp, code {line-height: 0; font-family: monospace;} /* --- code samples ------------------------------------------------------------------------------------------------------ */ pre {counter-reset: pre; margin: 0 0 18px 0 !important; padding: 0; font-size: 10px; white-space: normal;} /* each line is a code element, used to count line numbers */ pre code {display: block; margin-left: 24px; padding-left: 4px; border-left: 1px solid #8e8e8e; white-space: pre-wrap; line-height: 18px;} pre code:before {counter-increment: pre; content: counter(pre); /* line number */ display: inline-block; width: 14px; margin: 0 5px 0 -25px; padding-right: 5px; font-size: 10px; line-height: 17px; text-align: right;} pre code, code samp, code var, code dfn, code i {font-style: normal; font-family: Monaco, monospace;} code dfn {color: #00f;} /* function */ code var {color: #318495;} /* variable */ code var dfn {color: #c5060b;} /* constant */ code samp {color: #000080;} /* string */ code samp dfn {color: #8000ff;} /* regex */ code i {color: #008000;} /* comment */ /* --- typographical-ish ------------------------------------------------------------------------------------------------- */ /* book style insertion points */ ins {text-decoration: none;} ins:before {content: "[";} ins:after {content: "]";} /* book like `
    ` “thematic break” */ hr {height: 54px; line-height: 54px; border: 0; text-align: center; color: transparent;} hr:before {content: "\2724" " " "\2724" " " "\2724"; color: black; word-spacing: 5em;} /* plush “et cetera” written in old style: “&c.” */ /* Mac: try for a combined ‘e’ and ‘t’ style, Windows: try match Palatino’s style. “Constantia” is a Vista font */ abbr[title="et cetera"] {font-family: "Hoefler Text", Palatino, Constantia, "Palatino Linotype", cursive; /* the serif font is smaller than the usual font, so we increase the font-size to level the letters with the surrounding text. line-height is nulled to prevent the 18px-per-line reading rhythm from being broken */ font-style: italic; font-size: 1.2em; line-height: 0;} section blockquote>:only-child {/* blockquotes are right aligned, unless there’s more than one paragraph in them */ text-align: right;} /* signature */ footer a[rel=contact] {display: inline-block; text-indent: 0; text-decoration: none; /* cursive: ffx-mac users get beautiful ligatures, windows users get comic sans :| */ font: normal 16px/54px "Apple Chancery", Palatino, "Palatino Linotype Italic", "Palatino Linotype", Zapfino, cursive; /* these adjustments are for the mail icon added by the links section above */ margin-left: -18px; padding-left: 18px; border-bottom: 0 !important; background-repeat: no-repeat; background-position: 1px 50%;} /* --- photo ------------------------------------------------------------------------------------------------------------- */ /* this is used to centre art/photos if they are smaller than the preview size */ article {text-align: center;} article>* {text-align: justify;} article>h1+section p+p {text-indent: 0;} /* don’t display the title if none given */ article>h1:empty {display: none;} /* the photo hyperlink. `line-height: 0` is needed to remove some magic-space below the `` */ section>figure>a {display: block; line-height: 0; text-align: center;} /* without a comment, the border fits tightly around the image, and you don’t get space */ section>figure+* {padding-top: 18px !important; margin-top: 0 !important;} /* if there’s no comment, hide the signature */ section>figure+footer {display: none;} /* --- tweet ------------------------------------------------------------------------------------------------------------- */ /* use ornate quotes on tweets. Safari doesn’t seem to support `quotes:` so we have to use `before`, `after`. sorry Windows users, if you can’t handle a bit of unicode, that’s your problem, not mine */ blockquote q:before {content: "\275B";} blockquote q:after {content: "\275C";} /* emphasis in tweets (already italic) */ article>blockquote em {text-decoration: underline;} article>blockquote code {font-style: normal;} /* --- poem -------------------------------------------------------------------------------------------------------------- */ article>p {text-align: center; font: 14px/18px Palatino, "Palatino Linotype", Serif;} @media screen, projection { /* / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / */ /* === structure, tag defualts =========================================================================================== */ /* background colour cannot be applied to `` when serving as ‘application/xhtml+xml’ */ html {background: #93a3b9 url("backgrounds/html-bg.png") no-repeat fixed top center;} body {/* a strict reading-rhythm is maintained, every line is always 18px or a multiple thereof */ width: 950px; margin: 0 auto; font: normal 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222;} a {text-decoration: none;} a:hover {text-decoration: underline;} ul, ol, dd {font-size: 11px;} /* === header ============================================================================================================ */ /* logo. this is a bit of a hack, as the logo does not appear in the side pane in the HTML, but appears there visually */ body>header h1 {position: fixed; width: 65px; height: 36px; margin: 18px 0 18px 40px; z-index: 1; text-indent: -1000px; background: url("logo(c)camen-design.png") no-repeat;} body>header h1 a {display: block; width: 65px; height: 36px;} /* --- tag cloud --------------------------------------------------------------------------------------------------------- */ header+nav {/* lock the pane to the side when scrolling */ position: fixed; height: 100%; width: 130px; /* this trick gives us a wide background colour extending off the left, so that the page appears to be divided into an orange half and a blue half (even when the window is resized), without using a wide background-image */ margin-left: -1600px; padding: 72px 70px 0 1600px; border-right: 3px solid #eaeeeb; background: #be6718 url("backgrounds/aside-bg.png") no-repeat top right;} /* add the tag count to the right of the tag, left aligned so that 10 doesn’t shunt the tags out compared to 0-9 &c. */ header+nav ol {margin: 0 18px 18px 18px !important;} header+nav li {text-align: right;} header+nav li:after {content: " \00B7" " " attr(value); /* bug: a space after the hex number is ignored */ display: inline-block; width: 2.3em; margin-left: 3px; text-align: left;} header+nav li:hover:after {content: " \00b7" " \25B6";} header+nav a {color: #740} header+nav a[rel=tag] {color: #fcfcfc;} /* ‘you are here’ */ /* --- header links: html, css, php &c. ---------------------------------------------------------------------------------- */ body>header>ul {float: right; width: 110px; margin: 18px 0 18px 10px; padding: 0; list-style: square inside; color: #235;} body>header>ul+ul {width: auto; margin-left: 10px;} body>header>ul li {float: left; width: 40px; font-size: 10px;} body>header>ul+ul li {text-align: right;} /* hyperlink colour, also colours the prev/next page links */ body>header a, body>nav~nav a {color: #456;} /* === content layout / meta ============================================================================================= */ /* no div for the column, all the content sits at the body level! `position: relative` is used so that you can click-through to the links in the side pane, below the main ‘column’ elements */ body>nav~* {position: relative; clear: both; width: 710px; left: 120px;} /* previous page link tucks in at the top (we have to override a lot of styles from the sidepane unfortunately) */ body>nav~nav {position: absolute; left: auto; width: 430px; height: 18px; margin: 0 0 0 260px; padding: 18px 0; border: 0; text-align: center; background: none;} /* next page link at the bottom of the page, this is just in addition to the declaration above */ body>nav+*~nav {position: relative;} article>aside, /* date/tag-list aside the entry */ form>aside {float: right; width: 110px; margin-right: -120px;} /* --- datetime ---------------------------------------------------------------------------------------------------------- */ /* beautiful css dates! you’ll love the html too, `