/* Theme Name: LeslieOA theme Theme URI: http://www.leslieowusuappiah.com/ Description: LeslieOA theme. Version: 0.3 Author: Leslie Owusu-Appiah Author URI: http://www.leslieowusuappiah.com/ Tags: theme, colour, grid, minimal, easter eggs, LeslieOA theme v0.1 http://www.leslieowusuappiah.com/ */ /* Main Styles */ /* Resets __________________________________________________________________________________________________ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; zoom: 1; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; /*outline: 0;*/ } body { line-height: 1; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; } #nav ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; } a:focus { /*outline: 1px dotted rgb(245,245,245);*/ } /* Makes keyboard nav/tab hard. Style or delete */ ins { background: rgb(255,255,153); color: rgb(0,0,0); text-decoration: none; } mark { background: rgb(255,255,153); color: rgb(0,0,0); font-style: italic; font-weight: normal; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted rgb(255,255,255); cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; /*border: 1px 0 0 0 solid rgb(204,204,204);*/ margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } /* OpenType ttf __________________________________________________________________________________________ */ /* Can't use pre-gzipped files in Safari */ @font-face { font-family: 'Museo300'; src: url('./ttf/museo300.eot'); src: local('Museo 300'), local('Museo-300'), url('./ttf/museo300.otf.gz') format('opentype'), url('./ttf/museo300.svg#Museo-300') format('svg'); } /* Grid 960 - 12 columns - 69px width ______________________________________________________________________ */ /* Rows - grid and gutter (e.g. 69px + 12px = 81) */ .row { position: relative; margin-left: -12px; } .g1 .row{ width: 81px; } .g2 .row{ width: 162px; } .g3 .row{ width: 243px; } .g4 .row{ width: 324px; } .g5 .row{ width: 405px; } .g6 .row{ width: 486px; } .g7 .row{ width: 567px; } .g8 .row{ width: 648px; } .g9 .row{ width: 729px; } .g10 .row{ width: 810px; } .g11 .row{ width: 891px; } .g12 .row{ width: 972px; } /* Columns */ .col { padding-left: 12px; float: left; position: relative; } .g1{ width: 69px; } .g2{ width: 150px; } .g3{ width: 231px; } .g4{ width: 312px; } .g5{ width: 393px; } .g6{ width: 474px; } .g7{ width: 555px; } .g8{ width: 636px; } .g9{ width: 717px; } .g10{ width: 798px; } .g11{ width: 879px; } .g12{ width: 960px; } /* clear */ .clear { margin: 0; padding: 0; } .clear:after, .row:after { content:'.'; display: block; height: 0; clear: both; visibility: hidden; } .clear, .row { display: inline-block; } .clear, .row { display: block; } /* Those two .clear have to be separate!). Placed this after grids to reset padding/margin */ .g8.row.grid { width: 648px; /*background: rgba(255,100,100,.5);*/ } .g8.row.grid .g4.col { padding-bottom: 30px/*20px*/; } /* Body ____________________________________________________________________________________________________ */ html { overflow: hidden; overflow-y: scroll; } body { font: normal 10pt 'Museo300'; background: rgb(255,255,255); color: rgb(0,0,0); text-align: center; overflow: hidden; } #container { width: 960px; text-align: left; margin: 0 auto; height: 100%; z-index: 1; /*background: url('./img/grid.960.12.png'); /*overflow: hidden; position: relative;*/ } /*#grid { position: fixed; width: 960px; top: 0px; bottom: 0px; left: 50%; margin-left: -480px; z-index: 0; }*/ /* 12 columns (6 columns = 150px) */ /*#grid div { width: 69px; margin-right: 12px; height: 100%; float: left; background: transparent; }*/ /* :last-child */ /*#grid div.last-child { margin-right: 0; }*/ a, a:link, a:active, a:visited { color: rgb(80,80,80); text-decoration: none; } a:hover { text-decoration: underline; } em, em a, em a:link, em a:active, em a:visited { font-style: italic; } h1, h2, h3, h4, h5, h6, #nav ul li a { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000); } /* MSIE */ h1, h2, h3, h4, h5, h6 { font-family: 'Museo300'; font-weight: normal; color: rgb(0,0,0); margin-bottom: 2px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link, h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: rgb(0,0,0); text-decoration: underline; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover { text-decoration: underline; } h1 { font-size: 16pt; font-weight: normal; } /* 18pt */ h2 { font-size: 14pt; font-weight: normal; } /* 16pt */ h3 { font-size: 12pt; font-weight: normal; } /* 14pt */ h4 { font-size: 10pt; font-weight: normal; } /* 12pt */ h5 { font-size: 8pt; font-weight: normal; } /* 10pt */ h6 { font-size: 6pt; font-weight: normal; } /* 8pt */ h3.sub { padding-top: 40px; } ul, ol { list-style-position: outside; /*background: red;*/ } li { /*text-indent: 10px;*/ } ul { list-style-type: square; padding-left: 15px;} ul li { /*background: skyblue;*/ } ol { list-style-type: decimal; } ol li { margin-left: 34px; /*background: yellow;*/ } p { margin-bottom: 10pt; /*background: rgba(255,255,55,.5);*/ } /* Styles __________________________________________________________________________________________________ */ #header, #footer { /*background: rgba(255,100,255,.5);*/ /*position: static;*/ } #header { padding: 68px 0 48px 0; } #footer { padding: 68px 0 48px 0; } #footer span.div { opacity: .5; -ms-filter: 'alpha(opacity=50)'; filter: alpha(opacity=50); margin: 0 2px; } #logo { height: 95px; overflow: hidden; width: 150px; display: block; margin-bottom: 0; } #logo a { height: 0; text-decoration: none; padding-top: 95px; display: block; background: url('./img/logos.combined.solid.png') no-repeat; font-size: 0; overflow: hidden; } #logo a:hover { text-decoration: none; } #logoText { /* l: 12 start, 174 3rd col, 208 3rd 1/2 col, 243 end? */ position: absolute; top: 67px; left: 0px; display: none; z-index: -1; background: transparent; background: url('./img/logos.combined.solid.png') -150px 0; width: 418px; height: 0; padding-top: 78px; overflow: hidden; } #nav ul { list-style-position: inside; padding-left: 0; } #nav ul li a { float: left; font: normal 12pt 'Museo300', 'Georgia', serif; color: rgb(0,0,0); text-decoration: none; border-bottom: 1px solid black; } #nav ul li a:hover { } #nav ul li.selected a { border-bottom: 4px solid black; } #nav ul li:first-child { padding-left: 0; /*background: rgb(255,0,0);*/ } /* Make sure this points at first navigation element */ #logo a:focus, #nav ul li a:focus { /*outline: 0 none transparent;*/ } .section.g4 > div, .article.g8 > div { margin-right: 33px; } /* Column padding, hacky */ .single h2, .single .entry p, .single .entry ul, .single .entry ol, #respond, #comments, .commentlist { margin-right: 33px; /*background: rgba(0,0,255,.2);*/ } small { font-size: 8pt; } small.credit { background: rgba(255,255,255,.99); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF); position: relative; display: inline-block; height: 14px; top: -21px; left: 0; padding: 2px 4px; } small.meta { margin-bottom: 8px; display: inline-block; } small.postmetadata, small.subtitle { background: rgb(0,0,0); color: rgb(255,255,255); padding: 1px 4px; margin-bottom: 8px; display: inline-block; } small.meta.postmetadata a { color: rgb(255,255,255); text-decoration: none; } small.meta.postmetadata a:hover { text-decoration: underline; } .badge { height: 15px; padding: 10px; color: rgb(255,255,255); } .social { text-decoration: none; padding: 0 4px; color: rgb(255,255,255) !important; border: 0 solid transparent; } .social.twitter { background: rgb(77,195,255); } .social.linkedin { background: rgb(0,118,168); } #contactButton, #contactForm { background: rgba(80,80,80,.96); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#F4505050,endColorstr=#F4505050); color: rgb(255,255,255); } #contactButton { position: absolute; right: 33px; float: right; top: -39px; height: 15px; padding: 12px; cursor: pointer; width: 104px; } #contactButton span { display: inline-block; text-align: right; width: 16px; font-size: 10pt; } #contactForm { position: absolute; top: 0; right: 33px; z-index: inherit; width: 579px; height: 375px; padding: 12px; display: none; } address { font-style: normal; } ul.contactInfo { /*font-size: 12pt;*/ list-style-position: inside; list-style-type: none; padding-left: 0px; } #ajax { } #page { } /* User Interface */ #loading, .loading, .slideshow.js .nav, .slideshow.js .wrapper ul li img { -moz-user-select: none; -webkit-user-select: none; } /* Load indictor(s) */ #loading, .loading { display: none; overflow: hidden; position: absolute; height: 0; background: url('./img/ui/loader.zoom_spin.m.8.png') no-repeat; width: 35px; padding-top: 35px; opacity: .65; -ms-filter: 'alpha(opacity=65)'; filter: alpha(opacity=65); z-index: 100; } #loading { top: 205px; left: 0; } .loading { margin: 0 0 20px 0; } /* Slideshow */ /* Added class ".js" to ".slideshow" via JS (PE) */ .slideshow { display: block; padding: 15px 0 0 0; /*width: 636px;*/ /*position: absolute;*/ /*height: 380px;*/ /*overflow: hidden;*/ /*background: rgba(0,255,255,.2);*/ } .slideshow.js { display: block; /*width: 636px;*/ position: relative; /*overflow: hidden;*/ /*opacity: 0;*/ /*background: rgba(0,255,255,.2);*/ } .slideshow.js .nav { /*background: pink;*/ position: absolute; top: -45px; right: 10px; } .slideshow.js .nav .next, .slideshow.js .nav .prev { cursor: pointer; } .slideshow .wrapper ul { list-style-type: none; padding: 0; } .slideshow .wrapper ul li { padding-bottom: 40px; } .slideshow.js .wrapper ul li { float: left; padding-bottom: 0; } .slideshow.js .wrapper ul li img { float: left; clear: both; /*background: pink;*/ } .slideshow.js .wrapper ul li div { float: left; clear: both; /*display: none;*/ position: relative; bottom: -20px/*20px*/; padding: 2px 4px; background: rgba(255,255,255,.85); -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)'; } /*.slideshow.js .wrapper,*/ /*.slideshow.js .wrapper ul { opacity: 0.45; -ms-filter: 'alpha(opacity=45)'; }*/ .slideshow.js .wrapper { position: relative; display: block; } /* Keep position: relative; display: block; */ .slideshow.js .next, .slideshow.js .prev { font-size: 20px; } .slideshow.js .wrapper img { float: left; display: inline; position: relative; top: 0; /*background: rgba(150,150,0,.5);*/ } /* Comments */ textarea#comment { width: 100%; } #respond { background: rgba(255,224,102,.5); } /* Sidebar */ #sidebar { margin-top: 82px; /*background: red;*/ z-index: 100; } /* ul#sort, .tweet { padding: 80px 0 0 0; } .navigation { padding-top: 32px; } .page-template-home-php .tweet, .page-template-journal-php .tweet*/ .hello h2, .hello h4 { display: inline; background: rgba(255,255,255,.85); } .hello h2 { cursor: help; } .hello h4 { } .navigation { padding: 0; } /* Sortable */ ul#sort { padding: 0; } ul#sort.noscript { display: none; visibility: hidden; } ul#sort li { cursor: pointer; list-style: none; margin: 0 0 2px 0; display: inline; float: left; clear: both; } ul#sort li small { padding: 1px 4px; } ul#sort li small:hover { text-decoration: underline; } ul#sort li.selected small { background: rgb(0,0,0); color: rgb(255,255,255); } /* Tweet colours rgba(51,204,255,1) rgba(102,204,238,1) rgba(173,225,249,1) */ .twitter { position: relative; /*background: yellow;*/ } #page.home .twitter { padding-top: 60px; /*background: yellow;*/ } .tweet { } .tweet h4 { display: block; float: left; /*background: pink;*/ } .tweet h4 a, .tweet h4 a:link, .tweet h4 a:visited { color: rgb(20,120,150); } .tweet div { display: inline-block; float: left; } .tweet div span { background: rgb(230,246,253); display: inline; } .tweet div span, .tweet div span a, .tweet div span a:link, .tweet div span a:visited { color: rgb(15,105,135); } .tweet small a { color: rgb(85,153,187); font-style: italic; float: left; display: inline; } .page-template-home-php .tweet { } .page-template-journal-php .tweet { } .page-template-journal-php .tweet h4 { } .page-template-journal-php .tweet span { background: rgb(255,255,255); } .page-template-journal-php .tweet small a { color: rgb(20,120,150); } /* Intro */ .fouc #container, /*.fouc #container #ajax,*/ .home.fouc #grid div, .home.fouc #intro { display: none; } .fouc #intro { position: fixed; width: 960px; height: 78px; left: 50%; margin-left: -480px; z-index: 100; } .fouc #intro div { width: 598px; height: 78px; position: relative; top: 50%; margin-top: -38px; left: 182px; } .fouc #intro h1.intro { height: 0; text-decoration: none; display: block; font-size: 0; overflow: hidden; position: relative; float: left; } .fouc .intro.logo { background: url('./img/logos.combined.solid.png') no-repeat; width: 150px; padding-top: 70px; } .fouc .intro.logoText { background: url('./img/logos.combined.solid.png') -150px 0 no-repeat; padding-top: 78px; width: 418px; left: 30px; } .fouc #intro .loading { display: block; width: 35px; bottom: 0; left: 50%; margin: -17px 0 0 0; clear: both; height: 0; background: url('./img/ui/loader.zoom_spin.m.8.png') no-repeat; } /* Section Themes ____________________________________________________________________________________________________ */ /* Home */ body.home { /*background: url('./img/trans.pattern.bg.png');*/ /*color: ;*/ } body.home #grid div { /*background: rgb(253,253,253);*/ } body.home .article .meta { background: none; color: rgb(80,80,80); } body.home .article .subtitle { background: rgb(0,0,0); color: rgb(255,255,255); } body.home .article .postmetadata { color: rgb(80,80,80); } body.home .postmetadata a { color: rgb(80,80,80); text-decoration: none; } body.home .postmetadata a:hover { text-decoration: underline; } body.home a { color: rgb(80,80,80); } body.home h1, body.home h2, body.home h3, body.home h4, body.home h5, body.home h6 { color: rgb(0,0,0); } body.home #nav ul li a { color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); } body.home a:focus { /*outline: 1px solid rgb(70,70,70);*/ } body.home small.meta { background: rgb(0,0,0); color: rgb(255,255,255); } body.home .section.g12 { /*background: rgba(255,0,0,.2);*/ } .section.bottom.g12.col.row .g4.col { /*margin-top: 26px;*/ } /* Contact */ /* Colours: - 224,14,124, */ body.page-template-contact-php { background: rgb(15,13,15); color: rgb(255,255,255); } body.page-template-contact-php #grid div { background: rgb(16,14,16); } body.page-template-contact-php #nav ul li a.contact { border-bottom: 4px solid rgb(240,50,120); } body.page-template-contact-php #logo a { background: url('./img/logos.combined.solid.w.png') no-repeat; } body.page-template-contact-php #logoText { background: url('./img/logos.combined.solid.w.png') -150px 0; } body.page-template-contact-php a { color: rgb(240,50,120); } body.page-template-contact-php h1, body.page-template-contact-php h2, body.page-template-contact-php h3, body.page-template-contact-php h4, body.page-template-contact-php h5, body.page-template-contact-php h6 { color: rgb(255,255,255); } body.page-template-contact-php #nav ul li a { color: rgb(255,255,255); border-bottom-color: rgb(255,255,255)/*rgb(240,50,120)*/; } body.page-template-contact-php a:focus { /*outline: 1px solid rgb(70,70,70);*/ } body.page-template-contact-php small.meta { background: rgb(240,50,120); color: rgb(15,10,15); } body.page-template-contact-php small.credit { /*color: rgb(240,50,120);*/ background: rgba(15,10,15,.98); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#F4000000,endColorstr=#F4000000); } body.page-template-contact-php small.credit a { color: rgb(240,50,120); } body.page-template-contact-php #contactButton, body.page-template-contact-php #contactForm { color: rgb(15,13,15); background: rgba(240,50,120,.96)/*rgba(230,20,63,.96)*/; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f4e6143f,endColorstr=#f4e6143f)"; } /* Image preloading */ body:after { display: none; content: url('./img/logos.combined.solid.png') url('./img/logos.combined.solid.w.png') url('./img/ui/loader.zoom_spin.m.8.png'); } ::selection { background: rgb(0,0,0); color: rgb(255,255,255); } ::-moz-selection { background: rgb(0,0,0); color: rgb(255,255,255); } /* Internet Explorer 6 Hacks __________________________________________________________________________________________________ */ /* ...because adding another conditional comment to serve a 200 byte stylesheet targeting one dated browser is just silly. ...and yes, I am very aware that my CSS doesn't validate with all the pending and proprietary and properties (e.g. filter:, etc). */ /* IE 6 and below: - * html e.g. "* html #body { width: 200px; } IE 7: - *:first-child+html { } Things to fix * Twitter feed span alignment (needs a forced line break) IE6/7 * Navigation