// ############################################################ // Article Grid // ############################################################
article {
display: grid; grid-template-columns: minmax(285px, 450px); grid-template-rows: min-content min-content min-content min-content auto min-content min-content; grid-column-gap: 0; grid-row-gap: 0; grid-template-areas: "article-figure" "article-header" "article-meta" "article-content" "article-nav" "article-aside" "article-footer" ;
}
// ============================================================ // Article Grid Areas // ============================================================
article>figure {
grid-area: article-figure; min-width: 240px; max-width: 750px; margin-bottom: 2rem; display: flex; flex-direction: column; justify-content: flex-start; &>a { padding-bottom: unset; border-bottom: unset; &>canvas { background: #000; } &>img { width: 100%; border-top: 1px solid #ddd; filter: drop-shadow(0 0 15px #eee); } } &>figcaption { text-align: center; font-weight: 300; margin-top: 2rem; }
}
article>header {
grid-area: article-header; border-left: 1px solid #ccc; margin-bottom: 4rem; h1 { -moz-font-feature-settings: "salt"2; -webkit-font-feature-settings: "salt"2; font-feature-settings: "salt"2; font-weight: 300; font-size: 2rem; letter-spacing: -1px; line-height: 3rem; padding: 1rem; }
}
article.meta {
grid-area: article-meta;
}
article>nav {
grid-area: article-nav; &>ul { list-style: none; }
}
article>div.content {
grid-area: article-content; min-width: 285px; max-width: 450px; &>section { margin-right: 1rem; max-width: 450px; margin: 4rem 0; a { text-decoration: none; } &>h2 { margin: 4rem 0; font-weight: 900; font-size: 2rem; letter-spacing: -1px; line-height: 3rem; } &>h2:first-child { margin-top: 1rem; } &>h3 { margin: 2rem 0; font-weight: 700; font-size: 1rem; line-height: 2rem; } &>p { margin: 1rem 0; } &>p:first-child { margin-top: 0; background-color: #eee; padding: 1rem; margin-bottom: 4rem; } &>hr { width: 1rem; margin: 4rem 0 4rem auto; border: 0; text-shadow: unset; border-bottom: 1px solid #aaa; } &>ul { list-style: none; margin-bottom: 1rem; &>li { display: flex; >div { display: flex; flex-direction: column; } } &>li:before { margin-right: 1rem; content: "-"; font-weight: 600; } } &>ol { list-style: none; margin-bottom: 1rem; &>li:first-child { counter-reset: element; } &>li:before { margin-right: 1rem; content: counter(element) "."; counter-increment: element; font-weight: 600; } &>li { display: flex; &>div { display: flex; flex-direction: column; &>ol { &>li:first-child { counter-reset: subelement; } &>li:before { content: counter(element) "."counter(subelement) ""; counter-increment: subelement; } } } } &>li:after { padding-left: 1rem; } } &>dl { margin: 1rem 0; &>dt { font-weight: bold; } &>dd { margin: 1rem 0 1rem 2rem; } } } &>section:first-child { margin-top: 0; }
}
article>aside {
grid-area: article-aside; min-width: 240px; max-width: 255px; border-left: 1px solid #ccc; margin-bottom: 2rem; &>section { &>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; } } } }
}
article>footer {
grid-area: article-footer; min-width: 240px; max-width: 255px;
}
// ============================================================ // Article Grid Mixins // ============================================================
// ———————————————————— // Default // ———————————————————— @mixin article-default() {}
// ———————————————————— // 15px * 36 = 540px width // ———————————————————— @mixin article-540px() {
article { 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 min-content min-content min-content min-content; grid-column-gap: 1rem; grid-row-gap: 0; grid-template-areas: "article-header article-content" "article-figure article-content" "article-aside article-content" "article-meta article-content" ". article-content" ". article-content" ". article-footer" ". article-nav" ; } article>header { height: 16rem; margin-bottom: 2rem; } article>div.content { &>section { &>p:first-child { height: 16rem; margin-bottom: 8rem; } } } article>aside { padding-right: 1rem; border-right: 1px solid #eee; }
}
// ———————————————————— // 15px * 57 = 810px width // ———————————————————— @mixin article-855px() {
article { min-width: 855px; max-width: 1455px; grid-template-columns: minmax(240px, 255px) minmax(285px, 450px) minmax(285px, 750px); grid-template-rows: min-content min-content min-content min-content min-content; grid-column-gap: 1.5rem; grid-row-gap: 0; grid-template-areas: "article-header article-content article-figure" "article-aside article-content article-figure" "article-meta article-content article-figure" ". article-footer article-footer" ". article-nav article-nav" ; }
}