Enable width style work for content

master
Will Faught 2 years ago
parent 09cf17b721
commit 936b5108f3

@ -1061,6 +1061,18 @@ try the following in `yoursite/layouts/partials/paige/style-first.css`:
}
```
### Narrow look
By default, the content expands to fill the whole window.
This can result in very long lines, depending on the window width.
To use [the recommended line length of 66 characters](https://en.wikipedia.org/wiki/Line_length#Printed_text),
try the following in `yoursite/hugo.toml`:
```toml
[params.paige]
style = "#paige-content { width: 66ch; }"
```
### Menu navigation only
If you configure a menu, and intend for it to be sufficient for all navigation,

@ -1,33 +1,5 @@
{{ $page := . }}
<script>
function paigeResize() {
var e = document.querySelector("#paige-content");
if (!e) {
return;
}
var mw = getComputedStyle(e).maxWidth;
var w;
if (mw === "100%") {
var e = document.querySelector("#paige-root");
var s = getComputedStyle(e);
var px = parseFloat(s.paddingLeft) + parseFloat(s.paddingRight);
var bx = parseFloat(s.borderLeftWidth) + parseFloat(s.borderRightWidth);
w = e.offsetWidth - px - bx;
} else {
w = parseFloat(mw.substring(0, mw.length - 2));
}
var es = document.querySelectorAll(".paige-video");
for (var i = 0; i < es.length; i++) {
var e = es[i];
if (!e.style.height && !e.style.width) {
e.style.width = w + "px";
}
}
}
paigeResize();
addEventListener("resize", paigeResize);
</script>
{{ partial "paige/script.html" (dict "page" $page "src" "js/paige/bootstrap/bootstrap.bundle.js") }}
{{ if $page.Param "paige.math" }}

@ -76,6 +76,7 @@ body, html {
.paige-video {
margin-bottom: 1rem;
min-width: 550px;
}
#paige-content {

Loading…
Cancel
Save