// ############################################################ // Main Grid // ############################################################
main {
// min-width: 285px; // width: 100%; // margin: 15px auto; // border-top: 1px solid #eee; 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-article" "main-sidebar" "main-footer";
}
// ============================================================ // Main Grid Areas // ============================================================
main>header {
grid-area: main-header; margin-bottom: 4rem; &>span { display: block; &>hr { width: 1rem; margin: 4rem auto 4rem 0; border: 0; text-shadow: unset; border-bottom: 1px solid #000; } }
}
main>nav {
grid-area: main-nav;
}
main>article {
grid-area: main-article; margin-bottom: 4rem;
}
main-sidebar {
grid-area: main-sidebar; section { ul { list-style: none; } }
}
main>footer {
grid-area: main-footer;
}
// ============================================================ // Main Grid Mixins // ============================================================
// ———————————————————— // Default // ———————————————————— @mixin main-default() {}
// ———————————————————— // 15px * 27 = 810px width // ———————————————————— @mixin main-810px() {
main { grid-template-columns: auto 255px; grid-template-rows: min-content min-content min-content; grid-column-gap: 0; grid-row-gap: 0; grid-template-areas: "main-header main-nav" "main-article main-sidebar" "main-article main-footer" ; } #main-sidebar { padding-top: 15px; h3 { margin-bottom: 4rem; } }
}