/* ================================================ Handcrafted by Elliot Jay Stocks Last updated on 14.05.2012 ================================================ Contents: 01 Sensible defaults 02 Typography 03 Forms & buttons 04 Basic layout 05 Blog posts 06 Blog archives 07 About page 08 Footer 09 Media queries ================================================ */ /* 01 Sensible defaults --------------------------------------------- */ @import "reset.css"; div, article, section, header, footer, nav, figure, li { position:relative; } /* For absolutely positioning elements within containers */ .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; } /* For clearing */ body { background:#fff; } ::-moz-selection { background:#333; color:#fff; } ::selection { background:#333; color:#fff; } /* 02 Typography --------------------------------------------- */ /* 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) 72 / 16 = 4.5em (72px equivalent) */ /* Rendering */ html, input, textarea { -webkit-font-smoothing:antialiased; } /* Ligatures */ body { text-rendering:optimizeLegibility; /* Turns on ligatures and kerning */-moz-font-feature-settings:"liga=1, dlig=1"; -ms-font-feature-settings:"liga", "dlig"; -o-font-feature-settings:"liga", "dlig"; -webkit-font-feature-settings:"liga", "dlig"; font-feature-settings:"liga", "dlig"; /* For more refined (but less supported) ligature control */ } /* Families */ body, input, textarea, figcaption em { color:#333; font:200 1em/1.875em "Skolar Regular", "Georgia", "Times New Roman", serif; } h2 { letter-spacing:-0.025em; } strong, h3, h4 { font-family:"Skolar Bold", "Georgia", "Times New Roman", serif; font-weight:bold; } em, em strong, strong em h1, cite, label, figcaption, nav ul li, div.post p:first-child, a.about, p.note { font-family:"Skolar Italic", "Georgia", "Times New Roman", serif; font-style:italic; } /* Headings */ h1 { color:rgba(0,0,0,0.3); } h1 a { color:#333; display:block; } h1 a:hover { color:#9c6; } h2 { font-size:1.875em; line-height:1.125em; } h3, h4 { font-size:1.125em; padding:2em 0 0.5em 0; } h3 + h4 { padding-top:0; } /* Only an h4 that follows an h3 */ p + h3, li + h3 { padding-top:1.5em; } /* Only an h3 that follows a p or an li */ /* Links */ a { color:#9c6; text-decoration:none; -webkit-transition:color 0.2s ease-in-out; -moz-transition:color 0.2s ease-in-out; -o-transition:color 0.2s ease-in-out; transition:color 0.2s ease-in-out; } @-moz-document url-prefix() { a { display:inline-block; /* For weird Firefox strickthrough-like bug */ } } h3 a, p a, li a, figcaption a { border-bottom:1px solid #9c6; color:#333; } h3 a:hover, p a:hover, li a:hover, figcaption a:hover { color:#9c6; } /* Other bits & bobs */ p, li { padding:0.5em 0; } li { list-style:none; } div.col li, div.post li, footer li { list-style-type:disc; } blockquote { border-left:10px solid #e1e1e1; color:#7f7f7f; padding-left:5%; } blockquote p { } div.post p:first-child + p { font-size:1.875em; line-height:1.5em; } code, pre { background:rgba(0,0,0,0.1); font-size:0.875em; } pre { margin:0.5em 0; padding-left:1em; } pre code { background:none; } p.note { color:rgba(0,0,0,0.3); font-size:0.875em; padding-bottom:1em; } /* Overall font size */ body { font-size:80%; /* A mobile-first approach: this is then increased using min-width media queries (see below) */ } /* 03 Forms & buttons --------------------------------------------- */ form input, form textarea { background:#fff; border:1px solid rgba(0,0,0,0.1); border-radius:4px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#333; font-size:1em; margin-bottom:1em; padding:0.5em 1em; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; -webkit-appearance:none; width:100%; } form textarea { min-height:10em; } form input:focus, form textarea:focus { border-color:#333; outline:none; } form input.submit { background:#9c6; border-color:rgba(0,0,0,0.1); color:#fff; font-weight:700; text-align:center; text-transform:uppercase; } form input.submit:hover { background:#333; } a.btn { background:#9c6; border:1px solid rgba(0,0,0,0.1); border-radius:4px; margin:0 auto; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#fff; display:inline-block; letter-spacing:0.125em; padding:0.5em 1em; text-align:center; text-transform:uppercase; width:100%; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } a.btn:hover { background:#333; color:#fff; } /* 04 Basic layout --------------------------------------------- */ body { background:#f7fafa url(/theme/4fa2d7e4dabe9d25f5004a6f/stylesheets/images/body.jpg) fixed; } header.global { border-bottom:10px solid rgba(0,0,0,0.1); margin:0 auto; /*max-width:800px;*/ padding-bottom:1em; padding-top:3em; text-align:center; width:80%; } nav ul li { display:inline; margin:0 0.5em; } body.home a.home, body.blog a.blog, body.speaking a.speaking, body.about a.about { border-color:#333; } /* 05 Blog posts --------------------------------------------- */ h2#art-direction { color:#f25443; font-size:4.5em; /* 72px equivalent by default, but overwritten by fittext.js */ margin:0 auto; max-width:1400px; padding-top:1em; width:80%; } div.post { margin:0 auto; max-width:900px; width:80%; } div.post p:first-child { margin:4em auto; text-align:center; } div.post blockquote p:first-child { margin:0; text-align:left; } div.post p:first-child span { color:rgba(0,0,0,0.3); } div.post p:first-child + img { margin-bottom:2em; } div.post img { margin:1em 0; width:100%; } div.post figure { margin:0; padding:0; } div.post figure p img { margin:0; max-width:100%; } div.post figure p img.legacy { max-width:400px; } div.post figure figcaption { color:rgba(0,0,0,0.3); font-size:0.875em; padding-bottom:1.5em; } div.post figure figcaption em { color:rgba(0,0,0,0.3); } div#comments { margin:0 auto; max-width:900px; width:80%; } div#comments h2 { padding:2em 0 0.5em 0; } div#comments ol li { border-bottom:1px solid rgba(0,0,0,0.1); font-size:0.875em; list-style:none; /*margin-right:34%;*/ } div#comments ol li:last-child { border:none; } div#comments ol li article { border:none; padding:2em 0 1.5em 0; } div#comments ol li article header { /* Pixels used to match the fixed image dimensions below */ } div#comments ol li article header div.gravatar-container { float:left; margin:-2% 3% 0 0; max-width:80px; width:10%; } div#comments ol li article header div.gravatar-container img { width:100%; } div#comments ol li article header h3, div#comments ol li article header h3 + p { padding:0; } div#comments ol li article header h3 + p, div#comments ol li article header h3 + p a { color:rgba(0,0,0,0.3); } div#comments ol li article section { clear:both; } div#comments ol li article p { line-height:1.5em; } div#comments ol li article li { border:none; list-style:circle; } /* 06 Blog archives --------------------------------------------- */ li.yearly-archive.year-2012 { background:rgba(153,204,102,0); } li.yearly-archive.year-2011 { background:rgba(153,204,102,0.1); } li.yearly-archive.year-2010 { background:rgba(153,204,102,0.2); } li.yearly-archive.year-2009 { background:rgba(153,204,102,0.3); } li.yearly-archive.year-2008 { background:rgba(153,204,102,0.4); } li.yearly-archive.year-2007 { background:rgba(153,204,102,0.5); } li.yearly-archive.year-2006 { background:rgba(153,204,102,0.6); } li.yearly-archive.year-2005 { background:rgba(153,204,102,0.7); margin-bottom:-4em; } li.yearly-archive div { margin:0 auto; max-width:1400px; padding-top:4em; width:80%; } li.yearly-archive h2 span { color:rgba(0,0,0,0.3); } li.yearly-archive h2 + p { padding-bottom:4em; } li.yearly-archive p span:after { color:rgba(0,0,0,0.3); content:" / "; } li.yearly-archive p span:last-child:after { content:none; } /* 07 About page --------------------------------------------- */ body.about { background:#000 url(/theme/4fa2d7e4dabe9d25f5004a6f/stylesheets/images/page-about.png) fixed; } body.about header.global { border-color:#fff; } body.about h1, body.about h1 a, body.about nav ul li a { color:#fff; } body.about h1 a:hover { color:#9c6; } body.about a.about { border-color:#fff; } body.about h2, body.about h3, body.about h4, body.about p, body.about p a { color:#fff; } body.about nav ul li a:hover, body.about p a:hover { color:#9c6; } body.about h2 { color:#f25443; font-size:4.5em; /* 72px equivalent by default, but overwritten by fittext.js */ margin:0 auto; max-width:1400px; padding-top:1em; text-rendering:optimizeLegibility; width:80%; } body.about h2 span.word5, body.about h2 span.word10, body.about h2 span.word11, body.about h2 span.word18, body.about h2 span.word19, body.about h2 span.word26 { color:#ffc; } body.about h2 + div.post > img { margin-top:4em; } /* 08 Footer --------------------------------------------- */ footer { background:#333; margin-top:4em; } footer > div { margin:0 auto; max-width:900px; padding:2em 0; width:80%; } footer h3, footer p, footer a, footer p a { color:#fff; } footer h3 { padding:0; } footer p { font-size:0.875em; line-height:1.5em; } footer div.fusionads { padding-bottom:3em; } footer div.fusionads h3, footer div.fusionads p, footer div.fusionads span.fusiontext { padding-left:150px; } footer div.fusionads span.fusiontext { display:block; font-size:0.875em; line-height:1.5em; margin-top:-1.75em; /* I've no idea why this had a top margin */ } footer div.fusionads img, footer div.authenticjobs img { position:absolute; top:0.5em; left:0; } footer div.authenticjobs h3, footer div.authenticjobs p { padding-left:80px; } footer div.smallprint { border-top:10px solid rgba(255,255,255,0.05); clear:both; margin-top:2.5em; padding-top:2em; } footer div.smallprint p:last-child { padding-top:2em; } /* 09 Media queries --------------------------------------------- */ /* 500 and up */ @media screen and (min-width:500px) { body { font-size:90%; } } /* 700 and up */ @media screen and (min-width:700px) { h1 { float:left; } h1 a { display:inline; } nav { float:right; } nav ul li { margin:0 0 0 1em; } } /* 800 and up */ @media screen and (min-width:800px) { body { font-size:100%; } div#comments ol li article header img { top:0.5em; } form div { float:left; margin-right:2%; width:32%; } form div.comment-url { margin-right:0; } form div.comment-body { clear:both; float:none; margin-right:0; width:100%; } li.yearly-archive h2 { float:left; width:32%; margin-right:2%; padding:0.125em 0 2em 0; } li.yearly-archive h2 + p { float:left; width:66%; } footer div.fusionads { float:left; margin-right:4%; padding-bottom:0; width:64%; } footer div.authenticjobs { float:left; width:32%; } } /* 1200 and up */ @media screen and (min-width:1200px) { body { font-size:110%; } } /* Retina Display */ @media screen and (-webkit-min-device-pixel-ratio: 2) { }