Skip to content

Commit e3fbb38

Browse files
parmentelatparmentelat
committed
inject some style for jb2
1 parent 1e56ee1 commit e3fbb38

File tree

5 files changed

+656
-0
lines changed

5 files changed

+656
-0
lines changed

‎Makefile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
include Makefile.book2
2+
include Makefile.style2

‎Makefile.style2‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
########## STYLE
2+
# we keep 2 style files:
3+
#
4+
# _static/style_jb2.css: a common file for all projects
5+
# _static/style_local.css: additions specific to this project
6+
#
7+
# this way we can keep the common style file in sync between all projects
8+
# using byte-comparison tools
9+
#
10+
# (it is recommended to create an empty _static/style_local.css
11+
# file if needed, to avoid errors in the build process)
12+
13+
14+
style: _static/style.css
15+
16+
_static/style.css: _static/style_jb2.css _static/style_local.css
17+
(echo '/* autogenerated, DO NOT EDIT ME ! - edit style_jb2.css or style_local.css instead */'; \
18+
cat $^ ) > $@
19+
20+
.PHONY: style

‎_static/style.css‎

Lines changed: 318 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,318 @@
1+
/* autogenerated, DO NOT EDIT ME ! - edit style_jb2.css or style_local.css instead */
2+
/*
3+
* for jupyter-book 2 aka mystmd
4+
* with myst.yml: template: book-theme
5+
* trying to improve the rendering of jupyter notebooks
6+
* particularly wrt spacing around lists and paragraphs
7+
* as well as other miscellanous tweaks
8+
*/
9+
10+
/* ---------- the left hand side toc */
11+
12+
.primary-scrollbar {
13+
14+
div.w-full {
15+
16+
&[data-state='open'] {
17+
border: 1px solid var(--jp-border-color0);
18+
border-radius: 8px;
19+
padding-top: 0px;
20+
}
21+
22+
div.block {
23+
&::before {
24+
content: '≡ ';
25+
}
26+
}
27+
}
28+
29+
a.p-2 {
30+
padding: 0.08em 1em;
31+
32+
&.active {
33+
&::before {
34+
content: '⌘ ';
35+
}
36+
}
37+
}
38+
}
39+
40+
/* ---------- space around lists */
41+
42+
/* a paragraph that is just above a list should not have a bottom margin
43+
* thanks SO
44+
* https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
45+
*/
46+
main {
47+
p:has(+ :is(ol, ul)) {
48+
margin-bottom: 0px !important;
49+
}
50+
51+
p+ :is(ol, ul) {
52+
margin-top: 0px !important;
53+
}
54+
55+
li>ul {
56+
margin-top: 0px !important;
57+
}
58+
}
59+
60+
.article :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
61+
margin-bottom: 0.25em;
62+
}
63+
64+
/* ---------- code */
65+
66+
:root {
67+
--myst-code-border-radius: 0.5rem;
68+
--myst-code-border-width: 0.8px;
69+
}
70+
71+
/* cell inputs */
72+
html.light {
73+
--myst-input-background-color: rgb(243, 244, 245);
74+
--myst-input-border-color: rgb(209, 213, 218);
75+
--myst-input-left-color: rgb(0, 128, 0);
76+
--myst-input-left-width: 4px;
77+
}
78+
79+
html.dark {
80+
--myst-input-background-color: rgb(41, 49, 61);
81+
--myst-input-border-color: rgb(206, 214, 221);
82+
--myst-input-left-color: rgb(0, 128, 0);
83+
--myst-input-left-width: 4px;
84+
}
85+
86+
87+
.relative.group\/block>.relative.group:has(>pre) {
88+
border-radius: var(--myst-code-border-radius);
89+
border-width: var(--myst-code-border-width);
90+
border-color: var(--myst-input-border-color);
91+
background-color: var(--myst-input-background-color);
92+
border-left-width: var(--myst-input-left-width);
93+
border-left-color: var(--myst-input-left-color);
94+
}
95+
96+
97+
/* cell outputs */
98+
html.light {
99+
--myst-output-background-color: rgb(248, 255, 248);
100+
--myst-output-border-color: blue;
101+
--myst-output-empty-border-color: red;
102+
}
103+
104+
html.dark {
105+
--myst-output-background-color: rgb(6, 75, 6);
106+
--myst-output-border-color: rgb(35, 182, 211);
107+
--myst-output-empty-border-color: rgb(128, 0, 0);
108+
}
109+
110+
html article main .relative.group[data-mdast-node-id] {
111+
&:empty {
112+
&::before {
113+
content: ' ∅ no output ∅ ';
114+
}
115+
font-size: xx-small;
116+
padding: 0px 1em;
117+
118+
border-color: var(--myst-output-empty-border-color);
119+
margin-bottom: 1rem;
120+
}
121+
122+
border-radius: var(--myst-code-border-radius);
123+
margin-top: 0px;
124+
padding: 0.25em 1em;
125+
border-width: var(--myst-code-border-width);
126+
border-color: var(--myst-output-border-color);
127+
background-color: var(--myst-output-background-color);
128+
129+
&>div {
130+
border: 0px solid #00000000 !important;
131+
background-color: #00000000 !important;
132+
133+
&>code {
134+
border: 0px solid #00000000 !important;
135+
}
136+
}
137+
}
138+
html article main .relative.group:has(+[data-mdast-node-id]) {
139+
margin-bottom: 0.7em;
140+
}
141+
142+
/* code blocks */
143+
html.light {
144+
--myst-block-background-color: rgb(243, 244, 245);
145+
--myst-block-border-color: rgb(209, 213, 218);
146+
--myst-block-left-color: rgb(0, 0, 128);
147+
--myst-block-left-width: 2px;
148+
}
149+
150+
html.dark {
151+
--myst-block-background-color: rgb(41, 49, 61);
152+
--myst-block-border-color: rgb(72, 86, 107);
153+
--myst-block-left-color: rgb(0, 0, 128);
154+
--myst-block-left-width: 2px;
155+
}
156+
157+
html body article main div.group.relative:has(>pre>code) {
158+
padding: .1rem .25rem !important;
159+
border-radius: var(--myst-code-border-radius);
160+
background-color: var(--myst-block-background-color);
161+
border-width: var(--myst-code-border-width);
162+
border-color: var(--myst-block-border-color);
163+
border-left-width: var(--myst-block-left-width);
164+
border-left-color: var(--myst-block-left-color);
165+
166+
&>pre.hljs.block {
167+
background-color: #00000000 !important;
168+
}
169+
}
170+
171+
/* inline code : use same style as blocks */
172+
p>code {
173+
background-color: var(--myst-block-background-color);
174+
border-width: var(--myst-code-border-width);
175+
border-color: var(--myst-block-border-color);
176+
padding: 0.1rem 0.20rem;
177+
margin-left: 0.20rem;
178+
margin-right: 0.20rem;
179+
border-radius: 3px;
180+
}
181+
182+
/* ---------- use page width more effectively */
183+
@media (min-width: 1536px) {
184+
html {
185+
.article-grid, .xl\:article-grid {
186+
grid-template-columns:
187+
/* [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]; */
188+
[screen-start] .5rem
189+
[screen-inset-start] 1fr
190+
[page-start] 3rem
191+
[page-inset-start] minmax(4rem, 9rem)
192+
[body-outset-start] 3rem
193+
[body-start gutter-left-start] 1rem
194+
[body-inset-start] minmax(8ch, 10ch)
195+
[middle-start] minmax(8ch, 10ch)
196+
[gutter-left-end] minmax(8ch, 10ch)
197+
/* this is the one we increase from minmax(8ch, 10ch)*/
198+
10fr
199+
[gutter-right-start] minmax(8ch, 10ch)
200+
[middle-end] minmax(8ch, 10ch)
201+
[body-inset-end] 1rem
202+
[body-end gutter-right-end] 3rem
203+
[body-outset-end] minmax(5rem, 13rem)
204+
[page-inset-end] 3rem
205+
[page-end] 1fr
206+
[screen-inset-end] .5rem
207+
[screen-end] !important;
208+
}
209+
}
210+
}
211+
212+
.full-width {
213+
grid-column: body / page;
214+
}
215+
216+
/* here's the settings for the medium size screens
217+
* it's hard to do much better,
218+
* ideally the right had side toc could take a little less space
219+
*/
220+
/* @media (min-width: 1024px) and (max-width: 1535px) {
221+
html {
222+
.article-grid, .xl\:article-grid {
223+
grid-template-columns:
224+
[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]
225+
}
226+
}
227+
} */
228+
229+
230+
/* ---------- tables */
231+
html.light {
232+
--myst-table-background-color-header: #f8f8f8;
233+
--myst-table-bottom-color-header: rgb(90, 175, 211);
234+
--myst-table-background-color-even: #fbfbfb;
235+
--myst-table-background-color-odd: #fdfdfd;
236+
}
237+
238+
html.dark {
239+
--myst-table-background-color-header: #080808;
240+
--myst-table-bottom-color-header: rgb(11, 128, 137);
241+
--myst-table-background-color-even: #020202;
242+
--myst-table-background-color-odd: #040404;
243+
}
244+
245+
article main table {
246+
thead, tfoot {
247+
tr {
248+
background-color: var(--myst-table-background-color-header);
249+
}
250+
}
251+
tbody {
252+
th {
253+
background-color: var(--myst-table-background-color-header);
254+
padding:0.65rem;
255+
font-size: larger;
256+
border-bottom-color: var(--myst-table-bottom-color-header);
257+
border-bottom-width: 2px;
258+
}
259+
tr:nth-child(even) {
260+
background-color: var(--myst-table-background-color-even);
261+
}
262+
263+
tr:nth-child(odd) {
264+
background-color: var(--myst-table-background-color-odd)
265+
}
266+
}
267+
}
268+
269+
/* space before admonitions */
270+
/* :is(.bd-container, .myst) div.admonition>.admonition-title+* {
271+
margin-top: 0px !important;
272+
}
273+
*/
274+
275+
/* standard admonition classes */
276+
.admonition-smaller {
277+
font-size: smaller;
278+
line-height: 1.2;
279+
}
280+
281+
.admonition-small {
282+
font-size: small;
283+
line-height: 1.2;
284+
}
285+
286+
.admonition-x-small {
287+
font-size: x-small;
288+
line-height: 1.2;
289+
}
290+
291+
/* slight gradient for corriges */
292+
.corrige {
293+
background-image: radial-gradient(circle at top left, #d1effa, #e2f9cd);
294+
}
295+
296+
html[data-theme='dark'] .corrige {
297+
background-image: radial-gradient(circle at top left, #0e3852, #0c5517);
298+
}
299+
300+
/* our exercises often do
301+
1. the thing to do
302+
303+
```{code-cell} ipython3
304+
# your code
305+
```
306+
307+
it would be better if we could indent the code cell but if we do, we lose the overall cell structure
308+
as the code cell is then part of the list item, in markdown, and is no longer deemed a code cell by jupyter
309+
*/
310+
311+
*+div.group\/block>div.myst-code {
312+
margin-top: 0.3em;
313+
}
314+
315+
*:has(+div.group\/block>div.myst-code) {
316+
margin-bottom: 0.3em;
317+
}
318+
/* no longer need a local style */

0 commit comments

Comments
 (0)