@media(min-width: 48em) { html,body { -webkit-text-size-adjust: 100%; // iOS font-size: 16px; box-direction: normal; } .sidebar { bottom: 0; left: 0; position: fixed; text-align: left; top: 0; width: 18rem; } .sidebar-sticky { left: 1rem; position: absolute; right: 1rem; top: 1rem; } .content { margin-left: 20rem; margin-right: 2rem; max-width: 38rem; } .layout-reverse { .sidebar { left: auto; right: 0; } .content { margin-left: 2rem; margin-right: 20rem; } } } @media(min-width: 58em) { html,body { text-size-adjust: none; font-size: 17px; font-weight: 400; line-height: 1.611em; // golden ratio } } .content { padding-bottom: 2rem; padding-top: 2rem; } @media(min-width: 64em) { .content { margin-left: 20rem; margin-right: 2rem; max-width: 46.056rem; } .layout-reverse .content { margin-left: 4rem; margin-right: 22rem; } } @media(max-width: 48rem) { .hidden-tablet { display: none; } } .element--center { display: block; margin-left: auto; margin-right: auto; } .section__title { font-size: $section__title-font-size; } .post-list__item { margin-bottom: 3em; } .item__title--big { display: block; font-size: $item__title-big-font-size; line-height: 1.25; } .item__title--small { font-size: 1rem; } .item__date { color: $item__date-color; display: block; font-size: $item__date-font-size; margin-bottom: .2rem; margin-top: .2rem; } #references~ol { font-size: .9rem; }