twentyfifteencss

@media screen and (min-width: 59.6875em) {
    body:before {
        width: 23%; /* 29.4118%; */ - sidebar white background width
    }
    .sidebar {
        max-width: 300px; /* 413px; */ - sidebar text area width
        width: 23%; /* 29.4118%; */
    }
    .site-header {
        margin: 10% 0; /* 20% 0; */ - padding/margin of the sidebar text area
        padding: 0 10%; /* 0 20%; */
    }
    .site-content {
        margin-left: 23%; /* 29.4118%; */ - marging of the gray area from the left edge
        width: 77%; /* 70.5882%; */ - the gray area width
    }
    .site-main {
        padding: 5% 0; /* 8.3333% 0; */ - height of the top gray bar
    }
    .hentry {
        padding-top: 5%; /* 8.3333%; */ - text height from the top gray bar
    }
    .hentry,
    .page-header,
    .page-content {
        margin: 0 5%; /* 0 8.3333%; */ - gray bars width
    }
    .hentry + .hentry,
    .page-header + .hentry,
    .page-header + .page-content {
        margin-top: 5%; /* 8.3333%; */ - gray bars width
    }
    .page-content {
        padding: 5%; /* 8.3333%; */ - gray bars width
    }

    .entry-header {
        padding: 0 5%; /* 0 10%; */ - main title width
    }
    .entry-content,
    .entry-summary {
        padding: 0 5% 5%; /* 0 10% 10%; */ - text width to gray bars
    }
    .comments-area {
        margin: 5% 5% 0; /* 8.3333% 8.3333% 0; */
        padding: 5%; /* 8.3333%; */ - comments gray bars width
    }
    .post-navigation {
        margin: 5% 5% 0; /* 8.3333% 8.3333% 0; */ - old posts gray bars
    }
    .site-footer {
        margin: 0 0 0 27%; /* 0 0 0 35.2941%; */ - indent from the left edge of the footer
        width: 69%; /* 58.8235%; */ - footer width
    }
    .site-info {
        padding: 5% 5%; /* 5% 10%; */ - text indent from the footer edges
    }
    .post-navigation a {
        padding: 5% 5%; /* 5% 10%; */
    }
}

@media screen and (min-width: 38.75em) {
    .site-main {
        padding: 5% 0; /* 7.6923% 0; */ - top gray bar height
    }
    .hentry,
    .page-header,
    .page-content {
        margin: 0 5%; /* 0 7.6923%; */ - lateral gray bars width
    }
}