From 6165e963c592ce28033b30ea6ddb1b76013bc322 Mon Sep 17 00:00:00 2001 From: Paul d'Aoust Date: Tue, 26 Mar 2024 09:03:08 -0700 Subject: [PATCH] styling for guide topic lists --- 11ty-extensions/markdown-it-config.js | 2 ++ src/pages/build/guide/index.md | 4 +++- src/scss/_svg-icons.scss | 12 +++++++++++- src/scss/_widgets.scss | 21 +++++++++++++++++++++ 4 files changed, 37 insertions(+), 2 deletions(-) diff --git a/11ty-extensions/markdown-it-config.js b/11ty-extensions/markdown-it-config.js index a49545bc5..8f16a540d 100644 --- a/11ty-extensions/markdown-it-config.js +++ b/11ty-extensions/markdown-it-config.js @@ -90,6 +90,8 @@ export default function(eleventyConfig) { mdLib.use(markdownItContainer, "coreconcepts-intro"); mdLib.use(markdownItContainer, "coreconcepts-orientation"); mdLib.use(markdownItContainer, "coreconcepts-storysequence"); + mdLib.use(markdownItContainer, "section-intro"); + mdLib.use(markdownItContainer, "topic-list"); mdLib.use(markdownItContainer, "h-author"); mdLib.use(markdownItContainer, "output-block"); diff --git a/src/pages/build/guide/index.md b/src/pages/build/guide/index.md index 555f57349..7bee526a3 100644 --- a/src/pages/build/guide/index.md +++ b/src/pages/build/guide/index.md @@ -17,4 +17,6 @@ Shared data in a Holochain application is stored as a graph database of **entry* * An **action** records the act of manipulating an entry or link and contains metadata about the act, such as authorship and timestamp. * An **agent ID** is the public key of a participant in an application. -* [Entries](entries/) \ No newline at end of file +::: topic-list +* [Entries](entries/) --- creating, reading, updating, and deleting +::: \ No newline at end of file diff --git a/src/scss/_svg-icons.scss b/src/scss/_svg-icons.scss index 35a5e8425..d7453779a 100644 --- a/src/scss/_svg-icons.scss +++ b/src/scss/_svg-icons.scss @@ -54,4 +54,14 @@ $shovelIcon: url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%201200%201200'%20 /* Generated with https://heyallan.github.io/svg-to-data-uri/ */ content: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 1200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m349.64 400.21c7.7734 10.289 9.5742 23.902 4.7461 35.859-4.8242 11.957-15.57 20.504-28.309 22.516-12.734 2.0156-25.594-2.8008-33.871-12.688l-70.359-88.422v589.89c-0.23828 12.957-7.2891 24.824-18.551 31.234-11.262 6.4062-25.066 6.4062-36.324 0-11.262-6.4102-18.312-18.277-18.551-31.234v-589.89l-70.359 88.422c-8.168 10.262-21.191 15.383-34.164 13.438-12.969-1.9492-23.918-10.664-28.719-22.871-4.8008-12.207-2.7227-26.047 5.4492-36.305l135.79-170.53c6.9648-8.7461 17.535-13.844 28.715-13.844 11.184 0 21.754 5.0977 28.719 13.844zm628.04 278.91h-535.98c-12.953 0.23828-24.82 7.2891-31.23 18.551-6.4102 11.258-6.4102 25.062 0 36.324s18.277 18.309 31.23 18.551h535.98c12.957-0.24219 24.824-7.2891 31.234-18.551 6.4062-11.262 6.4062-25.066 0-36.324-6.4102-11.262-18.277-18.312-31.234-18.551zm-86.461 231.62h-449.52c-13.113 0-25.23 6.9961-31.789 18.352-6.5547 11.359-6.5547 25.352 0 36.707 6.5586 11.359 18.676 18.355 31.789 18.355h449.52c13.113 0 25.23-6.9961 31.789-18.355 6.5547-11.355 6.5547-25.348 0-36.707-6.5586-11.355-18.676-18.352-31.789-18.352zm172.95-463.28h-622.47c-12.953 0.24219-24.82 7.2891-31.23 18.551s-6.4102 25.066 0 36.324c6.4102 11.262 18.277 18.312 31.23 18.551h622.47c9.8555 0.18359 19.371-3.6016 26.406-10.508 7.0312-6.9062 10.996-16.348 10.996-26.203 0-9.8594-3.9648-19.301-10.996-26.207-7.0352-6.9023-16.551-10.691-26.406-10.508zm86.488-231.64h-708.96c-13.113 0-25.23 6.9961-31.789 18.352-6.5547 11.359-6.5547 25.352 0 36.707 6.5586 11.359 18.676 18.355 31.789 18.355h708.96c13.113 0 25.234-6.9961 31.789-18.355 6.5586-11.355 6.5586-25.348 0-36.707-6.5547-11.355-18.676-18.352-31.789-18.352z'/%3E%3C/svg%3E"); } -} \ No newline at end of file +} + +$pageIcon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 -150 1200 1200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='m806.4 1042.8c86.398 0 156-69.602 156-156v-474-1.1992-4.8008-1.1992c0-2.3984-1.1992-3.6016-2.3984-6 0-1.1992 0-1.1992-1.1992-2.3984s-1.1992-2.3984-2.3984-3.6016c0-1.1992-1.1992-1.1992-1.1992-2.3984-1.1992-1.1992-1.1992-2.3984-2.3984-3.6016l-1.1992-1.1992-232.8-219.6c-1.1992-1.1992-2.3984-2.3984-4.8008-3.6016 0 0-1.1992 0-1.1992-1.1992-1.1992-1.1992-2.3984-1.1992-4.8008-2.3984-1.1992 0-1.1992 0-2.3984-1.1992-1.1992 0-3.6016-1.1992-4.8008-1.1992h-1.1992c-2.3984 0-4.8008-1.1992-6-1.1992h-300c-86.398 0-156 69.602-156 156v573.6c0 86.398 69.602 156 156 156l412.8-0.003907zm-76.797-766.8 105.6 99.602h-105.6zm-420 610.8v-573.6c0-46.801 37.199-84 84-84h264v183.6c0 20.398 15.602 36 36 36h196.8v438c0 46.801-37.199 84-84 84h-412.8c-46.801 0-84-37.199-84-84z'/%3E%3Cpath d='m423.6 676.8h198c20.398 0 36-15.602 36-36 0-20.398-15.602-36-36-36h-198c-20.398 0-36 15.602-36 36 0 20.398 16.797 36 36 36z'/%3E%3Cpath d='m423.6 846h354c20.398 0 36-15.602 36-36s-15.602-36-36-36h-354c-20.398 0-36 15.602-36 36s16.797 36 36 36z'/%3E%3C/g%3E%3C/svg%3E"); + +@mixin addPageIcon() { + &::before { + display: inline-block; + width: 22px; + content: $pageIcon; + } +} diff --git a/src/scss/_widgets.scss b/src/scss/_widgets.scss index 7bbce91ec..f67fa8114 100644 --- a/src/scss/_widgets.scss +++ b/src/scss/_widgets.scss @@ -375,4 +375,25 @@ a.link-tile { width: 80vw; height: 80vh; } +} + +/* An enlarged styling for lists of links to sub-pages. Used in the build guide. */ +.topic-list { + padding: 1em; + background-color: #f7f7f7; + + ul { + margin: 0; + } + + /* Unless otherwise specified with `class="not-topic-page"`, links in a topic + list are assumed to point to topic pages. */ + a:not(.not-topic-page) { + @include addPageIcon; + } +} + +.section-intro { + padding-left: 1em; + border-left: 2px $cl-gray solid; } \ No newline at end of file