bugfix: figure env messes up grid (#82)

* initial commit

* WIP figure environment fix

* Revert "WIP figure environment fix"

This reverts commit d5583d1.

* Tweak bug reprex to demo for Quarto team

* Rwplace class injection with grid style injection

* Add .page-columns.page-full to main

* Demo of partial fix

* Replace custom styles with custom class

* Propogate Quarto layout classes back

* Only apply layout to direct .cr-section parents

* Force .cr-section full width

* Adjust comment on JS code

* Remove extraneous JS function

* Remove extraneous ref to manual style string

* Return captionsed examples to demo

---------

Co-authored-by: James Goldie <[email protected]>
Co-authored-by: James Goldie <[email protected]>

_extensions/closeread/closeread.js

@@ -28,7 +28,15 @@ document.addEventListener("DOMContentLoaded", () => {
     document.body.classList.add("cr-removeheaderspace")
   }
 
-  // define ojs variables if the connector module is available
+  // attach layout classes to direct parents of `.cr-section`s
+  /* this replicates quarto <= 1.6 functionality:
+    https://github.com/quarto-dev/quarto-cli/blob/
+      d85467627aae71c96e3d1e9718a3b47289329cde/src/format/html/
+      format-html-bootstrap.ts#L1163C1-L1186C7 */ 
+  const crSections = Array.from(document.querySelectorAll(".cr-section"))
+  crSections.map(
+    el => el.parentElement.classList.add("page-columns", "page-full"))
+
   const ojsModule = window._ojs?.ojsConnector?.mainModule
   const ojsStickyName = ojsModule?.variable()
   const ojsTriggerIndex = ojsModule?.variable()

_extensions/closeread/closeread.lua

@@ -118,10 +118,10 @@ function make_section_layout(div)
       end
     end
 
-    -- todo: identify quarto layout to use in section
+    -- todo: identify quarto layout to use in section 
     --local quarto_layouts = {"column-body", "column-outset", "column-page", 
-     -- "column-page-inset", "column-screen-inset", "column-margin"}
-    local quarto_layout = "column-screen" -- default
+      -- "column-page-inset", "column-screen-inset", "column-margin"}
+    local quarto_layout = "cr-column-screen" -- default
     --if list_includes_any(div.classes, quarto_layouts) then
     --  quarto_layout = ""
     --end

_extensions/closeread/closeread.scss

@@ -17,6 +17,15 @@
   grid-template-rows: 1fr;
   background-color: var(--cr-section-background-color);
 
+  // used to mimic quarto's layout class but exempt the section from some of the
+  // behaviours that come with quarto responding to that class
+  // see https://github.com/qmd-lab/closeread/issues/81
+  &.cr-column-screen {
+    grid-column: screen-start / screen-end !important;
+    z-index: 998;
+    opacity: .999;
+  }
+
   .narrative-col {
     grid-row: 1;
 

docs/gallery/demos/sticky-blocks/index.qmd

@@ -0,0 +1,64 @@
+---
+title: Sticky Block Types
+format:
+  closeread-html:
+    code-tools: true
+    toc: true
+keep-md: true
+---
+
+Just about any type of element that can be included in a Quarto doc can be flagged as a sticky. This demo shows many examples.
+
+The current fix allows `.cr-section` to work, provided it's a "first level" child of the `main` content. For example:
+
+::::{.cr-section}
+
+This is an image that includes a caption. @cr-inline-working
+
+:::{#cr-inline-working}
+This works: ![a caption](trees.png)
+:::
+
+This does too! @cr-nocaption-working
+
+:::{#cr-nocaption-working}
+![](trees.png)
+:::
+
+Does this one, which has a caption but no content? @cr-caption-working
+
+:::{#cr-caption-working}
+![Look at this tree!](trees.png)
+:::
+
+::::
+
+## This header becomes a section
+
+We've reimplemented `.column-screen` so that we can even make `.cr-section` work if you've used an `h2` (which puts parts of the doc inside a `section`):
+
+::::{.cr-section}
+
+This is an image that includes a caption. @cr-inline-working2
+
+:::{#cr-inline-working2}
+This works: ![a caption](trees.png)
+:::
+
+This does too! @cr-nocaption-working2
+
+:::{#cr-nocaption-working2}
+![](trees.png)
+:::
+
+Does this one, which has a caption but no content? @cr-caption-working2
+
+:::{#cr-caption-working2}
+![Look at this tree!](trees.png)
+:::
+
+::::
+
+## Another section
+
+{{< lipsum 1 >}}