feat: update styling to match kth style (part 1)

public/css/_print.scss

@@ -0,0 +1,70 @@
+// Spacing, make sure this is the same as $spacer from bootstrap
+$spacer: 1.3rem;
+
+.p-print-0 {
+  padding: 0 !important;
+}
+.p-print-1 {
+  padding: $spacer * 0.25 !important;
+}
+.p-print-2 {
+  padding: $spacer * 0.5 !important;
+}
+.p-print-3 {
+  padding: $spacer * 0.75 !important;
+}
+.p-print-4 {
+  padding: $spacer * 1 !important;
+}
+.p-print-5 {
+  padding: $spacer * 1.3 !important;
+}
+
+@media print {
+  h1 {
+    font-size: 32pt;
+    margin-bottom: 6pt;
+  }
+  .memo-subtitle {
+    font-size: 24pt;
+    font-weight: 600;
+  }
+  .mainLogo {
+    margin: 0 !important;
+    padding: 0 !important;
+    img {
+      width: 26mm !important;
+      height: auto !important;
+    }
+  }
+  .cover-page {
+    margin-top: 17mm;
+    margin-left: 13mm;
+    margin-right: 13mm;
+    break-after: page;
+  }
+  .cover-page-links {
+    margin-top: 82px; // h2: 28+40+14
+  }
+  .container,
+  .container-fluid,
+  .header-container__top {
+    max-width: none !important;
+    min-width: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+  .col-print-12 {
+    position: relative;
+    flex: 0 0 100%;
+    width: 100%;
+    max-width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+  .person {
+    img {
+      display: none;
+    }
+  }
+}

public/css/_table.scss

@@ -0,0 +1,88 @@
+%table-style {
+  .flexible-section-style {
+    table {
+      @media (min-width: 1000px) {
+        width: 150% !important;
+        table-layout: fixed;
+      }
+      @media print {
+        // must be here, to make it more specific and stronger rule
+        width: 100%;
+      }
+    }
+  }
+
+  table {
+    @include theme-student-web;
+    width: 100% !important;
+
+    text-align: left;
+    p,
+    ul,
+    li,
+    ol,
+    h1,
+    h2,
+    h3,
+    h4,
+    span,
+    div {
+      margin-bottom: 0 !important;
+    }
+
+    tr {
+      th {
+        color: var(--color-on-primary) !important; //Important because of cut and pasted styles?
+        background-color: $color-gray-dark !important; //Important because of cut and pasted styles?
+        font-weight: 500;
+        border-right: 1px solid var(--color-border);
+        border-bottom: 1px solid var(--color-border);
+        border-top: 0;
+        padding: 0.75rem;
+        h4 {
+          color: var(--color-on-primary);
+        }
+        &:first-of-type {
+          border-top: 0;
+        }
+        &[scope='row'] {
+          vertical-align: middle;
+          border-top: 1px solid var(--color-border);
+          border-right: 0;
+        }
+      }
+
+      &:first-child {
+        th {
+          border-top: 1px solid var(--color-border);
+        }
+      }
+
+      td {
+        padding: 0.75rem;
+        background-color: $color-gray-lighter;
+        border-top: 1px solid var(--color-border);
+      }
+    }
+
+    th {
+      border-top: 0;
+    }
+
+    //If table missing header cells(thead, th) and starts directly with tbody, override it's default/inline styles, must be the last
+    tbody:first-child {
+      tr:first-of-type > td {
+        color: var(--color-on-primary);
+        background-color: $color-gray-dark !important; //Important because of cut and pasted styles?
+        font-weight: 500;
+        border-right: 1px solid var(--color-border);
+        border-bottom: 1px solid var(--color-border);
+        border-top: 0;
+        p {
+          color: var(--color-on-primary);
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}