chore: update content

demo/_includes/nav.html

@@ -1,8 +1,8 @@
 <nav class="nav">
-  <ul role="list">
+  <ul class="nav__ul" role="list">
     <li><a href="configuration.html">Getting Started</a></li>
     <li><a href="configuration.html">Configuration</a></li>
-    <li><a href="templating-basics.html">Templating Basics</a></li>
+    <li><a href="templating.html">Templating</a></li>
     <li><a href="data.html">All About Data</a></li>
 
     <li><a href="imprint.html">Imprint</a></li>

demo/configuration.md

@@ -0,0 +1,20 @@
+---
+title: Welcome to Sissi
+layout: base.html
+---
+# {{ title }}
+
+Right now there's not too much to configure. Specify an input dir, specify an output dir:
+
+```js
+export default function(config) {
+  // You can add plugins via config.addPlugin here
+  // config.addPlugin(html);
+  return {
+    dir: {
+      input: 'demo',
+      output: 'dist'
+    }
+  }
+}
+```

demo/css/_globals.css

@@ -29,7 +29,7 @@ a {
 main {
   flex: 1 auto;
   width: min(100% - 3rem, var(--container-max, 60ch));
-  margin-inline: auto;
+  margin-inline-end: auto;
   padding-block: 2rem;
 }
 

demo/css/_reset.css

@@ -32,7 +32,7 @@
 }
 
 
-:where(li:not([class])) {
+:where(ul:not([class]) li) {
   margin-inline-start: 2rem;
 }
 

demo/css/components/_layout.css

@@ -1,4 +1,11 @@
 .layout {
-  display: grid;
-  grid-template-columns: 30ch 1fr;
+  flex: 1 auto;
+}
+
+
+@media screen and (min-width: 768px) {
+  .layout {
+    display: grid;
+    grid-template-columns: 20ch 1fr;
+  }    
 }

demo/css/components/_nav.css

@@ -2,7 +2,8 @@
   display: flex;
   background: var(--nav-bg, #000);
   gap: 1rem;
-  padding: 2rem;
+  padding-block: 2rem;
+  padding-inline: 1rem;
   a {
     font-size: 1.2em;
     font-weight: bold;

demo/templating.md

@@ -0,0 +1,12 @@
+---
+title: Templating
+layout: base.html
+---
+# {{ title }}
+
+Sissi comes with a basic markdown and html template engine.
+
+## HTML Includes
+
+You can include HTML via the `html-include` tag:
+