latex/latex-wochenende
5
0
Fork 0
Code Issues 8 Pull Requests Actions Releases Wiki Activity

Dynamic square adaptions.

Browse Source
This commit is contained in:
Kremitzl 2019-04-29 14:21:58 +02:00
parent 6dc3f81f0f
commit ec37177d2b
6 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/theme/latex.css
View File

@ -22,7 +22,7 @@ section {
body { body {
font-size: calc(0.035 * var(--square)); font-size: calc(0.035 * var(--square));
background: black; } background: var(--secondary); }
body .layout-content-and-preview, body .layout-content-and-preview,
body .layout-content-only { body .layout-content-only {
display: grid; display: grid;
@ -34,12 +34,14 @@ body {
body .layout-content-and-preview { body .layout-content-and-preview {
grid-template-rows: var(--square) auto; grid-template-rows: var(--square) auto;
grid-template-columns: 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) { @media screen and (min-aspect-ratio: 1 / 1) {
body .layout-content-and-preview { body .layout-content-and-preview {
grid-template-rows: auto var(--square) auto; grid-template-rows: auto var(--square) auto;
grid-template-columns: 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) { @media screen and (min-aspect-ratio: 2 / 1) {
body .layout-content-and-preview { body .layout-content-and-preview {
grid-template-rows: var(--square); grid-template-rows: var(--square);
@ -48,22 +50,22 @@ body {
body .layout-content-only { body .layout-content-only {
grid-template-rows: var(--square) auto; grid-template-rows: var(--square) auto;
grid-template-columns: var(--square); 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) { @media screen and (min-aspect-ratio: 1 / 1) {
body .layout-content-only { body .layout-content-only {
grid-template-rows: auto var(--square) auto; grid-template-rows: auto var(--square) auto;
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%); } }
body .layout-content { body .layout-content {
background: white;
grid-area: content; grid-area: content;
position: relative; } position: relative; }
body .layout-preview { body .layout-preview {
grid-area: preview; grid-area: preview;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center; }
background: var(--secondary); }
body .layout-preview img { body .layout-preview img {
width: auto; width: auto;
height: auto; height: auto;

20
css/theme/source/latex.scss
View File

@ -23,7 +23,7 @@ section {
body { body {
font-size: calc(0.035 * var(--square)); font-size: calc(0.035 * var(--square));
background: black; background: var(--secondary);
.layout-content-and-preview, .layout-content-and-preview,
.layout-content-only { .layout-content-only {
@ -41,6 +41,11 @@ body {
grid-template-areas: grid-template-areas:
"content" "content"
"preview"; "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) { @media screen and (min-aspect-ratio: 1/1) {
grid-template-rows: auto var(--square) auto; grid-template-rows: auto var(--square) auto;
grid-template-columns: var(--square) auto; grid-template-columns: var(--square) auto;
@ -48,6 +53,7 @@ body {
" . preview" " . preview"
"content preview" "content preview"
" . 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) { @media screen and (min-aspect-ratio: 2/1) {
grid-template-rows: var(--square); grid-template-rows: var(--square);
@ -63,6 +69,7 @@ body {
grid-template-areas: grid-template-areas:
"content" "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) { @media screen and (min-aspect-ratio: 1/1) {
grid-template-rows: auto var(--square) auto; grid-template-rows: auto var(--square) auto;
grid-template-columns: auto var(--square) auto; grid-template-columns: auto var(--square) auto;
@ -70,11 +77,18 @@ body {
". . ." ". . ."
". content ." ". 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 { .layout-content {
background: white; // background: white;
grid-area: content; grid-area: content;
position: relative; position: relative;
} }
@ -84,7 +98,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--secondary); // background: var(--secondary);
img { img {
width: auto; width: auto;
height: auto; height: auto;

1
index.html
View File

@ -56,6 +56,7 @@
minScale: 1, minScale: 1,
maxScale: 1, maxScale: 1,
margin: 0, margin: 0,
transition: 'none',
math: { math: {
mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js', 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 config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html

6
sections/german/00/00.md
View File

@ -1 +1,5 @@
# $\LaTeX$ <div class="layout-content-only">
<div class="layout-content">
<h1>L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X</h1>
</div>
</div>

2
sections/german/02/02.md
View File

@ -3,5 +3,3 @@
<h1>Wie funktioniert LaTeX?</h1> <h1>Wie funktioniert LaTeX?</h1>
</div> </div>
</div> </div>
---

23
sections/german/04/04.md
View File

@ -48,7 +48,7 @@
--- ---
<div class="layout-content-only"> <div class="layout-content-and-preview">
<div class="layout-content"> <div class="layout-content">
<h2>Datei mit Teilabschnitt</h2> <h2>Datei mit Teilabschnitt</h2>
<ul> <ul>
@ -59,19 +59,32 @@
Hier ein Absatz zum Hier ein Absatz zum
Inhalt von Abschnitt 1.</code></pre> Inhalt von Abschnitt 1.</code></pre>
</div> </div>
<div class="layout-preview">
![](sections/german/04/projekt_dokument.png)
</div>
</div> </div>
--- ---
## Resultierende Projektstruktur <div class="layout-content-only">
![](sections/german/04/main_und_unterdateien.png) <div class="layout-content">
<h2>Resultierende Projektstruktur</h2>
![](sections/german/04/main_und_unterdateien.png)
</div>
</div>
--- ---
## Resultierendes Dokument <div class="layout-content-only">
![](sections/german/04/projekt_dokument.png) <div class="layout-content">
<h2>Resultierendes Dokument</h2>
![](sections/german/04/projekt_dokument.png)
</div>
</div>
--- ---