From 357245d2344f018cf7023c63a3f70637164c1379 Mon Sep 17 00:00:00 2001 From: Reorx Date: Wed, 8 Feb 2023 23:45:13 +0800 Subject: [PATCH] editor: enhance width control --- src/preview/index.html | 5 +++++ src/scss/editor/index.scss | 7 ++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/preview/index.html b/src/preview/index.html index 6b62885..cccac6b 100644 --- a/src/preview/index.html +++ b/src/preview/index.html @@ -3,6 +3,11 @@ CV +
diff --git a/src/scss/editor/index.scss b/src/scss/editor/index.scss index 7c2a203..e9736b1 100644 --- a/src/scss/editor/index.scss +++ b/src/scss/editor/index.scss @@ -7,9 +7,14 @@ button { #main { display: grid; - grid-template-columns: 150px 1fr 1fr; + grid-template-columns: 150px minmax(500px, 1fr) 1fr; grid-template-rows: 100vh; + // 800px is approximately the width of A4, when the screen is larger that 150 + 800px + A4, the middle column should keep 800px wide + @media screen and (min-width: 1750px) { + grid-template-columns: 150px 800px 1fr; + } + > .column { overflow-y: auto; }