refactor
This commit is contained in:
parent
3e7e31d4a9
commit
017061a46c
20
src/App.scss
20
src/App.scss
|
@ -182,7 +182,7 @@ nav {
|
||||||
|
|
||||||
.app-layout {
|
.app-layout {
|
||||||
--miniColumn: 25rem;
|
--miniColumn: 25rem;
|
||||||
--maxiColumn: minmax(var(--miniColumn), 45rem);
|
--maxiColumn: 45rem;
|
||||||
--columnGap: 1em;
|
--columnGap: 1em;
|
||||||
--status-margin: 0.75em;
|
--status-margin: 0.75em;
|
||||||
|
|
||||||
|
@ -192,7 +192,7 @@ nav {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns:
|
grid-template-columns:
|
||||||
var(--sidebarColumnWidth, var(--miniColumn))
|
var(--sidebarColumnWidth, var(--miniColumn))
|
||||||
var(--effectiveContentColumnWidth);
|
minmax(var(--contentColumnWidth, var(--maxiColumn), var(--sidebarColumnWidth, var(--miniColumn))));
|
||||||
grid-template-areas: "sidebar content";
|
grid-template-areas: "sidebar content";
|
||||||
grid-template-rows: 1fr;
|
grid-template-rows: 1fr;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -287,23 +287,23 @@ nav {
|
||||||
|
|
||||||
&.-reverse:not(.-wide):not(.-mobile) {
|
&.-reverse:not(.-wide):not(.-mobile) {
|
||||||
grid-template-columns:
|
grid-template-columns:
|
||||||
var(--effectiveContentColumnWidth)
|
minmax(var(--contentColumnWidth, var(--maxiColumn), var(--sidebarColumnWidth, var(--miniColumn))))
|
||||||
minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
|
var(--sidebarColumnWidth, var(--miniColumn));
|
||||||
grid-template-areas: "content sidebar";
|
grid-template-areas: "content sidebar";
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-wide {
|
&.-wide {
|
||||||
grid-template-columns:
|
grid-template-columns:
|
||||||
minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)))
|
var(--sidebarColumnWidth, var(--miniColumn))
|
||||||
var(--effectiveContentColumnWidth)
|
minmax(var(--contentColumnWidth, var(--maxiColumn), var(--sidebarColumnWidth, var(--miniColumn))))
|
||||||
minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
|
var(--notifsColumnWidth, var(--miniColumn));
|
||||||
grid-template-areas: "sidebar content notifs";
|
grid-template-areas: "sidebar content notifs";
|
||||||
|
|
||||||
&.-reverse {
|
&.-reverse {
|
||||||
grid-template-columns:
|
grid-template-columns:
|
||||||
minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)))
|
var(--notifsColumnWidth, var(--miniColumn))
|
||||||
var(--effectiveContentColumnWidth)
|
minmax(var(--contentColumnWidth, var(--maxiColumn), var(--sidebarColumnWidth, var(--miniColumn))))
|
||||||
minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
|
var(--sidebarColumnWidth, var(--miniColumn));
|
||||||
grid-template-areas: "notifs content sidebar";
|
grid-template-areas: "notifs content sidebar";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue