adopt jb2 common style

Author: parmentelat

notebooks/_static/style.css

@@ -7,12 +7,14 @@
  * as well as other miscellanous tweaks
  */
 
+/* ---------- the left hand side toc */
+
 .primary-scrollbar {
-    /* background: var(--jp-border-color3); */
+
     div.w-full {
 
         &[data-state='open'] {
-            border : 1px solid var(--jp-border-color0);
+            border: 1px solid var(--jp-border-color0);
             border-radius: 8px;
             padding-top: 0px;
         }
@@ -21,24 +23,22 @@
             &::before {
                 content: '≡ ';
             }
-            /* font-style: italic; */
         }
     }
 
     a.p-2 {
-        /* border: 1px solid #000; */
         padding: 0.08em 1em;
 
         &.active {
             &::before {
                 content: '⌘ ';
             }
-
         }
     }
 }
 
-/* not too much space around lists */
+/* ---------- space around lists */
+
 /* a paragraph that is just above a list should not have a bottom margin
  * thanks SO
  * https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
@@ -47,94 +47,232 @@ article main {
     p:has(+ :is(ol, ul)) {
         margin-bottom: 0px !important;
     }
-    p + :is(ol, ul) {
+
+    p+ :is(ol, ul) {
         margin-top: 0px !important;
     }
 
-    li > ul {
+    li>ul {
         margin-top: 0px !important;
     }
 }
 
-.article :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
+.article :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
     margin-bottom: 0.25em;
 }
 
+/* ---------- code */
 
-/* @media (min-width: 960px) {
-    .bd-page-width {
-        max-width: initial !important;
-    }
+:root {
+    --myst-code-border-radius: 0.5rem;
+    --myst-code-border-width: 0.8px;
+}
 
-    /* but keep the upper-left logo to grow too much */
-    /* .navbar-brand.logo>img {
-        max-width: 250px;
-        max-height: 170px;
-    } */
-} */
+/* cell inputs */
+html.light {
+    --myst-input-background-color: rgb(243, 244, 245);
+    --myst-input-border-color: rgb(209, 213, 218);
+    --myst-input-left-color: rgb(0, 128, 0);
+    --myst-input-left-width: 4px;
+}
+
+html.dark {
+    --myst-input-background-color: rgb(41, 49, 61);
+    --myst-input-border-color: rgb(206, 214, 221);
+    --myst-input-left-color: rgb(0, 128, 0);
+    --myst-input-left-width: 4px;
+}
 
 
-/* :is(.bd-container, .myst) p:has(+ :is(ol, ul)) {
-    margin-bottom: initial !important;
+.relative.group\/block>.relative.group:has(>pre) {
+    border-radius: var(--myst-code-border-radius);
+    border-width: var(--myst-code-border-width);
+    border-color: var(--myst-input-border-color);
+    background-color: var(--myst-input-background-color);
+    border-left-width: var(--myst-input-left-width);
+    border-left-color: var(--myst-input-left-color);
 }
 
-:is(.bd-container, .myst) li>ul {
-    margin-top: 0.1em !important;
-} */
 
+/* cell outputs */
+html.light {
+    --myst-output-background-color: rgb(248, 255, 248);
+    --myst-output-border-color: blue;
+    --myst-output-empty-border-color: red;
+}
 
-/* execution output cells
-div.cell div.cell_output .output pre {
-    background-color: #f8fff8 !important;
-    border: 0.3px solid blue !important;
+html.dark {
+    --myst-output-background-color: rgb(6, 75, 6);
+    --myst-output-border-color: rgb(35, 182, 211);
+    --myst-output-empty-border-color: rgb(128, 0, 0);
 }
 
-html[data-theme='dark'] div.cell div.cell_output .output pre {
-    background-color: #064b06 !important;
+html article main .relative.group[data-mdast-node-id] {
+    &:empty {
+        &::before {
+            content: ' ∅ no output ∅ ';
+        }
+        font-size: xx-small;
+        padding: 0px 1em;
+
+        border-color: var(--myst-output-empty-border-color);
+        margin-bottom: 1rem;
+    }
+
+    border-radius: var(--myst-code-border-radius);
+    margin-top: 0px;
+    padding: 0.25em 1em;
+    border-width: var(--myst-code-border-width);
+    border-color: var(--myst-output-border-color);
+    background-color: var(--myst-output-background-color);
+
+    &>div {
+        border: 0px solid #00000000 !important;
+        background-color: #00000000 !important;
+
+        &>code {
+            border: 0px solid #00000000 !important;
+        }
+    }
+}
+html article main .relative.group:has(+[data-mdast-node-id]) {
+    margin-bottom: 0.7em;
 }
- */
-/* div.prompt.input_prompt, div.prompt.output_prompt {
-    opacity: 0.6;
-} */
 
-/* jupyterlab-myst and tables */
-/* :is(.bd-container, .myst) table td {
-    padding: initial !important;
+/* code blocks */
+html.light {
+    --myst-block-background-color: rgb(243, 244, 245);
+    --myst-block-border-color: rgb(209, 213, 218);
+    --myst-block-left-color: rgb(0, 0, 128);
+    --myst-block-left-width: 2px;
 }
 
-:is(.bd-container, .myst) table tbody tr:nth-child(odd) {
-    background-color: #fdfdfd;
+html.dark {
+    --myst-block-background-color: rgb(41, 49, 61);
+    --myst-block-border-color: rgb(72, 86, 107);
+    --myst-block-left-color: rgb(0, 0, 128);
+    --myst-block-left-width: 2px;
 }
 
-:is(.bd-container, .myst) table tbody tr:nth-child(even) {
-    background-color: #fbfbfb;
+html body article main div.group.relative:has(>pre>code) {
+    padding: .1rem .25rem !important;
+    border-radius: var(--myst-code-border-radius);
+    background-color: var(--myst-block-background-color);
+    border-width: var(--myst-code-border-width);
+    border-color: var(--myst-block-border-color);
+    border-left-width: var(--myst-block-left-width);
+    border-left-color: var(--myst-block-left-color);
+
+    &>pre.hljs.block {
+        background-color: #00000000 !important;
+    }
 }
 
-:is(.bd-container, .myst) table :is(thead, tfoot) tr {
-    background-color: #f8f8f8;
+/* inline code : use same style as blocks */
+p>code {
+    background-color: var(--myst-block-background-color);
+    border-width: var(--myst-code-border-width);
+    border-color: var(--myst-block-border-color);
+    padding: 0.1rem 0.20rem;
+    margin-left: 0.20rem;
+    margin-right: 0.20rem;
+    border-radius: 3px;
 }
 
-html[data-theme='dark'] {
-    & :is(.bd-container, .myst) table tbody tr:nth-child(odd) {
-        background-color: #020202;
+/* ---------- use page width more effectively */
+@media (min-width: 1536px) {
+    html {
+        .article-grid, .xl\:article-grid {
+            grid-template-columns:
+                /* [screen-start] .5rem [screen-inset-start] 1fr [page-start] 3rem [page-inset-start] minmax(4rem, 9rem) [body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 10ch) [middle-start] minmax(8ch, 10ch) [gutter-left-end] minmax(8ch, 10ch) minmax(8ch, 10ch) [gutter-right-start] minmax(8ch, 10ch) [middle-end] minmax(8ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(5rem, 13rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] .5rem [screen-end]; */
+                [screen-start] .5rem
+                [screen-inset-start] 1fr
+                [page-start] 3rem
+                [page-inset-start] minmax(4rem, 9rem)
+                [body-outset-start] 3rem
+                [body-start gutter-left-start] 1rem
+                [body-inset-start] minmax(8ch, 10ch)
+                [middle-start] minmax(8ch, 10ch)
+                [gutter-left-end] minmax(8ch, 10ch)
+                /* this is the one we increase from minmax(8ch, 10ch)*/
+                10fr
+                [gutter-right-start] minmax(8ch, 10ch)
+                [middle-end] minmax(8ch, 10ch)
+                [body-inset-end] 1rem
+                [body-end gutter-right-end] 3rem
+                [body-outset-end] minmax(5rem, 13rem)
+                [page-inset-end] 3rem
+                [page-end] 1fr
+                [screen-inset-end] .5rem
+                [screen-end] !important;
+        }
     }
+}
 
-    & :is(.bd-container, .myst) table tbody tr:nth-child(even) {
-        background-color: #040404;
-    }
+.full-width {
+    grid-column: body / page;
+}
 
-    & :is(.bd-container, .myst) table :is(thead, tfoot) tr {
-        background-color: #080808;
+/* here's the settings for the medium size screens
+ * it's hard to do much better,
+ * ideally the right had side toc could take a little less space
+*/
+/* @media (min-width: 1024px) and (max-width: 1535px) {
+    html {
+        .article-grid, .xl\:article-grid {
+            grid-template-columns:
+            [screen-start] .25rem [screen-inset-start page-start] 1rem [page-inset-start body-outset-start] 1fr [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch,10ch) [middle-start] minmax(8ch,10ch) [gutter-left-end] minmax(8ch,10ch) minmax(8ch,10ch) [gutter-right-start] minmax(8ch,10ch) [middle-end] minmax(8ch,10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(5rem,13rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] .25rem [screen-end]
+        }
     }
 } */
 
+
+/* ---------- tables */
+html.light {
+    --myst-table-background-color-header: #f8f8f8;
+    --myst-table-bottom-color-header: rgb(90, 175, 211);
+    --myst-table-background-color-even: #fbfbfb;
+    --myst-table-background-color-odd: #fdfdfd;
+}
+
+html.dark {
+    --myst-table-background-color-header: #080808;
+    --myst-table-bottom-color-header: rgb(11, 128, 137);
+    --myst-table-background-color-even: #020202;
+    --myst-table-background-color-odd: #040404;
+}
+
+article main table {
+    thead, tfoot {
+        tr {
+            background-color: var(--myst-table-background-color-header);
+        }
+    }
+    tbody {
+        th {
+            background-color: var(--myst-table-background-color-header);
+            padding:0.65rem;
+            font-size: larger;
+            border-bottom-color: var(--myst-table-bottom-color-header);
+            border-bottom-width: 2px;
+        }
+        tr:nth-child(even) {
+            background-color: var(--myst-table-background-color-even);
+        }
+
+        tr:nth-child(odd) {
+            background-color: var(--myst-table-background-color-odd)
+        }
+    }
+}
+
 /* space before admonitions */
 /* :is(.bd-container, .myst) div.admonition>.admonition-title+* {
     margin-top: 0px !important;
 }
  */
 
- /* standard admonition classes */
+/* standard admonition classes */
 .admonition-smaller {
     font-size: smaller;
     line-height: 1.2;