Update readme

Author: adamlaki

.github/spruce-docs-preview-mockup-2.png

@@ -15,9 +15,11 @@
 
 ---
 
-![The preview image of the theme.](./.github/spruce-docs-preview-mockup.png)
+![The preview image of the theme.](./.github/spruce-docs-preview-mockup-2.png)
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/b7560c95-7035-491b-8c3f-94c43bea761e/deploy-status)](https://app.netlify.com/sites/sprucecss-eleventy-documentation/deploys)
+
+[![Github release](https://img.shields.io/github/v/release/conedevelopment/sprucecss-eleventy-documentation-template?color=2350f6&logo=github&logoColor=white&style=for-the-badge)](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/releases/latest)
+[![License](https://img.shields.io/badge/license-MIT-2350f6?style=for-the-badge)](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/LICENSE)
 
 A documentation template is always helpful. There are a lot of solutions to make one; we wanted to create our self-hosted version based on our favorite static site generator [Eleventy](https://www.11ty.dev/).
 
@@ -42,6 +44,52 @@ The template is built on [Spruce CSS](https://sprucecss.com/), a small and custo
 - [svgIcon](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/src/shortcodes/svg-icon.js) shortcode: render any SVG icon inline and add optional classes.
 - [markdownRenderer](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/src/shortcodes/markdown-render.js): render any string (markdown) into HTML.
 
+## Setup
+
+1. **Clone the repository.**
+
+2. **Install the dependencies.**
+
+    In the `package.json` file, you will find all of the dependencies (and scripts) to install them using the following command:
+
+    ```shell
+    npm install
+    ```
+
+3. **Run the development mode**
+
+    To run the development mode, use the `npm script`.   This script will also watch for changes.
+
+    ```shell
+    npm start
+    ```
+
+4. **Run the production mode**
+
+    Before you go live, you should use the production script to compress the Sass files.
+
+    ```shell
+    npm run prod
+    ```
+
+You can find some more npm scripts in the [package.json](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/package.json) that can be helpful.
+
+## Content Managment
+
+Adding content to the template is easy as almost everything is in Eleventy.
+
+### The Basic Structure
+
+Our base folder for the documentation pages is the `posts` folder. You must follow the folder structure, which means the `category` here. If you create a folder, you must make a list page with the same name as the folder. You must also create another `posts` folder under the `category` folder where your posts go. You must create the `posts.json` file that will parameter your `layout` and `permalink` values.
+
+### Eleventy Navigation
+
+The theme utilizes the [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/), so you must explicitly set up the hierarchy. This is needed for the automatic sidebar navigation, the navigation order, and breadcrumb generation.
+
+### Other Pages
+
+To create simple pages, make a file directly under the `src` folder and configure it with the available front matter.
+
 ## Structure
 
 ```html
@@ -80,3 +128,5 @@ spruecss-eleventy-documentation-template/
 - **scss**: The Sass files.
 - **shortcodes**: The available shortcodes.
 - **transforms**: The transformations.
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/b7560c95-7035-491b-8c3f-94c43bea761e/deploy-status)](https://app.netlify.com/sites/sprucecss-eleventy-documentation/deploys)

.github/spruce-docs-preview-mockup.png

@@ -1193,8 +1193,10 @@ samp {
   inset-block-start: 3rem;
   position: sticky;
 }
-.l-post .post-heading {
-  grid-column: 1/3;
+@media (min-width: 80em) {
+  .l-post .post-heading {
+    grid-column: 1/3;
+  }
 }
 
 .l-list {
@@ -1203,24 +1205,13 @@ samp {
   gap: 3rem;
   grid-template-columns: var(--gtc);
 }
-@media (min-width: 64em) {
-  .l-list {
-    --gtc: minmax(0, 1fr) minmax(0, 15rem);
-  }
-}
-.l-list__inner {
-  grid-column: 1/3;
-}
 .l-list__inner--changelog > *, .l-list__inner--faq > * {
   margin-block-end: 0;
   margin-block-start: 0;
 }
 .l-list__inner--changelog > * + *, .l-list__inner--faq > * + * {
   margin-block-start: 3rem;
 }
-.l-list .post-heading {
-  grid-column: 1/3;
-}
 
 .header {
   align-items: center;
@@ -2095,10 +2086,16 @@ textarea.pagefind-ui__search-input {
 }
 
 .changelog-item {
+  --gtc: minmax(0, 1fr);
   align-items: flex-start;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
   gap: 1.5rem 3rem;
+  grid-template-columns: var(--gtc);
+}
+@media (min-width: 64em) {
+  .changelog-item {
+    --gtc: minmax(0, 9rem) minmax(0, 1fr);
+  }
 }
 .changelog-item__date {
   background-color: var(--spruce-btn-color-primary-background);
@@ -2107,6 +2104,7 @@ textarea.pagefind-ui__search-input {
   display: inline-flex;
   flex-shrink: 0;
   font-weight: 700;
+  justify-self: start;
   padding: 0.25rem 1rem;
 }
 .changelog-item ul p {

README.md

@@ -7,8 +7,6 @@ eleventyNavigation:
   order: 4
 ---
 
-We use `eleventy --serve` and compile Sass with sass-cli with npm scripts.
-
 ## Clone the repository
 
 Today more people and experts write about accessibility. For the better progression it is a good idea to read them.