diff --git a/css/theme/latex.css b/css/theme/latex.css index 75c9dee..5c6be37 100644 --- a/css/theme/latex.css +++ b/css/theme/latex.css @@ -21,48 +21,55 @@ section { --square: 100vh; } } body { - font-size: calc(0.035 * var(--square)); } - body .layout-content-and-preview { + font-size: calc(0.035 * var(--square)); + background: black; } + body .layout-content-and-preview, + body .layout-content-only { display: grid; - grid-template-rows: var(--square) auto; - grid-template-columns: auto; - grid-template-areas: "content" "preview"; min-height: 100vh; max-height: 100vh; min-width: 100vw; max-width: 100vw; overflow: auto; } - body .layout-content-and-preview .layout-content { - background: white; - grid-area: content; } - body .layout-content-and-preview .layout-preview { - grid-area: preview; - display: flex; - align-items: center; - justify-content: center; - background: var(--secondary); } - body .layout-content-and-preview .layout-preview img { - width: auto; - height: auto; - 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 / 1) { - body { - font-size: calc(0.035 * var(--square)); } - body .layout-content-and-preview { - 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 { - font-size: calc(0.035 * var(--square)); } - body .layout-content-and-preview { - grid-template-rows: var(--square); - grid-template-columns: var(--square) auto; - grid-template-areas: "content preview"; } } + body .layout-content-and-preview { + grid-template-rows: var(--square) auto; + grid-template-columns: auto; + grid-template-areas: "content" "preview"; } + @media screen and (min-aspect-ratio: 1 / 1) { + body .layout-content-and-preview { + 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 .layout-content-and-preview { + grid-template-rows: var(--square); + grid-template-columns: var(--square) auto; + grid-template-areas: "content preview"; } } + body .layout-content-only { + grid-template-rows: var(--square) auto; + grid-template-columns: var(--square); + grid-template-areas: "content" " . "; } + @media screen and (min-aspect-ratio: 1 / 1) { + body .layout-content-only { + grid-template-rows: auto var(--square) auto; + grid-template-columns: auto var(--square) auto; + grid-template-areas: ". . ." ". content ." ". . ."; } } + body .layout-content { + background: white; + grid-area: content; + position: relative; } + body .layout-preview { + grid-area: preview; + display: flex; + align-items: center; + justify-content: center; + background: var(--secondary); } + body .layout-preview img { + width: auto; + height: auto; + max-width: 90%; + max-height: 90%; + box-shadow: 0.2em 0.2em 0.5em 0 rgba(0, 0, 0, 0.3); } /* content layout */ @font-face { @@ -80,36 +87,46 @@ body { margin: 0; line-height: 1.2em; } -.layout-content-and-preview { +.layout-content-and-preview, +.layout-content-only { --margin: 0.1; } - .layout-content-and-preview .layout-content { + .layout-content-and-preview .layout-content, + .layout-content-only .layout-content { overflow: auto; padding: calc(var(--margin) * var(--square)); } - .layout-content-and-preview .layout-content *:first-child { + .layout-content-and-preview .layout-content *:first-child, + .layout-content-only .layout-content *:first-child { margin-top: 0; } - .layout-content-and-preview .layout-content .layout-title { + .layout-content-and-preview .layout-content .layout-title, + .layout-content-only .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 { + .layout-content-and-preview .layout-content .layout-title h2, + .layout-content-only .layout-content .layout-title h2 { margin: 0; } - .layout-content-and-preview .layout-content ul { + .layout-content-and-preview .layout-content ul, + .layout-content-only .layout-content ul { list-style-type: none; padding-left: 0; position: relative; } - .layout-content-and-preview .layout-content ul li::before { + .layout-content-and-preview .layout-content ul li::before, + .layout-content-only .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 { + .layout-content-and-preview .layout-content ul ul, + .layout-content-only .layout-content ul ul { margin-left: calc(0.33 * var(--margin) * var(--square)); } - .layout-content-and-preview .layout-content pre { + .layout-content-and-preview .layout-content pre, + .layout-content-only .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 { + .layout-content-and-preview .layout-content pre::before, + .layout-content-only .layout-content pre::before { content: attr(data-sourcefile); position: absolute; text-align: right; @@ -119,11 +136,13 @@ body { 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-content-and-preview code.hljs { - padding: .3em 0; } + .layout-content-and-preview .layout-content code, + .layout-content-only .layout-content code { + font-size: 0.9em; + font-family: 'Fira Code'; } + .layout-content-and-preview .layout-content code.hljs, + .layout-content-only .layout-content code.hljs { + padding: .3em 0; } .layout.layout-chapter-heading { height: 100vh; @@ -137,4 +156,11 @@ body { bottom: calc(38.2% - .5em); } h1 { - font-size: 300%; } + position: absolute; + font-size: 300%; + bottom: 0; + left: 0; + line-height: 115%; + vertical-align: bottom; + max-width: var(--square); + padding: 0 calc(var(--margin) * var(--square)) 0.5em; } diff --git a/css/theme/source/latex.scss b/css/theme/source/latex.scss index 6d87953..1710b01 100644 --- a/css/theme/source/latex.scss +++ b/css/theme/source/latex.scss @@ -1,8 +1,8 @@ /* tame reveal.js */ section { - min-height: 100vh; - width: 100vw; - padding: 0 !important; + min-height: 100vh; + width: 100vw; + padding: 0 !important; } /* config */ @@ -23,42 +23,25 @@ section { body { font-size: calc(0.035 * var(--square)); - .layout-content-and-preview { + background: black; + + .layout-content-and-preview, + .layout-content-only { display: grid; - grid-template-rows: var(--square) auto; - grid-template-columns: auto; - grid-template-areas: - "content" - "preview"; min-height: 100vh; max-height: 100vh; min-width: 100vw; max-width: 100vw; overflow: auto; - .layout-content { - background: white; - grid-area: content; - } - .layout-preview { - grid-area: preview; - display: flex; - align-items: center; - justify-content: center; - background: var(--secondary); - img { - width: auto; - height: auto; - max-width: 90%; - max-height: 90%; - box-shadow: .2em .2em .5em 0 rgba(0, 0, 0, .3); - } - } } -} -@media screen and (min-aspect-ratio: 1/1) { - body { - font-size: calc(0.035 * var(--square)); - .layout-content-and-preview { + + .layout-content-and-preview { + grid-template-rows: var(--square) auto; + grid-template-columns: auto; + grid-template-areas: + "content" + "preview"; + @media screen and (min-aspect-ratio: 1/1) { grid-template-rows: auto var(--square) auto; grid-template-columns: var(--square) auto; grid-template-areas: @@ -66,18 +49,50 @@ body { "content preview" " . preview"; } - } -} -@media screen and (min-aspect-ratio: 2/1) { - body { - font-size: calc(0.035 * var(--square)); - .layout-content-and-preview { + @media screen and (min-aspect-ratio: 2/1) { grid-template-rows: var(--square); grid-template-columns: var(--square) auto; grid-template-areas: "content preview"; } } + + .layout-content-only { + grid-template-rows: var(--square) auto; + grid-template-columns: var(--square); + grid-template-areas: + "content" + " . "; + @media screen and (min-aspect-ratio: 1/1) { + grid-template-rows: auto var(--square) auto; + grid-template-columns: auto var(--square) auto; + grid-template-areas: + ". . ." + ". content ." + ". . ."; + } + } + + .layout-content { + background: white; + grid-area: content; + position: relative; + } + + .layout-preview { + grid-area: preview; + display: flex; + align-items: center; + justify-content: center; + background: var(--secondary); + img { + width: auto; + height: auto; + max-width: 90%; + max-height: 90%; + box-shadow: .2em .2em .5em 0 rgba(0, 0, 0, .3); + } + } } /* content layout */ @@ -99,7 +114,8 @@ body { line-height: 1.2em; } -.layout-content-and-preview { +.layout-content-and-preview, +.layout-content-only { --margin: 0.1; .layout-content { @@ -150,31 +166,40 @@ body { left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square)); transform-origin: top right; transform: rotate(-90deg); + } } code { font-size: 0.9em; font-family: 'Fira Code'; - } - - code.hljs { - padding: .3em 0; + &.hljs { + padding: .3em 0; + } } } } .layout.layout-chapter-heading { - height: 100vh; - width: 100vw; - position: relative; + height: 100vh; + width: 100vw; + position: relative; - .layout-title { - position: absolute; - left: 2vw; - width: calc(100vw - 4vw); - text-align: center; - bottom: calc(38.2% - .5em); - } + .layout-title { + position: absolute; + left: 2vw; + width: calc(100vw - 4vw); + text-align: center; + bottom: calc(38.2% - .5em); + } } -h1 { font-size: 300%; } +h1 { + position: absolute; + font-size: 300%; + bottom: 0; + left: 0; + line-height: 115%; + vertical-align: bottom; + max-width: var(--square); + padding: 0 calc(var(--margin) * var(--square)) .5em; +} diff --git a/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Bold.eot b/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Bold.eot new file mode 100644 index 0000000..e661db7 Binary files /dev/null and b/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Bold.eot differ diff --git a/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Light.eot b/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Light.eot new file mode 100644 index 0000000..387cb65 Binary files /dev/null and b/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Light.eot differ diff --git a/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Medium.eot b/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Medium.eot new file mode 100644 index 0000000..8713972 Binary files /dev/null and b/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Medium.eot differ diff --git a/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Regular.eot b/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Regular.eot new file mode 100644 index 0000000..cef458e Binary files /dev/null and b/lib/font/fira-code/FiraCode_1.206/eot/FiraCode-Regular.eot differ diff --git a/lib/font/fira-code/FiraCode_1.206/fira_code.css b/lib/font/fira-code/FiraCode_1.206/fira_code.css new file mode 100644 index 0000000..f8e4a5b --- /dev/null +++ b/lib/font/fira-code/FiraCode_1.206/fira_code.css @@ -0,0 +1,43 @@ +@font-face{ + font-family: 'Fira Code'; + src: url('eot/FiraCode-Light.eot'); + src: url('eot/FiraCode-Light.eot') format('embedded-opentype'), + url('woff2/FiraCode-Light.woff2') format('woff2'), + url('woff/FiraCode-Light.woff') format('woff'), + url('ttf/FiraCode-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +@font-face{ + font-family: 'Fira Code'; + src: url('eot/FiraCode-Regular.eot'); + src: url('eot/FiraCode-Regular.eot') format('embedded-opentype'), + url('woff2/FiraCode-Regular.woff2') format('woff2'), + url('woff/FiraCode-Regular.woff') format('woff'), + url('ttf/FiraCode-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face{ + font-family: 'Fira Code'; + src: url('eot/FiraCode-Medium.eot'); + src: url('eot/FiraCode-Medium.eot') format('embedded-opentype'), + url('woff2/FiraCode-Medium.woff2') format('woff2'), + url('woff/FiraCode-Medium.woff') format('woff'), + url('ttf/FiraCode-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} + +@font-face{ + font-family: 'Fira Code'; + src: url('eot/FiraCode-Bold.eot'); + src: url('eot/FiraCode-Bold.eot') format('embedded-opentype'), + url('woff2/FiraCode-Bold.woff2') format('woff2'), + url('woff/FiraCode-Bold.woff') format('woff'), + url('ttf/FiraCode-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} \ No newline at end of file diff --git a/lib/font/fira-code/FiraCode_1.206/specimen.html b/lib/font/fira-code/FiraCode_1.206/specimen.html new file mode 100644 index 0000000..4ee2cf9 --- /dev/null +++ b/lib/font/fira-code/FiraCode_1.206/specimen.html @@ -0,0 +1,65 @@ + + +
+ + +Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.
-bar+
bar
+
Ein größeres LaTeX-Projekt anlegen und dabei …
+\input{filename.tex} oder\include{filename}\input{filename.tex} oder\include{filename}\documentclass{article}
+ \documentclass{article}
\usepackage[ngerman]{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\begin{document}
- \maketitle
- \tableofcontents
- \input{abschnitt1.tex}
- \input{abschnitt2.tex}
-\end{document}
-
-
-\section{Dies ist Abschnitt1}
+Hier ein Absatz zum
+Inhalt von Abschnitt 1.
+