Add chapter studienübersicht

studienuebersicht/style.css

@@ -0,0 +1,178 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.figure {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+}
+
+.table {
+    width: 100%;
+    flex-grow: 1;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-areas:
+        "sem1 sem2 sem3 sem4 sem5 sem6"
+}
+
+.table,
+.table .sem {
+    grid-gap: 3mm;
+}
+
+.table .cell {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16pt;
+    color: #fff;
+    word-wrap: break-word;
+    padding: 10px;
+}
+
+.table .sem {
+    display: grid;
+    grid-template-columns: 5fr 1fr;
+    grid-template-rows: 1fr repeat(5, 2fr);
+    grid-template-areas:
+    "header header"
+    "cell1 pra"
+    "cell2 pra"
+    "cell3 pra"
+    "cell4 pra"
+    "cell5 pra";
+}
+
+.table .sem .sem1 {
+    grid-area: sem1
+}
+.table .sem .sem2 {
+    grid-area: sem2
+}
+.table .sem .sem3 {
+    grid-area: sem3
+}
+.table .sem .sem4 {
+    grid-area: sem4
+}
+.table .sem .sem5 {
+    grid-area: sem5
+}
+.table .sem .sem6 {
+    grid-area: sem6
+}
+
+.table .sem6 {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr repeat(5, 2fr);
+    grid-template-areas:
+        "header header"
+        "pra1 pra2"
+        "pra1 pra2"
+        "pra1 pra2"
+        "pra1 pra2"
+        "pra1 pra2";
+}
+
+.table .sem6 .pra1 {
+    grid-area: pra1;
+}
+
+.table .sem6 .pra2 {
+    grid-area: pra2;
+}
+
+.table .sem .cell.header {
+    grid-area: header;
+}
+
+.table .sem .cell.cell1 {
+    grid-area: cell1;
+}
+.table .sem .cell.cell2 {
+    grid-area: cell2;
+}
+.table .sem .cell.cell3 {
+    grid-area: cell3;
+}
+.table .sem .cell.cell4 {
+    grid-area: cell4;
+}
+.table .sem .cell.cell5 {
+    grid-area: cell5;
+}
+.table .sem .cell.cell6 {
+    grid-area: cell6;
+}
+.table .sem .cell.cell-pra {
+    grid-area: pra;
+}
+.table .sem .cell > .text-vertical {
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+    transform: scale(-1);
+}
+
+body {
+    --col-passed: #2e9635;
+    --col-failed-once: #a6a620;
+    --col-failed-twice: #b43825;
+    --col-pending: #6725b8;
+    --col-upcoming: #2c6cd4;
+    --col-not-listed: #8b8b8b;
+}
+
+.table .cell.header {
+    background-color: #333;
+}
+.table .cell.passed {
+    background-color: var(--col-passed);
+}
+.table .cell.failed-once {
+    background-color: var(--col-failed-once);
+}
+.table .cell.failed-twice {
+    background-color: var(--col-failed-twice);
+}
+.table .cell.pending {
+    background-color: var(--col-pending);
+}
+.table .cell.upcoming {
+    background-color: var(--col-upcoming);
+}
+.table .cell.not-listed {
+    background-color: var(--col-not-listed);
+}
+
+.legend {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16pt;
+    padding: 0.5em;
+    padding-left: 0;
+}
+
+.legend > span {
+    text-decoration: underline;
+}
+
+.legend .passed {
+    color: var(--col-passed);
+}
+.legend .failed-once {
+    color: var(--col-failed-once);
+}
+.legend .failed-twice {
+    color: var(--col-failed-twice);
+}
+.legend .pending {
+    color: var(--col-pending);
+}
+.legend .upcoming {
+    color: var(--col-upcoming);
+}
+.legend .not-listed {
+    color: var(--col-not-listed);
+}
+