Images in general content pages

[marcguyer]

From @JSurigao:

Wondering how I might go about adding a couple logos to the the education page(s). Or is that something you guys would need to do? I've attached the Ivy Tech CLL and IUCU logos. The program is presented in partnership with Ivy Tech CLL and IUCU is a sponsor of that program.

[marcguyer]

I've gone ahead and edited the Education page content to add these imgs. I also took the liberty of resizing the CLL logo to match the width of the IUCU logo. It's all in this commit: 7e9a419. It's nothing more than markdown adding the images to the content. I used markdown's reference-style links and image sources since they're used in multiple places there...

Adding images to a general content page (not a show or event) is unprecedented in the site. So, there's no responsive CSS or any other convention for how this sort of thing gets displayed. I've just sized the images so they're reasonable for the web and shoved them into the content. Maybe you'd like something different?

@mattbatman perhaps we could add a simple blanket CSS directive for <img> to make image widths %100 for smaller screens and leave them natural for large screens. Or, whatever you think is best in this case. (What about retina screens?)

[mattbatman]

I'll do more with this, but for now I just quickly added a max-width of 100% to all images to prevent them from exceeding the size of their container/parent. This at least restricts the size of those images on small screen sizes to not exceed their container, which will not exceed the size of the screen.

Also, I updated npm, post-css, and node-sass. So, run npm install the next time you pull. Also, if you aren't yet at at least npm version 5, run npm i -g npm. Version 5 was a big upgrade for npm. It introduced lock files and is notably faster.