Style Guide
Mythos Theme was designed to make your writing look great. Every font, size, and spacing choice helps your words shine while keeping your blog accessible to all readers. The Micro.blog platform allows both Markdown and HTML in posts. Here are samples that show the features and styles provided.
Headings (Markdown)
H1 Heading
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.
H2 Heading
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.
H3 Heading
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.
H4 Heading
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.
H5 Heading
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.
H6 Heading
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.
Paragraphs (Markdown and optional HTML)
This is a sample of a lead paragraph that can optionally be used within your content. A popular use case might be the first paragraph of your longform content. Create a paragraph with a lead
class to use this style.
This a traditional paragraph. Within the text, you can easily make text bold, italics, or bold and italic. You can also insert inline code
and use ABBR (abbreviations). When necessary, you can strikethrough text, use subscript (H20) or superscript 73x. Don’t forget
By adding class="note"
, you can create a paragraph with this unique styling.
By adding class="alert"
, you can create a paragraph with this unique styling.
By adding class="aside"
, you can create a paragraph with this unique styling.
Links (Markdown)
You can add inline links throughout your site.
Lists (Markdown)
Lists can be unordered:
- Item 1
- Nested Item
- Item 2
- item 3
Or ordered:
- Item 1
- Nested Item
- Item 2
- Item 3
- Item 4
Or checklists:
- Already did this
- Still need to do this
Blockquotes (Markdown and optional HTML)
You can use markdown to create a traditional blockquote:
Blockquotes can be powerful ways to quote your source or callout certain material with your text.
They can be a single line or extend multiple lines.
Or you can create a blockquote with class="verse"
for this special syling:
For I know the plans I have for you, declares the Lord, plans for welfare and not for evil, to give you a future and a hope.
Jeremiah 29:11 ESV
Code (Markdown)
You can insert inline code
.
You can also use plain code blocks:
This is a plain text code block.
Or styled code blocks:
.container {
max-width: 100%;
border: 1px solid #000;
padding: 10px;
}
<html>
<head>
</head>
<body>
</body>
</html>
Tables (Markdown)
Column 1 | Column 2 | Column 3 |
---|---|---|
Row 1 A | Row 1 B | Row 1 C |
Row 2 A | Row 2 B | Row 2 C |
Row 3 A | Row 3 B | Row 3 C |
Row 4 A | Row 4 B | Row 4 C |
Horizontal Rule (Markdown)
You can insert a horizontal rule (line) anywhere in your content:
Details + Summary
Create an FAQ style Detail (closed by default)
This content is hidden by default and shows when you click the title/summary above.
Create an FAQ style Detail (open by default)
This content is shown by default and hides when you click the title/summary above.
<details>
<summary>FAQ Item 1<summary>
<p>This content is hidden by default</p>
</summary>
</details>
<details open>
<summary>FAQ Item 2<summary>
<p>This content is shown by default</p>
</summary>
</details>
Images (Markdown and optional HTML)
Default image:

Full-width image (class="full-width"
):

Framed image (class="frame"
):

Small image (class="small"
):

Vintage image (class="vintage"
)

Image with caption:

Footnotes (Markdown)
This is a sample footnote1.
-
This is the footnote text. ↩︎