commit: e7ac0e5d689b4566a9522d29f95984e886dd2cca
parent 71863061c691df7f59cf4be283a3e0772d485378
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 13:03:03 +0300
fix main column having wild widths
Diffstat:
1 file changed, 5 insertions(+), 7 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -91,7 +91,7 @@ nav {
.app-layout {
position: relative;
display: grid;
- grid-template-columns: auto minmax(auto, 1fr);
+ grid-template-columns: var(--miniColumn) var(--maxiColumn);
grid-template-areas: "sidebar content";
grid-template-rows: 1fr;
box-sizing: border-box;
@@ -102,8 +102,11 @@ nav {
padding: 0 10px 0 10px;
justify-content: center;
+ --miniColumn: 345px;
+ --maxiColumn: minmax(auto, 615px);
+
&.-reverse {
- grid-template-columns: minmax(auto, 1fr) auto;
+ grid-template-columns: var(--maxiColumn) var(--miniColumn);
grid-template-areas: "content sidebar";
}
}
@@ -123,16 +126,11 @@ nav {
.column {
box-sizing: border-box;
- max-width: 615px;
padding-top: 10px;
grid-row-start: 1;
grid-row-end: 1;
margin: 0 0.5em;
- &.-mini {
- max-width: 345px;
- }
-
&.-scrollable {
padding-top: 10px;
position: sticky;