search

typeplate / typeplate.github.io

Official Website for Typeplate: “A Typographic Starter Kit.”
http://typeplate.com
Other
1.35k stars 109 forks source link

Cannot get the pull quotes styles as on the typeplate website #125

Closed moonbeetle closed 10 years ago

moonbeetle commented 10 years ago

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 10 years ago

What does your HTML look like?

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

moonbeetle commented 10 years ago

<!DOCTYPE html>

"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 10 years ago

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

moonbeetle commented 10 years ago

I get the same result whether I use

or
Melindrea commented 10 years ago

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 10 years ago

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 10 years ago

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

grayghostvisuals commented 10 years ago

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

Melindrea commented 10 years ago

:hat_tip: