From 460c9b1a8bf7ca3f124eb44bb3a8d209c7d0021f Mon Sep 17 00:00:00 2001 From: Christian Kremitzl Date: Sat, 27 Apr 2019 19:19:33 +0200 Subject: [PATCH] Dynamic square layout for content-and-preview slides. --- css/theme/latex.css | 160 +++++++++++------------- css/theme/source/latex.scss | 237 +++++++++++++++--------------------- sections/german/04/04.md | 2 +- 3 files changed, 171 insertions(+), 228 deletions(-) diff --git a/css/theme/latex.css b/css/theme/latex.css index 6d2048f..75c9dee 100644 --- a/css/theme/latex.css +++ b/css/theme/latex.css @@ -1,12 +1,30 @@ -/* basic layout */ +@charset "UTF-8"; +/* tame reveal.js */ @import url("https://free.bboxtype.com/embedfonts/?family=FiraSans:300,600"); +section { + min-height: 100vh; + width: 100vw; + padding: 0 !important; } + +/* config */ +:root { + --secondary: #c8ceda; } + +/* basic layout */ +:root { + --square: 100vw; } + @media screen and (min-aspect-ratio: 1 / 1) { + :root { + --square: 50vw; } } + @media screen and (min-aspect-ratio: 2 / 1) { + :root { + --square: 100vh; } } + body { - background: red; - font-size: 1vw; - /* transition: background 1s ease; */ } + font-size: calc(0.035 * var(--square)); } body .layout-content-and-preview { display: grid; - grid-template-rows: 100vw auto; + grid-template-rows: var(--square) auto; grid-template-columns: auto; grid-template-areas: "content" "preview"; min-height: 100vh; @@ -22,46 +40,31 @@ body { display: flex; align-items: center; justify-content: center; - /* padding: 4vw; */ } + background: var(--secondary); } body .layout-content-and-preview .layout-preview img { - opacity: .5; width: auto; height: auto; - max-width: 100%; - max-height: 100%; + max-width: 90%; + max-height: 90%; box-shadow: 0.2em 0.2em 0.5em 0 rgba(0, 0, 0, 0.3); } -/* -@media screen and (min-aspect-ratio: 1/2) { - $base-unit: 0.5vh; - body { - background: orange; - .layout-content-and-preview { - grid-template-rows: 50vh auto; - grid-template-columns: auto 50vh auto; - grid-template-areas: - " . content . " - "preview preview preview"; - } - } -} -*/ @media screen and (min-aspect-ratio: 1 / 1) { body { - background: yellow; } + font-size: calc(0.035 * var(--square)); } body .layout-content-and-preview { - grid-template-rows: auto 50vw auto; - grid-template-columns: 50vw auto; + grid-template-rows: auto var(--square) auto; + grid-template-columns: var(--square) auto; grid-template-areas: " . preview" "content preview" " . preview"; } } @media screen and (min-aspect-ratio: 2 / 1) { body { - background: lime; } + font-size: calc(0.035 * var(--square)); } body .layout-content-and-preview { - grid-template-rows: 100vh; - grid-template-columns: 100vh auto; + grid-template-rows: var(--square); + grid-template-columns: var(--square) auto; grid-template-areas: "content preview"; } } +/* content layout */ @font-face { font-family: 'Fira Code'; src: url("../../lib/font/fira-code/FiraCode-Regular.otf"); @@ -77,68 +80,49 @@ body { margin: 0; line-height: 1.2em; } -section { - min-height: 100vh; - width: 100vw; - padding: 0 !important; } - -.layout-side-by-side { - min-width: 100vw; - max-width: 100vw; - min-height: 100vh; - max-height: 100vh; - overflow: hidden; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 12fr; - background: linear-gradient(to right, white 0%, white calc(50% - 4px), #c8ceda calc(50% - 4px), #c8ceda calc(50% + 4px), #ffffff calc(50% + 4px), #ffffff 100%); } - .layout-side-by-side .layout-title { - grid-column-end: span 2; - padding: 3.5vw calc(50% + 4vw) 0.5vw 4vw; - line-height: 1.15em; } - .layout-side-by-side .layout-content-left { +.layout-content-and-preview { + --margin: 0.1; } + .layout-content-and-preview .layout-content { overflow: auto; - padding: 4vw; } - .layout-side-by-side .layout-content-left *:first-child { + padding: calc(var(--margin) * var(--square)); } + .layout-content-and-preview .layout-content *:first-child { margin-top: 0; } - .layout-side-by-side .layout-content-right { - display: flex; - align-items: flex-start; - justify-content: center; - padding: 4vw; } - .layout-side-by-side .layout-content-right img { - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; - box-shadow: 0.2em 0.2em 0.5em 0 rgba(0, 0, 0, 0.3); } - .layout-side-by-side h2 { - margin: 0; } - .layout-side-by-side ul { - list-style-type: disc; - padding-left: 0; } - .layout-side-by-side ul ul { - padding-left: 2vw; } - .layout-side-by-side pre { - margin-left: -4vw; - padding-left: 4vw; - line-height: 1.2em; - position: relative; - overflow: hidden; } - .layout-side-by-side pre::before { - content: attr(data-sourcefile); - position: absolute; - top: .3em; - left: calc(1.5vw - 100%); - width: 100%; - text-align: right; - transform: rotate(-90deg); - transform-origin: 100% 50%; - color: #cccccc; } - .layout-side-by-side code { + .layout-content-and-preview .layout-content .layout-title { + padding: calc(0.3 * var(--margin) * var(--square)) 0; + line-height: 1.15em; } + .layout-content-and-preview .layout-content .layout-title h2 { + margin: 0; } + .layout-content-and-preview .layout-content ul { + list-style-type: none; + padding-left: 0; + position: relative; } + .layout-content-and-preview .layout-content ul li::before { + content: '▪'; + color: var(--secondary); + position: absolute; + left: calc(-0.33 * var(--margin) * var(--square)); } + .layout-content-and-preview .layout-content ul ul { + margin-left: calc(0.33 * var(--margin) * var(--square)); } + .layout-content-and-preview .layout-content pre { + margin-left: calc(-1 * var(--margin) * var(--square)); + padding-left: calc(var(--margin) * var(--square)); + line-height: 1.2em; + position: relative; + overflow: hidden; } + .layout-content-and-preview .layout-content pre::before { + content: attr(data-sourcefile); + position: absolute; + text-align: right; + color: var(--secondary); + top: .85em; + width: 100%; + left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square)); + transform-origin: top right; + transform: rotate(-90deg); } + .layout-content-and-preview code { font-size: 0.9em; font-family: 'Fira Code'; } - .layout-side-by-side code.hljs { + .layout-content-and-preview code.hljs { padding: .3em 0; } .layout.layout-chapter-heading { diff --git a/css/theme/source/latex.scss b/css/theme/source/latex.scss index e303d32..6d87953 100644 --- a/css/theme/source/latex.scss +++ b/css/theme/source/latex.scss @@ -1,19 +1,35 @@ +/* tame reveal.js */ +section { + min-height: 100vh; + width: 100vw; + padding: 0 !important; +} + +/* config */ +:root { + --secondary: #c8ceda; +} + /* basic layout */ +:root { + --square: 100vw; + @media screen and (min-aspect-ratio: 1/1) { + --square: 50vw; + } + @media screen and (min-aspect-ratio: 2/1) { + --square: 100vh; + } +} -$base-unit: 1vw; body { - background: red; - font-size: $base-unit; - - - /* transition: background 1s ease; */ + font-size: calc(0.035 * var(--square)); .layout-content-and-preview { display: grid; - grid-template-rows: 100vw auto; + grid-template-rows: var(--square) auto; grid-template-columns: auto; grid-template-areas: - "content" - "preview"; + "content" + "preview"; min-height: 100vh; max-height: 100vh; min-width: 100vw; @@ -28,40 +44,23 @@ body { display: flex; align-items: center; justify-content: center; - /* padding: 4vw; */ + background: var(--secondary); img { - opacity: .5; width: auto; height: auto; - max-width: 100%; - max-height: 100%; + max-width: 90%; + max-height: 90%; box-shadow: .2em .2em .5em 0 rgba(0, 0, 0, .3); } } } } -/* -@media screen and (min-aspect-ratio: 1/2) { - $base-unit: 0.5vh; - body { - background: orange; - .layout-content-and-preview { - grid-template-rows: 50vh auto; - grid-template-columns: auto 50vh auto; - grid-template-areas: - " . content . " - "preview preview preview"; - } - } -} -*/ @media screen and (min-aspect-ratio: 1/1) { - $base-unit: 0.5vw; body { - background: yellow; + font-size: calc(0.035 * var(--square)); .layout-content-and-preview { - grid-template-rows: auto 50vw auto; - grid-template-columns: 50vw auto; + grid-template-rows: auto var(--square) auto; + grid-template-columns: var(--square) auto; grid-template-areas: " . preview" "content preview" @@ -70,138 +69,98 @@ body { } } @media screen and (min-aspect-ratio: 2/1) { - $base-unit: 1vh; body { - background: lime; + font-size: calc(0.035 * var(--square)); .layout-content-and-preview { - grid-template-rows: 100vh; - grid-template-columns: 100vh auto; + grid-template-rows: var(--square); + grid-template-columns: var(--square) auto; grid-template-areas: "content preview"; } } } - - +/* content layout */ @import url('https://free.bboxtype.com/embedfonts/?family=FiraSans:300,600'); @font-face { - font-family: 'Fira Code'; - src: url('../../lib/font/fira-code/FiraCode-Regular.otf'); - font-weight: 400; + font-family: 'Fira Code'; + src: url('../../lib/font/fira-code/FiraCode-Regular.otf'); + font-weight: 400; } @font-face { - font-family: 'Fira Code'; - src: url('../../lib/font/fira-code/FiraCode-Bold.otf'); - font-weight: 700; + font-family: 'Fira Code'; + src: url('../../lib/font/fira-code/FiraCode-Bold.otf'); + font-weight: 700; } - - body { - font-family: 'Fira Sans'; - margin: 0; - line-height: 1.2em; - // font-size: 1.7vw; + font-family: 'Fira Sans'; + margin: 0; + line-height: 1.2em; } -@media screen and (screen-orientation: landscape) { - body { - // font-size: 3.5vh; - } -} +.layout-content-and-preview { + --margin: 0.1; -section { - min-height: 100vh; - width: 100vw; - padding: 0 !important; -} + .layout-content { + overflow: auto; + padding: calc(var(--margin) * var(--square)); -.layout-side-by-side { - $backgroundColor: #c8ceda; - $stripHalfWidth: 4px; + *:first-child { + margin-top: 0; + } - min-width: 100vw; - max-width: 100vw; - min-height: 100vh; - max-height: 100vh; - overflow: hidden; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 12fr; - // background: linear-gradient(to right, $backgroundColor 0%, $backgroundColor 50%, #ffffff 50%, #ffffff 100%); - background: linear-gradient(to right, white 0%, white calc(50% - #{$stripHalfWidth}), $backgroundColor calc(50% - #{$stripHalfWidth}), $backgroundColor calc(50% + #{$stripHalfWidth}), #ffffff calc(50% + #{$stripHalfWidth}), #ffffff 100%); + .layout-title { + padding: calc(0.3 * var(--margin) * var(--square)) 0; + line-height: 1.15em; - .layout-title { - grid-column-end: span 2; - padding: 3.5vw calc(50% + 4vw) 0.5vw 4vw; - line-height: 1.15em; - } + h2 { + margin: 0; + } + } - .layout-content-left { - overflow: auto; - padding: 4vw; + ul { + list-style-type: none; + padding-left: 0; + position: relative; + li::before { + content: '▪'; + color: var(--secondary); + position: absolute; + left: calc(-0.33 * var(--margin) * var(--square)); + } + ul { + margin-left: calc(0.33 * var(--margin) * var(--square)); + } + } - *:first-child { - margin-top: 0 - } - } + pre { + margin-left: calc(-1 * var(--margin) * var(--square)); + padding-left: calc(var(--margin) * var(--square)); + line-height: 1.2em; + position: relative; + overflow: hidden; + &::before { + content: attr(data-sourcefile); + position: absolute; + text-align: right; + color: var(--secondary); + top: .85em; + width: 100%; + left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square)); + transform-origin: top right; + transform: rotate(-90deg); + } - .layout-content-right { - display: flex; - align-items: flex-start; - justify-content: center; - padding: 4vw; + code { + font-size: 0.9em; + font-family: 'Fira Code'; + } - img { - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; - box-shadow: .2em .2em .5em 0 rgba(0, 0, 0, .3); - } - } - - h2 { - margin: 0; - } - - ul { - list-style-type: disc; - padding-left: 0; - ul { - padding-left: 2vw; - } - } - - pre { - margin-left: -4vw; - padding-left: 4vw; - line-height: 1.2em; - position: relative; - overflow: hidden; - - &::before { - content: attr(data-sourcefile); - position: absolute; - top: .3em; - left: calc(1.5vw - 100%); - width: 100%; - text-align: right; - transform: rotate(-90deg); - transform-origin: 100% 50%; - color: #cccccc; - } - } - - code { - font-size: 0.9em; - font-family: 'Fira Code'; - } - - code.hljs { - padding: .3em 0; - } + code.hljs { + padding: .3em 0; + } + } } .layout.layout-chapter-heading { diff --git a/sections/german/04/04.md b/sections/german/04/04.md index 2f9991e..09e0215 100644 --- a/sections/german/04/04.md +++ b/sections/german/04/04.md @@ -21,7 +21,7 @@ Ein größeres LaTeX-Projekt anlegen und dabei ...
  • enthält Grundgerüst, Titelei, etc.
  • bindet einzelne Kapitel ein mit