claudielarouche.com Style Guide
📚 NOTE: THIS IS A DEV PAGE
Photo by Jennie Razumnaya on Unsplash
This page demonstrates Minima theme capabilities and custom enhancements with simple CSS.
Headings
H1 Heading
H2 Heading
H3 Heading
H4 Heading
# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
Paragraph and Text Formatting
Normal paragraph text with bold, italic, strikethrough, and inline code.
Normal paragraph text with **bold**, *italic*, ~~strikethrough~~, and `inline code`.
Example blockquote for callout.
> Example blockquote for callout.
Escaping characters
*Not italic*
\*Not italic\*
Lists
Unordered
- Item One
- Item Two
- Nested Item
- Item Three
- Item One
- Item Two
- Nested Item
- Item Three
Ordered
- Step One
- Step Two
- Step Three
1. Step One
2. Step Two
3. Step Three
Task list
- Task done
- Task not done
- [x] Task done
- [ ] Task not done
Links and Buttons
[Standard Link](https://claudielarouche.com)
Standard Link Opening in new window
[Standard Link Opening in new window](https://claudielarouche.com){:target="_blank" rel="noopener noreferrer"}
For internal links, always use relative_url like this:
<a href="/foo/bar/">My Page</a>
<link rel="stylesheet" href="/assets/css/main.css">
<img src="/assets/img/logo.png" alt="logo">
Images
Tables
| Product | Price | Available |
|---|---|---|
| Widget A | $10 | Yes |
| Widget B | $20 | No |
| Widget C | $15 | Yes |
| Product | Price | Available |
|---------|-------|-----------|
| Widget A | $10 | Yes |
| Widget B | $20 | No |
| Widget C | $15 | Yes |
Other Code Blocks
function hello(name) {
console.log("Hello, " + name);
}
```javascript
function hello(name) {
console.log(“Hello, “ + name);
}
```
Horizontal Rule (Separator)
---
Footnote
Here is a sentence.1
Here is a sentence.[^1]
[^1]: This is the footnote.
Front matter (Jekyll)
---
layout: page
title: My Page
permalink: /mypage/
---
Add Markdown in the middle of HTML
Bold text
<div>
{{ "**Bold text**" | markdownify }}
</div>
Open-Collapse section
Click to expand
Here is the hidden content that will show when expanded.<details>
<summary>Click to expand</summary>
Here is the hidden content that will show when expanded.
</details>
Alerts
Note:
Highlights information that users should take into account.
Tip:
Optional information to help a user be more successful.
Important:
Crucial information necessary for users to succeed.
Warning:
Critical content demanding immediate user attention.
Caution:
Negative potential consequences of an action.
## Alerts
{% capture note_content %}
Highlights information that users should take into account.
{% endcapture %}
{% include admonition.html type="Note" icon="ℹ️" content=note_content %}
{% capture tip_content %}
Optional information to help a user be more successful.
{% endcapture %}
{% include admonition.html type="Tip" icon="💡" content=tip_content %}
{% capture important_content %}
Crucial information necessary for users to succeed.
{% endcapture %}
{% include admonition.html type="Important" icon="❗" content=important_content %}
{% capture warning_content %}
Critical content demanding immediate user attention.
{% endcapture %}
{% include admonition.html type="Warning" icon="⚠️" content=warning_content %}
{% capture caution_content %}
Negative potential consequences of an action.
{% endcapture %}
{% include admonition.html type="Caution" icon="🚫" content=caution_content %}
Embed a Youtube video
Big
<div class="video">
<iframe
src="https://www.youtube.com/embed/p78AW7ZdNGI"
title="YouTube video"
allowfullscreen>
</iframe>
</div>
Small
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/KrUL8vR17u4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
-
This is the footnote. ↩