Hugo-theme-stack/assets/scss/grid.scss

99 lines
1.9 KiB
SCSS
Raw Normal View History

2020-09-23 07:20:18 -04:00
.container {
margin-left: auto;
margin-right: auto;
.left-sidebar {
max-width: var(--left-sidebar-max-width);
}
2020-09-23 07:20:18 -04:00
.right-sidebar {
max-width: var(--right-sidebar-max-width);
2020-09-23 07:20:18 -04:00
/// Display right sidebar when min-width: lg
@include respond(lg) {
2022-03-03 17:11:19 -05:00
display: flex;
2020-09-23 07:20:18 -04:00
}
}
2020-09-23 07:20:18 -04:00
&.extended {
@include respond(md) {
max-width: 1024px;
--left-sidebar-max-width: 25%;
--right-sidebar-max-width: 30%;
}
2020-09-23 07:20:18 -04:00
@include respond(lg) {
max-width: 1280px;
--left-sidebar-max-width: 20%;
--right-sidebar-max-width: 30%;
2020-09-23 07:20:18 -04:00
}
@include respond(xl) {
2020-09-23 07:20:18 -04:00
max-width: 1536px;
--left-sidebar-max-width: 15%;
--right-sidebar-max-width: 25%;
2020-09-23 07:20:18 -04:00
}
}
&.compact {
@include respond(md) {
--left-sidebar-max-width: 25%;
max-width: 768px;
2020-09-23 07:20:18 -04:00
}
@include respond(lg) {
max-width: 1024px;
--left-sidebar-max-width: 20%;
2020-09-23 07:20:18 -04:00
}
@include respond(xl) {
max-width: 1280px;
2020-09-23 07:20:18 -04:00
}
}
}
.flex {
display: flex;
flex-direction: row;
&.column {
flex-direction: column;
}
&.on-phone--column {
flex-direction: column;
@include respond(md) {
flex-direction: unset;
2020-09-23 07:20:18 -04:00
}
}
.full-width {
width: 100%;
}
}
main.main {
min-width: 0;
max-width: 100%;
flex-grow: 1;
2022-03-03 17:11:19 -05:00
display: flex;
flex-direction: column;
gap: var(--section-separation);
@include respond(md) {
padding-top: var(--main-top-padding);
}
2020-09-23 07:20:18 -04:00
}
.main-container {
min-height: 100vh;
align-items: flex-start;
padding: 0 15px;
2022-03-03 17:11:19 -05:00
gap: var(--section-separation);
padding-top: var(--main-top-padding);
@include respond(md) {
padding: 0 20px;
}
}