New style general blogposts

@timzallmann perhaps @annabeldunstone can help me out here, as she helped with the creation of the release style blogposts as well!

@timzallmann I will be adjusting the styles in this branch, to have a decent H1 to H6 restyling. After that I will assign it to you.

https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/6041 had been touched up after feedback, so its basically merging this one in to that one, perhaps adjusting the date of the blogpost and merge!

mentioned in issue #1480

@dimitrieh sure! What do you need help with?

As a side note- please remember to compress your images with tinypng! The pictures look nice but they're all pretty large

Changes included will introduce a 1.250 major third modular scale (from http://type-scale.com/ ), see commits

Also added a test suite, aside from my own blogpost

added 1 commit

09bb53a8 - introduce a 1.250 major third modular type scale

Compare with previous version

added 1 commit

3ab0be28 - small linting changes

Compare with previous version

changed the description

marked the checklist item https://gitlab.com/gitlab-com/www-gitlab-com/issues/1480 will require a decent set of H1 to H6 restyling, which looks great with body text. as completed

As a side note- please remember to compress your images with tinypng! The pictures look nice but they're all pretty large

@annabeldunstone good one! will do that in the original blogpost merge request/branch https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/6041

What do you need help with?

Awesome Please read this first:

As discussed with @marcia @timzallmann we will implement a first revision into improving the overall blogpost style used on about.gitlab.com/blog.

The way we will do this is by doing a second UX and Frontend revision on the stylistic css changes introduced in https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/6041.

These changes will merge into the branch of https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/6041. After that it will be merged into master.

So I just added the type styling to this MR. So basically the extra_css which I included in my blogpost, needs to become the default styling for all blogposts.

My code gets the job done, but is prob not up to standards (hack hack hack :P )

Could you get that done?

assigned to @annabeldunstone

@dimitrieh can we separate this a bit? Maybe merge your blog post in the way you want it, and then do a proper refactor to update all blog posts to the new styles.

With regressions and the navigation redesign for this release, I'm worried I won't be able to do all of this at once. It'd be easier if things were broken up a bit

As discussed with @marcia @timzallmann we will implement a first revision into improving the overall blogpost style used on about.gitlab.com/blog.

@annabeldunstone I would be all for that, but this has been discussed with @timzallmann @marcia . The idea is to get this merged within one week. I just said that you might be a good fit, I don't know if you have the time :). Who is ultimately appointed to this is up to @timzallmann .. so I will assign to him ;)

assigned to @timzallmann

Thanks @dimitrieh; I read the quoted text the first time . I'm simply offering what I thought would be a cleaner approach.

added 1 commit

288de1e8 - additional linting fixes

Compare with previous version

thanks @annabeldunstone :)

@timzallmann it's all yours! linting should be fixed

@dimitrieh I suggest you distribute vertically the 3 items over the hero on mobile (author/date, title, description):

Also @dimitrieh, I thought we would split your original MR in 2:

One for the post content (and handbook updates) (branch 1)
Another one for the styles (branch 2)

Then we would merge branch 2 into 1, then merge 1 into master.

It's a little bit overwhelming to perform both CSS and content reviews in one MR ;)

assigned to @dimitrieh

I suggest you distribute vertically the 3 items over the hero on mobile (author/date, title, description):

@marcia I am against this, as there is a gradient from the bottom of the cover image, that does not stretch across the entire image.. which makes the white text readable, even on light images. I think it's fine as is.

Also I would like not to make to many stylistic changes anymore.. Let's get this style transferred to be the main style of the blog, after which we can improve upon it in smaller additional steps.

It's a little bit overwhelming to perform both CSS and content reviews in one MR ;)

@marcia this branch is basically a copy of the branch i made for my blogpost. My blogpost is not to be edited by this mr perse, but rather act as a good testing usecase. So this shouldn't matter imo.

@marcia Also I see you assigned to me. I assigned to @timzallmann to find a proper Frontend in order to implement this to be the default blogstyle, instead of me.

assigned to @timzallmann

mentioned in merge request !6041 (merged)

@dimitrieh

My blogpost is not to be edited by this mr perse, but rather act as a good testing usecase. So this shouldn't matter imo. ...

this branch is basically a copy of the branch i made for my blogpost.

To have a practical idea about how your styling changes will affect other blog posts, instead of having tons of images, handbook updates, and the blog post itself in one single MR, we'd agreed to split it in 2 MRs, one with your content, and another one with the styles. It doesn't make a lot of sense to me to having exactly the same content in both branches.

I suggest you remove your blog post and handbook updates from here (they're in the original MR) and add here a template blog post with samples of the markup we already use. Like, each h1>h6, images, videos, lists, toc, and custom classes (note, alert, gitlab-orange, alert-webcast, embed tweets, etc). With this, we'll try to make sure we're not breaking anything. We'll remove the template before we merge.

Also, please make sure your styles aren't in a custom CSS, but in the general blog stylesheet, otherwise we don't solve the problem that we talked about in our call, which is having 3 different styles for one single blog.

Also I see you assigned to me

Yes, I did assign it to you so you could separate the content from the styles. ;)

changed the description

changed target branch from master to dimitrie-travel-blog-post

To have a practical idea about how your styling changes will affect other blog posts, instead of having tons of images, handbook updates, and the blog post itself in one single MR, we'd agreed to split it in 2 MRs, one with your content, and another one with the styles. It doesn't make a lot of sense to me to having exactly the same content in both branches.

@marcia sorry for the confusion.. this merge request was configured to merge with master.. which it shouldn't.. therefore you would see all the changes.. instead of only the changes this mr will provide on top of my mr/branch! This should be fixed now, see the changes tab

I suggest you remove your blog post and handbook updates from here (they're in the original MR) and add here a template blog post with samples of the markup we already use. Like, each h1>h6, images, videos, lists, toc, and custom classes (note, alert, gitlab-orange, alert-webcast, embed tweets, etc). With this, we'll try to make sure we're not breaking anything. We'll remove the template before we merge.

@marcia This is already there to some degree, see https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/6490/diffs#3e1cf1ca6e7db22ce38c54feb26bbb29d453e2a2 would you mind editing it so it includes everything you say?

Also, please make sure your styles aren't in a custom CSS, but in the general blog stylesheet, otherwise we don't solve the problem that we talked about in our call, which is having 3 different styles for one single blog.

This is exactly what I asked @timzallmann to provide an actual Frontend developer for :) As I want to avoid doing double work, like last time. Everything is already there.. it should just be converted to the default css.

Hope this clears things up :)

@timzallmann let's aim to merge this ultimately Wednesday the 28th of June :) (next week wednesday)

assigned to @jivanvl

@jivanvl assigned it to you :D

@jivanvl nice! there are a few things left to be adjusted though!

Release blog post styles are now messed up :) (they should not be changed in any way by the changes we make with this merge request) - example
Body background color should be changed to full white.
I think the .cover height must be set to 61.8vh instead of 70vh
.shadow img class can be improved to have box-shadow: 0 1px 8px rgba(0,0,0,0.15)

@dimitrieh

Release blog post styles are now messed up :) (they should not be changed in any way by the changes we make with this merge request) - example

Here's the thing lots of things got overwritten since I took the rules and how they were changed by there-and-back-again-in-one-release.css. I need to find out how to fix this, otherwise I might have to revert the cover image rules

@jivanvl this is why i requested help from Frontend

@jivanvl thanks for taking this! :)

Here's the thing lots of things got overwritten since I took the rules and how they were changed by there-and-back-again-in-one-release.css. I need to find out how to fix this, otherwise I might have to revert the cover image rules

What if you remove the custom styles for the cover image for the release post (the scss file), so that it has the same layout as default blog posts?

Also, what if instead of applying the width to the body, apply it to a new class that wraps the content? Maybe it's a workaround?

What about all the other weird stuff in the release posts (body width, images, etc)?

Actually, the cover is broken for different cases, not only for release posts:

https://new-style-general-blogposts.about.gitlab.com/2017/05/17/learning-curve-is-the-biggest-challenge-developers-face-with-git/

Also, the content width is disproportional on a widescreen (1920) ^

i think that as the release post blog style is a custom style built upon the default blogpost styles we have 2 options:

make the default blogposts how we like, and adjust the release blogpost styles upon those
separate the styles.. so one cannot touch the other.

@jivanvl what do you think a probable deadline for this MR would be? We want this merged asap.. but i feel this needs a littlebit more time..

@marcia In that sense @marcia if this is going to take up a lot of time.. i'd rather merge https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/6041 with the extra css file in it.. then let it be blocked any longer due to this MR. If we complete this MR, we will delete the extra css anyway.

@dimitrieh If this is really urgent, we can proceed with !6041 (merged) and from there cleanup the CSS afterwards, although I have some concerns that the design with the cleaned up CSS might not match 100% what you currently have in this MR.

What do you think?

@jivanvl the idea is to improve.. and match as closely as possible. But the more this delays, the more we pressing it becomes to decouple this from my original MR, while we have this merge request to fix it up.

cc: @marcia

as i think it will need so back and forth to get this mr right.

Ok, I think we can simplify stuff here to reach our goal. I think the biggest changes are the cover image hero (with the parallax effect), and having the image class to add images in heroes throughout the post. Perhaps we can stick with that for this first iteration @dimitrieh and merge your post based on that? Unless they break anything else.

WDYT Dimitrie and @jivanvl?

@marcia no let's not take that route here please. It would put things in an undesired half state. We have a fine alternative, which is shippable to booth. Let's work this merge request out like it's supposed to be.. while we ship my original merge request. Yes we will have one blogpost that is slightly different from the rest, but it also acts as a pilot for how people like it, plus it will only be so.. until this merge request has been solved.

I am going to take a last look at my original MR, see if it needs last minute changes.. and then let's ship it.

Meanwhile @jivanvl can work on this MR.. with a reasonable deadline.. as in the coming week a lot of pressure will build up on him due to the merge freeze. (so let's say 4-5 days after the freeze)

@dimitrieh Good call, although my cutoff date is shorter (because I'm off starting the 5th)

Also like you mentioned we might have to go back and forth a couple of times to get everything the way we want it to be

I think the .cover height must be set to 61.8vh instead of 70vh

mentioned in issue #1518

@jivanvl i think we must reconfigure this MR to be based on master once again ;) now that https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/6041 is merged. also perhaps rebase etc. clean it up a little as the mr's are now decoupled

changed target branch from dimitrie-travel-blog-post to master

Reconfigured ^^

@jivanvl how are we doing here? :)

changed the description

@dimitrieh I'm catching up after all of my TODO's after my vacation, I'm back full force on this one, will let you know how it goes (and ask for feedback as well )

added 1585 commits

c458e467...8249e632 - 1558 commits from branch master
fc30274e - first revision of blogpost covering dimitrie's trip to india, cambodia and taiwan
77cde058 - Next iteration of Dimitrie's travel story, now including Cambodia and Taiwan
153e161b - fixing small typo's of to=too and 1,5=1.5
a4a25714 - @reprazent comments fixes
6693936c - custom blogpost style and various other small edits, plus added a photo
a418a184 - improved callout style in custom blog post styling
2f52b368 - next iteration, many improvements, including addition of photos, adding of…
912a585e - added final pictures, edited more content and js
f8f2f336 - changed title
9adf5339 - added mexico summit blog link
3b92460b - added template link
e1cf493b - linting fixes
4dea21f1 - minor content edits
be690b85 - added tips on traveling and working remotely abroad handbook section
bdcdf0be - changed release date to June 20th 2017
584a0e93 - added mobile viewport optimisations
d085d474 - shifted media queries by 1 step
8da98241 - small styling fix for mobile wrapper header
e8001228 - additional small beauty fix for callout section
8fd69d77 - made .vista classed images a little bit more powerfull by giving them a higher z-index
ef908993 - change any gitlab's to GitLab's
1dfd790d - changed image links to either full fledged images or bootstrap carousels,…
3e6342f4 - fix linting bug with too many levels
85a05d4c - introduce a 1.250 major third modular type scale
95acc605 - small linting changes
c0f4e63b - additional linting fixes
a0167456 - Moved the rulesets from there-and-back-again.scss to _blog.scss

Compare with previous version

@dimitrieh Had to revert some of the changes and create a new commit (I called the same after all it does the same thing )

Can you take a look? I think this turned out to be a better iteration

Thanks @jivanvl for your hard work on this! this version is looking quite good! looks superbe for normal blogposts! :)

However i think the hard part is also to adjust the release blogpost styling, to not change based on these changes. Excited in any case!

@dimitrieh Yeah I'll take a look at the "before" and "after", to see what can be adjusted

New style general blogposts

What will happen

What needs to be done

Activity

Admin message

Admin message

New style general blogposts

What will happen

What needs to be done

Merge request reports

Activity