From 3e7e31d4a98f4cbdfdd3c92d952e58616c027beb Mon Sep 17 00:00:00 2001 From: Alexander Tumin Date: Sun, 5 Jun 2022 17:10:44 +0300 Subject: Allow column width configuration Group column configuration in settings Column width configuration: do not act on defaults --- src/App.scss | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) (limited to 'src/App.scss') diff --git a/src/App.scss b/src/App.scss index ab025d63..0aa28933 100644 --- a/src/App.scss +++ b/src/App.scss @@ -186,9 +186,13 @@ nav { --columnGap: 1em; --status-margin: 0.75em; + --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn))); + position: relative; display: grid; - grid-template-columns: var(--miniColumn) var(--maxiColumn); + grid-template-columns: + var(--sidebarColumnWidth, var(--miniColumn)) + var(--effectiveContentColumnWidth); grid-template-areas: "sidebar content"; grid-template-rows: 1fr; box-sizing: border-box; @@ -282,15 +286,24 @@ nav { } &.-reverse:not(.-wide):not(.-mobile) { - grid-template-columns: var(--maxiColumn) var(--miniColumn); + grid-template-columns: + var(--effectiveContentColumnWidth) + minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); grid-template-areas: "content sidebar"; } &.-wide { - grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn); + grid-template-columns: + minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))) + var(--effectiveContentColumnWidth) + minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))); grid-template-areas: "sidebar content notifs"; &.-reverse { + grid-template-columns: + minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))) + var(--effectiveContentColumnWidth) + minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); grid-template-areas: "notifs content sidebar"; } } -- cgit v1.2.3-70-g09d2