// ROOT ======================================================= // TYPOGRAPHY ================================================= // TEXTURE ==================================================== // ELEMENTS =================================================== // LAYOUT ===================================================== .site-name { .grid(12,2); .prefix(12,0.5); .suffix(12,0.5); } .top-navigation { .grid(12,9); .prefix(12,0); .suffix(12,0); } .image-wrap .headline-wrap, .image-wrap:after { left: 25%; } .image-wrap .headline-wrap { margin-left: 0; } .image-credit { .grid(12,9); .prefix(12,0); .suffix(12,0); } #main article { .grid(12,6); .prefix(12,0); .suffix(12,0); } #index { .grid(12,6); .prefix(12,0); .suffix(12,0); } .footer-wrap footer { .grid(12,6); .prefix(12,3); .suffix(12,3); } .article-author-side { display: block; .grid(12,2); .prefix(12,0.5); .suffix(12,0.5); h3, .bio-photo, p, .author-social { display: block; max-width: 125px; margin: auto; } h3 { margin-top: 10px; margin-bottom: 10px; } p { margin-bottom: 20px; } .author-social { margin-bottom: 5px; } } .article-author-bottom { display: none; } .toc { display: block; .grid(12,2); .prefix(12,0.5); .suffix(12,0.5); position: absolute; top: 5.5em; right: 0; .box-shadow(0 0 5px rgba(0,0,0,.50)); } .image-grid { li { width: 25%; } } .related-articles { .grid(12,6); .prefix(12,3); .suffix(12,3); } // VENDOR-SPECIFIC ============================================