typeplate/typeplate.github.io

Cannot get the pull quotes styles as on the typeplate website

Closed this issue · 9 comments

moonbeetle commented

I'm trying out typeplate. SASS and Compass are running correctly. My style.scss includes:

@import "normalize";
@import "typeplate";
@import "vars-typeplate";

I can already see the effect of Typeplate on my text. Good. But for some reason the pull quotes don't render as in the example. More specifically, the opening and closing quote gets the same font size as the pull quote text.

Melindrea commented

What does your HTML look like?

Do you have this online somewhere that we can get a closer look at it?

moonbeetle commented
<title></title>

"Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue."

Voornaam Naam, Jobtitle - Bedrijf
Melindrea commented

I recommend either creating a Gist to add it to, or use markdown to make it come out as code.

moonbeetle commented

I get the same result whether I use

or . Downloaded type plate.css for quick testing and used it without making changes to the downloaded type plate.css but it gives the same result as my SASS stack where I use the SASS version. The opening and closing quotes just don't get set to 4em.

ah, ok, will make a gist...

Melindrea commented

Which is why we need to see what's going on. Wait. You're adding the quote marks to the quote? That would explain it - the nice big quote marks on typeplate are generated automatically. Try the following HTML and tell me if that changes anything?

<figure>
    <blockquote>
        <p>Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue.</p>
    </blockquote>
    <figcaption>Voornaam Naam, Jobtitle - Bedrijf</figcaption>
</figure>
moonbeetle commented

OK, I got it working and it was something stupid. I copy/pasted the HTML code snippet from the typeplate website into SublimeText and for some reason the hyphen in class="pull-quote" was not good, though it appeared correctly. hm, not sure if this is a Safary copy/paste bug. Anyway, thanks for taking the time looking into this, got it working.

Melindrea commented

I think it's a fairly common copy/paste bug, glad that you got it working correctly. =)

grayghostvisuals commented

stupid internet! glad this was solved. thanks for the help @Melindrea

Melindrea commented

:hat_tip: