@function mobile-columns($left-margin, $right-margin) {
$s1: $left-margin; $s3: $right-margin; // IDK if it'll work when $s1, $s3 // are specified in units other than vw $s2: 100vw - $s1 - $s3; @return $s1 $s2 $s3;
}
@function full-columns($page-width, $logo-width, $left-margin, $right-margin) {
$s1: $left-margin; $s2: $logo-width - $left-margin; $s3: $page-width - $s1 - $s2 - $right-margin; $s4: $right-margin; @return $s1 $s2 $s3 $s4;
}
.site-logo {
grid-area: site-logo;
}
.site-title {
grid-area: site-title;
}
.site-description {
grid-area: site-description;
}
.site-contacts {
grid-area: contacts;
}
.site-navigation {
grid-area: navigation;
}
.site-footer {
grid-area: footer;
}
.site-content {
grid-area: content; display: flex; flex-direction: column; max-width: 100%;
}
.site-comments {
grid-area: comments;
}
@media(max-width: $tablet-width) {
$left-margin: 2vw; $right-margin: 2vw; .site-container { margin: 0; display: grid; justify-content: center; justify-items: center; grid-template-columns: mobile-columns($left-margin, $right-margin); grid-template-rows: minmax(2rem, min-content) minmax(2rem, min-content) minmax(2rem, min-content) minmax(2rem, min-content) minmax(2rem, min-content) minmax(2rem, auto) minmax(8rem, min-content) minmax(2rem, auto); grid-template-areas: " site-logo site-logo site-logo" " site-title site-title site-title" " site-description site-description site-description" " contacts contacts contacts" " navigation navigation navigation" " left-margin content right-margin " " left-margin footer right-margin " " left-margin comments right-margin "; } .site-logo { display: flex; flex-direction: row; justify-content: center; width: 100%; } .site-logo > img { width: 100%; flex-shrink: 0; } .site-description { text-align: center; } .site-content { margin-left: 2vw; margin-right: 2vw; } .site-contacts { justify-content: center; }
}
@media(min-width: $tablet-width) {
.site-container { margin-top: 0; margin-bottom: 0; overflow-y: scroll; display: grid; justify-content: center; grid-template-columns: full-columns($page-width, $logo-width, $left-margin, $right-margin); grid-template-rows: min-content min-content min-content minmax(2rem, min-content) minmax(2rem, auto) minmax(8rem, min-content) minmax(2rem, auto); grid-template-areas: " site-logo site-logo site-title site-title " " site-logo site-logo site-description site-description " " site-logo site-logo contacts contacts " " navigation navigation navigation navigation " " left-margin content content right-margin " " left-margin footer footer right-margin " " left-margin comments comments right-margin "; } .site-logo { display: flex; flex-direction: column; justify-content: center; } .site-title { padding-left: $logo-title-margin; } .site-logo > img { width: $logo-width; flex-shrink: 0; } .site-contacts { justify-content: flex-start; padding-left: $logo-title-margin; } .site-description { padding-left: $logo-title-margin; }
}
.site-title {
display: flex; justify-content: flex-start;
}
.site-description {
margin-bottom: 1rem; width: 100%;
}
.site-navigation {
display: flex; flex-flow: row wrap; justify-content: space-evenly; align-content: center; width: 100%; max-width: 100vw;
}
.site-navigation > * {
text-decoration: none; margin-right: 1rem;
}
.site-contacts {
display: flex; flex-flow: row wrap; align-items: space-between; align-content: center; width: 100%;
}
.site-contacts > * {
text-decoration: none; margin-right: 1rem;
}
.article-header {
text-align: center; margin-bottom: 4rem;
}
.site-comments {
width: 100%; display: block;
}