About London Fog

A London fog is a hot tea-based drink that consists of Earl Grey tea, steamed milk, and a sweetener, often vanilla syrup. Earl Grey tea imparts its flavors of black tea and bergamot, a citrus.
from Wikipedia, the free encyclopedia

This layout was made by richardnyxon, based off of my favorite warm drink. The moody blues reminiscent of black tea get lightened to a dark beige by cream, sprinkled with accents of white sugar.

Usage

Feel free to use this for any personal site. I'd appreciate if you left the attribution in the footer, but I'll live without it too.

Let me know if you do end up using it so that I can take a look!

Standard Element Formatting

Heading 1

Heading 2

Heading 3

Heading 4

This is some standard text in a paragraph.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Special Element Formatting

Tea with milk in a white teacup. — This is a figure caption.

A normal list item
- A nested list item
This is text with a link
This is strong text
This is emphasized text
~~This is strikethrough text~~
This is ^superscript text
This is _subscript text
This is text with code in it

An ordered list item

A nested list item

Another ordered list item
And one more for good measure

Description Term 1: Description details
Description Term 2: Description details
Description Term 3: Description details

This	is a	table
It's	made	of
rows	and	columns

                    This is a code block.

This is a details element. Click to reveal more information.

You can put extra information in here!

Image Handling

By default, the images within articles (like blog posts) will be floated to the left or right, depending on what number photo and article it is. See below for an example of the float direction changing in the next article.

Image Handling Continued

In the following article (like this one), image float direction will be swapped.

Floating images and figures can also be centered by adding the class noFloat to the desired element, as shown in the third photo.

Customization

In the style.css file, you'll find lots of different variables at the top. These can be used to customize the colors, borders, image width, and sidebar height and mobile positioning.

What if It Isn't an Article?

If you want to create a post like this, but <article> isn't the correct element to use, just use a generic <div> with the class entry, and it'll format it just like an article.