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 {
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;

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

@ -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;

1
index.html
View File

@ -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

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