Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change: HTML5-elements and corresponding CSS-rules for the blog article template #85

Merged
merged 2 commits into from Jun 6, 2019

Conversation

@auge8472
Copy link
Contributor

auge8472 commented Apr 14, 2019

As proposed in #82 the blog article template was reorganised as <article> with a <header> that contains the heading and the meta data (time and authors name) and the div.content.

Optical changes

  • the blog articles meta data got their own text line below the articles heading; this could be reset to right aligned after the rework of the whole site with a mobile aware and responsive design (stays below heading on narrow viewports and moves to the right side on wide viewports)
  • the <header> got a dotted border-bottom as separator from the articles content
  • the border of the header and also the border of the content got an a bit darker colour (#d8d8d8 instead #eee)

Further change under the hood

  • the read-more-link got an own paragraph

I kept the rules for .section-item because they are still in use on several places (see directory pages). These pages will get a rework later.

Copy link
Member

LordAro left a comment

the blog articles meta data got their own text line below the articles heading

Not a fan of this change - "temporary" never ends up quite as expected ;) Either make the responsive change in this PR, or leave them on the right

@auge8472

This comment has been minimized.

Copy link
Contributor Author

auge8472 commented May 5, 2019

the blog articles meta data got their own text line below the articles heading
Not a fan of this change

I will change it to store the meta data right of the heading as it is until now.

Please be aware that this will not work on narrow browser viewports (i.e. on smartphones) when the site gets a mobile aware layout. In the rework of the old layout this is not a problem.

@auge8472

This comment has been minimized.

Copy link
Contributor Author

auge8472 commented May 5, 2019

Short annotation: Putting the metadata to the right border of the article header is done with display: flex;. The solution works with all modern browsers (see caniuse.com for details). It would be possible to support also IE 10, but that would need a few additional special rules.

OpenTTD-website-blog-article

@auge8472

This comment has been minimized.

Copy link
Contributor Author

auge8472 commented May 12, 2019

@LordAro Would you please re-review the changes. Thank you.

@auge8472

This comment has been minimized.

Copy link
Contributor Author

auge8472 commented Jun 4, 2019

@LordAro After more than three weeks without any reaction I want to state, that I am not able to check any button or whatever other UI-element to mark the requested changes as solved. If you are interested in the code changes, you (or another team member) have to mark it by yourself. The requested changes itself are done.

@LordAro
LordAro approved these changes Jun 6, 2019
Copy link
Member

LordAro left a comment

Sorry for dropping the ball on this, it looks good

I like the flexbox usage, much nicer than floating left/right

@LordAro LordAro merged commit bd347db into OpenTTD:master Jun 6, 2019
1 check passed
1 check passed
website Build #20190505.1 succeeded
Details
@auge8472 auge8472 deleted the auge8472:blogarticle branch Jun 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.