Blog

As the name would states, a blog. Well, not exactly; this is actually a theme that you can use for a blog.

Usage

Download the theme and substitute the text to match your project's. What to change is rather self-explanatory if you read the HTML.

Basic Features

Here's 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.

First-level Header

Second-level Header

Third-level Header

Fourth-level Header

Fifth-level Header

Sixth-level Header

This is some inline code: <code><!-- Put your inline code here --></code>

Here is some block code:

<pre><code>var a = 0;
var b = 3;
document.write(a * b);</code></pre>

Here is some overflowing block code (it's scrollable!):

'This is a very long sentence that would normally not fit on a single line of text and to combat that, this code block is now scrollable. Have fun with it.'

Here's an image that scales down to fit if it's larger than the container: Clicking on the image will open it in a new tab if JavaScript is enabled.

You can also make an image with a caption like so:

Here's the source for that captioned image:

<div class="caption-container">
	<img src="img/lion.jpg" alt="A lion lying down">
	<small class="caption">A lion taken by Kevin Pluck.</small>
</div>

Here is an overflowing word that should have hyphens (but hyphens aren't supported in all browsers): Lopado­temacho­selacho­galeo­kranio­leipsano­drim­hypo­trimmato­silphio­parao­melito­katakechy­meno­kichl­epi­kossypho­phatto­perister­alektryon­opte­kephallio­kigklo­peleio­lagoio­siraio­baphe­tragano­pterygon

You can also make an image with a caption like so:

A lion taken by Kevin Pluck.

Huh, isn't that cool? The blockquotes can fit captioned images. I didn't even know that. Also, nested blockquotes:

Huh, isn't that cool? The blockquotes can fit captioned images. I didn't even know that. Also, nested blockquotes:

Filler

Filler

Filler

Filler

Filler

Filler

Filler

Moving on, here's a horizontal rule (<hr>):

---

It also has those cool share icons for Facebook and Twitter.

If you're on a computer, try resizing the window to see what'll happen. This responsive design is in no way perfected but it's a start.

Multiple Posts

Since this is going to be used for a blog, support for multiple posts is an obvious must. There's a margin above this post but not the first one.