diff --git a/_extensions/closeread/closeread.css b/_extensions/closeread/closeread.css index 038158c..7c3e0c2 100644 --- a/_extensions/closeread/closeread.css +++ b/_extensions/closeread/closeread.css @@ -17,7 +17,10 @@ padding-block: 45svh; padding-inline: 24px; } -.cr-section .narrative-col .trigger p { +.cr-section .narrative-col .trigger .narrative { + padding: 0.7em 0.75em; +} +.cr-section .narrative-col .trigger .narrative > p { margin-bottom: 0; } .cr-section .sticky-col { @@ -91,7 +94,7 @@ .cr-section.overlay-center .narrative-col .narrative { background-color: rgba(17, 17, 17, 0.85); color: white; - padding: 5px; + padding: 0.3em 0.5em; border-radius: 5px; } .cr-section.sidebar-left .sticky-col, @@ -120,7 +123,6 @@ .overlay-right .narrative-col .narrative { background-color: rgba(17, 17, 17, 0.85); color: white; - padding: 5px; border-radius: 5px; } .overlay-left .sticky-col, @@ -148,6 +150,9 @@ grid-column: 1; margin-inline: 0; } +.sidebar-left .narrative-col .narrative { + padding: 0 0.75em; +} .sidebar-left .sticky-col { grid-column: 2; } @@ -159,6 +164,9 @@ grid-column: 2; margin-inline: 0; } +.sidebar-right .narrative-col .narrative { + padding: 0 0.75em; +} .sidebar-right .sticky-col { grid-column: 1; } diff --git a/_extensions/closeread/closeread.css.map b/_extensions/closeread/closeread.css.map index 5cefc20..b2db67a 100644 --- a/_extensions/closeread/closeread.css.map +++ b/_extensions/closeread/closeread.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["closeread.scss"],"names":[],"mappings":"AACA;AAGA;AAEA;AAEA;AAAA;AAAA;AAAA;AAAA;AAMA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAKN;EACE;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EAGA;EAEA,YACE;;AAMJ;EACE,YACE;;AAGJ;EACE,YACE;;AAKJ;EACE;;AAIA;EACE;EAEA,YACE;;AAGF;EACE;EAEA,YACA;;AAMJ;EACE;EAEA;;AAGA;EACE;EAEA;;AAIF;EACE;EAEA;;;AASZ;AACA;EACE;AAAA;AAAA;AAAA;AAAA;IAKE;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;IACA;;EAIJ;AAAA;AAAA;AAAA;AAAA;IACE;;;AAQN;AAAA;AAAA;EAGE;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIJ;AAAA;AAAA;EACE;;;AAMF;EACE;;;AAIF;EACE;;;AAIF;EACE;;;AAMJ;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;;AAGJ;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKJ;AAAA;AAAA;AAAA;AAAA;EAKE;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;;AAKJ;AAEA;EAEE;AAEA;AAAA;EAEA;EACA;EAEA;EACA;EAGA;;AAGA;EACE;;AAGF;EACE;;;AAIJ;EAEE;EAGA;EACA;EAGA;EAEA;EACA;EAGA;;AAGA;EACE;EAEA;;AAGF;EACE;;;AAKJ;AAKE;EACE;EACA;;AAIF;EACE;;AAKA;EACE;EACA;EACA;;AAEA;EACE;;;AAOR;AAII;EACE;EACA;;AAEA;EACE","file":"closeread.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["closeread.scss"],"names":[],"mappings":"AACA;AAGA;AAEA;AAEA;AAAA;AAAA;AAAA;AAAA;AAMA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EAEE;;AAIA;EACE;;AAOR;EACE;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EAGA;EAEA,YACE;;AAMJ;EACE,YACE;;AAGJ;EACE,YACE;;AAKJ;EACE;;AAIA;EACE;EAEA,YACE;;AAGF;EACE;EAEA,YACA;;AAMJ;EACE;EAEA;;AAGA;EACE;EAEA;;AAIF;EACE;EAEA;;;AASZ;AACA;EACE;AAAA;AAAA;AAAA;AAAA;IAKE;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;IACA;;EAIJ;AAAA;AAAA;AAAA;AAAA;IACE;;;AAQN;AAAA;AAAA;EAGE;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;;AAIJ;AAAA;AAAA;EACE;;;AAMF;EACE;;;AAIF;EACE;;;AAIF;EACE;;;AAMJ;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;;AAGJ;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;;AAKJ;AAAA;AAAA;AAAA;AAAA;EAKE;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;;AAKJ;AAEA;EAEE;AAEA;AAAA;EAEA;EACA;EAEA;EACA;EAGA;;AAGA;EACE;;AAGF;EACE;;;AAIJ;EAEE;EAGA;EACA;EAGA;EAEA;EACA;EAGA;;AAGA;EACE;EAEA;;AAGF;EACE;;;AAKJ;AAKE;EACE;EACA;;AAIF;EACE;;AAKA;EACE;EACA;EACA;;AAEA;EACE;;;AAOR;AAII;EACE;EACA;;AAEA;EACE","file":"closeread.css"} diff --git a/_extensions/closeread/closeread.scss b/_extensions/closeread/closeread.scss index a6897e4..8a795dc 100644 --- a/_extensions/closeread/closeread.scss +++ b/_extensions/closeread/closeread.scss @@ -23,9 +23,17 @@ padding-block: 45svh; padding-inline: 24px; - p { - margin-bottom: 0; // override bootstrap rule + .narrative { + + padding: 0.7em 0.75em; + + // override bootstrap margin when using a single paragraph trigger + // (but not when wrapping multiple pars with a div) + > p { + margin-bottom: 0; + } } + } } @@ -131,7 +139,7 @@ .narrative { background-color: rgba(17, 17, 17, .85); color: white; - padding: 5px; + padding: 0.3em 0.5em; border-radius: 5px; } } @@ -159,7 +167,6 @@ .narrative { background-color: rgba(17, 17, 17, .85); color: white; - padding: 5px; border-radius: 5px; } } @@ -194,6 +201,10 @@ .narrative-col { grid-column: 1; margin-inline: 0; + + .narrative { + padding: 0 0.75em; + } } .sticky-col { @@ -206,6 +217,10 @@ .narrative-col { grid-column: 2; margin-inline: 0; + + .narrative { + padding: 0 0.75em; + } } .sticky-col { diff --git a/docs/gallery/examples/auden-poem/index.qmd b/docs/gallery/examples/auden-poem/index.qmd index 9debadf..884efab 100644 --- a/docs/gallery/examples/auden-poem/index.qmd +++ b/docs/gallery/examples/auden-poem/index.qmd @@ -61,4 +61,4 @@ No matter how familiar a poem is, rereading it always gives me a sense of first \ \ -This is an excerpt of the first three lines of *A Poem (and a Painting) About the Suffering That Hides in Plain Sight* by Elisa Gabbert, appearing in *The New York Times* on March 6, 2022 () \ No newline at end of file +This is an excerpt of the first three lines of [*A Poem (and a Painting) About the Suffering That Hides in Plain Sight*](https://www.nytimes.com/interactive/2022/03/06/books/auden-musee-des-beaux-arts.html) by Elisa Gabbert, appearing in *The New York Times* on March 6, 2022. \ No newline at end of file diff --git a/docs/index.qmd b/docs/index.qmd index c239b51..b09477a 100644 --- a/docs/index.qmd +++ b/docs/index.qmd @@ -36,8 +36,9 @@ Step two: open up a closeread section. [@cr-doc]{highlight="8-20"} Step three: flag an element to become a sticky. [@cr-doc]{highlight="14-18"} -:::{focus-on="cr-doc" highlight="12" style="padding-bottom: 100dvh"} Step four: create a trigger to make the sticky appear. [@cr-doc]{highlight="12"} + +:::{style="height: 40dvh; visibility: hidden"} ::: :::{#cr-doc filename="myfirstcr.qmd" .scale-to-fill}