68 lines
1.3 KiB
SCSS
68 lines
1.3 KiB
SCSS
@use 'sass:color';
|
|
@use '../../theme';
|
|
@use '../../mixins';
|
|
|
|
%_SiteContent {
|
|
$_SiteContent-backgroundColor: color.adjust(theme.$neutral-50, $alpha: -0.5);
|
|
|
|
padding: theme.$spacer-s;
|
|
margin: theme.$spacer-3xs;
|
|
background-color: $_SiteContent-backgroundColor;
|
|
}
|
|
|
|
.Site {
|
|
display: grid;
|
|
grid-template:
|
|
'Site-info Site-content Site-nav' 2fr
|
|
'Site-social Site-content Site-nav' 2fr
|
|
'Site-social Site-content Site-subNav' 3fr
|
|
'Site-title Site-title Site-title' 2fr
|
|
/ 1fr 3fr 1fr;
|
|
max-block-size: 100vb;
|
|
max-inline-size: 100vi;
|
|
padding: theme.$spacer-4xl;
|
|
|
|
&-title {
|
|
grid-area: Site-title;
|
|
justify-self: end;
|
|
padding-inline-end: theme.$spacer-s;
|
|
font-family: theme.$fontFamily--display;
|
|
font-size: theme.$fontSize-6;
|
|
font-weight: normal;
|
|
}
|
|
|
|
&-nav {
|
|
@extend %_SiteContent;
|
|
|
|
--Site-nav-gridArea: Site-nav / Site-nav / Site-subNav / Site-nav;
|
|
|
|
grid-area: var(--Site-nav-gridArea);
|
|
}
|
|
|
|
&-subNav {
|
|
@extend %_SiteContent;
|
|
|
|
grid-area: Site-subNav;
|
|
}
|
|
|
|
&-content {
|
|
@extend %_SiteContent;
|
|
@include mixins.flow;
|
|
|
|
grid-area: Site-content;
|
|
padding: theme.$spacer-m;
|
|
overflow: auto;
|
|
}
|
|
|
|
&-info {
|
|
@extend %_SiteContent;
|
|
|
|
grid-area: Site-info;
|
|
}
|
|
|
|
&-social {
|
|
@extend %_SiteContent;
|
|
|
|
grid-area: Site-social;
|
|
}
|
|
}
|