Navigation Menu

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

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 LordAro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
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
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
Copy link
Contributor Author

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

@auge8472
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.

Copy link
Member

@LordAro LordAro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
@auge8472 auge8472 deleted the blogarticle branch June 7, 2019 07:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants