// ############################################################ // Main Grid // ############################################################
main {
display: grid; grid-template-columns: auto; grid-template-rows: min-content min-content min-content min-content min-content; grid-column-gap: 0; grid-row-gap: 0; grid-template-areas: "main-header" "main-nav" "main-feed" "main-sidebar" "main-footer";
}
// ============================================================ // Main Grid Areas // ============================================================
main>header {
grid-area: main-header; background-color: darken($color: #fff, $amount: 2%); margin-bottom: 4rem; &>h1 { font-weight: 300; font-size: 2rem; letter-spacing: -1px; line-height: 3rem; padding: 1rem; } &>span { margin-bottom: 4rem; display: block; font-weight: 300; font-style: italic; padding-left: 3rem; &>hr { width: 1rem; margin: 4rem auto 4rem 0; border: 0; text-shadow: unset; border-bottom: 1px solid #000; } }
}
main>nav {
grid-area: main-nav;
}
grid-area: main-feed; margin-bottom: 4rem; h2 { margin-bottom: 4rem; font-weight: 900; font-size: 2rem; letter-spacing: -1px; line-height: 3rem; }
}
main-sidebar {
grid-area: main-sidebar; margin-bottom: 4rem; &>section { margin-bottom: 4rem; &>h3 { margin-bottom: 2rem; font-weight: 300; font-size: 1.4rem; line-height: 2rem; } &>ul { list-style: none; margin-left: 3rem; &>li { &>a { font-weight: 300; text-decoration: none; } } } }
}
main>footer {
grid-area: main-footer;
}
// ============================================================ // Main Grid Mixins // ============================================================
// ———————————————————— // Default // ———————————————————— @mixin main-default() {}
// ———————————————————— // 15px * 36 = 540px width // ———————————————————— @mixin main-540px() {
main { min-width: 525px; max-width: 705px; grid-template-columns: minmax(240px, 255px) minmax(285px, 450px); grid-template-rows: min-content min-content min-content min-content min-content; grid-column-gap: 1rem; grid-row-gap: 0; grid-template-areas: "main-header main-feed" "main-sidebar main-feed" "main-nav main-feed" ". main-feed" ". main-footer" ; } main>header { height: 16rem; margin-bottom: 8rem; } main>section[role=feed] { &>h2 { height: 16rem; padding: 1rem 0; border-bottom: 1px solid darken($color: #fff, $amount: 10%); margin-bottom: 8rem; } } #main-sidebar { &>section { &>h3 { margin-bottom: 4rem; } } }
}
// ———————————————————— // 15px * 57 = 855px width // ———————————————————— @mixin main-855px() {
main { min-width: 810px; max-width: 1455px; grid-column-gap: 1.5rem; }
}