New Design Assets + Templates

[mjallday]

@dmdj03 do you have time to review this?

Steps to view it:

• go into wherever you have the blog repo
• git remote add cholo git@github.com:cholo/balanced.github.com.git
• git fetch cholo && git checkout cholo/new-design
• jekyll build --safe
• jekyll serve
• open a browser and go to http://localhost:4000/

[dmdj03]

Hi @cholo

Here's my feedback: -the dates should all be black including the first one -move “news and insights…” description up a bit so it is vertically centered with “BLOG” -move calendar year, “2013” down a bit so it is vertically centered within the tab -remove text hover for blog posts; apply rollover behavior to images (black overlay @15% transparency, roll over to 0%) -drop shadow goes above each text block -remove side drop shadows -your current max width is 1800 px. Can you make that 1020px.

I’ll include some images for you to place in the layout.

[dmdj03]

[cholo]

@dmdj03 @mjallday Forgot to comment to bring the updates to your attention. The images have been added to the layout along with the other specified items.

[dmdj03]

@cholo - it's getting there :)

A couple of more comments:

• Use the wider, 1020px version of the image for the top post • When the window is being scaled, the images should always extend to the edge of its container without skewing the picture; there's currently gray gaps in between • Missing example of a post that spans 2 columns in the 1020px view • Before you jump from 3 columns to 1 column layout, there should be a 2 column view • The horizontal black rule at the top - do not extend beyond 1020px • Move blog title text up a bit so that it could accommodate 4 lines of text while leaving room for padding space below • For the alternating text backgrounds of white and light gray, change the white to gray2 (#DFDEDC), alternating between #F4F3EF and #DFDEDC

[cholo]

Hi @dmdj03,

Made changes to apply the latest changes/updates you've just specified a day ago.

Notes:

• The 2x wider list-items would occur every 7 items via nth-child styling
• The breakpoint for the new 2 column layout is 480px

[mjallday]

@dmdj03 is this good to go now?

[dmdj03]

@cholo - just a few more comments:

• The 2-column span post (Customer Profile: Wanderable) should be match the height of two 1-column posts. Looks like it's a bit shorter than the post next to it. • Move the text for the year (2013) a bit lower so it is vertically centered with the left facing arrow next to it • Instead of doing a top align for the date and name of the post, can you vertically center them? A blog title with one line is floating way above the date right now. • Change the blog titles to 'NimbusSanNov-sembol' • Add a hover for the background of each blog title. The text remains the same but the background gray changes to #BCBBB6 on hover. Both the image and the background of the text should change at the same time whether you are hovering over the image of the date/title area. • As I'm scaling the window down, I notice that some titles are cut off

• The other thing we're missing is the blog post page itself

[dmdj03]

@cholo - also looks like we need larger/higher res images especially when viewing the 1-column layout

[cholo]

Hi @dmdj03,

Here are my comments/notes regarding the latest round. Screenshots attached for some items:

• The "Wanderable" entry appeared shortened because the image provided was not of the same scale as the rest. I forced resize through Photoshop (if you prefer - just provide me a higher but correct resolution/scale)
• Appears to be vertically centered on Firefox, Chrome, IE. Needs more clarification.
• Done.
• Done.
• Done.
• It works fine overall but some flashing occurs because Masonry.js is still calculating the item height and positioning. Masonry.js is necessary to fill in the gaps with the inclusion of the "double-column items" on 1024 max-resolution. We can have a smoother scale if we remove Masonry.js but this means we'll take out the "double-column item" in the 4-column layout.
• Individual Blog Entry HTML/CSS has been provided since first batch of uploads. Please check your url to see if you're still loading from localhost:4000 on your machine > my set-up links out to the live blog (hence the production styling)
• Thanks. Still missing images for "2013-02-28" and correct image resolution/scale for "2013-05-13". Manually adjusted through Photoshop (see #1)

[dmdj03]

Hi @cholo,

• For the blog post hover, can we switch the behavior for the images, without any black overlay to begin with. The hover adds the black opacity. That way, both text background and image are darkening when hovering instead of the image lightening and the text background darkening. • The calendar text looks off centered in Chrome on OS. • Footer text for copyright and Balanced name should be in 'NimbusSanNovCon-Med' • The 'Balanced' link at the top within the text "news and insights from the Balanced community" goes to the homepage: https://www.balancedpayments.com/ • Similar to how the homepage footer bar has links, can you add a link on the blog footer to go back to the homepage? Say 'Back to Balanced Homepage'

On the Blog entry page: • The text for "Hacker News" at the top right and "Back to Blogs" on the bottom left should be 'NimbusSanNovCon-Med', 12px • Can you format the biography copy to go in the right hand column for the author? • Can you format the subheads in the post to match the first one, "Customer Guest Post: Kindrid" for font size and color? • Change the Tweet button to this: • Missing the next post link at the bottom for the Oct 15 blog

[dmdj03]

[dmdj03]

[dmdj03]

The images on the blog entry pages should be in the 1020x340px size.

[dmdj03]

Here are the images of authors

[cholo]

Hi @dmdj03,

Uploaded all the images (posts,covers,& authors).

HTML for all of these are ready and is in place - will just need some help in populating content sections (e.g. author bio/photo) in the metadata (.md) files.

• Done • Adjustment made - is it still not in the middle? • Done • Done • This behaviour is already present in smaller resolutions (as was designed). Can you illustrate this for me if you meant something else?

On the Blog entry page: • Already using that font for these areas • This behaviour is already present in smaller resolutions (as was designed) • They have to be < h2 >. Just modify subsequent posts to mark 2x hashtags • Done. (increased the font-size in the Tweet/Hacker links to match the attached image) • It's the last entry in my localhost, too. There's no next blog item to go to hence the link is hidden. Is it supposed to go backwards?

Thanks

CC: @mjallday @gaqzi

[dmdj03]

@cholo

Blog Landing page: • The date alignment looks the same to me. As you can see, there's very little padding space above the year compared to below. • Can you also add letterspacing of 0.1em to the copyright text in the footer? • Can you also add the link back to the homepage in the footer even at the full window size?

Blog entry page: • Add 0.1em letterspacing to "Hacker News" and "Tweet" • I'm referring to this right hand column for bio information on the blogger. We're missing an image of the blogger and bio copy. • When linking to other blogs at the footer, instead of saying "Next," let's say "Previous." That's what I had meant. So now you will have a blog to link to for the first one. • Add 0.1em letterspacing to "Back to Blogs" and "Previous" wordings

[cholo]

@dmdj03 Thanks for the response

Blog Landing page:

• Increased line-height. It already looks fine on my machine but brought the text down regardless
• Done.
• Done

Blog entry page:

• Done.
• I understand. I meant that the HTML (tags & styling) is already in place. In the meantime - I put in placeholder text and image if there isn't any provided in the post Bio images are in the images folder and bio will have to be typed in. @gaqzi @mjallday might be able to help out with enabling the website to show these things.
• Done.
• Done.

[mjallday]

@cholo it's looking great, we merged in what we've got so far. are you able to have a look at #59? i suspect it's just missing a meta header but i haven't had a chance to actually spin it up on anything other than my iphone.

we'll take care of linking the images and author bios on this side, no need for you to worry about them.

[cholo]

@mjallday, Added the meta header onto the default.html template () Also added in some styling to limit all post content images to the width of the container so it doesn't overflow/exceed the page

[mjallday]

@cholo can you please create a new pull-request for this? i'll get it merged in :) never mind, i figured it out.