diff --git a/css/latex.css b/css/latex.css index 0777790..c145dc6 100644 --- a/css/latex.css +++ b/css/latex.css @@ -3,13 +3,16 @@ section { min-height: 100vh; width: 100vw; - padding: 0 !important; } + padding: 0 !important; +} * { - line-height: inherit; } + line-height: inherit; +} input { - font-size: inherit; } + font-size: inherit; +} /* config */ :root { @@ -18,372 +21,458 @@ input { --secondary: #bbd6ec; --secondary-dark: #3f5d75; --secondary-light: #eaf2f9; - --margin: 0.1; } - :root:lang(de) { - --opening-double-quote: '»'; - --closing-double-quote: '«'; } - :root:lang(en) { - --opening-double-quote: '“'; - --closing-double-quote: '”'; } + --margin: 0.1; +} +:root:lang(de) { + --opening-double-quote: "»"; + --closing-double-quote: "«"; +} +:root:lang(en) { + --opening-double-quote: "“"; + --closing-double-quote: "”"; +} /* basic layout */ :root { --square: 100vw; - overflow: hidden; } - @media (min-aspect-ratio: 1 / 1) { - :root { - --square: 50vw; } } - @media (min-aspect-ratio: 2 / 1) { - :root { - --square: 100vh; } } + overflow: hidden; +} +@media (min-aspect-ratio: 1/1) { + :root { + --square: 50vw; + } +} +@media (min-aspect-ratio: 2/1) { + :root { + --square: 100vh; + } +} body { - font-size: calc(0.035 * var(--square)); } - body article { - position: relative; } - body .layout-content-and-preview, - body .layout-content-only, - body .layout-preview-only, - body .layout-wide-content { - display: grid; - min-height: 100vh; - max-height: 100vh; - min-width: 100vw; - max-width: 100vw; - overflow: auto; } + font-size: calc(0.035 * var(--square)); +} +body article { + position: relative; +} +body .layout-content-and-preview, +body .layout-content-only, +body .layout-preview-only, +body .layout-wide-content { + display: grid; + min-height: 100vh; + max-height: 100vh; + min-width: 100vw; + max-width: 100vw; + overflow: auto; +} +body .layout-content-and-preview { + grid-template-rows: var(--square) auto; + grid-template-columns: auto; + grid-template-areas: "content" "preview"; + background: linear-gradient(to bottom, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) var(--square)); +} +@media (min-aspect-ratio: 1/1) { body .layout-content-and-preview { - grid-template-rows: var(--square) auto; - grid-template-columns: auto; - grid-template-areas: "content" "preview"; - background: linear-gradient(to bottom, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) var(--square)); } - @media (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"; - background: linear-gradient(to right, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) 100%); } } - @media (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"; } } + grid-template-rows: auto var(--square) auto; + grid-template-columns: var(--square) auto; + 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 (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" " . "; + background: linear-gradient(to bottom, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) 100%); +} +@media (min-aspect-ratio: 1/1) { body .layout-content-only { - grid-template-rows: var(--square) auto; - grid-template-columns: var(--square); - grid-template-areas: "content" " . "; - background: linear-gradient(to bottom, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) 100%); } - @media (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 ." ". . ."; - 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-preview-only { - grid-template-rows: auto; - grid-template-columns: auto; - grid-template-areas: "preview"; - background: var(--secondary); } + grid-template-rows: auto var(--square) auto; + grid-template-columns: auto var(--square) auto; + 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-preview-only { + grid-template-rows: auto; + grid-template-columns: auto; + grid-template-areas: "preview"; + background: var(--secondary); +} +body .layout-wide-content { + background: white; + grid-template-rows: min-content auto; + grid-template-columns: var(--square); + grid-template-areas: "content" " . "; +} +@media (min-aspect-ratio: 1/1) { body .layout-wide-content { - background: white; - grid-template-rows: min-content auto; - grid-template-columns: var(--square); - grid-template-areas: "content" " . "; } - @media (min-aspect-ratio: 1 / 1) { - body .layout-wide-content { - grid-template-rows: auto var(--square) auto; - grid-template-columns: calc(2 * var(--square)); - grid-template-areas: " . " "content" " . "; } } - @media (min-aspect-ratio: 2 / 1) { - body .layout-wide-content { - grid-template-rows: auto var(--square) auto; - grid-template-columns: auto calc(2 * var(--square)) auto; - grid-template-areas: ". . ." ". content ." ". . ."; - background: linear-gradient(to right, var(--secondary) 0%, var(--secondary) calc((100% - 2 * var(--square)) / 2), white calc((100% - 2 * var(--square)) / 2), white calc(100% - (100% - 2 * var(--square)) / 2), var(--secondary) calc(100% - (100% - 2 * var(--square)) / 2), var(--secondary) 100%); } } - body .layout-content { - background: white; - grid-area: content; - position: relative; } - body .layout-content.titlepage { - display: flex; - flex-direction: column; - justify-content: flex-end; - padding-bottom: calc(var(--margin) * var(--square) + 0.5 * 3em); } - body .layout-content.titlepage::before { - content: ''; - position: absolute; - top: calc(var(--margin) * var(--square)); - right: calc(var(--margin) * var(--square)); - width: calc(.3 * var(--square)); - height: calc(.3 * var(--square)); - background-image: url(../images/logo-fachschaft.jpg); - background-repeat: no-repeat; - background-size: contain; } - body .layout-preview { - grid-area: preview; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: var(--secondary); - position: relative; } - body .layout-preview figure { - display: contents; } - body .layout-preview img { - width: auto; - height: auto; - max-width: calc(.9 * var(--square)); - max-height: calc(.9 * var(--square)); - box-shadow: 0.2em 0.2em 0.5em 0 rgba(0, 0, 0, 0.3); - object-fit: cover; - margin: calc(.05 * var(--square)); - background-color: white; - box-sizing: border-box; } - body .layout-preview img.thin-padding { - padding: .5em; } - body .layout-preview img.large { - width: 60%; - max-width: 100%; - max-height: 100%; - box-sizing: border-box; } - body .layout-preview img[src$="-crop.svg"] { - padding: calc(var(--margin) * var(--square)); - object-fit: contain; - width: calc(0.9 * var(--square)); } - body .layout-preview img[src$="-crop.svg"].thin-padding { - padding: calc(.35 * var(--margin) * var(--square)); } - body .layout-preview img[src$="-orig.svg"] { - background: white; - object-fit: contain; } - body .layout-preview figcaption { - position: absolute; - background: rgba(0, 0, 0, 0.5); - bottom: 0; - width: 100%; - text-align: center; - color: white; - padding: .5em; - box-sizing: border-box; } + grid-template-rows: auto var(--square) auto; + grid-template-columns: calc(2 * var(--square)); + grid-template-areas: " . " "content" " . "; + } +} +@media (min-aspect-ratio: 2/1) { + body .layout-wide-content { + grid-template-rows: auto var(--square) auto; + grid-template-columns: auto calc(2 * var(--square)) auto; + grid-template-areas: ". . ." ". content ." ". . ."; + background: linear-gradient(to right, var(--secondary) 0%, var(--secondary) calc((100% - 2 * var(--square)) / 2), white calc((100% - 2 * var(--square)) / 2), white calc(100% - (100% - 2 * var(--square)) / 2), var(--secondary) calc(100% - (100% - 2 * var(--square)) / 2), var(--secondary) 100%); + } +} +body .layout-content { + background: white; + grid-area: content; + position: relative; +} +body .layout-content.titlepage { + display: flex; + flex-direction: column; + justify-content: flex-end; + padding-bottom: calc(var(--margin) * var(--square) + 0.5 * 3em); +} +body .layout-content.titlepage::before { + content: ""; + position: absolute; + top: calc(var(--margin) * var(--square)); + right: calc(var(--margin) * var(--square)); + width: calc(.3 * var(--square)); + height: calc(.3 * var(--square)); + background-image: url(../images/logo-fachschaft.jpg); + background-repeat: no-repeat; + background-size: contain; +} +body .layout-preview { + grid-area: preview; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: var(--secondary); + position: relative; +} +body .layout-preview figure { + display: contents; +} +body .layout-preview img { + width: auto; + height: auto; + max-width: calc(.9 * var(--square)); + max-height: calc(.9 * var(--square)); + box-shadow: 0.2em 0.2em 0.5em 0 rgba(0, 0, 0, 0.3); + object-fit: cover; + margin: calc(.05 * var(--square)); + background-color: white; + box-sizing: border-box; +} +body .layout-preview img.thin-padding { + padding: 0.5em; +} +body .layout-preview img.large { + width: 60%; + max-width: 100%; + max-height: 100%; + box-sizing: border-box; +} +body .layout-preview img[src$="-crop.svg"] { + padding: calc(var(--margin) * var(--square)); + object-fit: contain; + width: calc(0.9 * var(--square)); +} +body .layout-preview img[src$="-crop.svg"].thin-padding { + padding: calc(.35 * var(--margin) * var(--square)); +} +body .layout-preview img[src$="-orig.svg"] { + background: white; + object-fit: contain; +} +body .layout-preview figcaption { + position: absolute; + background: rgba(0, 0, 0, 0.5); + bottom: 0; + width: 100%; + text-align: center; + color: white; + padding: 0.5em; + box-sizing: border-box; +} +body .layout-two-columns { + display: grid; + min-height: 100vh; + max-height: 100vh; + min-width: 100vw; + max-width: 100vw; + overflow: auto; + grid-template-rows: auto auto auto 1fr; + grid-template-columns: var(--square); + grid-template-areas: "title" "column1" "column2" "."; + background: var(--secondary); +} +@media (min-aspect-ratio: 1/1) { body .layout-two-columns { - display: grid; - min-height: 100vh; - max-height: 100vh; - min-width: 100vw; - max-width: 100vw; - overflow: auto; - grid-template-rows: auto auto auto 1fr; - grid-template-columns: var(--square); - grid-template-areas: "title" "column1" "column2" "."; - background: var(--secondary); } - @media (min-aspect-ratio: 1 / 1) { - body .layout-two-columns { - grid-template-rows: auto calc(0.18 * var(--square)) calc(0.82 * var(--square)) auto; - grid-template-columns: var(--square) var(--square); - grid-template-areas: " . . " " title title " "column1 column2" " . . "; } } - @media (min-aspect-ratio: 2 / 1) { - body .layout-two-columns { - grid-template-rows: calc(0.18 * var(--square)) calc(0.82 * var(--square)); - grid-template-columns: auto var(--square) var(--square) auto; - grid-template-areas: ". title title ." ". column1 column2 ."; } } - body .layout-two-columns .layout-title { - grid-area: title; - background: var(--secondary); } - body .layout-two-columns .layout-column-one { - grid-area: column1; - background: white; } - body .layout-two-columns .layout-column-two { - grid-area: column2; - background: white; } + grid-template-rows: auto calc(0.18 * var(--square)) calc(0.82 * var(--square)) auto; + grid-template-columns: var(--square) var(--square); + grid-template-areas: " . . " " title title " "column1 column2" " . . "; + } +} +@media (min-aspect-ratio: 2/1) { + body .layout-two-columns { + grid-template-rows: calc(0.18 * var(--square)) calc(0.82 * var(--square)); + grid-template-columns: auto var(--square) var(--square) auto; + grid-template-areas: ". title title ." ". column1 column2 ."; + } +} +body .layout-two-columns .layout-title { + grid-area: title; + background: var(--secondary); +} +body .layout-two-columns .layout-column-one { + grid-area: column1; + background: white; +} +body .layout-two-columns .layout-column-two { + grid-area: column2; + background: white; +} +body .layout-two-previews { + display: grid; + min-height: 100vh; + max-height: 100vh; + min-width: 100vw; + max-width: 100vw; + overflow: auto; + grid-template-rows: auto auto; + grid-template-columns: auto; + background: var(--secondary); +} +@media (min-aspect-ratio: 1/1) { body .layout-two-previews { - display: grid; - min-height: 100vh; - max-height: 100vh; - min-width: 100vw; - max-width: 100vw; - overflow: auto; - grid-template-rows: auto auto; - grid-template-columns: auto; - background: var(--secondary); } - @media (min-aspect-ratio: 1 / 1) { - body .layout-two-previews { - grid-template-rows: 100vh; - grid-template-columns: 50vw 50vw; - grid-template-areas: "preview preview"; } } - body .layout-two-previews .layout-preview { - grid-area: auto; } + grid-template-rows: 100vh; + grid-template-columns: 50vw 50vw; + grid-template-areas: "preview preview"; + } +} +body .layout-two-previews .layout-preview { + grid-area: auto; +} /* content layout */ @font-face { - font-family: 'Fira Sans'; + font-family: "Fira Sans"; src: url("../lib/font/fira-sans/FiraSans-Regular.ttf"); - font-weight: 400; } + font-weight: 400; +} @font-face { - font-family: 'Fira Sans'; + font-family: "Fira Sans"; src: url("../lib/font/fira-sans/FiraSans-Bold.ttf"); - font-weight: 700; } + font-weight: 700; +} @font-face { - font-family: 'Fira Code'; + font-family: "Fira Code"; src: url("../lib/font/fira-code/FiraCode-Regular.otf"); - font-weight: 400; } + font-weight: 400; +} @font-face { - font-family: 'Fira Code'; + font-family: "Fira Code"; src: url("../lib/font/fira-code/FiraCode-Bold.otf"); - font-weight: 700; } + font-weight: 700; +} +@font-face { + font-family: "EB Garamond"; + src: url("../lib/font/eb-garamond/EBGaramond-Regular.ttf"); + font-weight: 400; +} body { - font-family: 'Fira Sans'; + font-family: "Fira Sans"; margin: 0; - line-height: 1.2em; } + line-height: 1.2em; +} .layout-content-and-preview .layout-content, .layout-content-only .layout-content, .layout-wide-content .layout-content { overflow: visible; - padding: calc(var(--margin) * var(--square)); } - .layout-content-and-preview .layout-content *:first-child, - .layout-content-only .layout-content *:first-child, - .layout-wide-content .layout-content *:first-child { - margin-top: 0; } - .layout-content-and-preview .layout-content .layout-title, - .layout-content-only .layout-content .layout-title, - .layout-wide-content .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-only .layout-content .layout-title h2, - .layout-wide-content .layout-content .layout-title h2 { - margin: 0; - line-height: 1.15em; } - .layout-content-and-preview .layout-content ul, .layout-content-and-preview .layout-content ol, - .layout-content-only .layout-content ul, - .layout-content-only .layout-content ol, - .layout-wide-content .layout-content ul, - .layout-wide-content .layout-content ol { - list-style-type: none; - padding-left: 0; - position: relative; } - .layout-content-and-preview .layout-content ul li::before, .layout-content-and-preview .layout-content ol li::before, - .layout-content-only .layout-content ul li::before, - .layout-content-only .layout-content ol li::before, - .layout-wide-content .layout-content ul li::before, - .layout-wide-content .layout-content ol 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 ol, .layout-content-and-preview .layout-content ol ul, .layout-content-and-preview .layout-content ol ol, - .layout-content-only .layout-content ul ul, - .layout-content-only .layout-content ul ol, - .layout-content-only .layout-content ol ul, - .layout-content-only .layout-content ol ol, - .layout-wide-content .layout-content ul ul, - .layout-wide-content .layout-content ul ol, - .layout-wide-content .layout-content ol ul, - .layout-wide-content .layout-content ol ol { - margin-left: calc(0.33 * var(--margin) * var(--square)); } - .layout-content-and-preview .layout-content ol, - .layout-content-only .layout-content ol, - .layout-wide-content .layout-content ol { - counter-reset: ol-counter; } - .layout-content-and-preview .layout-content ol li::before, - .layout-content-only .layout-content ol li::before, - .layout-wide-content .layout-content ol li::before { - counter-increment: ol-counter; - content: counter(ol-counter) "."; - color: var(--secondary-dark); - left: calc(-0.36 * var(--margin) * var(--square)); } - .layout-content-and-preview .layout-content pre, - .layout-content-only .layout-content pre, - .layout-wide-content .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-only .layout-content pre::before, - .layout-wide-content .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 .layout-content pre code, - .layout-content-only .layout-content pre code, - .layout-wide-content .layout-content pre code { - padding: .3em 0; } - .layout-content-and-preview .layout-content code, - .layout-content-only .layout-content code, - .layout-wide-content .layout-content code { - font-size: 0.9em; - font-family: 'Fira Code'; } + padding: calc(var(--margin) * var(--square)); +} +.layout-content-and-preview .layout-content *:first-child, +.layout-content-only .layout-content *:first-child, +.layout-wide-content .layout-content *:first-child { + margin-top: 0; +} +.layout-content-and-preview .layout-content .layout-title, +.layout-content-only .layout-content .layout-title, +.layout-wide-content .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-only .layout-content .layout-title h2, +.layout-wide-content .layout-content .layout-title h2 { + margin: 0; + line-height: 1.15em; +} +.layout-content-and-preview .layout-content ul, .layout-content-and-preview .layout-content ol, +.layout-content-only .layout-content ul, +.layout-content-only .layout-content ol, +.layout-wide-content .layout-content ul, +.layout-wide-content .layout-content ol { + list-style-type: none; + padding-left: 0; + position: relative; +} +.layout-content-and-preview .layout-content ul li::before, .layout-content-and-preview .layout-content ol li::before, +.layout-content-only .layout-content ul li::before, +.layout-content-only .layout-content ol li::before, +.layout-wide-content .layout-content ul li::before, +.layout-wide-content .layout-content ol 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 ol, .layout-content-and-preview .layout-content ol ul, .layout-content-and-preview .layout-content ol ol, +.layout-content-only .layout-content ul ul, +.layout-content-only .layout-content ul ol, +.layout-content-only .layout-content ol ul, +.layout-content-only .layout-content ol ol, +.layout-wide-content .layout-content ul ul, +.layout-wide-content .layout-content ul ol, +.layout-wide-content .layout-content ol ul, +.layout-wide-content .layout-content ol ol { + margin-left: calc(0.33 * var(--margin) * var(--square)); +} +.layout-content-and-preview .layout-content ol, +.layout-content-only .layout-content ol, +.layout-wide-content .layout-content ol { + counter-reset: ol-counter; +} +.layout-content-and-preview .layout-content ol li::before, +.layout-content-only .layout-content ol li::before, +.layout-wide-content .layout-content ol li::before { + counter-increment: ol-counter; + content: counter(ol-counter) "."; + color: var(--secondary-dark); + left: calc(-0.36 * var(--margin) * var(--square)); +} +.layout-content-and-preview .layout-content pre, +.layout-content-only .layout-content pre, +.layout-wide-content .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-only .layout-content pre::before, +.layout-wide-content .layout-content pre::before { + content: attr(data-sourcefile); + position: absolute; + text-align: right; + color: var(--secondary); + top: 0.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 .layout-content pre code, +.layout-content-only .layout-content pre code, +.layout-wide-content .layout-content pre code { + padding: 0.3em 0; +} +.layout-content-and-preview .layout-content code, +.layout-content-only .layout-content code, +.layout-wide-content .layout-content code { + font-size: 0.9em; + font-family: "Fira Code"; +} .layout-two-columns .layout-title { - padding: calc(0.3 * var(--margin) * var(--square)) calc(var(--margin) * var(--square)); } - .layout-two-columns .layout-title h2 { - line-height: 1.15em; } + padding: calc(0.3 * var(--margin) * var(--square)) calc(var(--margin) * var(--square)); +} +.layout-two-columns .layout-title h2 { + line-height: 1.15em; +} .layout-two-columns .layout-column-one, .layout-two-columns .layout-column-two { padding: calc(var(--margin) * var(--square)); - padding-top: calc(var(--margin) * var(--square)); } - .layout-two-columns .layout-column-one *:first-child, - .layout-two-columns .layout-column-two *:first-child { - margin-top: 0; } - .layout-two-columns .layout-column-one ul, - .layout-two-columns .layout-column-two ul { - list-style-type: none; - padding-left: 0; - position: relative; } - .layout-two-columns .layout-column-one ul li::before, - .layout-two-columns .layout-column-two ul li::before { - content: '▪'; - color: var(--secondary); - position: absolute; - left: calc(-0.33 * var(--margin) * var(--square)); } - .layout-two-columns .layout-column-one ul ul, - .layout-two-columns .layout-column-two ul ul { - margin-left: calc(0.33 * var(--margin) * var(--square)); } - .layout-two-columns .layout-column-one pre, - .layout-two-columns .layout-column-two pre { - margin: 0 calc(-1 * var(--margin) * var(--square)); - line-height: 1.2em; - position: relative; - overflow: hidden; } - .layout-two-columns .layout-column-one pre::before, - .layout-two-columns .layout-column-two 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-two-columns .layout-column-one pre code, - .layout-two-columns .layout-column-two pre code { - padding: 0.3em calc(var(--margin) * var(--square)); } - .layout-two-columns .layout-column-one code, - .layout-two-columns .layout-column-two code { - font-size: 0.9em; - font-family: 'Fira Code'; } + padding-top: calc(var(--margin) * var(--square)); +} +.layout-two-columns .layout-column-one *:first-child, +.layout-two-columns .layout-column-two *:first-child { + margin-top: 0; +} +.layout-two-columns .layout-column-one ul, +.layout-two-columns .layout-column-two ul { + list-style-type: none; + padding-left: 0; + position: relative; +} +.layout-two-columns .layout-column-one ul li::before, +.layout-two-columns .layout-column-two ul li::before { + content: "▪"; + color: var(--secondary); + position: absolute; + left: calc(-0.33 * var(--margin) * var(--square)); +} +.layout-two-columns .layout-column-one ul ul, +.layout-two-columns .layout-column-two ul ul { + margin-left: calc(0.33 * var(--margin) * var(--square)); +} +.layout-two-columns .layout-column-one pre, +.layout-two-columns .layout-column-two pre { + margin: 0 calc(-1 * var(--margin) * var(--square)); + line-height: 1.2em; + position: relative; + overflow: hidden; +} +.layout-two-columns .layout-column-one pre::before, +.layout-two-columns .layout-column-two pre::before { + content: attr(data-sourcefile); + position: absolute; + text-align: right; + color: var(--secondary); + top: 0.85em; + width: 100%; + left: calc(-1 * var(--square) + 1.2 * var(--margin) * var(--square)); + transform-origin: top right; + transform: rotate(-90deg); +} +.layout-two-columns .layout-column-one pre code, +.layout-two-columns .layout-column-two pre code { + padding: 0.3em calc(var(--margin) * var(--square)); +} +.layout-two-columns .layout-column-one code, +.layout-two-columns .layout-column-two code { + font-size: 0.9em; + font-family: "Fira Code"; +} .layout.layout-chapter-heading { height: 100vh; width: 100vw; - position: relative; } - .layout.layout-chapter-heading .layout-title { - position: absolute; - left: 2vw; - width: calc(100vw - 4vw); - text-align: center; - bottom: calc(38.2% - .5em); } + position: relative; +} +.layout.layout-chapter-heading .layout-title { + position: absolute; + left: 2vw; + width: calc(100vw - 4vw); + text-align: center; + bottom: calc(38.2% - .5em); +} h1 { font-size: 300%; - max-width: var(--square); } + max-width: var(--square); +} :not(.titlepage) > h1 { position: absolute; @@ -391,36 +480,41 @@ h1 { left: 0; line-height: 115%; vertical-align: bottom; - padding: 0 calc(var(--margin) * var(--square)) 0.5em; } + padding: 0 calc(var(--margin) * var(--square)) 0.5em; +} .titlepage > h1 { line-height: 100%; - margin-bottom: 3rem; } + margin-bottom: 3rem; +} h2 { - line-height: 1.2; } + line-height: 1.2; +} p[data-category]::before, h2[data-category]::before, h3[data-category]::before { content: attr(data-category); - font-size: .7em; + font-size: 0.7em; font-variant: small-caps; text-transform: lowercase; background: black; color: white; - padding: .1em .5em; + padding: 0.1em 0.5em; display: inline-block; vertical-align: baseline; - letter-spacing: .1em; + letter-spacing: 0.1em; position: relative; margin-left: calc(-1 * var(--margin) * var(--square)); padding-left: calc(var(--margin) * var(--square)); - margin-right: .5em; } + margin-right: 0.5em; +} h2[data-category=Aufgabe]::before, h2[data-category=Task]::before { - content: attr(data-category) " " attr(data-task); } + content: attr(data-category) " " attr(data-task); +} .layout-content-only h2[data-category=Aufgabe]::after, .layout-content-only h2[data-category=Task]::after, @@ -439,86 +533,107 @@ h2[data-category=Task]::before { white-space: nowrap; direction: rtl; word-spacing: 1000%; - opacity: .2; } - @media (min-aspect-ratio: 1 / 1) and (max-aspect-ratio: 2 / 1) { - .layout-content-only h2[data-category=Aufgabe]::after, - .layout-content-only h2[data-category=Task]::after, - .layout-wide-content h2[data-category=Aufgabe]::after, - .layout-wide-content h2[data-category=Task]::after { - --versatz: calc((100vh - var(--square)) / 2); - top: var(--versatz); - bottom: calc(-1 * var(--versatz)); } } + opacity: 0.2; +} +@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) { + .layout-content-only h2[data-category=Aufgabe]::after, +.layout-content-only h2[data-category=Task]::after, +.layout-wide-content h2[data-category=Aufgabe]::after, +.layout-wide-content h2[data-category=Task]::after { + --versatz: calc((100vh - var(--square)) / 2); + top: var(--versatz); + bottom: calc(-1 * var(--versatz)); + } +} .layout-content-only h2.task-without-number::after, .layout-content-only h2.task-without-number::after, .layout-wide-content h2.task-without-number::after, .layout-wide-content h2.task-without-number::after { - display: none; } + display: none; +} img { width: auto; - max-width: 100%; } + max-width: 100%; +} table { font-size: inherit; width: calc(var(--square) - var(--margin) * var(--square)); margin-left: calc(-1 * var(--margin) * var(--square)); - border-spacing: 0; } - table tr:nth-child(2n-1) { - background: var(--secondary); } - table tr > *:first-child { - padding-left: calc(var(--margin) * var(--square)); } - table th, table td { - text-align: left; - vertical-align: top; - padding: .3em; - padding-left: 0; } - table th:last-child, table td:last-child { - padding-right: .1em; } + border-spacing: 0; +} +table tr:nth-child(2n-1) { + background: var(--secondary); +} +table tr > *:first-child { + padding-left: calc(var(--margin) * var(--square)); +} +table th, table td { + text-align: left; + vertical-align: top; + padding: 0.3em; + padding-left: 0; +} +table th:last-child, table td:last-child { + padding-right: 0.1em; +} .layout-content-only table { border-spacing: 0; margin-left: 0; width: 100%; - box-sizing: border-box; } - .layout-content-only table tr > *:first-child { - padding-left: .3rem; - padding-right: .3rem; } + box-sizing: border-box; +} +.layout-content-only table tr > *:first-child { + padding-left: 0.3rem; + padding-right: 0.3rem; +} .box { margin-left: calc(-1 * var(--margin) * var(--square)); - padding: 0.8em 0.1em 0.1em calc(var(--margin) * var(--square)); } + padding: 0.8em 0.1em 0.1em calc(var(--margin) * var(--square)); +} .box.warning { - background: var(--primary); } + background: var(--primary); +} blockquote { color: var(--secondary-dark); position: relative; padding-bottom: 1.8em; margin-left: 0; - margin-right: 0; } - blockquote p:first-of-type { - /* probably bungle, but works for one

inside

*/ - display: contents; } - blockquote p:first-of-type::after { - content: " " var(--closing-double-quote); } - blockquote::before { - content: var(--opening-double-quote) " "; - color: var(--secondary-dark); - position: absolute; - display: inline-block; - right: 100%; } - blockquote cite { - position: absolute; - bottom: 0.6em; - left: calc(0.4 * var(--square)); - width: calc(0.4 * var(--square)); } - blockquote cite::before { - content: "— "; } + margin-right: 0; +} +blockquote p:first-of-type { + /* probably bungle, but works for one

inside

*/ + display: contents; +} +blockquote p:first-of-type::after { + content: " " var(--closing-double-quote); +} +blockquote::before { + content: var(--opening-double-quote) " "; + color: var(--secondary-dark); + position: absolute; + display: inline-block; + right: 100%; +} +blockquote cite { + position: absolute; + bottom: 0.6em; + left: calc(0.4 * var(--square)); + width: calc(0.4 * var(--square)); +} +blockquote cite::before { + content: "— "; +} .layout-content figure { - margin: 0 1em 1em 0; } + margin: 0 1em 1em 0; +} .bubble { display: inline-block; @@ -529,28 +644,32 @@ blockquote { border: 0.1em solid var(--primary-dark); background: var(--primary); text-align: center; - border-radius: 1em; } - .bubble::before { - content: ''; - width: 0; - height: 0; - position: absolute; - border: .5em solid transparent; - border-top-color: var(--primary-dark); - bottom: -1em; - left: calc(50% - .5em); } - .bubble::after { - content: ''; - width: 0; - height: 0; - position: absolute; - border: .5em solid transparent; - border-top-color: var(--primary); - bottom: -0.87em; - left: calc(50% - .5em); } + border-radius: 1em; +} +.bubble::before { + content: ""; + width: 0; + height: 0; + position: absolute; + border: 0.5em solid transparent; + border-top-color: var(--primary-dark); + bottom: -1em; + left: calc(50% - .5em); +} +.bubble::after { + content: ""; + width: 0; + height: 0; + position: absolute; + border: 0.5em solid transparent; + border-top-color: var(--primary); + bottom: -0.87em; + left: calc(50% - .5em); +} section > h1, section > h2, section > h3, section > p, section > ul { - background: var(--primary); } + background: var(--primary); +} /* * Keyboard Shortcut Styling @@ -562,17 +681,20 @@ kbd { display: inline-block; border: 1px solid dimgray; border-width: 1px 5px 5px 1px; - padding: .2rem .5rem; } + padding: 0.2rem 0.5rem; +} /* * Emoji Fonts * ============ */ @font-face { - font-family: 'Twemoji'; - src: url("../lib/font/twemoji/TwitterColorEmoji-SVGinOT.ttf"); } + font-family: "Twemoji"; + src: url("../lib/font/twemoji/TwitterColorEmoji-SVGinOT.ttf"); +} .emoji { - font-family: "Twemoji"; } + font-family: "Twemoji"; +} /* * Links @@ -583,35 +705,42 @@ p a:link, p a:hover, p a:active, p a:visited, li a:link, li a:hover, li a:active color: var(--secondary-dark); font-weight: bold; position: relative; - z-index: 1; } - p a:link::before, p a:hover::before, p a:active::before, p a:visited::before, li a:link::before, li a:hover::before, li a:active::before, li a:visited::before, h2 a:link::before, h2 a:hover::before, h2 a:active::before, h2 a:visited::before, td a:link::before, td a:hover::before, td a:active::before, td a:visited::before, figcaption a:link::before, figcaption a:hover::before, figcaption a:active::before, figcaption a:visited::before, div a:link::before, div a:hover::before, div a:active::before, div a:visited::before { - content: ''; - position: absolute; - width: 102%; - height: 0; - background-color: var(--secondary-light); - z-index: -1; - bottom: -5%; - left: -1%; - transition: .2s height ease; } + z-index: 1; +} +p a:link::before, p a:hover::before, p a:active::before, p a:visited::before, li a:link::before, li a:hover::before, li a:active::before, li a:visited::before, h2 a:link::before, h2 a:hover::before, h2 a:active::before, h2 a:visited::before, td a:link::before, td a:hover::before, td a:active::before, td a:visited::before, figcaption a:link::before, figcaption a:hover::before, figcaption a:active::before, figcaption a:visited::before, div a:link::before, div a:hover::before, div a:active::before, div a:visited::before { + content: ""; + position: absolute; + width: 102%; + height: 0; + background-color: var(--secondary-light); + z-index: -1; + bottom: -5%; + left: -1%; + transition: 0.2s height ease; +} p a:hover::before, li a:hover::before, h2 a:hover::before, td a:hover::before, figcaption a:hover::before, div a:hover::before { - height: 110%; } + height: 110%; +} figcaption a:not(.dark-font):link, figcaption a:not(.dark-font):hover, figcaption a:not(.dark-font):active, figcaption a:not(.dark-font):visited { - color: white; } - figcaption a:not(.dark-font):link::before, figcaption a:not(.dark-font):hover::before, figcaption a:not(.dark-font):active::before, figcaption a:not(.dark-font):visited::before { - background-color: var(--secondary-dark); } + color: white; +} +figcaption a:not(.dark-font):link::before, figcaption a:not(.dark-font):hover::before, figcaption a:not(.dark-font):active::before, figcaption a:not(.dark-font):visited::before { + background-color: var(--secondary-dark); +} /* * Code Listings * ============= */ pre.small-text { - font-size: 80%; } + font-size: 80%; +} pre.scroll-one-half { max-height: calc(.5 * var(--square)); - overflow: auto !important; } + overflow: auto !important; +} /* * Fragments @@ -619,10 +748,12 @@ pre.scroll-one-half { */ .fragment { opacity: 0; - transition: .3s opacity ease-in-out; } + transition: 0.3s opacity ease-in-out; +} .fragment.visible { - opacity: 1; } + opacity: 1; +} /* * Topic List @@ -630,21 +761,26 @@ pre.scroll-one-half { */ .topic-list { box-shadow: 0 0px 50px rgba(0, 0, 0, 0.3); - z-index: 500; } - .topic-list .topic-list-search { - display: block; - width: 100%; - border: none; - padding: .5rem; - margin-bottom: 1rem; - border-bottom: 1px solid var(--secondary); - text-align: center; } - .topic-list .topic-link { - font-weight: normal; } - .topic-list .topic-link.active-topic-link { - font-weight: bold; } - .topic-list .topic-link.not-matching-search-terms { - opacity: .2; } + z-index: 500; +} +.topic-list .topic-list-search { + display: block; + width: 100%; + border: none; + padding: 0.5rem; + margin-bottom: 1rem; + border-bottom: 1px solid var(--secondary); + text-align: center; +} +.topic-list .topic-link { + font-weight: normal; +} +.topic-list .topic-link.active-topic-link { + font-weight: bold; +} +.topic-list .topic-link.not-matching-search-terms { + opacity: 0.2; +} /* * Help Menu @@ -665,15 +801,18 @@ pre.scroll-one-half { background: white; box-shadow: 0 0px 50px rgba(0, 0, 0, 0.3); opacity: 0; - transition: .2s opacity ease-in-out; } + transition: 0.2s opacity ease-in-out; +} #help-menu-checkbox:checked ~ #help-menu-wrapper { opacity: 1; - display: block; } + display: block; +} #help-menu-checkbox { position: fixed; - right: 150vw; } + right: 150vw; +} #help-menu-toggle { position: fixed; @@ -683,11 +822,13 @@ pre.scroll-one-half { height: 3rem; color: white; background-color: rgba(0, 0, 0, 0.3); - transition: .1s background-color ease-in-out; + transition: 0.1s background-color ease-in-out; display: flex; justify-content: center; - align-items: center; } - #help-menu-toggle:hover { - background-color: rgba(0, 0, 0, 0.5); } + align-items: center; +} +#help-menu-toggle:hover { + background-color: rgba(0, 0, 0, 0.5); +} /*# sourceMappingURL=latex.css.map */ diff --git a/css/latex.css.map b/css/latex.css.map index 2eb68a2..9954ef0 100644 --- a/css/latex.css.map +++ b/css/latex.css.map @@ -1,7 +1 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["latex.scss"], -"names": [], -"file": "latex.css" -} +{"version":3,"sourceRoot":"","sources":["latex.scss"],"names":[],"mappings":";AAAA;AACA;EACE;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;AACA;EACE;EAOA;;AANA;EAFF;IAGI;;;AAEF;EALF;IAMI;;;;AAKJ;EACE;;AAEA;EACD;;AAGC;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,qBACE;EAEF;;AAKA;EAXF;IAYI;IACA;IACA,qBACE;IAGF;;;AAEF;EApBF;IAqBI;IACA;IACA,qBACE;;;AAIN;EACE;EACA;EACA,qBACE;EAEF;;AACA;EAPF;IAQI;IACA;IACA,qBACE;IAGF;;;AAUJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,qBACE;;AAEF;EAPF;IAQI;IACA;IACA,qBACE;;;AAIJ;EAfF;IAgBI;IACA;IACA,qBACE;IAGF;;;AAUJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,qBACE;EAIF;;AACA;EAfF;IAgBI;IACA;IACA,qBACE;;;AAKJ;EAxBF;IAyBI;IACA;IACA,qBACE;;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVF;IAWI;IACA;IACA,qBACE;;;AAEJ;EACE;;;AAKN;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMA;AAAA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;EACE;EACA;;AAIJ;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAGJ;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIJ;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;EACE;EACA;;;AAMJ;EACE;;AACA;EACE;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAlBF;AAAA;AAAA;AAAA;IAmBI;IACA;IACA;;;;AAKJ;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AACA;AAAkB;EAChB;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAMJ;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAMI;EAIE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;;AAOJ;EAIE;;AAEA;EACE;;;AAMN;AAAA;AAAA;AAAA;AAIA;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;;AAKN;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"latex.css"} \ No newline at end of file diff --git a/css/latex.scss b/css/latex.scss index c60dada..615a0ed 100644 --- a/css/latex.scss +++ b/css/latex.scss @@ -328,6 +328,11 @@ body { src: url('../lib/font/fira-code/FiraCode-Bold.otf'); font-weight: 700; } +@font-face { + font-family: 'EB Garamond'; + src: url('../lib/font/eb-garamond/EBGaramond-Regular.ttf'); + font-weight: 400; +} body { font-family: 'Fira Sans'; diff --git a/layouts/macro-typography-grid.html b/layouts/macro-typography-grid.html new file mode 100644 index 0000000..1e35c45 --- /dev/null +++ b/layouts/macro-typography-grid.html @@ -0,0 +1,113 @@ +
+
+

@title(inline)

+ + +
+

@example-text(inline)

+

☺ @narrow-tight(inline)

+ +

@example-text(inline)

+

☹ @normal-tight(inline)

+ +

@example-text(inline)

+

☹ @wide-tight(inline)

+ +

@example-text(inline)

+

☹ @narrow-medium(inline)

+ +

@example-text(inline)

+

☺ @normal-medium(inline)

+ +

@example-text(inline)

+

☹ @wide-medium(inline)

+ +

@example-text(inline)

+

☹ @narrow-loose(inline)

+ +

@example-text(inline)

+

☹ @normal-loose(inline)

+ +

@example-text(inline)

+

☺ @wide-loose(inline)

+
+
+
diff --git a/layouts/micro-typography-grid.html b/layouts/micro-typography-grid.html new file mode 100644 index 0000000..b2fc781 --- /dev/null +++ b/layouts/micro-typography-grid.html @@ -0,0 +1,79 @@ +
+
+

@title(inline)

+ + +
+

+

☹ @example1a(inline)

+ +

+

☺ @example1b(inline)

+ +

+

☺ @example1c(inline)

+ +

+

☹ @example2a(inline)

+ +

+

☺ @example2b(inline)

+ +

+

☹ @example2c(inline)

+
+
+
diff --git a/lib/font/eb-garamond/EBGaramond-Bold.ttf b/lib/font/eb-garamond/EBGaramond-Bold.ttf new file mode 100644 index 0000000..1ac9cc3 Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-Bold.ttf differ diff --git a/lib/font/eb-garamond/EBGaramond-BoldItalic.ttf b/lib/font/eb-garamond/EBGaramond-BoldItalic.ttf new file mode 100644 index 0000000..60711b2 Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-BoldItalic.ttf differ diff --git a/lib/font/eb-garamond/EBGaramond-ExtraBold.ttf b/lib/font/eb-garamond/EBGaramond-ExtraBold.ttf new file mode 100644 index 0000000..00431e7 Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-ExtraBold.ttf differ diff --git a/lib/font/eb-garamond/EBGaramond-ExtraBoldItalic.ttf b/lib/font/eb-garamond/EBGaramond-ExtraBoldItalic.ttf new file mode 100644 index 0000000..118ead9 Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-ExtraBoldItalic.ttf differ diff --git a/lib/font/eb-garamond/EBGaramond-Italic-VariableFont_wght.ttf b/lib/font/eb-garamond/EBGaramond-Italic-VariableFont_wght.ttf new file mode 100644 index 0000000..8d37412 Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-Italic-VariableFont_wght.ttf differ diff --git a/lib/font/eb-garamond/EBGaramond-Italic.ttf b/lib/font/eb-garamond/EBGaramond-Italic.ttf new file mode 100644 index 0000000..1e5eb2c Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-Italic.ttf differ diff --git a/lib/font/eb-garamond/EBGaramond-Medium.ttf b/lib/font/eb-garamond/EBGaramond-Medium.ttf new file mode 100644 index 0000000..18cda5d Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-Medium.ttf differ diff --git a/lib/font/eb-garamond/EBGaramond-MediumItalic.ttf b/lib/font/eb-garamond/EBGaramond-MediumItalic.ttf new file mode 100644 index 0000000..f2f55a2 Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-MediumItalic.ttf differ diff --git a/lib/font/eb-garamond/EBGaramond-Regular.ttf b/lib/font/eb-garamond/EBGaramond-Regular.ttf new file mode 100644 index 0000000..80a857b Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-Regular.ttf differ diff --git a/lib/font/eb-garamond/EBGaramond-SemiBold.ttf b/lib/font/eb-garamond/EBGaramond-SemiBold.ttf new file mode 100644 index 0000000..9c63ead Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-SemiBold.ttf differ diff --git a/lib/font/eb-garamond/EBGaramond-SemiBoldItalic.ttf b/lib/font/eb-garamond/EBGaramond-SemiBoldItalic.ttf new file mode 100644 index 0000000..c51801c Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-SemiBoldItalic.ttf differ diff --git a/lib/font/eb-garamond/EBGaramond-VariableFont_wght.ttf b/lib/font/eb-garamond/EBGaramond-VariableFont_wght.ttf new file mode 100644 index 0000000..1a5eb19 Binary files /dev/null and b/lib/font/eb-garamond/EBGaramond-VariableFont_wght.ttf differ diff --git a/lib/font/eb-garamond/EB_Garamond.zip b/lib/font/eb-garamond/EB_Garamond.zip new file mode 100644 index 0000000..4ddbcfd Binary files /dev/null and b/lib/font/eb-garamond/EB_Garamond.zip differ diff --git a/lib/font/eb-garamond/OFL.txt b/lib/font/eb-garamond/OFL.txt new file mode 100644 index 0000000..1fb3e84 --- /dev/null +++ b/lib/font/eb-garamond/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2017 The EB Garamond Project Authors (https://github.com/octaviopardo/EBGaramond12) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/lib/font/eb-garamond/README.txt b/lib/font/eb-garamond/README.txt new file mode 100644 index 0000000..f8a74e7 --- /dev/null +++ b/lib/font/eb-garamond/README.txt @@ -0,0 +1,73 @@ +EB Garamond Variable Font +========================= + +This download contains EB Garamond as both variable fonts and static fonts. + +EB Garamond is a variable font with this axis: + wght + +This means all the styles are contained in these files: + EBGaramond-VariableFont_wght.ttf + EBGaramond-Italic-VariableFont_wght.ttf + +If your app fully supports variable fonts, you can now pick intermediate styles +that aren’t available as static fonts. Not all apps support variable fonts, and +in those cases you can use the static font files for EB Garamond: + static/EBGaramond-Regular.ttf + static/EBGaramond-Medium.ttf + static/EBGaramond-SemiBold.ttf + static/EBGaramond-Bold.ttf + static/EBGaramond-ExtraBold.ttf + static/EBGaramond-Italic.ttf + static/EBGaramond-MediumItalic.ttf + static/EBGaramond-SemiBoldItalic.ttf + static/EBGaramond-BoldItalic.ttf + static/EBGaramond-ExtraBoldItalic.ttf + +Get started +----------- + +1. Install the font files you want to use + +2. Use your app's font picker to view the font family and all the +available styles + +Learn more about variable fonts +------------------------------- + + https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts + https://variablefonts.typenetwork.com + https://medium.com/variable-fonts + +In desktop apps + + https://theblog.adobe.com/can-variable-fonts-illustrator-cc + https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts + +Online + + https://developers.google.com/fonts/docs/getting_started + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide + https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts + +Installing fonts + + MacOS: https://support.apple.com/en-us/HT201749 + Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux + Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows + +Android Apps + + https://developers.google.com/fonts/docs/android + https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts + +License +------- +Please read the full license text (OFL.txt) to understand the permissions, +restrictions and requirements for usage, redistribution, and modification. + +You can use them freely in your products & projects - print or digital, +commercial or otherwise. + +This isn't legal advice, please consider consulting a lawyer and see the full +license for all details. diff --git a/slides/chapter-01.de.md b/slides/chapter-01.de.md index a95bbce..da58b09 100644 --- a/slides/chapter-01.de.md +++ b/slides/chapter-01.de.md @@ -22,68 +22,79 @@ Entstehung ![](svg/chapter-01/taocp.jpg) -@slide(layout=content-and-preview) +@slide(layout=macro-typography-grid) @title -Typografie +Gründe für LaTeX: Makrotypografie -@content -### Makrotypografie -* Satzspiegel -* Zeilenlänge vs. -abstand -* Platzierung von Überschriften im Weißraum -* Platzierung von Bildern und Tabellen -* Schusterjungen / Hurenkinder -* Gleichmäßiger Grauwert -* … +@example-text +Dieser Absatz soll zeigen, wie sich unter­schied­liche Zeilen­abstände bei unter­schied­lichen Satz­breiten aus­wirken. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. -
- -
Satzspiegel-Konstruktion nach Villard (Quelle) -
-
+@narrow-tight +Kurz und eng -@preview -![](svg/chapter-01/vergleich-makro.svg) +@normal-tight +Normale Länge und enger Zeilenabstand + +@wide-tight +Lange Zeilen und enger Zeilenabstand + +@narrow-medium +Kurz und normal + +@normal-medium +Normale Länge und Zeilenabstand + +@wide-medium +Lange Zeilen und normaler Zeilenabstand + +@narrow-loose +Kurz und weit + +@normal-loose +Normale Länge und weiter Zeilenabstand + +@wide-loose +Lange Zeilen und weiter Zeilenabstand -@slide(layout=content-and-preview) + +@slide(layout=micro-typography-grid) @title -Typografie +Gründe für LaTeX: Mikrotypografie -@content -### Mikrotypografie -* Ligaturen -* Kerning -* echte Kursiven, Kapitälchen, Schriftgrade … -* Wortabstände -* … +@example1a +schräg (verzerrt) -
-
Schriftschnitte:
gerade, schräg, kursiv
+@example1b +gerade -
Schriftgrade:
klein, klein vergrößert, groß
-
+@example1c +kursiv (eigener Schnitt) -@preview -![](svg/chapter-01/vergleich-mikro.svg) +@example2a +kleine Schrift vergrößert + +@example2b +jeweils passender Schriftgrad + +@example2c +große Schrift verkleinert @slide(layout=content-only) @title -Weitere Vorteile +Gründe für LaTeX: Plaintext @content -* wesentlich bessere Standardeinstellungen
als in sämtlichen Textverarbeitungsprogrammen -* strukturiertes Arbeiten * zuverlässiges Undo * einfache Versionierung * unabhängig von proprietären Programmen -* Quelltext und Ausgabe langfristig lesbar +* Quelltext langfristig lesbar * einfache Zusammenarbeit mit anderen Programmen - +* keine Ablenkung durch Formatierung oder eingebettete Medien @slide(layout=content-and-preview) diff --git a/slides/chapter-01.en.md b/slides/chapter-01.en.md index 63ce2df..9c020da 100644 --- a/slides/chapter-01.en.md +++ b/slides/chapter-01.en.md @@ -22,67 +22,79 @@ Origin ![](svg/chapter-01/taocp.jpg) -@slide(layout=content-and-preview) +@slide(layout=macro-typography-grid) @title -Typography +Reasons for using LaTeX: macrotypography -@content -### Macro typography -* type area -* line length and leading -* placement of headings in whitespace -* placement of images and tables -* widows and orphans -* even grey value -* … +@example-text +This paragraph shows the effect of varied line heights in combination with varied line lengths. +For this purpose, a little more text is needed to make it look like an actual paragraph. For this purpose, a little more text is needed to make it look like an actual paragraph. For this purpose, a little more text is needed to make it look like an actual paragraph. For this purpose, a little more text is needed to make it look like an actual paragraph. For this purpose, a little more text is needed to make it look like an actual paragraph. For this purpose, a little more text is needed to make it look like an actual paragraph. For this purpose, a little more text is needed to make it look like an actual paragraph. For this purpose, a little more text is needed to make it look like an actual paragraph. -
- -
Type area construction by Villard (source) -
-
+@narrow-tight +short & tight -@preview -![](svg/chapter-01/vergleich-makro.svg) +@normal-tight +normal length and tight leading + +@wide-tight +long lines and tight leading + +@narrow-medium +short & medium + +@normal-medium +normal length and leading + +@wide-medium +long lines and medium leading + +@narrow-loose +short & loose + +@normal-loose +normal length and loose leading + +@wide-loose +long lines and loose leading -@slide(layout=content-and-preview) +@slide(layout=micro-typography-grid) @title -Typography +Reasons for using LaTeX: microtypography -@content -### Micro typography -* ligatures -* kerning -* real italics, small capitals, font sizes … -* word spacing -* … +@example1a +slanted (distorted) -
-
Font styles:
straight, oblique, italic
+@example1b +straight -
Font sizes:
small, small scaled up, large
-
+@example1c +italic (separate font) -@preview -![](svg/chapter-01/vergleich-mikro.svg) +@example2a +small font scaled up + +@example2b +separate appropriate fonts + +@example2c +big font scaled down @slide(layout=content-only) -@title -Further advantages +@title +Reasons for using LaTeX: plaintext @content -* much better default settings
than any other word processor -* structured workflow * reliable undo * easy versioning * independence of proprietary software -* source code and output
readable in the long term +* source code readable in the long term * easy cooperation with other software +* no distraction by formatting or embedded media @slide(layout=content-and-preview) diff --git a/svg/chapter-01/schriftgrade-korrekt.svg b/svg/chapter-01/schriftgrade-korrekt.svg new file mode 100644 index 0000000..5cb4efa --- /dev/null +++ b/svg/chapter-01/schriftgrade-korrekt.svg @@ -0,0 +1,248 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svg/chapter-01/schriftgrade-vergroessert.svg b/svg/chapter-01/schriftgrade-vergroessert.svg new file mode 100644 index 0000000..7b62cef --- /dev/null +++ b/svg/chapter-01/schriftgrade-vergroessert.svg @@ -0,0 +1,248 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svg/chapter-01/schriftgrade-verkleinert.svg b/svg/chapter-01/schriftgrade-verkleinert.svg new file mode 100644 index 0000000..2fab015 --- /dev/null +++ b/svg/chapter-01/schriftgrade-verkleinert.svg @@ -0,0 +1,248 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svg/chapter-01/schriftschnitte-italic.svg b/svg/chapter-01/schriftschnitte-italic.svg new file mode 100644 index 0000000..ed5a6f2 --- /dev/null +++ b/svg/chapter-01/schriftschnitte-italic.svg @@ -0,0 +1,172 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svg/chapter-01/schriftschnitte-roman.svg b/svg/chapter-01/schriftschnitte-roman.svg new file mode 100644 index 0000000..dd20b35 --- /dev/null +++ b/svg/chapter-01/schriftschnitte-roman.svg @@ -0,0 +1,172 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svg/chapter-01/schriftschnitte-slanted.svg b/svg/chapter-01/schriftschnitte-slanted.svg new file mode 100644 index 0000000..2d83ff8 --- /dev/null +++ b/svg/chapter-01/schriftschnitte-slanted.svg @@ -0,0 +1,172 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +