malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Use grid template areas for sidebar layout

Browse Source
This commit is contained in:
Tetrakern 2024-08-10 20:44:36 +02:00
parent d41e4a46b2
commit f9207651e0
3 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

19
src/scss/_sidebar.scss
View File

@ -84,24 +84,15 @@
} }
} }
} }
.fictioneer-sidebar._layout {
order: 2;
@include bp(desktop) {
order: 1;
}
}
} }
&.has-sidebar-right { &.has-sidebar-right {
.main { .main {
grid-template-columns: 1fr calc(var(--sidebar-width) + var(--layout-spacing-horizontal)); grid-template-columns: 1fr calc(var(--sidebar-width) + var(--layout-spacing-horizontal));
grid-template-areas: 'content sidebar';
} }
.main__wrapper { .main__wrapper {
order: 1;
.padding-right { .padding-right {
@include bp(desktop) { @include bp(desktop) {
padding-right: var(--sidebar-gap, 3rem); padding-right: var(--sidebar-gap, 3rem);
@ -110,8 +101,6 @@
} }
.fictioneer-sidebar._layout { .fictioneer-sidebar._layout {
order: 2;
.fictioneer-sidebar__wrapper { .fictioneer-sidebar__wrapper {
@include bp(desktop) { @include bp(desktop) {
padding: var(--layout-spacing-vertical) var(--layout-spacing-horizontal) var(--layout-spacing-vertical) 0; padding: var(--layout-spacing-vertical) var(--layout-spacing-horizontal) var(--layout-spacing-vertical) 0;
@ -141,11 +130,14 @@
@include bp(desktop) { @include bp(desktop) {
display: grid; display: grid;
grid-template-columns: calc(var(--sidebar-width) + var(--layout-spacing-horizontal)) 1fr; grid-template-columns: calc(var(--sidebar-width) + var(--layout-spacing-horizontal)) 1fr;
grid-template-areas: 'sidebar content';
min-width: calc(494px + var(--sidebar-width)); min-width: calc(494px + var(--sidebar-width));
} }
&__wrapper { &__wrapper {
grid-area: content;
flex: 1 1 auto; flex: 1 1 auto;
order: 1;
} }
} }
@ -199,6 +191,9 @@
} }
.fictioneer-sidebar._layout { .fictioneer-sidebar._layout {
grid-area: sidebar;
order: 2;
&::before { &::before {
content: ''; content: '';
display: block; display: block;