// —————————— // media queries // —————————— @media screen and (max-width: 1080px) {
body { font-size: 100%; margin: 50px auto 0; width: 515px; } #blog-archives { h2 { font-size: 30.161px; } article { display: block; float: none; margin-left: 0; text-align: left; h1 { font-size: 18.441px; text-align: left; } footer { display: inline; } } }
} // —————————— @media screen and (max-width: 768px) {
body { margin: 20px auto 0; max-width: 90%; position: static; > header { float: none; margin: 0 auto; width: 100%; h1 { font-size: 24px; } [class^="icon-"], [class*=" icon-"] { height: 1.25rem; margin-bottom: -2px; width: 1.25rem; } } } #blog-archives { article { margin-left: 0; } } article > footer > a { width: 50%; }
} // —————————— @media screen and (max-width: 480px) {
html { font-size: 100%; line-height: 90%; } body { margin-top: 20px; width: 90%; } body > header { margin: 0 auto; h1, h2 { display: inline-block; } } #blog-archives { h2 { font-size: 30.161px; } article { display: block; float: none; margin-left: 0; text-align: left; h1 { font-size: 16.441px; text-align: left; } footer { display: none; } } } .blog-index > article { margin-bottom: 85.071px !important; margin-bottom: 5.016rem !important; // 4.236 + 0.452 } img#portrait { display: block; float: none; width: 200px; margin-left: auto; margin-right: auto; }
}