feat: enhances Skeleton and default CSS

resources/layouts/_default/page.html.twig

@@ -108,6 +108,38 @@
       .term:before {
         content: "#";
       }
+      /* Notes */
+      main .note {
+        position: relative;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        border-radius: 0.25rem;
+        border: 1px solid var(--nc-bg-3);
+        border-left-width: 4px;
+      }
+      main .note > p {
+        margin: 0;
+      }
+      main .note-info {
+        border: 1px solid blue;
+        border-left-width: 4px;
+      }
+      main .note-tip {
+        border: 1px solid green;
+        border-left-width: 4px;
+      }
+      main .note-important {
+        border: 1px solid purple;
+        border-left-width: 4px;
+      }
+      main .note-warning {
+        border: 1px solid orange;
+        border-left-width: 4px;
+      }
+      main .note-caution {
+        border: 1px solid red;
+        border-left-width: 4px;
+      }
     {% endapply %}</style>
     {%- endblock head ~%}
   </head>

resources/skeleton/pages/authoring-content.md

@@ -6,7 +6,15 @@ menu:
 ---
 # Authoring Content in Markdown
 
-Cecil supports [Markdown](http://daringfireball.net/projects/markdown/syntax) and [Markdown Extra](https://michelf.ca/projects/php-markdown/extra/) syntax in `.md` files as well as [front matter](https://cecil.app/documentation/content/#front-matter) to define variables.
+Cecil supports [Markdown](https://cecil.app/documentation/content/#markdown) syntax in `.md` files as well as [front matter](https://cecil.app/documentation/content/#front-matter) to define variables.
+
+**Table of content:**
+
+[toc]
+
+```markdown
+[toc]
+```
 
 ## Inline style
 
@@ -16,10 +24,10 @@ Text can be **bold**, _italic_, or ~~strikethrough~~.
 Text can be **bold**, _italic_, or ~~strikethrough~~.
 ```
 
-You can [link to another page](/about.md).
+You can [link to a page](/about.md) or [to another page](page:index).
 
 ```markdown
-You can [link to another page](/about.md).
+You can [link to a page](/about.md) or [to another page](page:index).
 ```
 
 You can highlight `inline code` with backticks.
@@ -76,8 +84,8 @@ Cecil search images in `assets/` and `static/` folders, but relative path is als
 * Level 1
   * Level 2
   * Level 2
-      * Level 3
-      * Level 3
+    * Level 3
+    * Level 3
 
 ## Blockquote
 
@@ -96,15 +104,31 @@ Cecil search images in `assets/` and `static/` folders, but relative path is als
 A code block is indicated by a block with three backticks ` ``` ` at the start and end. You can indicate the programming language being used after the opening backticks.
 
 ```php
-echo "Hello world";
+// PHP code
+$config = [
+    'title'   => "My website",
+    'baseurl' => 'http://localhost:8000/',
+];
+
+Builder::create($config)->build();
 ```
 
 <pre>
 ```php
-echo "Hello world";
+// PHP code
+$config = [
+    'title'   => "My website",
+    'baseurl' => 'http://localhost:8000/',
+];
+
+Builder::create($config)->build();
 ```
 </pre>
 
+## There is a horizontal rule below this
+
+---
+
 ## Definition list
 
 First Term
@@ -122,3 +146,65 @@ Second Term
 | out of stock | good and plenty   | nice   |
 | ok           | good `oreos`      | hmm    |
 | ok           | good `zoute` drop | yumm   |
+
+## Notes
+
+:::
+empty
+:::
+
+```markdown
+:::
+empty
+:::
+```
+
+:::info
+info
+:::
+
+```markdown
+:::info
+info
+:::
+```
+
+:::tip
+tip
+:::
+
+```markdown
+:::tip
+tip
+:::
+```
+
+:::important
+important
+:::
+
+```markdown
+:::important
+important
+:::
+```
+
+:::warning
+warning
+:::
+
+```markdown
+:::warning
+warning
+:::
+```
+
+:::caution
+caution
+:::
+
+```markdown
+:::caution
+caution
+:::
+```

resources/skeleton/pages/section/Page 1.md

@@ -4,5 +4,5 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 ## Links
 
-- [Link to about page](../about.md)
-- [Link to home page](/)
+- [Link to about page](page:about)
+- [Link to home page](page:index)