Add preview only layout.

This commit is contained in:
Kremitzl 2019-05-06 14:43:34 +02:00
parent 0434c71f91
commit d20577c72d
2 changed files with 16 additions and 2 deletions

View File

@ -29,7 +29,8 @@ section {
body { body {
font-size: calc(0.035 * var(--square)); } font-size: calc(0.035 * var(--square)); }
body .layout-content-and-preview, body .layout-content-and-preview,
body .layout-content-only { body .layout-content-only,
body .layout-preview-only {
display: grid; display: grid;
min-height: 100vh; min-height: 100vh;
max-height: 100vh; max-height: 100vh;
@ -63,6 +64,11 @@ body {
grid-template-columns: auto var(--square) auto; grid-template-columns: auto var(--square) auto;
grid-template-areas: ". . ." ". content ." ". . ."; grid-template-areas: ". . ." ". content ." ". . .";
background: linear-gradient(to right, var(--secondary) 0%, var(--secondary) calc((100% - var(--square)) / 2), white calc((100% - var(--square)) / 2), white calc(100% - (100% - var(--square)) / 2), var(--secondary) calc(100% - (100% - var(--square)) / 2), var(--secondary) 100%); } } background: linear-gradient(to right, var(--secondary) 0%, var(--secondary) calc((100% - var(--square)) / 2), white calc((100% - var(--square)) / 2), white calc(100% - (100% - var(--square)) / 2), var(--secondary) calc(100% - (100% - var(--square)) / 2), var(--secondary) 100%); } }
body .layout-preview-only {
grid-template-rows: auto;
grid-template-columns: auto;
grid-template-areas: "preview";
background: var(--secondary); }
body .layout-content { body .layout-content {
background: white; background: white;
grid-area: content; grid-area: content;

View File

@ -32,7 +32,8 @@ body {
font-size: calc(0.035 * var(--square)); font-size: calc(0.035 * var(--square));
.layout-content-and-preview, .layout-content-and-preview,
.layout-content-only { .layout-content-only,
.layout-preview-only {
display: grid; display: grid;
min-height: 100vh; min-height: 100vh;
max-height: 100vh; max-height: 100vh;
@ -93,6 +94,13 @@ body {
} }
} }
.layout-preview-only {
grid-template-rows: auto;
grid-template-columns: auto;
grid-template-areas: "preview";
background: var(--secondary);
}
.layout-content { .layout-content {
background: white; background: white;
grid-area: content; grid-area: content;