Skip to main content

Ivan Teoh

Something personal yet public

For font wise, all the contents are Georgia, serif. The code will be Monaco, monospace. I just bold with all the headers. Simple circle for list style in the post.

80-style.css (Source)

/* *** Typography *** */

/* Begin Structure */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

body {
    text-align: center;
}

#main {
    text-align:left
}
/* End Structure */

/* Begin Header */
div#header a, div#footer a  {
  text-decoration: none;
}
/* End Header */

/* Begin NavMenu */
#navmenu
{
  font-size: 14px;
  font-weight: bold;
}
/* End NavMenu */

/* Begin Entry */
body, input, textarea {
    font: 15px Georgia,serif;
    line-height: 22px;
}

pre, code {
    font: 14px Monaco, monospace;
    line-height: 22px;
}

div.entry-title {
    margin: 1em 0 0.5em;
}

div.entry-content ul li {
    list-style:circle;
}

div.entry-meta {
    font-size: 0.75em;
}
/* End Entry */

/* Begin Comment Form */
div#formcontainer .note {
    font-size: 0.75em;
    line-height: 15px;
}
/* End Comment Form */

/* Begin sidebar */
#sidebar li {
    font-weight: bold;
}

#sidebar ul ul li {
    font-weight: normal;
}
/* End sidebar */

I short-listed some Windows Twitter clients as below:

Seesmic v0.2.1

Shorten URL: bit.ly digg is.gd snurl tr.im twurl

Picture URL: Pikchur Posterous Twitgoo TwitPic yfrog

Video URL: Seesmic Video (soon)

TweetDeck v0.26.1

Shorten URL: bit.ly digg is.gd TinyURL tr.im twurl

Picture URL: TwitPic yfrog

Video URL: 12seconds.tv

Twhirl v0.9.2

Shorten URL: bit.ly digg is.gd snurl twurl

Picture URL: TwitPic

Twibble v0.4.6

Shorten URL: is.gd

Picture URL: Mobypicture TwitPic

Twitcher v1.6.1

Shorten URL: digg is.gd snipr TinyURL u.nu

Picture URL: Pikchur Pixim Posterous TweetPhoto Twitgoo TwitPic TwitrPix yfrog

Currently only Seesmic and TweetDeck support editing Facebook status. It is an additional feature beside Twitter. Some said Facebook status is similar with Twitter.

Although, I find that supporting editing Facebook status feature is interesting, I still pick DestroyTwitter. As this client supports tr.im for shorten URL and TweetPhoto for picture loading in Twitter.

As both bit.ly and tr.im are having more then just shorten URL. They also provide real-time tracking on the clicking links. Beside have iPhone application, Mobypicture also supports the ATOM-publishing protocol for Nokia S60. We also know that TwitPic is the most popular for twitter picture uploading. TweetPhoto have what TwitPic have plus pictures are automatically geo-tagged and an integrated URL shortening service.

Colour style sheet mainly to display the site with colours. Green and black will be the two main colours of the site. Hope you like it.

77-style.css (Source)

/* *** Colour *** */

/* Begin Structure */
body {
    background: #000000;
}

div#wrapper {
    background: #ffffff;
}

div#main {
    border: 3px solid #98c92a;
}

div#container {
    background: #ffffff;
}

div#content {
    background: #ffffff;
}

div#sidebar {
    background: #ffffff;
}

div#header, div#footer {
    background: #000000;
    color: #ffffff;
}
/* End Structure */

/* Begin Entry */
a {
    color: #98c92a;
}
/* End Entry */

/* Begin NavMenu */
div#navmenu {
    background: #98c92a;
}

div#navmenu a {
  color: #ffffff;
}

div#navmenu li.current_page_item a {
    color: #000000;
}
/* End NavMenu */

This evening, weather in Beijing turned good. On the way home after work, no more haze in Beijing. Weather is hot. Sun is shining. Blue sky in Beijing. This weekend will be suitable for walking in Beijing.

I would say this layout style sheet is the most challenging. First of all, I just want this WordPress theme to have a basic layout with fixed width consists of two columns, one for posts and another one for sidebar. On top of the content is header and of course footer at the bottom. Structure region is the major layout design of the division in this site. It follows negative margin technique. Tag canvas is getting ready for html5 standard. Some of the latest browsers: Firefox 3, Opera 9.5, Safari 4.0 and Chrome 2.0, while I writing this, support canvas. An image will be display at canvas using Processing JavaScript library.

75-style.css (Source)

/* *** Layout *** */

/* This will save you having to declare each div's position as 'relative' and
allows you to absolutely position elements inside them
div {
    position:relative;
}
*/

/* Begin Structure */
div#wrapper {
    width: 760px;
    margin: 0 auto;
}

div#main {
    padding: 10px;
    overflow: hidden;
}

div#container {
    float: left;
    width: 100%;
}

div#content {
    float: left;
    width: 450px;
}

div#sidebar {
    float: left;
    width: 210px;
    margin-left: -250px;
    padding: 20px;
}

div#footer {
    clear: left;
    width: 100%;
}
/* End Structure */

/* Begin Header */
canvas#navCanvas {
    width: 760px;
    height: 120px;
    margin-bottom: -120px;
}

div#header h1 {
    padding-top: 38px;
}

div#header p{
    padding-bottom: 38px;
}
/* End Header */

/* Begin NavMenu */
div#navmenu
{
  padding:6px;
  overflow:auto;
  height:1%;
  clear:both;
}

div#navmenu li
{
  display: inline;
}

div#navmenu a
{
  text-decoration:none;
  margin:0 10px;
  height:23px;
  line-height:23px;
  float:left;
  display:block;
}
/* End NavMenu */

/* Begin Entry */
div.entry-title {
    margin: 1em 0 0.5em;
}

div.entry-content ul li {
    margin: 0 0 0 1em;
}
/* End Entry */

/* Begin Comment Form */
div#comments-list, form#commentform {
    padding: 1em 0 0;
}

input#author, input#email, input#url, textarea#comment {
    padding: 0.2em;
}

input#author, input#email, input#url {
    width: 50%;
}

div#comments-list ul li {
    margin: 0 0 1em;
}

textarea#comment {
    height: 15em;
    margin: 1em 0 0.5em;
    overflow: auto;
    width: 75%;
}
/* End Comment Form */

/* Begin Sidebar */
div#sidebar li {
    margin: 0 0 2em;
}

div#sidebar ul ul {
    margin: 0 0 0 1em;
}

div#sidebar ul ul li {
    list-style: none;
    margin: 0;
}

div#sidebar ul ul ul {
    margin: 0 0 0 0.5em;
}

div#sidebar ul ul ul li {
    list-style: none;
}
/* End Sidebar */

/* Begin Search Form */
form#searchform input#s {
    width: 8em;
}

form#searchform {
    margin:0.2em 0 0;
}
/* End Search Form */

/* From Starkers Theme http://elliotjaystocks.com/starkers/ */
/* Use this br class to clear your floated columns */
br.dirtyLittleTrick {
    clear: both;
    display: block;
    height: 1px;
    margin: -1px 0 0 0;
}

This style sheet mainly reset all the default setting in web browser. It will make the site looked the same in any modern web browser. It is based upon Yahoo UI library.

73-style.css (Source)

/* *** Reset *** */

/* Based upon YUI Reset CSS in the Yahoo! User Interface Library:
http://developer.yahoo.com/yui/reset/ */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}

ol, ul, li {
    list-style: none;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
}

/* The below restores some sensible defaults */
strong {
    font-weight: bold ;
}

em {
    font-style: italic;
}

References

Now come to the look of the web site. Style sheets play an important role in this. I decided to slip the whole stylesheet into different categories: reset, layout, colour, typography and ie. Main style sheet, style.css, will import those categories. Main style sheet also include the style of WordPress default generated classes as shown below.

71-style.css (Source)

@import "style/css/reset.css";
@import "style/css/layout.css";
@import "style/css/colour.css";
@import "style/css/typography.css";
@import "style/css/ie.css";

/* WordPress Generated Classes. More info: http://codex.wordpress.org/CSS */
.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    /* optional rounded corners for browsers that support it */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
}

/* *** WordPress Class Tags *** */
/*
.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}
*/

References