Mini editor (Part 2)

This is the second in a seven part series on how to make a WYSIWYG structure editor using javascript, jquery, erlang and couchDB.

• Part1 - toggling content editable
• Part2 - Adding some style
• Part3 - Adding editing buttons
• Part4 - A seamless structure editor
• Part5 - All the buttons
• Part6 - Storing the results forever
• Part7 - Integration with couchdb

Adding some style

Now I'll style the pre and h2 tags. Nothing fancy.

Here's how I style pre

pre {
  margin: 1em;
  font-weight: bold;
  background-color: #FED;
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-color: #48C;
  padding: 0.5em;
  font-size: 120%;
  overflow: auto;
}

And h2 is similar:

h2 {
  background: blue;
  color: white;
  font-size: 100%;
  font-weight: bold;
  margin: 0.7em 0 0.1em 0;
  padding: .25em 1em .25em 1em;
  -webkit-border-radius: .7em;
  -moz-border-radius: 1em;
}