adopt jb2 style .. wip

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,52 +47,182 @@ 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 */
+
+:root {
+    --myst-code-border-radius: 0.5rem;
+    --myst-code-border-width: 0.8px;
+}
+
+/* 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;
+}
+
 
-/* @media (min-width: 960px) {
-    .bd-page-width {
-        max-width: 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);
+}
+
+
+/* cell outputs */
+html.light {
+    --myst-output-background-color: rgb(248, 255, 248);
+    --myst-output-border-color: blue;
+    --myst-output-empty-border-color: red;
+}
+
+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 article main .relative.group[data-mdast-node-id] {
+    &:empty {
+        &::before {
+            content: ' ∅ no output ∅ ';
+        }
+        border-color: var(--myst-output-empty-border-color);
+        margin-bottom: 1rem;
     }
+    border-radius: var(--myst-code-border-radius);
+    padding: 5px 10px;
+    border-width: var(--myst-code-border-width);
+    border-color: var(--myst-output-border-color);
+    background-color: var(--myst-output-background-color);
 
-    /* but keep the upper-left logo to grow too much */
-    /* .navbar-brand.logo>img {
-        max-width: 250px;
-        max-height: 170px;
-    } */
-} */
+    &>div {
+        border: 0px solid #00000000 !important;
+        background-color: #00000000 !important;
 
+        &>code {
+            border: 0px solid #00000000 !important;
+        }
+    }
+}
 
-/* :is(.bd-container, .myst) p:has(+ :is(ol, ul)) {
-    margin-bottom: 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) li>ul {
-    margin-top: 0.1em !important;
-} */
+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;
+}
 
+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);
 
-/* execution output cells
-div.cell div.cell_output .output pre {
-    background-color: #f8fff8 !important;
-    border: 0.3px solid blue !important;
+    &>pre.hljs.block {
+        background-color: #00000000 !important;
+    }
 }
 
-html[data-theme='dark'] div.cell div.cell_output .output pre {
-    background-color: #064b06 !important;
+/* 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;
 }
- */
+
+/* ---------- 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;
+        }
+    }
+}
+
+/* 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]
+        }
+    }
+} */
+
+
+
+>>/* but keep the upper-left logo to grow too much */
+/* .navbar-brand.logo>img {
+        max-width: 250px;
+        max-height: 170px;
+    } */
+
+*/
 /* div.prompt.input_prompt, div.prompt.output_prompt {
     opacity: 0.6;
 } */
@@ -134,7 +264,7 @@ html[data-theme='dark'] {
 }
  */
 
- /* standard admonition classes */
+/* standard admonition classes */
 .admonition-smaller {
     font-size: smaller;
     line-height: 1.2;