Demo pour le style CSS

Une illustration des styles formatés par simple.css et comment les utiliser.

1 septembre 2022 3 minutes de lecture

news markdown typography featured

Much of what makes Markdown refreshing is the ability to write plain text and get great formatted output as a result. To keep the slate clean for the next author, your Markdown should be simple and consistent with the whole corpus wherever possible.

We seek to balance three goals:

Source text is readable and portable.
The Markdown corpus is maintainable over time and across teams.
The syntax is simple and easy to remember.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. ~~Deleted text~~ tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Links & Buttons

Links are formatted very simply on Simple.css (shock horror). They use the accent CSS variable and are underlined. There is a :hover effect that removes the underline.

Buttons use the same accent CSS variable for their colour. When hovering, there is an opacity effect.

I’m a hyperlink

<a href="https://example.com">I'm a hyperlink</a>

<button>I'm a button</button>

<a href="https://example.com"><button>I'm a button with a link</button></a>

<button class="set-text set-bg">button with specified class</button>

List Types

Definition List (dl)

Definition List Title: This is a definition list division.

Ordered List (ol)

List Item 1
List Item 2
List Item 3

Unordered List (ul)

List Item 1
List Item 2
List Item 3

Table

Header 1	Header 2	Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

Other typography elements and Misc Stuff - abbr, acronym, sub, sup, etc.

Lorem ^superscript dolor _subscript amet, consectetuer adipiscing ctrl + c. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

There are a number of other typography elements that you can use with :

All the standard stuff, like bold, italic and underlined text.
Highlighting text using the mark element.
Adding inline code using the code element.
Displaying keyboard commands like ALT+F4 using the kbd element.

<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<code>Inline code</code>
<kbd>Alt+F4</kbd>

Emoji support

First of all, if you really want emojis, set the enableEmoji setting to true in your config.toml file:

enableEmoji = true

This will enable Hugo to find Emoji Shorthands in your content files and render them as Unicode Emoji Characters.

For example:

:smiley: will become 😃

No, it’ll probably not be that colorful! Unless your device’s operating system natively supports colorful emojis, you will see a black & white one instead. :fire:

:pencil2: For getting that colorful look, you will have to add this to your content’s frontmatter:

---
emoji: true
---

And where can you find these Emoji Shorthands :question:

:tada: Go take a look at: Emoji Cheat Sheet

La clarté ne naît pas de ce qu’on imagine le clair, mais de ce qu’on prend conscience de l’obscur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, dolore. Ea quasi accusamus deleniti officiis illum modi incidunt laudantium, sint praesentium necessitatibus aliquid odio nihil aspernatur voluptatum eum, ratione veniam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, dolore. Ea quasi accusamus deleniti officiis illum modi incidunt laudantium, sint praesentium necessitatibus aliquid odio nihil aspernatur

Nul ne peut avoir de lien avec son prochain s’il ne l’a d’abord avec lui-même.

voluptatum eum, ratione veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, dolore. Ea quasi accusamus deleniti officiis illum modi incidunt laudantium, sint praesentium necessitatibus aliquid odio nihil aspernatur voluptatum eum, ratione veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, dolore. Ea quasi accusamus deleniti officiis illum modi incidunt laudantium, sint praesentium neLorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, dolore. Ea quasi accusamus deleniti officiis illum modi incidunt laudantium, sint praesentium ne

Ce n’est pas en regardant la lumière qu’on devient lumineux, mais en plongeant dans son obscurité. Mais ce travail est souvent désagréable, donc impopulaire.