From ec37177d2b946944c17b11359836387431f6cd07 Mon Sep 17 00:00:00 2001 From: Christian Kremitzl Date: Mon, 29 Apr 2019 14:21:58 +0200 Subject: [PATCH] Dynamic square adaptions. --- css/theme/latex.css | 18 ++++++++++-------- css/theme/source/latex.scss | 20 +++++++++++++++++--- index.html | 1 + sections/german/00/00.md | 6 +++++- sections/german/02/02.md | 2 -- sections/german/04/04.md | 23 ++++++++++++++++++----- 6 files changed, 51 insertions(+), 19 deletions(-) diff --git a/css/theme/latex.css b/css/theme/latex.css index 5c6be37..94db063 100644 --- a/css/theme/latex.css +++ b/css/theme/latex.css @@ -22,7 +22,7 @@ section { body { font-size: calc(0.035 * var(--square)); - background: black; } + background: var(--secondary); } body .layout-content-and-preview, body .layout-content-only { display: grid; @@ -34,12 +34,14 @@ body { body .layout-content-and-preview { grid-template-rows: var(--square) auto; grid-template-columns: auto; - grid-template-areas: "content" "preview"; } + grid-template-areas: "content" "preview"; + background: linear-gradient(to bottom, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) var(--square)); } @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"; } } + grid-template-areas: " . preview" "content preview" " . preview"; + background: linear-gradient(to right, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) 100%); } } @media screen and (min-aspect-ratio: 2 / 1) { body .layout-content-and-preview { grid-template-rows: var(--square); @@ -48,22 +50,22 @@ body { body .layout-content-only { grid-template-rows: var(--square) auto; grid-template-columns: var(--square); - grid-template-areas: "content" " . "; } + grid-template-areas: "content" " . "; + background: linear-gradient(to bottom, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) 100%); } @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 ." ". . ."; } } + 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%); } } 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); } + justify-content: center; } body .layout-preview img { width: auto; height: auto; diff --git a/css/theme/source/latex.scss b/css/theme/source/latex.scss index 1710b01..e1e2790 100644 --- a/css/theme/source/latex.scss +++ b/css/theme/source/latex.scss @@ -23,7 +23,7 @@ section { body { font-size: calc(0.035 * var(--square)); - background: black; + background: var(--secondary); .layout-content-and-preview, .layout-content-only { @@ -41,6 +41,11 @@ body { grid-template-areas: "content" "preview"; + background: linear-gradient(to bottom, + white 0%, + white var(--square), + var(--secondary) var(--square), + var(--secondary) var(--square)); @media screen and (min-aspect-ratio: 1/1) { grid-template-rows: auto var(--square) auto; grid-template-columns: var(--square) auto; @@ -48,6 +53,7 @@ body { " . preview" "content preview" " . preview"; + background: linear-gradient(to right, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) 100%); } @media screen and (min-aspect-ratio: 2/1) { grid-template-rows: var(--square); @@ -63,6 +69,7 @@ body { grid-template-areas: "content" " . "; + background: linear-gradient(to bottom, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) 100%); @media screen and (min-aspect-ratio: 1/1) { grid-template-rows: auto var(--square) auto; grid-template-columns: auto var(--square) auto; @@ -70,11 +77,18 @@ body { ". . ." ". 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%); } } .layout-content { - background: white; + // background: white; grid-area: content; position: relative; } @@ -84,7 +98,7 @@ body { display: flex; align-items: center; justify-content: center; - background: var(--secondary); + // background: var(--secondary); img { width: auto; height: auto; diff --git a/index.html b/index.html index ff5a1f1..5f9a85f 100644 --- a/index.html +++ b/index.html @@ -56,6 +56,7 @@ minScale: 1, maxScale: 1, margin: 0, + transition: 'none', math: { mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js', config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html diff --git a/sections/german/00/00.md b/sections/german/00/00.md index d7a8b89..1701a5f 100644 --- a/sections/german/00/00.md +++ b/sections/german/00/00.md @@ -1 +1,5 @@ -# $\LaTeX$ +
+
+

LATEX

+
+
diff --git a/sections/german/02/02.md b/sections/german/02/02.md index 2455dff..c0f64fc 100644 --- a/sections/german/02/02.md +++ b/sections/german/02/02.md @@ -3,5 +3,3 @@

Wie funktioniert LaTeX?

- ---- diff --git a/sections/german/04/04.md b/sections/german/04/04.md index b6d2b8f..1b3ec55 100644 --- a/sections/german/04/04.md +++ b/sections/german/04/04.md @@ -48,7 +48,7 @@ --- -
+

Datei mit Teilabschnitt

    @@ -59,19 +59,32 @@ Hier ein Absatz zum Inhalt von Abschnitt 1.
+
+ ![](sections/german/04/projekt_dokument.png) +
--- -## Resultierende Projektstruktur -![](sections/german/04/main_und_unterdateien.png) +
+
+

Resultierende Projektstruktur

+ + ![](sections/german/04/main_und_unterdateien.png) +
+
--- -## Resultierendes Dokument -![](sections/german/04/projekt_dokument.png) +
+
+

Resultierendes Dokument

+ + ![](sections/german/04/projekt_dokument.png) +
+
---