styling for guide topic lists

holochain · Mar 26, 2024 · 6165e96 · 6165e96
1 parent 51bcbe9
commit 6165e96
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git 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
@@ -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/)
+::: topic-list
+* [Entries](entries/) --- creating, reading, updating, and deleting
+:::
diff --git 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");
   }
-}
+}
+
+$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
@@ -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;
 }