Enable width style work for content
This commit is contained in:
12
README.md
12
README.md
@@ -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 {
|
||||
|
Reference in New Issue
Block a user