582 lines
20 KiB
CSS
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@charset "UTF-8";
/* tame reveal.js */
section {
min-height: 100vh;
width: 100vw;
padding: 0 !important; }
* {
line-height: inherit; }
/* config */
:root {
--primary: #f8f281;
--primary-dark: #928c1b;
--secondary: #bbd6ec;
--secondary-dark: #3f5d75;
--secondary-light: #eaf2f9;
--margin: 0.1; }
/* basic layout */
:root {
--square: 100vw; }
@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 .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: 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: 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 {
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.png);
background-repeat: no-repeat;
background-size: contain; }
body .layout-preview {
grid-area: preview;
display: flex;
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; }
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; }
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; }
/* content layout */
@font-face {
font-family: 'Fira Sans';
src: url("../../lib/font/fira-sans/FiraSans-Regular.ttf");
font-weight: 400; }
@font-face {
font-family: 'Fira Sans';
src: url("../../lib/font/fira-sans/FiraSans-Bold.ttf");
font-weight: 700; }
@font-face {
font-family: 'Fira Code';
src: url("../../lib/font/fira-code/FiraCode-Regular.otf");
font-weight: 400; }
@font-face {
font-family: 'Fira Code';
src: url("../../lib/font/fira-code/FiraCode-Bold.otf");
font-weight: 700; }
body {
font-family: 'Fira Sans';
margin: 0;
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'; }
.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; }
.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'; }
.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); }
h1 {
font-size: 300%;
max-width: var(--square); }
:not(.titlepage) > h1 {
position: absolute;
bottom: 0;
left: 0;
line-height: 115%;
vertical-align: bottom;
padding: 0 calc(var(--margin) * var(--square)) 0.5em; }
.titlepage > h1 {
line-height: 100%;
margin-bottom: 3rem; }
h2 {
line-height: 1.2; }
p[data-category]::before,
h2[data-category]::before,
h3[data-category]::before {
content: attr(data-category);
font-size: .7em;
font-variant: small-caps;
text-transform: lowercase;
background: black;
color: white;
padding: .1em .5em;
display: inline-block;
vertical-align: baseline;
letter-spacing: .1em;
position: relative;
margin-left: calc(-1 * var(--margin) * var(--square));
padding-left: calc(var(--margin) * var(--square));
margin-right: .5em; }
h2[data-category=Aufgabe]::before {
content: attr(data-category) " " attr(data-task); }
.layout-content-only h2[data-category=Aufgabe]::after,
.layout-wide-content h2[data-category=Aufgabe]::after {
content: attr(data-task);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-indent: calc(-.16 * var(--square));
font-size: calc(1.2 * var(--square));
overflow: hidden;
text-align: right;
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-wide-content h2[data-category=Aufgabe]::after {
--versatz: calc((100vh - var(--square)) / 2);
top: var(--versatz);
bottom: calc(-1 * var(--versatz)); } }
img {
width: auto;
max-width: 100%; }
table {
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; }
.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, blockquote {
margin-left: calc(-1 * var(--margin) * var(--square));
padding: 0.8em 0.1em 0.1em calc(var(--margin) * var(--square)); }
.box.warning {
background: var(--primary); }
blockquote {
color: var(--secondary-dark);
text-indent: -.55em;
padding-bottom: .8em; }
blockquote::before {
content: '»';
color: var(--secondary-dark); }
blockquote cite::before {
content: ' '; }
.layout-content figure {
margin: 0 1em 1em 0; }
.bubble {
display: inline-block;
position: absolute;
margin-top: -2em;
margin-left: -3.8em;
width: 6em;
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); }
section > h1, section > h2, section > h3, section > p, section > ul {
background: var(--primary); }
/*
* Keyboard Shortcut Styling
* =========================
*/
kbd {
font-family: "Fira Code", monospace;
font-size: 65%;
display: inline-block;
border: 1px solid dimgray;
border-width: 1px 5px 5px 1px;
padding: .2rem .5rem; }
/*
* Emoji Fonts
* ============
*/
@font-face {
font-family: 'Twemoji';
src: url("../../lib/font/twemoji/TwitterColorEmoji-SVGinOT.ttf"); }
.emoji {
font-family: "Twemoji"; }
/*
* Links
* ============
*/
p a:link, p a:hover, p a:active, p a:visited, li a:link, li a:hover, li a:active, li a:visited, h2 a:link, h2 a:hover, h2 a:active, h2 a:visited, td a:link, td a:hover, td a:active, td a:visited, figcaption a:link, figcaption a:hover, figcaption a:active, figcaption a:visited, div a:link, div a:hover, div a:active, div a:visited {
text-decoration: none;
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; }
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%; }
figcaption a:link, figcaption a:hover, figcaption a:active, figcaption a:visited {
color: white; }
figcaption a:link::before, figcaption a:hover::before, figcaption a:active::before, figcaption a:visited::before {
background-color: var(--secondary-dark); }
/*
* Code Listings
* =============
*/
pre.small-text {
font-size: 80%; }
pre.scroll-one-half {
max-height: calc(.5 * var(--square));
overflow: auto !important; }