Org-Mode CSS May 13th, 2010
Patrick Stein

The color scheme here is a bit me-centric, but I am mostly posting it because I find the typography pleasing…. In my .emacs file, I have set up the org-export-headline-levels to two and the org-export-html-style to the following:

;;; .emacs.lisp
(setq org-export-html-style
      "<style type="text/css">#<:use "style.css"></style>")

# style.css
<<basic body style>>
<<header style>>
<<content style>>

The basic body has no margin and a pleasing (to me) khaki color.

# basic body style
body {
   background-color: #999966;
   margin: 0em;
}

The headers are carefully sized to try to take up a multiple of 1.4em with a consistent bottom margin.

# header style
h1 {
   font-size: 2.0em;
   margin-top: 1.9em;
   margin-bottom: 0.3em;
}
h2 {
   font-size: 1.5em;
   margin-top: 2.4em;
   margin-bottom: 0.3em;
}
h3 {
   font-size: 1.25em;
   margin-top: 1.25em;
   margin-bottom: 0.3em;
}

The main body is a pale yellow color with vertical borders. It’s got a decent font (the one that I have by default for my browser) with a slight tweak to the letter spacing and a big tweak to the leading. It keeps from getting too wide and stays centered. Oh, and I don’t skip space before lists.

# content style
div#content {
   background-color: #ffffcc;
   border-left: double #333300 3mm;
   border-right: double #333300 3mm;
   font-family: Times, serif;
   letter-spacing: 0.075em;
   line-height: 1.4;
   margin: 0em auto;
   padding: 2em;
   width: 45em;
}
ul {
   margin: 0;
}

Here is some sample output.

Related posts:

  1. Can We Refluidize CSS? I mentioned earlier that CSS makes each object responsible for how it flows in the layout rather than making the container responsible. So, what can be done? Take a look at this very site. All of the widgets on the left are floating over there. If you narrow your browser...
  2. The Fluidity-Thwarting Flaw in CSS I am the one who decides how big to make my browser window. Web sites have a hard time coming to grips with that. There is a mythical minimum browser size. When I am browsing, I don’t want to have to care. When I am designing a site, I don’t...

RSS Feeds

l