About Page & Fancybox / Portfolio Template

[mayamcdougall]

Reissuing this PR since @PhrozenByte goofed. 😉

View the current page at:
http://smcdougall.github.io/Pico/about/

Old Discussion at: #349

---

• Remove "Expert Webmaster".
  • Keep "But what does that even mean"?
• Bottleneck on large sites, Overkill on small sites.
• Workflow gallery should tell a story.
  • Add index.twig and DummyPlugin.php screenshots.
• Use theme images from Customization Redesign & Portfolio #358.
• Link to Markdown basics and syntax.
• For Markdown example, use actual content, italics, bold, links, images, lists, and headings.
• Dashes for dates.
• Actual content for YAML to match Markdown.
  • Revise Content
  • Remember to reuse this example for a tutorial later on.
• Associative array of social links and multi-line description examples for YAML.
  • Add social buttons to content-sample.
    • See bf1663c
    • Add this idea to the cookbook. (Or at least make a proper note for later).
• Add a line about "stupidly simple" applying to Pico's code base as well (customization section, see Why Pico? #355).
• Remove "Themes" quotes.
• Remove "Theme" from all themes and file names, same as planned for Customization Redesign & Portfolio #358.
• Add more themes, like Identity and Clean Blog.
  • Remove Simple Sidebar.
• Expand Plugin Section with Details.
• Add a note (or more) about Pico being Open Source and MIT licensed!
• "Blazing fast" should be mentioned in the "not a turn-key" section.
• Add a line about overcomplicated CMS interfaces.
• Restore accidentally removed CSS chunk.
• Remove redundant image versions.
• Compare and merge Fancybox styles with original styles.

[mayamcdougall]

So, I've integrated all of the duplicate styles back into their original sections, and I've moved everything else that was necessary up into the relevant sections.

The only items that haven't been merged above are the things I'm still working through.

These remaining styles have to do with the "standalone" gallery. Most of it relates to an ugly hack that I'd like to improve, but I'm not sure how to.

Think back to before the carousel, when the images were just arranged side-by-side on the page.

By making the standalone items "inline-block", I somehow introduced a small amount of space at the bottom, where the div was a few pixels bigger than the image. This causes the green overlay to hang over the bottom, and I think it also slightly effects the positioning of the hourglass in it's style as well.

My "ugly hack" was to remove all line height from the containing div (.fancybox), then manually define the line height within the overlay div (.overlay).

I don't see a reason to hold back this PR because of it, but I'm probably going to attach some kind of "ugly hack" note to it when I move it up into the regular section. Maybe a line that reminds us / tells a future person to reference #352 for details.

[mayamcdougall]

Done? Maybe? lol.

Let me know if you find anything that needs to be fixed. Otherwise... I guess this is awaiting review. 😄

Unbelievable that this has taken almost three months to finalize. Especially when most of the written content was done in the first few commits.

Sometimes it's crazy how small projects like this can scale up once you get going.

[PhrozenByte]

Don't forget to update these links in #358 😉

[mayamcdougall]

Update About page URLs

It's been on my to-do list over there for awhile now. 😃

[PhrozenByte]

I've read through everything, absolutely great work, it's just perfect! 👍 😃 🎉

Can you please fix the two remaining CSS bugs (see comments above)? I'm not sure how to replace #fancybox-thumbs li { margin: initial; }, when using margin: 0 the thumbnails break into multiple lines, when removing the rule altogether they overlap...

I'll merge this PR afterwards. Again, great work! 👍

[mayamcdougall]

Okay, I'll get those two sections fixed in the next few minutes (unless that margin thing causes issues).

[mayamcdougall]

Yeah, the overlap was what I made this style to solve. It's a style applied to li elsewhere on the site.

I'm not seeing any problem with margin: 0 or margin: auto. I've decided to use auto just because the point is revert it to the default. It doesn't specifically have to be 0, so auto seemed like the correct choice.

[PhrozenByte]

All good things are worth waiting for 😆 Again, amazing work, thank you @smcdougall! 👍 🎉

[PhrozenByte]

@smcdougall, what do you think about adding a large "Learn more" button on both the start page and our README.md linking to your about page (suggestions are very welcome 😆)?

[mayamcdougall]

Thanks. I've been happy to help. Hopefully this page will help bring even more users to Pico. 😄

Personally, it's a good time for me to have this finished...

This Wednesday will be the last day at my current job, and so the current "Productivity time" that I have will be going away. For the moment, I'm taking up my old (retail) job, that way I don't miss a paycheck.

This means I'm going to have a bit less time to work with the Pico project every week, but in no way means that I'm going away. After all, I've still got plenty of "projects" around here to work on. 😉

I'll probably still be watching GitHub like a hawk, but if I happen to disappear for a few days at a time, I've likely just been busy with work and I'll be back soon. 😅

[mayamcdougall]

what do you think about adding a large "Learn more" button

Sure, why not. 😄

[mayamcdougall]

By "start page" do you mean the landing page (eg picocms.org)?

How large of a button? Something that fits in or something large and flashy like a starburst in the corner?

Got to go for now, but let me know what you've got in mind. 😄

[PhrozenByte]

Personally, it's a good time for me to have this finished...

Ok, thanks for letting me know. May you do well in your new/old job! 👍 😃

Got to go for now, but let me know what you've got in mind. 😄

Something like 1bf1570 and e59d2d1. Any suggestions (especially for the README.md, I did not have an idea how to link to both the landing and about page)?

[mayamcdougall]

May you do well in your new/old job! 👍 😃

Thanks. It's going well so far, but I am not used to working this hard anymore. My first real day was quite the workout (:dizzy_face:), but it felt pretty good.

Hmm... how about this for the readme:

Pico is a stupidly simple, blazing fast, flat file CMS.

Visit us at http://picocms.org and see http://picocms.org/about/ for more info.

[mayamcdougall]

Glad you approve. 😃 👍

[PhrozenByte]

Sure 😃