# Styleguide

> Markdown version of https://brajeshwar.com/styleguide/

## Articles

- If possible, avoid front matter. If used, it should be optional.
- There is an optional cover-picture. Can we make this an optional element but as part of the content and styled as a `cover-picture`?

## Images

- Books: `360px x 480px` (styled as `240px x 320px`)
- Film:  `300px x 400px` (styled as `225px x 300px`)
- Gallery has a container, `class="gallery" markdown="1"`, then is a markdown list with images, optionally with a link.

## Videos

They should be rather ornamental. The content should still have a meaning and work without the video.

<video width="100%" height="auto" poster="" controls autoplay muted loop preload="auto|metadata|none">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
	[Video Format - Non-Supported Browser]
</video>

## Styles

- Avoid
	+ gradients
	+ box-shadows

Custom, strange, and `why I did that` ones. I need to stop doing custom styles.

- `aside, {:.aside}` for custom styled aside.
- `{:.aside .right}` flushes right
- `{:.mark}` shares the same style as HTML <mark>MARK</mark> and is a highlighted text/phrase block.
- images can be `.small`, `.medium`, `.large`, or `.full`. Besides the default `left` alignment, they can be flushed `.right`.

---

## Typography

# Headings H1
## Headings H2
### Headings H3
#### Headings H4
##### Headings H5
###### Headings H6

Plotting ear goes let far she not star bit rat bad men. Low pox lemon rap gob whale pal bee apple vet boy air lot hog? Hum box said nag fish cop laugh dot yet zap hoe bad zoo bug image run fix hit hum cow. What have I done?

> This is a blockquote text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.