Finally I decided to update theme of my site. New theme is twentyfourteen, with very few custom css styling in child theme.
As a key benefit of new theme I see its responsive design, which it looks well also on mobile devices. Key mine customizations are:
- Customized logo
- Extended max-width of content – twentyfourteen has width of content some 440px, which leaves much unused space on normal screens, I extend it to double size.
To extend width of twenty fourteen I made following changes in child theme:
style.css
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: Ivan
Author URI: http://zderadicka.eu
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/
@import url("../twentyfourteen/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
/* Extending max-width */
.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
max-width: 884px;
}
.post-navigation,
.image-navigation,
.archive-header,
.page-header,
.contributor-info,
.comments-area,
.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
max-width: 884px;
}
/* compensation of extending width of content */
@media screen and (min-width: 810px) {
.attachment .entry-attachment .attachment {
margin-right: 1px;
margin-left: 0px;
max-width: 810px;
}
.attachment .site-content .attachment img {
display: block;
margin: 0 auto;
}
.contributor-avatar {
margin-left: 0px;
}
.contributor-summary {
float: left;
}
.full-width .site-content blockquote.alignleft,
.full-width .site-content blockquote.alignright {
width: -webkit-calc(50% + 130px);
width: calc(50% + 130px);
}
.full-width .site-content blockquote.alignleft,
.full-width .site-content img.size-full.alignleft,
.full-width .site-content img.size-large.alignleft,
.full-width .site-content img.size-medium.alignleft,
.full-width .site-content .wp-caption.alignleft {
margin-left: 0px;
}
.full-width .site-content .alignleft {
clear: left;
}
.full-width .site-content blockquote.alignright,
.full-width .site-content img.size-full.alignright,
.full-width .site-content img.size-large.alignright,
.full-width .site-content img.size-medium.alignright,
.full-width .site-content .wp-caption.alignright {
margin-right: 0px;
}
.full-width .site-content .alignright {
clear: right;
}
}
}
css/editor-style.css
@import url("../twentyfourteen/css/editor-style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
html .mceContentBody,
img,
.wp-caption {
max-width: 884px;
}
probably also css/ie.css should be modified, but I do not care for older IE versions.
functions.php (this is necessary to enable larger videos)
<?php
if ( ! isset( $content_width ) ) {
$content_width = 884;
}
?>