Chocolate Vanilla

Posted: 17.03.08 in Blogging
Tags: , ,

As seen in the Sandbox Designs Competition.

Chocolate VanillaChocolate Vanilla is a theme predominantly coloured in brown shades. Its features include:

  • careful use of fonts to blend serif stylised titles with simple sans serif content, with extra line-height for attractiveness and greater readability;
  • medium contrast between text and background to ensure comfort while reading whilst also providing enough contrast to remain clear and readable;
  • a menu bar near the top indicating which page is currently being browsed.

/*
THEME NAME: Chocolate Vanilla
THEME URI: http://geoffbrady.net/sandbox/chocolate-vanilla/
DESCRIPTION: A theme that concentrates on simple typography
VERSION: 0.4
AUTHOR: Stephen Broughton
AUTHOR URI: http://geoffbrady.net
TEMPLATE: sandbox-10
*/

#container {
 clear: right;
 float: right;
 width: 450px;
}

#footer {
 clear: both;
 padding: 10px 0;
}

#header {
 height: 100px;
 float: left;
 width: 350px;
}

#menu {
 height: 100px;
 width: 400px;
}

#primary, #secondary {
 clear: left;
 float: left;
 width: 250px;
}

#wrapper {
 width:760px;
}

a.more-link, #archives-page ul, #comments a, .entry-content a,
.entry-meta a, .entry-title, .entry-title a, #footer a, input,
#link-page ul, #menu li a,.navigation a, .page-link a,
.sidebar li a, .navigation a:hover, .page-link a:hover textarea {
 color:#530;
}

body {
 color:#000;
}

a.more-link:hover, h1#blog-title, h1#blog-title a,
h1#blog-title a:hover, #menu li.current_page_item > a {
 color:#fff;
}

.tags a {
 color:#530;
}

a.more-link, #container, .navigation a, .page-link a, #wrapper {
 background-color:#edb;
}

a.more-link:hover, #comments a:hover, .entry-meta a:hover,
.entry-content a:hover, #footer, .formcontainer a:hover, #header,
#menu, #menu li a, .sidebar li a:hover, #comments-list li.alt,
#trackbacks-list li.alt, .navigation a:hover, .page-link a:hover {
 background-color:#dca;
}

body, input, textarea {
 background-color:#fbedda;
}

#footer a:hover, #menu li a:hover,
#menu li.current_page_item > a:hover {
 background-color:#a97;
}

#menu li.current_page_item > a {
 background-color:#753;
}

.sidebar {
 background:url(http://geoffbrady.net/wp-content/themes/chocolate-vanilla/bg.png);
}

a.more-link, .navigation a, .page-link a {
 border-bottom:1px solid #edb;
}

a.more-link:hover, .navigation a:hover, .page-link a:hover {
 border-bottom:1px solid #a97;
}

blockquote {
 border-left:4px solid #a97;
}

#footer {
 border-top:4px solid #a97;
}

.entry-title a {
 border-bottom:none !important;
}

#comments h3, .entry-title, .entry-title a, .entry-title a:hover,
#header, #menu, #primary, #respond h3, #trackbacks-list h3 {
 border-bottom:4px solid #a97;
}

#comments a, dt, .entry-meta a, .entry-content a, #footer a,
.formcontainer a, .sidebar li a {
 border-bottom:1px solid #a97;
}

.byuser {
 border:1px solid #a97;
}

input, .bypostauthor, textarea {
 border:1px solid #530;
}

#footer a:hover	{
 border-bottom:	1px solid #530;
}

#archives-page ul, #links-page ul {
 margin: 10px 20px;
 padding: 0;
}

blockquote {
 margin-left: 20px;
 padding-left: 20px;
}

#blog-description {
 margin: 0 20px;
}

body, #menu ul {
 padding: 0;
 margin: 0;
}

#comments {
 margin: 50px 0 20px 10px;
}

#container {
 padding: 0 0 0 20px;
}

dt {
 margin: 10px 0 5px;
}

.entry-content h3, .entry-content h4, .entry-content h5,
.entry-content h6 {
 margin: 25px 0 0;
 padding: 0 0;
}

.entry-content p {
 margin: 10px 0;
 padding: 0 0;
}

.entry-meta {
 margin: 10px 10px;
}

.entry-title {
 margin: 40px 0 0;
}

#footer {
 padding: 10px 0;
}

h1#blog-title {
 margin: 10px 5px;
}

#header {
 margin: 0;
 padding: 5px 0;
}

.hentry {
 clear: left;
 width: 400px;
 margin: 10px;
}

img {
 max-width: 400px;
}

input#s {
 width: 150px;
}

li.widget, li#pages, li#categories, li#search, li#archives,
li.linkcat, li#rss-links, li#meta {
 margin: 40px 0;
}

#menu {
 padding: 5px 0 5px 10px;
 margin-left: 350px;
}

#menu li {
 margin: 2px 0;
 width: 100%;
}

#menu li a {
 display: block;
 padding: 0 20px;
}

.nav-next {
 float: right;
 margin: 10px 20px 10px 0;
}

.nav-previous {
 float: left;
 margin: 10px 0 10px 20px;
}

.page-link a {
 padding: 0 2px;
 margin: 0 2px;
}

.sidebar {
 margin: 0;
 padding: 0 20px;
}

#comments h3, .sidebar h3 {
 padding: 0;
 margin: 0 0 5px;
}

.sidebar li li {
 margin: 1px 0;
}

.sidebar ul {
 margin: 0;
 padding: 0;
}

#trackbacks-list li, #comments-list li {
 margin: 40px 0;
 width: 350px;
 padding: 10px 10px;
}

ul#archives-page, ul#links-page {
 padding: 0;
 margin: 10px 0;
}

ul.children {
 margin: 2px 10px;
 padding: 0;
}

ul.xoxo {
 padding: 10px 10px;
 margin: 10px 10px;
}

#wrapper {
 margin: 0 auto;
}

#archives-page ul, .entry-content ul, #links-page ul {
 list-style-type:square;
}

.skip-link {
 display:none;
}

#comments-list li, #menu ul, #trackbacks-list li, .sidebar ul,
ul#archives-page, ul#links-page {
 list-style-type:none;
}

ins {
 text-decoration:none;
}

del, ins {
 color:#753;
 background: url('http://geoffbrady.net/wp-content/themes/chocolate-vanilla/bg.png');
}

#archives-page h3, #comments h3, .entry-content h3,
.entry-content h4, .entry-content h5,.entry-content h6,
.entry-title, h2.page-title, #links-page h3, #respond h3,
.sidebar h3, #trackbacks-list h3 {
 font-family:'Bookman Old Style', 'Times New Roman', serif;
 font-style:italic;
 font-weight:normal;
}

#archives-page ul, #links-page ul {
 color:#530;
}

body {
 font-family:'Lucida Sans Unicode', Tahoma, Verdana, sans-serif;
 font-size:0.7em;
}

code, pre {
 font-family:'Courier New', consolas, monospace;
}

.entry-date {
 text-align:right;
}

#footer {
 text-align:center;
}

.entry-content {
 line-height:180%;
}

.entry-meta {
 line-height:160%;
}

.tags {
 line-height:220%;
}

h2.page-title {
 font-size:220%;
}

.entry-title, .sidebar h3 {
 font-size:200%;
}

#comments h3, h1#blog-title, h1#blog-title a, .entry-content h3	{
 font-size:140%;
}

.entry-content h4 {
 font-size:135%;
}

.entry-content h5 {
 font-size:130%;
}

.entry-content h6 {
 font-size:125%;
}

code, pre {
 font-size:110%;
}

.entry-meta {
 font-size:90%;
}

a, .entry-title, .entry-title a, .entry-title a:hover,
h1#blog-title, h1#blog-title a, #menu li a {
 text-decoration:none;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s