Newbie: Defining classes #13

The solution is likely very obvious, but I've been stuck on this for days.

A couple of pages in my web-based book project need a different layout than the majority of the pages in the book. The solution I've been trying to hash out is wrapping the content on those specific html.pm files with a div assigned a specific class, but I'm not seeing the result. Note the background-color attribute for the #wide class is just for testing purposes.

credits.html.pm

#lang pollen
◊wide{
◊h2{Credits}
◊h3{Works}
The original Surplus Portfolio prints were made by Derek Sullivan at Open Studio, Toronto in 2012. Ink on Kozuke paper.
... }

styles.css.pp

body {
background: ◊|white|;
font-family: 'Karla', sans-serif;
font-size: ◊|multiplier|em;
line-height: ◊|multiplier|;
margin-bottom: ◊|edge|em;
margin-left: auto;
margin-right: auto;
}

#wide {
background: ◊|red|;
}

And then this is in the pollen.rkt file:

(define (wide . content)
`(div ((class "wide")) ,@content))

I must be missing something in the requisite parts, and haven't had any success trying out other solutions in the other Pollen examples I've seen so far. Any help is appreciated.

The solution is likely very obvious, but I've been stuck on this for days. A couple of pages in my web-based book project need a different layout than the majority of the pages in the book. The solution I've been trying to hash out is wrapping the content on those specific html.pm files with a div assigned a specific class, but I'm not seeing the result. Note the background-color attribute for the #wide class is just for testing purposes. **credits.html.pm** #lang pollen ◊wide{ ◊h2{Credits} ◊h3{Works} The original Surplus Portfolio prints were made by Derek Sullivan at Open Studio, Toronto in 2012. Ink on Kozuke paper. ... } **styles.css.pp** body { background: ◊|white|; font-family: 'Karla', sans-serif; font-size: ◊|multiplier|em; line-height: ◊|multiplier|; margin-bottom: ◊|edge|em; margin-left: auto; margin-right: auto; } #wide { background: ◊|red|; } And then this is in the **pollen.rkt** file: (define (wide . content) `(div ((class "wide")) ,@content)) I must be missing something in the requisite parts, and haven't had any success trying out other solutions in the other Pollen examples I've seen so far. Any help is appreciated.

If you’re using the CSS selector #wide then you need the attrribute (id "wide") in your X-expression., not (class "wide").

If you’re using the CSS selector `#wide` then you need the attrribute `(id "wide")` in your X-expression., not `(class "wide")`.

I am still struggling a bit with x-expressions, and didn't see that at all. Thanks for your help—I'm almost finished with my first Pollen project!

To be fair to your understanding of X-expressions, the problem here was an (easy to miss) mismatch between the CSS selector and the HTML. I think I’ve been making that mistake for at least 15 years ;)

On Oct 15, 2019, at 12:31 AM, M Grenier notifications@github.com wrote:

I am still struggling a bit with x-expressions, and didn't see that at all. Thanks for your help—I'm almost finished with my first Pollen project!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

To be fair to your understanding of X-expressions, the problem here was an (easy to miss) mismatch between the CSS selector and the HTML. I think I’ve been making that mistake for at least 15 years ;) > On Oct 15, 2019, at 12:31 AM, M Grenier <notifications@github.com> wrote: > > > I am still struggling a bit with x-expressions, and didn't see that at all. Thanks for your help—I'm almost finished with my first Pollen project! > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub, or unsubscribe.

Labels Milestones

Newbie: Defining classes #13