search

sprblm / devs-guide-to

Repo for 'dev's guide to...' resource for USABLE Tools topics resources
http://sprblm.github.io/devs-guide-to/
Creative Commons Zero v1.0 Universal
8 stars 6 forks source link

Improve 'pull quote' styling - add a coloured bg to the text for contrast #78

Closed Erioldoesdesign closed 2 years ago

Erioldoesdesign commented 2 years ago

The current pull quote style in the Hugo template isn't very visually striking or different to the body text:

Screenshot 2022-08-15 at 11 19 35

I think the twitter shortcode style works better for pullquotes:

Screenshot 2022-08-15 at 11 20 50

Test out the twitter shortcode style for the style of the 'pull quote'. See if a border and a bg colour make them more 'standout'

Erioldoesdesign commented 2 years ago

@oilsinwater hey Phillip, I dunno if this is as simple as copy pasting the style from the twitter shortcode into the pull quote style block but I also don't wanna lose the original pull quote code. i kind of want a 'pullquote 2' style that uses the twitter shortcode style. Any clue how this is done without breaking hugo? lol

oilsinwater commented 2 years ago

@Erioldoesdesign The blockquote is styled via the theme (/theme/terminal/assets/css/main.css), and doesn't appear to me to be shortcode. So indeed, I think we can make a twitter shortcode (or other variants if you wish) that won't interfere with the theme's styling of that blockquote element.

I'll get started on testing that asap. And sorry for that lag-time!!

oilsinwater commented 2 years ago

image

@Erioldoesdesign please see #82. Thanks again for being so patient. I'm testing out the shortcode in content/planning-and-operations.md with the pullquote you're referencing here.

Within the shortcode I've added some padding and margins, attempting to stay within the current theme with the background color...left margin seems tight though but lmk. Also if you actually wanted the orange color let me know, too 😸