Merge pull request #78 from PreTeXtBook/details

Details

Author: davidfarmer

knowls_default.css

@@ -48,7 +48,8 @@ table [data-knowl] {
     z-index: 0;
 }
 /* is the next only for a proof or other content that is only a knowl? */
-article > [data-knowl]::after, article > [data-knowl]:hover::after, article > [data-knowl].active::after {
+article > [data-knowl]::after, article > [data-knowl]:hover::after, article > [data-knowl].active::after,
+    section > details > summary > .heading, article + details > summary > .heading {
     content: "";
     position: absolute;
     top: 0;

pretext.css

@@ -348,8 +348,55 @@ so that we can set our own later */
 
 
 
+/* 9/23/23 a knowled article is now in a "details", so we add style
+   to mimic the old style below  */
 
+.ptx-content section > details > summary {
+    cursor: pointer;
+}
+
+.ptx-content section > details > summary::marker,
+.ptx-content article + details > summary::marker {
+  content: "";
+}
 
+.ptx-content section > details, .ptx-content .paragraphs > details,
+.ptx-content article + details {
+    margin-top: 1.25em;
+}
+.ptx-content summary + article {
+    margin-top: 1em;
+}
+.ptx-content section details + details,
+.ptx-content section .introduction + details,
+.ptx-content section .para + details,
+.ptx-content section .posterior + details {
+    margin-top: 1.75em;
+}
+
+.ptx-content details > article {
+  padding-top: 0.25em;
+}
+.ptx-content details > article:not(.theorem-like):not(.definition-like) {
+  padding: 0.25em;
+  padding-left: 0.5em;
+}
+.ptx-content details > article {
+  background-color: #f5f5ff;
+}
+.ptx-content details > article details > article,
+.ptx-content details > article details > .answer {
+  margin: 0.5em;
+  padding: 0.25em;
+  padding-left: 0.5em;
+  background-color: #fffff5;
+}
+.ptx-content details > article details > article details > article {
+  background-color: #fff5ff;
+}
+.ptx-content details > article details > article details > article details > article {
+  background-color: #fafffa;
+}
 
 /* this > may be too restrictive.  The purpose is to not put a
    top margin on an article at the top of a knowl */
@@ -523,6 +570,26 @@ https://yoshiwarabooks.org/mfg/MathModels.html */
 .ptx-content .abstract > .title + .para {
     display: inline;
 }
+
+/* born hidden articls are now in "details", so adding markup
+to immitate what is below.  */
+
+.ptx-content summary,
+.ptx-content summary > .heading {
+    position: relative;
+}
+
+.ptx-content summary > .heading {
+    font-size: 1.125em;
+    line-height: 1.125em;
+    margin-top: 0;
+    display: inline;
+}
+
+
+/*       -----      */
+
+
 .ptx-content article > .heading,
 .ptx-content article > a .heading {
     font-size: 1.125em;

pretext_add_on.css

@@ -2235,23 +2235,24 @@ nested tasks. see
 https://pretextbook.org/examples/sample-article/html/interesting-corollary.html#aBc
 */
 
-.ptx-content .exercise-like > .exercise-like {
+/* 9/27/23  added "article" because of details.exercise-like */
+.ptx-content article.exercise-like > .exercise-like {
     margin-left: 40px;
 }
-.ptx-content .exercise-like > .exercise-like.task {
+.ptx-content article.exercise-like > .exercise-like.task {
     margin-left: 20px;
 }
-.ptx-content .exercise-like > .exercise-like > .para {
+.ptx-content article.exercise-like > .exercise-like > .para {
     margin-top: 1.25em;
 /*    margin-bottom: 0.25em; */
 }
-.ptx-content .example-like > .heading + .introduction {
+.ptx-content article.example-like > .heading + .introduction {
     display: inline;
 }
-.ptx-content .example-like > .heading + .introduction > .para:first-child {
+.ptx-content article.example-like > .heading + .introduction > .para:first-child {
     display: inline;
 }
-.ptx-content .example-like > .exercise-like > .para {
+.ptx-content article.example-like > .exercise-like > .para {
     margin-top: 1.25em;
 }
 

setcolors.css

@@ -95,7 +95,7 @@ body.pretext {
   background: var(--highlighttoc);
 }
 
-.ptx-content [data-knowl], .ptx-content [data-knowl]:hover, .ptx-content [data-knowl]:active, .ptx-content [data-knowl].active {
+.ptx-content [data-knowl], .ptx-content [data-knowl]:hover, .ptx-content [data-knowl]:active, .ptx-content [data-knowl].active, .ptx-content summary {
     color: var(--bodytitle);
 }
 .ptx-content [data-knowl]:hover, .ptx-content [data-knowl]:active, .ptx-content [data-knowl].active {