diff --git a/eleventy.config.js b/eleventy.config.js
index 5bce407..98afeae 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -7,6 +7,7 @@ const mdDefList = require("markdown-it-deflist");
const mdToc = require("markdown-it-table-of-contents");
const mdAnchor = require("markdown-it-anchor");
const nunjucksDate = require("nunjucks-date");
+const markdownIt = require("markdown-it");
function addEleventyPlugins(eleventyConfig) {
eleventyConfig.addPlugin(eleventyNavigationPlugin);
@@ -30,6 +31,9 @@ function configureMarkdown(eleventyConfig) {
}
function addFilters(eleventyConfig) {
+ let md = new markdownIt();
+
+ eleventyConfig.addFilter("renderMarkdown", (mdString) => md.render(mdString));
eleventyConfig.addFilter("log", (value) => console.log(value));
eleventyConfig.addFilter("date", nunjucksDate);
eleventyConfig.addFilter("IsNotPage", (collection, url) =>
@@ -58,6 +62,7 @@ module.exports = function (eleventyConfig) {
files: "./_site/css/**/*.css",
});
+ eleventyConfig.addPassthroughCopy("src/img");
eleventyConfig.addPassthroughCopy({
"node_modules/prism-themes/themes/prism-material-light.min.css":
"css/prism-material-light.min.css",
diff --git a/src/_includes/posts-list.njk b/src/_includes/posts-list.njk
index 40df637..891dd50 100644
--- a/src/_includes/posts-list.njk
+++ b/src/_includes/posts-list.njk
@@ -29,7 +29,7 @@
{% endfor %}
- {{ post.data.description }}
+ {{ post.data.description | renderMarkdown | safe }}
{% endfor %}
{% else %}
diff --git a/src/img/BasicDescriptionList.png b/src/img/BasicDescriptionList.png
new file mode 100644
index 0000000..c26cfd0
Binary files /dev/null and b/src/img/BasicDescriptionList.png differ
diff --git a/src/img/ColumnsDescriptionList.png b/src/img/ColumnsDescriptionList.png
new file mode 100644
index 0000000..13d469a
Binary files /dev/null and b/src/img/ColumnsDescriptionList.png differ
diff --git a/src/posts/DescriptionListStyling.md b/src/posts/DescriptionListStyling.md
new file mode 100644
index 0000000..1947eff
--- /dev/null
+++ b/src/posts/DescriptionListStyling.md
@@ -0,0 +1,191 @@
+---
+title: Description List Styling
+description: Some styling for `` elements beyond the basics I usually see
+tags: [ Programming, CSS ]
+---
+
+The `` element is useful for displaying metadata or a read only version of a form. The basic way of styling these is to make `- ` elements bold and make `
- ` and `
- ` block elements. These styles allow some more complex ways of displaying a description list.
+
+## Default Basic Styles
+
+These are some basic styles to use by default:
+
+
+
+```html
+
+ - Term 1
+ - Term 1 description
+
+ - Term 2
+ - Term 2 description 1
+ - Term 2 description 2
+
+```
+
+```scss
+dl {
+ margin-block-start: 0;
+ margin-block-end: 0;
+ margin-bottom: 1em;
+}
+
+dt {
+ font-weight: bold;
+ line-height: 1.75;
+}
+
+dd {
+ margin-inline-start: 0;
+ margin-left: 1em;
+ line-height: 1.75;
+}
+
+// Add spacing between dd elements
+dd + dd {
+ margin-top: 0.5em;
+}
+```
+
+## Side-By-Side Columns
+
+This styling will put the ` - ` elements in one column and the `
- ` elements into another. This can cause issues on small screens, so it supports breakpoints where it will fall back to the default style.
+
+
+
+```html
+
+ - Term 1
+ - Term 1 description
+
+ - Term 2
+ - Term 2 description 1
+ - Term 2 description 2
+
+ - Term 3
+ - Term 3 description 1
+ - Term 3 description 2
+
+```
+
+```scss
+$columns-base-name: dl-columns;
+$wsu-breakpoint-map: (
+ "phone-small": 450px,
+ "phone": 576px,
+ "tablet": 768px,
+ "tablet-medium": 860px,
+ "tablet-large": 992px,
+ "desktop": 1260px,
+ "ultrawide": 1600px,
+ "xultrawide": 1900px,
+ "xxultrawide": 2400px
+);
+
+@each $name, $value in $wsu-breakpoint-map {
+ @media (min-width: #{$value}) {
+ dl.#{$columns-base-name}-#{$name} {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 0 1rem;
+
+ & > dt {
+ grid-column: 1;
+ }
+
+ & > dd {
+ grid-column: 2;
+ margin-left: 0;
+ margin-top: 0;
+ }
+
+ // Allow going back to the default stacked style
+ div.escape-columns {
+ grid-column: span 2;
+
+ dt {
+ margin-top: 0.5em;
+ }
+
+ dd {
+ margin-left: 1em;
+ }
+
+ dt,
+ dd {
+ display: block;
+ }
+ }
+ }
+ }
+}
+```
+
+You can also mix this with the default stacked style:
+
+
+
+```html
+
+ - Term 1
+ - Term 1 description
+
+ - Term 2
+ - Term 2 description 1
+ - Term 2 description 2
+
+
+
- Term 3
+
-
+
Here's a block of code
+
+
+```
+
+## Index List
+
+This styling is for a list of links with a description. This is particularly useful for index pages that have an actual list of pages.
+
+
+
+```html
+
+ - Page 1
+ - A description of page 1
+
+ - Page 2
+ - A description of page 2
+
+ - Page 3
+ - A description of page 3
+
+```
+
+```scss
+dl.index-list {
+ dt {
+ display: inline;
+
+ &:after {
+ content: " - ";
+ }
+ }
+
+ dd {
+ display: inline;
+ margin-left: 0;
+
+ &:not(:last-child):after {
+ // Display each dt/dd pair on separate lines
+ content: "";
+ display: block;
+ margin-bottom: 1em;
+ }
+ }
+}
+```