Newbie: Defining classes

[mantifold]

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.

[mbutterick]

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

[mantifold]

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!

[mbutterick]

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.