Skip to content

Commit 6913b0d

Browse files
pachadotdevpachadotdev
committed
with mathjax
1 parent adef566 commit 6913b0d

27 files changed

+1077
-61
lines changed

‎docs/content.css‎

Lines changed: 82 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ html {
2727
body {
2828
margin: 0;
2929
padding: 0;
30-
font-size: small;
30+
font-size: 16px; /* Doubled from typical 'small' (usually ~12px) to 16px */
3131
font-family: "Noto Sans", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, Helvetica, sans-serif;
3232
background-color: var(--bg-color);
3333
color: var(--text-color);
@@ -42,58 +42,74 @@ body {
4242
.main-container {
4343
display: flex;
4444
flex: 1;
45-
overflow: hidden;
46-
min-height: 0; /* This is important for flex children to shrink */
45+
min-height: 100vh; /* Allow expansion for long content */
4746
}
4847

4948
/* Content area */
5049
#content {
5150
flex: 1;
51+
margin-left: 280px; /* Account for fixed menu width */
5252
padding: 1em 2em;
5353
overflow-y: auto;
5454
background-color: var(--bg-color);
5555
display: flex;
5656
flex-direction: column;
57+
min-height: 100vh; /* Allow expansion for long content */
58+
box-sizing: border-box; /* Include padding in height calculation */
5759
transition: background-color 0.3s ease;
5860
}
5961

6062
/* Content wrapper to push footer down */
61-
#content > *:not(footer) {
62-
flex-shrink: 0;
63+
.content-wrapper {
64+
flex: 1;
65+
display: flex;
66+
flex-direction: column;
67+
min-height: calc(100vh - 2em); /* Minimum viewport height minus padding */
6368
}
6469

65-
#content > footer {
66-
margin-top: auto; /* This is the "\hfill" equivalent */
70+
.content-main {
71+
flex: 1;
72+
min-height: 0; /* Allow content to shrink if needed */
6773
}
6874

6975
/* Footer styling */
7076
footer {
71-
margin-top: 3em;
77+
margin-top: auto;
7278
padding: 1em 0;
7379
text-align: center;
7480
color: var(--text-color);
7581
opacity: 0.7;
7682
font-size: 0.9em;
7783
border-top: 1px solid var(--border-color);
7884
transition: color 0.3s ease, border-color 0.3s ease;
85+
flex-shrink: 0;
7986
}
8087

8188
/* Responsive design */
8289
@media (max-width: 768px) {
83-
.main-container {
84-
flex-direction: column;
85-
}
86-
8790
#menu {
91+
position: relative;
8892
width: 100%;
8993
min-width: auto;
94+
height: auto;
9095
max-height: 200px;
9196
border-right: none;
92-
border-bottom: 1px solid #dee2e6;
97+
border-bottom: 1px solid var(--border-color);
9398
}
9499

95100
#content {
101+
margin-left: 0;
96102
padding: 1em;
103+
min-height: calc(100vh - 200px); /* Account for collapsed menu */
104+
box-sizing: border-box;
105+
}
106+
107+
.content-wrapper {
108+
min-height: calc(100vh - 200px - 2em); /* Minimum height for mobile */
109+
}
110+
111+
.main-container {
112+
flex-direction: column;
97113
}
98114

99115
footer {
@@ -314,3 +330,56 @@ IMG.img_slide {
314330
margin-left: auto;
315331
margin-right: auto;
316332
}
333+
334+
/* MathJax styling */
335+
.MathJax {
336+
font-size: 1em !important;
337+
}
338+
339+
.MathJax_Display {
340+
margin: 1em 0 !important;
341+
}
342+
343+
/* MathJax SVG styling */
344+
mjx-container[jax="SVG"] {
345+
/* overflow-x: auto; */
346+
overflow-y: visible;
347+
max-width: 100%;
348+
display: inline-block;
349+
}
350+
351+
/* Display math (block equations) */
352+
mjx-container[jax="SVG"][display="true"] {
353+
display: block;
354+
text-align: center;
355+
margin: 1em 0;
356+
}
357+
358+
/* Inline math */
359+
mjx-container[jax="SVG"][display="false"] {
360+
display: inline-block !important;
361+
vertical-align: baseline !important;
362+
margin: 0 0.1em;
363+
transform: translateY(-0.3em) !important;
364+
position: relative !important;
365+
}
366+
367+
/* Target the SVG elements directly for better alignment */
368+
mjx-container[jax="SVG"][display="false"] svg {
369+
vertical-align: baseline !important;
370+
position: relative !important;
371+
top: -0.1em !important;
372+
}
373+
374+
/* SVG elements should inherit text color for dark mode */
375+
[data-theme="dark"] mjx-container[jax="SVG"] svg {
376+
color: var(--text-color);
377+
}
378+
379+
/* Ensure SVG math scales properly on different screen sizes */
380+
@media (max-width: 768px) {
381+
mjx-container[jax="SVG"] {
382+
max-width: 100%;
383+
/* overflow-x: auto; */
384+
}
385+
}

‎docs/index.html‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,28 @@
11
<!DOCTYPE html>
2-
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>cpp4r documentation • cpp4r</title><link rel="stylesheet" href="menu.css"><link rel="stylesheet" href="content.css"></head><body>
2+
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>cpp4r documentation • cpp4r</title><link rel="stylesheet" href="menu.css"><link rel="stylesheet" href="content.css"><!-- MathJax Configuration --><script>
3+
window.MathJax = {
4+
tex: {
5+
inlineMath: [['\\(', '\\)'], ['$', '$']],
6+
displayMath: [['\\[', '\\]'], ['$$', '$$']],
7+
processEscapes: true,
8+
processEnvironments: true,
9+
packages: {'[+]': ['ams', 'newcommand', 'configmacros']}
10+
},
11+
svg: {
12+
fontCache: 'global',
13+
scale: 1.5, /* Scale SVG math to 150% */
14+
minScale: 0.5,
15+
mtextInheritFont: false,
16+
merrorInheritFont: true,
17+
mathmlSpacing: false,
18+
exFactor: 0.5 /* Adjust baseline for better alignment */
19+
},
20+
options: {
21+
ignoreHtmlClass: 'tex2jax_ignore',
22+
processHtmlClass: 'tex2jax_process'
23+
}
24+
};
25+
</script><script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script></head><body>
326
<div class="main-container">
427
<div id="menu">
528
<div>
@@ -44,8 +67,14 @@ <h1>cpp4r Documentation</h1>
4467
<a href="vignettes/17-worked-examples.html">16 - Worked Examples</a>
4568
</div>
4669

70+
<div class="submenu">
71+
<label>News</label>
72+
<a href="news/index.html">Changelog</a>
73+
</div>
4774
</div>
4875
<div id="content">
76+
<div class="content-wrapper">
77+
<div class="content-main">
4978
<h1>cpp4r</h1>
5079

5180
<p><img src="man/figures/logo.svg" height="139" alt=""></p>
@@ -145,7 +174,8 @@ <h2>Code of Conduct</h2>
145174
<p>Please note that the cpp4r project is released with a <a href="https://cpp4r.org/CODE_OF_CONDUCT.html">Contributor Code
146175
of Conduct</a>. By contributing to
147176
this project, you agree to abide by its terms.</p>
148-
<footer><p>Last updated: 2025-10-12 10:17:40</p>
177+
</div>
178+
<footer><p>Last updated: 2025-10-12 11:32:38</p>
149179
</footer><script>
150180
document.addEventListener('DOMContentLoaded', function() {
151181
// Theme toggle functionality
@@ -249,5 +279,6 @@ <h2>Code of Conduct</h2>
249279
});
250280
</script></div>
251281
</div>
282+
</div>
252283
</body></html>
253284

‎docs/menu.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
padding: 1em;
1010
box-sizing: border-box;
1111
transition: background-color 0.3s ease, border-color 0.3s ease;
12+
height: 100vh;
13+
position: fixed;
14+
left: 0;
15+
top: 0;
1216
}
1317

1418
#menu h1 {

0 commit comments

Comments
 (0)