From e62fa738d32fdd5c48110432bbca137526f69eec Mon Sep 17 00:00:00 2001
From: Thomas Junk <thomas.junk@intevation.de>
Date: Tue, 21 Nov 2023 17:40:27 +0100
Subject: [PATCH] Refactoring UI

---
 build/feed.html                               |  11 -
 docs/used_software.md                         |   1 -
 package-lock.json                             |   4 +-
 src/app.html                                  |  12 +-
 src/lib/Back.svelte                           |  18 +-
 src/lib/Collapsible.svelte                    |  35 +-
 src/lib/KeyValue.svelte                       |  21 +-
 src/lib/Spinner.svelte                        |  23 -
 src/lib/UrlLoader.svelte                      |  86 +---
 src/lib/ValueField.svelte                     |  11 -
 src/lib/ValueList.svelte                      |  13 +-
 src/lib/feedview/entries/Entry.svelte         |  22 +-
 .../feedview/entries/URLCollapsible.svelte    |  23 +-
 src/lib/feedview/feed/Category.svelte         |   2 +-
 src/lib/feedview/feed/Feed.svelte             |   6 +-
 src/lib/feedview/feed/Links.svelte            |   9 -
 .../feed/distributions/Distribution.svelte    |  36 --
 src/lib/singleview/Droparea.svelte            |  14 +-
 src/lib/singleview/SingleView.svelte          |  33 +-
 src/lib/singleview/Upload.svelte              |  43 +-
 .../acknowledgments/Acknowledgment.svelte     |   2 +-
 src/lib/singleview/general/General.svelte     |  40 --
 .../singleview/general/RevisionHistory.svelte |  27 +-
 src/lib/singleview/notes/Note.svelte          |  35 +-
 .../producttree/branch/Branch.svelte          |   8 -
 .../producttree/product/FileHash.svelte       |   6 +-
 .../producttree/product/Product.svelte        |   4 +-
 .../ProductIdentificationHelper.svelte        |  19 +-
 .../producttree/product/ProductName.svelte    |   8 +-
 .../producttree/product/XGenericURI.svelte    |  11 +-
 .../ProductVulnerabilities.svelte             |  89 +---
 .../singleview/references/Reference.svelte    |   8 +-
 .../singleview/references/References.svelte   |   2 +-
 .../vulnerability/GeneralSection.svelte       |   2 +-
 .../vulnerabilities/vulnerability/ID.svelte   |   1 -
 .../vulnerability/flags/Flags.svelte          |   6 -
 .../productStatus/ProductStatus.svelte        |   6 -
 .../ProductStatusValueList.svelte             |  13 +-
 .../remediations/Remediation.svelte           |   2 +-
 .../remediations/Remediations.svelte          |   2 +-
 .../vulnerability/scores/Scores.svelte        |   8 +-
 .../vulnerability/threats/Threats.svelte      |   6 -
 src/routes/+layout.svelte                     |  55 +--
 src/routes/+page.svelte                       |   6 +-
 src/routes/feed/+page.svelte                  |   6 +-
 static/css/main.css                           | 464 ++++++++++++++++++
 46 files changed, 588 insertions(+), 671 deletions(-)
 create mode 100644 static/css/main.css

diff --git a/build/feed.html b/build/feed.html
index 84ff8bd..1dee89c 100644
--- a/build/feed.html
+++ b/build/feed.html
@@ -67,15 +67,4 @@
 			</script>
 		</div>
   </body>
-  <style>
-    body {
-      font-family: Helvetica;
-    }
-    a {
-      color: revert;
-    }
-    a:visited {
-      color: revert;
-    }
-  </style>
 </html>
diff --git a/docs/used_software.md b/docs/used_software.md
index 1dcb359..d5ef153 100644
--- a/docs/used_software.md
+++ b/docs/used_software.md
@@ -7,7 +7,6 @@ Software-Engineering: 2022 Intevation GmbH <https://intevation.de>
 _CSAF Webview_ is built with the following components:
 
 - Framework: [Svelte (SvelteKit)](https://kit.svelte.dev/)
-- CSS-Miniframework: [Chota](https://jenil.github.io/chota/)
 - Icons: [Boxicons](https://boxicons.com/)
 - Markdown: [marked.js](https://github.com/markedjs/marked) and [DOMPurify] (https://github.com/cure53/DOMPurify)
 
diff --git a/package-lock.json b/package-lock.json
index 9dc099f..817d960 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "csaf-webview",
-  "version": "0.8.1-dev",
+  "version": "0.9.0-dev",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "csaf-webview",
-      "version": "0.8.1-dev",
+      "version": "0.9.0-dev",
       "dependencies": {
         "boxicons": "^2.1.4",
         "chota": "^0.9.2",
diff --git a/src/app.html b/src/app.html
index e3fbae5..9e6c28b 100644
--- a/src/app.html
+++ b/src/app.html
@@ -12,6 +12,7 @@
   <head>
     <meta charset="utf-8" />
     <title>CSAF 2 Webview</title>
+    <link rel="stylesheet" href="%sveltekit.assets%/css/main.css" />
     <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
     <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
@@ -26,15 +27,4 @@
   <body data-sveltekit-preload-data="hover">
     <div style="display: contents">%sveltekit.body%</div>
   </body>
-  <style>
-    body {
-      font-family: Helvetica;
-    }
-    a {
-      color: revert;
-    }
-    a:visited {
-      color: revert;
-    }
-  </style>
 </html>
diff --git a/src/lib/Back.svelte b/src/lib/Back.svelte
index 802e6ab..7ea484c 100644
--- a/src/lib/Back.svelte
+++ b/src/lib/Back.svelte
@@ -34,21 +34,5 @@
 </script>
 
 {#if $appStore.ui.history.length > 0}
-  <a class="back button dark" href="#top" on:click={backPressed}
-    >Last pos. <i class="bx bx-undo" /></a
-  >
+  <a class="backbutton" href="#top" on:click={backPressed}>Last pos. <i class="bx bx-undo" /></a>
 {/if}
-
-<style>
-  .back {
-    background-color: black;
-    color: white;
-    text-align: center;
-    width: 11rem;
-    padding: 1rem;
-    position: sticky;
-    bottom: 1rem;
-    margin-left: 90vw;
-    cursor: pointer;
-  }
-</style>
diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte
index 26e0dd6..619ef93 100644
--- a/src/lib/Collapsible.svelte
+++ b/src/lib/Collapsible.svelte
@@ -48,7 +48,7 @@
   }
 </script>
 
-<div class:collapsible={true} class:bg-light={highlight}>
+<div class:collapsible={true} class:highlight-section={highlight}>
   {#if level == "2"}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -74,41 +74,12 @@
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div title={header} style="cursor:pointer" id={header} on:click={toggle} class={class_}>
-      <h6><i class="bx {icon}" />{header}</h6>
+      <h5><i class="bx {icon}" />{header}</h5>
     </div>
   {/if}
   {#if visibility === "block"}
-    <div id={uuid} class="body">
+    <div id={uuid} class="collapsible-body">
       <slot />
     </div>
   {/if}
 </div>
-
-<style>
-  .collapsible {
-    white-space: nowrap;
-    width: fit-content;
-    max-width: 95vw;
-  }
-  .body {
-    padding-left: 3rem;
-    white-space: normal;
-  }
-  h2,
-  h3,
-  h4 {
-    margin: 0;
-  }
-  h3,
-  h4 {
-    line-height: 3rem;
-  }
-  h2 {
-    font-weight: bold;
-  }
-  h6 {
-    line-height: 0.3em;
-    font-size: large;
-    margin: 0.6rem;
-  }
-</style>
diff --git a/src/lib/KeyValue.svelte b/src/lib/KeyValue.svelte
index 8904c9b..acbc9aa 100644
--- a/src/lib/KeyValue.svelte
+++ b/src/lib/KeyValue.svelte
@@ -13,10 +13,7 @@
   import DOMPurify from "dompurify";
   export let keys: Array<String>;
   export let values: any;
-  export let compact = false;
-  let width = compact ? "width:10rem" : "width: 15vw;";
   marked.use({ gfm: true });
-  $: keyStyle = `padding: 0.2rem; ${width}`;
 </script>
 
 {#each keys as key, index}
@@ -24,9 +21,9 @@
     <tbody>
       {#if key == "text" || key == "Text"}
         <tr
-          ><td style={keyStyle}>{key}</td><td class="value">
-            <small class="hint bg-light">Markdown</small>
-            <div class="bd-light display-markdown">
+          ><td class="key">{key}</td><td class="value">
+            <small class="hint">Markdown</small>
+            <div class="display-markdown">
               {@html DOMPurify.sanitize(
                 marked.parse(values[index].replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""))
               )}
@@ -34,18 +31,8 @@
           </td>
         </tr>
       {:else}
-        <tr><td style={keyStyle}>{key}</td><td class="value">{values[index]}</td></tr>
+        <tr><td class="key">{key}</td><td class="value">{values[index]}</td></tr>
       {/if}
     </tbody>
   </table>
 {/each}
-
-<style>
-  .value {
-    padding: 0.2rem;
-    min-width: 50rem;
-  }
-  .display-markdown {
-    padding: 0.5rem;
-  }
-</style>
diff --git a/src/lib/Spinner.svelte b/src/lib/Spinner.svelte
index 58d674f..284a666 100644
--- a/src/lib/Spinner.svelte
+++ b/src/lib/Spinner.svelte
@@ -5,26 +5,3 @@
 {#if open}
   <i class="bx bx-loader-alt spinner" />
 {/if}
-
-<style>
-  .spinner {
-    font-size: xx-large;
-    animation-name: spin;
-    animation-duration: 750ms;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    /* transform: rotate(3deg); */
-    /* transform: rotate(0.3rad);/ */
-    /* transform: rotate(3grad); */
-    /* transform: rotate(.03turn);  */
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>
diff --git a/src/lib/UrlLoader.svelte b/src/lib/UrlLoader.svelte
index e2d4848..d077dc0 100644
--- a/src/lib/UrlLoader.svelte
+++ b/src/lib/UrlLoader.svelte
@@ -42,76 +42,28 @@
   };
 </script>
 
-<div class="row">
-  <div class="col-12 outline">
-    <div class="urlcontainer" title={tooltiptext}>
-      <span class="prepend">
-        <i class="bx bx-file" />
-        <span class="prependtext">URL</span>
-      </span>
-      <input class="urlinput" {placeholder} type="text" bind:value={url} on:keydown={keydown} />
-      {#if url}
-        <span class="postpend" title="Discard search">
-          <button
-            on:click={() => {
-              url = "";
-            }}><i class="bx bx-x" /></button
-          >
-        </span>
-      {/if}
+<div class="url-outline">
+  <div class="url-container" title={tooltiptext}>
+    <div class="prepend">
+      <i class="bx bx-file" />
+      <span class="prependtext">URL</span>
     </div>
+    <div class="url-input">
+      <input {placeholder} type="text" bind:value={url} on:keydown={keydown} />
+    </div>
+    {#if url}
+      <div class="postpend" title="Discard search">
+        <button
+          on:click={() => {
+            url = "";
+          }}><i class="bx bx-x" /></button
+        >
+      </div>
+    {/if}
   </div>
 </div>
 {#if errormessage}
-  <div class="row">
-    <div class="col">
-      <div class="errors text-error">{errormessage}</div>
-    </div>
+  <div class="error-message">
+    {errormessage}
   </div>
 {/if}
-
-<style>
-  .errors {
-    font-size: x-large;
-    font-weight: bold;
-  }
-  .outline {
-    padding: 0.5rem;
-    border: 1px solid #d2d6dd;
-    border-radius: 5px;
-  }
-  .bx-x {
-    font-size: larger;
-  }
-  .postpend {
-    font-size: larger;
-    line-height: 1.1rem;
-  }
-  .postpend button {
-    background: #fff;
-  }
-  .prepend {
-    padding-left: 1rem;
-    width: 7rem;
-    white-space: nowrap;
-  }
-  .prependtext {
-    margin-left: 0.1rem;
-  }
-  .urlinput {
-    border: 0;
-  }
-  input:focus {
-    outline: 0 !important;
-    border: 0;
-    border-color: #fff;
-    border-radius: 0;
-    box-shadow: none;
-    -webkit-box-shadow: none;
-  }
-  .urlcontainer {
-    display: flex;
-    align-items: center;
-    height: 40px;
-  }
-</style>
diff --git a/src/lib/ValueField.svelte b/src/lib/ValueField.svelte
index bc40451..019fb87 100644
--- a/src/lib/ValueField.svelte
+++ b/src/lib/ValueField.svelte
@@ -17,14 +17,3 @@
   <h6>{label}</h6>
   <p>{value}</p>
 </div>
-
-<style>
-  h6 {
-    line-height: 0.3em;
-    font-size: large;
-  }
-  p {
-    margin-left: 4rem;
-    width: 80vw;
-  }
-</style>
diff --git a/src/lib/ValueList.svelte b/src/lib/ValueList.svelte
index 004f865..d78f735 100644
--- a/src/lib/ValueList.svelte
+++ b/src/lib/ValueList.svelte
@@ -14,19 +14,8 @@
 </script>
 
 <p>{label}</p>
-<ul>
+<ul class="valuelist">
   {#each values as value}
     <li>{value}</li>
   {/each}
 </ul>
-
-<style>
-  p {
-    margin-bottom: 0;
-  }
-  ul {
-    margin-top: 0;
-    padding-left: 3rem;
-    list-style-type: none;
-  }
-</style>
diff --git a/src/lib/feedview/entries/Entry.svelte b/src/lib/feedview/entries/Entry.svelte
index f5ffa25..665ea32 100644
--- a/src/lib/feedview/entries/Entry.svelte
+++ b/src/lib/feedview/entries/Entry.svelte
@@ -36,23 +36,14 @@
 </script>
 
 <KeyValue
-  compact={true}
   keys={["ID", "Published", "Title", "Updated"]}
   values={[entry.id, entry.published, entry.title, entry.updated]}
 />
 <Collapsible header="Content" level="5">
-  <KeyValue
-    compact={true}
-    keys={["Type", "Src"]}
-    values={[entry.content.type, entry.content.src]}
-  />
+  <KeyValue keys={["Type", "Src"]} values={[entry.content.type, entry.content.src]} />
 </Collapsible>
 <Collapsible header="Format" level="5">
-  <KeyValue
-    compact={true}
-    keys={["Schema", "Version"]}
-    values={[entry.format.schema, entry.format.version]}
-  />
+  <KeyValue keys={["Schema", "Version"]} values={[entry.format.schema, entry.format.version]} />
 </Collapsible>
 
 <Collapsible header="Links" level="5">
@@ -71,12 +62,3 @@
     {/each}
   </table>
 </Collapsible>
-
-<style>
-  .key {
-    width: 6vw;
-  }
-  td {
-    padding: 0.3rem;
-  }
-</style>
diff --git a/src/lib/feedview/entries/URLCollapsible.svelte b/src/lib/feedview/entries/URLCollapsible.svelte
index 193349f..e0496cd 100644
--- a/src/lib/feedview/entries/URLCollapsible.svelte
+++ b/src/lib/feedview/entries/URLCollapsible.svelte
@@ -51,35 +51,20 @@
   }
 </script>
 
-<div class:collapsible={true} class:bg-light={highlight}>
+<div class:collapsible={true} class:highlight-section={highlight}>
   {#if level == "4"}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div title={entry.title} style="cursor:pointer" id={entry.id} on:click={toggle} class={class_}>
-      <h4>
+      <h5>
         <i class="bx {icon}" />
         <a href={lookupID} on:click={openLink}>{entry.id}: {entry.title}</a>
-      </h4>
+      </h5>
     </div>
   {/if}
   {#if visibility === "block"}
-    <div class="body">
+    <div class="collapsible-body">
       <slot />
     </div>
   {/if}
 </div>
-
-<style>
-  .collapsible {
-    white-space: nowrap;
-  }
-  .body {
-    padding-left: 3rem;
-  }
-  h4 {
-    margin: 0;
-  }
-  h4 {
-    line-height: 3rem;
-  }
-</style>
diff --git a/src/lib/feedview/feed/Category.svelte b/src/lib/feedview/feed/Category.svelte
index ad66c1d..d0fe036 100644
--- a/src/lib/feedview/feed/Category.svelte
+++ b/src/lib/feedview/feed/Category.svelte
@@ -14,5 +14,5 @@
 </script>
 
 {#each categories as category}
-  <KeyValue keys={["scheme", "term"]} values={[category.scheme, category.term]} compact={true} />
+  <KeyValue keys={["scheme", "term"]} values={[category.scheme, category.term]} />
 {/each}
diff --git a/src/lib/feedview/feed/Feed.svelte b/src/lib/feedview/feed/Feed.svelte
index 8f91159..ae33d8e 100644
--- a/src/lib/feedview/feed/Feed.svelte
+++ b/src/lib/feedview/feed/Feed.svelte
@@ -21,11 +21,7 @@
 
 {#if feed}
   <div id={link.href}>
-    <KeyValue
-      keys={["ID", "Title", "Updated"]}
-      values={[feed?.id, feed?.title, feed?.updated]}
-      compact={true}
-    />
+    <KeyValue keys={["ID", "Title", "Updated"]} values={[feed?.id, feed?.title, feed?.updated]} />
   </div>
   <Collapsible header="Links" level="3" open={true}>
     <Links links={feed.link} />
diff --git a/src/lib/feedview/feed/Links.svelte b/src/lib/feedview/feed/Links.svelte
index c7dc298..76764e2 100644
--- a/src/lib/feedview/feed/Links.svelte
+++ b/src/lib/feedview/feed/Links.svelte
@@ -22,12 +22,3 @@
     </tr>
   {/each}
 </table>
-
-<style>
-  .key {
-    width: 10rem;
-  }
-  td {
-    padding: 0.3rem;
-  }
-</style>
diff --git a/src/lib/feedview/feed/distributions/Distribution.svelte b/src/lib/feedview/feed/distributions/Distribution.svelte
index 4f794b9..ea6143b 100644
--- a/src/lib/feedview/feed/distributions/Distribution.svelte
+++ b/src/lib/feedview/feed/distributions/Distribution.svelte
@@ -57,39 +57,3 @@
     </div>
   {/each}
 {/if}
-
-<style>
-  .entry {
-    padding: 0.5rem;
-  }
-  .header {
-    font-size: large;
-  }
-  .key {
-    padding: 0;
-    width: 8vw;
-  }
-  .value {
-    padding: 0;
-  }
-  .tlpclear {
-    background: #000;
-    color: #fff;
-    padding: 0.3rem;
-  }
-  .tlpred {
-    background: #000;
-    color: #ff2b2b;
-    padding: 0.3rem;
-  }
-  .tlpamber {
-    background: #000;
-    color: #ffc000;
-    padding: 0.3rem;
-  }
-  .tlpgreen {
-    background: #000;
-    color: #33ff00;
-    padding: 0.3rem;
-  }
-</style>
diff --git a/src/lib/singleview/Droparea.svelte b/src/lib/singleview/Droparea.svelte
index 4717fb9..12eb0c8 100644
--- a/src/lib/singleview/Droparea.svelte
+++ b/src/lib/singleview/Droparea.svelte
@@ -49,8 +49,8 @@
   title="Drop a CSAF file here"
   class="droparea"
   class:hover
-  class:bg-error={valid == false}
-  class:bg-primary={valid == true}
+  class:droparea-error={valid == false}
+  class:droparea-okay={valid == true}
   on:dragover|preventDefault={() => {
     hover = true;
   }}
@@ -63,16 +63,6 @@
 </div>
 
 <style>
-  .droparea {
-    height: 50px;
-    width: 100%;
-    border: 1px dashed gray;
-    color: gray;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 2em;
-  }
   .hover {
     color: #fff;
     border: 1px dashed #fff;
diff --git a/src/lib/singleview/SingleView.svelte b/src/lib/singleview/SingleView.svelte
index 406afda..9980337 100644
--- a/src/lib/singleview/SingleView.svelte
+++ b/src/lib/singleview/SingleView.svelte
@@ -30,7 +30,7 @@
   );
 </script>
 
-<div class="loadfromurl">
+<div class="loader">
   <UrlLoader
     baseroute={`${base}/?q=`}
     tooltiptext={"URL to fetch Advisory from"}
@@ -38,21 +38,16 @@
     errormessage={$appStore.ui.singleErrorMsg}
   />
 </div>
-<div class="row">
-  <div class="col-6 col-3-lg">
-    <Upload />
-  </div>
-  <div class="col-6 col-9-lg">
-    <Droparea />
-  </div>
+
+<div class="upload">
+  <Upload />
+  <Droparea />
 </div>
 
 {#if isCSAF}
   {#if $appStore.doc}
-    <div class="row">
-      <div class="col">
-        <h1>{$appStore.doc["id"]}: {$appStore.doc["title"]}</h1>
-      </div>
+    <div class="csaf-document-title">
+      <h2>{$appStore.doc["id"]}: {$appStore.doc["title"]}</h2>
     </div>
     <Collapsible header="General" open={$appStore.ui.isGeneralSectionVisible}>
       <General />
@@ -98,17 +93,3 @@
     <Back />
   {/if}
 {/if}
-
-<style>
-  h1 {
-    padding: 0;
-  }
-  h2 {
-    /* style similar to h2 in Collapsible.svelte */
-    margin: 0;
-    font-weight: bold;
-  }
-  .loadfromurl {
-    margin-bottom: 1rem;
-  }
-</style>
diff --git a/src/lib/singleview/Upload.svelte b/src/lib/singleview/Upload.svelte
index 56b0545..3ef1c6e 100644
--- a/src/lib/singleview/Upload.svelte
+++ b/src/lib/singleview/Upload.svelte
@@ -23,36 +23,13 @@
   }
 </script>
 
-<input
-  title="Upload CSAF Document from your device"
-  type="file"
-  accept="application/json"
-  bind:files
-  bind:this={input}
-/>
-
-<style>
-  input[type="file"]::file-selector-button {
-    border-radius: 4px;
-    padding: 0 16px;
-    height: 34px;
-    cursor: pointer;
-    background-color: white;
-    border: 1px solid rgba(0, 0, 0, 0.16);
-    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
-    margin-right: 16px;
-    transition: background-color 200ms;
-  }
-
-  /* file upload button hover state */
-  input[type="file"]::file-selector-button:hover {
-    background-color: var(--color-primary);
-    color: white;
-  }
-
-  /* file upload button active state */
-  input[type="file"]::file-selector-button:active {
-    background-color: var(--color-primary);
-    color: white;
-  }
-</style>
+<div class="file-upload-container">
+  <input
+    class="file-upload"
+    title="Upload CSAF Document from your device"
+    type="file"
+    accept="application/json"
+    bind:files
+    bind:this={input}
+  />
+</div>
diff --git a/src/lib/singleview/acknowledgments/Acknowledgment.svelte b/src/lib/singleview/acknowledgments/Acknowledgment.svelte
index 514047c..d8b7603 100644
--- a/src/lib/singleview/acknowledgments/Acknowledgment.svelte
+++ b/src/lib/singleview/acknowledgments/Acknowledgment.svelte
@@ -29,7 +29,7 @@
   }
 </script>
 
-<KeyValue compact={true} {keys} {values} />
+<KeyValue {keys} {values} />
 {#if ack.urls}
   <ValueList label="URLs" values={ack.urls} />
 {/if}
diff --git a/src/lib/singleview/general/General.svelte b/src/lib/singleview/general/General.svelte
index d5456c1..ca0c608 100644
--- a/src/lib/singleview/general/General.svelte
+++ b/src/lib/singleview/general/General.svelte
@@ -210,43 +210,3 @@
     </Collapsible>
   </div>
 {/if}
-
-<style>
-  .key {
-    width: 15vw;
-    min-width: 20rem;
-    padding: 0.2rem;
-    vertical-align: top;
-  }
-  .value {
-    padding: 0.2rem;
-  }
-  .subsection {
-    margin-left: 3rem;
-  }
-  .documentdata {
-    width: 60vw;
-    min-width: 80rem;
-    margin-left: 3rem;
-  }
-  .tlpclear {
-    background: #000;
-    color: #fff;
-    padding: 0.3rem;
-  }
-  .tlpred {
-    background: #000;
-    color: #ff2b2b;
-    padding: 0.3rem;
-  }
-  .tlpamber {
-    background: #000;
-    color: #ffc000;
-    padding: 0.3rem;
-  }
-  .tlpgreen {
-    background: #000;
-    color: #33ff00;
-    padding: 0.3rem;
-  }
-</style>
diff --git a/src/lib/singleview/general/RevisionHistory.svelte b/src/lib/singleview/general/RevisionHistory.svelte
index d013aca..3851bc3 100644
--- a/src/lib/singleview/general/RevisionHistory.svelte
+++ b/src/lib/singleview/general/RevisionHistory.svelte
@@ -17,10 +17,10 @@
     <table class="striped">
       <thead>
         <tr
-          ><th class="date">Date</th>
-          <th class="number">Number</th>
-          <th class="summary">Summary</th>
-          <th>Legacy_version</th>
+          ><th class="history-date">Date</th>
+          <th class="history-number">Number</th>
+          <th class="history-summary">Summary</th>
+          <th class="hisotry-legacyversion">Legacy_version</th>
         </tr>
       </thead>
       <tbody>
@@ -35,22 +35,3 @@
     </table>
   </div>
 {/if}
-
-<style>
-  th {
-    font-weight: 100;
-  }
-  .revisionhistory {
-    width: 60vw;
-    min-width: 70rem;
-  }
-  .date {
-    width: 20%;
-  }
-  .number {
-    width: 5%;
-  }
-  .summary {
-    width: 80%;
-  }
-</style>
diff --git a/src/lib/singleview/notes/Note.svelte b/src/lib/singleview/notes/Note.svelte
index 8159a71..686f5a5 100644
--- a/src/lib/singleview/notes/Note.svelte
+++ b/src/lib/singleview/notes/Note.svelte
@@ -27,33 +27,16 @@
   }
 </script>
 
-<KeyValue compact={true} {keys} {values} />
+<KeyValue {keys} {values} />
 <div class="category-name">
-  <h6>Text</h6>
+  <h5>Text</h5>
 </div>
 
-<small class="hint bg-light">Markdown</small>
-<div class="text display-markdown bd-light">
-  {@html DOMPurify.sanitize(
-    marked.parse(note.text.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""))
-  )}
+<div class="markdowntext">
+  <small class="hint">Markdown</small>
+  <div class="display-markdown">
+    {@html DOMPurify.sanitize(
+      marked.parse(note.text.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""))
+    )}
+  </div>
 </div>
-
-<style>
-  .category-name {
-    margin-top: 1.5rem;
-  }
-  .hint {
-    margin-left: 3rem;
-  }
-  .text {
-    margin-left: 3rem;
-  }
-  h6 {
-    line-height: 0.3em;
-    font-size: large;
-  }
-  .display-markdown {
-    padding: 0.5rem;
-  }
-</style>
diff --git a/src/lib/singleview/producttree/branch/Branch.svelte b/src/lib/singleview/producttree/branch/Branch.svelte
index 3b4e3b2..6235291 100644
--- a/src/lib/singleview/producttree/branch/Branch.svelte
+++ b/src/lib/singleview/producttree/branch/Branch.svelte
@@ -28,11 +28,3 @@
     <Product product={branch.product} />
   {/if}
 </div>
-
-<style>
-  .branch {
-    margin-left: 3rem;
-    margin-bottom: 1rem;
-    margin-top: 0.6rem;
-  }
-</style>
diff --git a/src/lib/singleview/producttree/product/FileHash.svelte b/src/lib/singleview/producttree/product/FileHash.svelte
index dbac43e..f76a038 100644
--- a/src/lib/singleview/producttree/product/FileHash.svelte
+++ b/src/lib/singleview/producttree/product/FileHash.svelte
@@ -16,9 +16,5 @@
 </script>
 
 {#each hash as hashEntry}
-  <KeyValue
-    compact={true}
-    keys={["algorithm", "value"]}
-    values={[hashEntry.algorithm, hashEntry.value]}
-  />
+  <KeyValue keys={["algorithm", "value"]} values={[hashEntry.algorithm, hashEntry.value]} />
 {/each}
diff --git a/src/lib/singleview/producttree/product/Product.svelte b/src/lib/singleview/producttree/product/Product.svelte
index d89543f..4ff5536 100644
--- a/src/lib/singleview/producttree/product/Product.svelte
+++ b/src/lib/singleview/producttree/product/Product.svelte
@@ -34,7 +34,7 @@
 
 <Collapsible
   header={product.name}
-  level="5"
+  level="4"
   {highlight}
   open={$appStore.ui.selectedProduct === product.product_id}
   onClose={() => {
@@ -44,7 +44,7 @@
   }}
 >
   <div id={product.product_id}>
-    <KeyValue compact={true} keys={["Product ID"]} values={[product.name, product.product_id]} />
+    <KeyValue keys={["Product ID"]} values={[product.name, product.product_id]} />
     {#if product.product_identification_helper}
       <ProductIdentificationHelper helper={product.product_identification_helper} />
     {/if}
diff --git a/src/lib/singleview/producttree/product/ProductIdentificationHelper.svelte b/src/lib/singleview/producttree/product/ProductIdentificationHelper.svelte
index 3677640..efb7a37 100644
--- a/src/lib/singleview/producttree/product/ProductIdentificationHelper.svelte
+++ b/src/lib/singleview/producttree/product/ProductIdentificationHelper.svelte
@@ -17,10 +17,14 @@
 </script>
 
 <div class="helperinfo">
-  <h5>Product Version Helper</h5>
+  <table>
+    <tr>
+      <td><h5>Product Version Helper</h5></td>
+    </tr>
+  </table>
   <div class="helperinfobody">
     {#if helper.cpe}
-      <KeyValue compact={true} keys={["cpe"]} values={helper.cpe} />
+      <KeyValue keys={["cpe"]} values={helper.cpe} />
     {/if}
     {#if helper.hashes}
       {#each helper.hashes as hash}
@@ -31,7 +35,7 @@
       <ValueList label="Model numbers" values={helper.model_numbers} />
     {/if}
     {#if helper.purl}
-      <KeyValue compact={true} keys={["purl"]} values={helper.purl} />
+      <KeyValue keys={["purl"]} values={helper.purl} />
     {/if}
     {#if helper.sbom_urls}
       <ValueList label="SBOM URLs" values={helper.sbom_urls} />
@@ -47,12 +51,3 @@
     {/if}
   </div>
 </div>
-
-<style>
-  .helperinfobody {
-    margin-left: 3rem;
-  }
-  h5 {
-    margin-bottom: 0;
-  }
-</style>
diff --git a/src/lib/singleview/producttree/product/ProductName.svelte b/src/lib/singleview/producttree/product/ProductName.svelte
index 4d36390..129b2fd 100644
--- a/src/lib/singleview/producttree/product/ProductName.svelte
+++ b/src/lib/singleview/producttree/product/ProductName.svelte
@@ -21,7 +21,7 @@
 <div id={product?.product_id}>
   <Collapsible
     header={product.name}
-    level="5"
+    level="4"
     {highlight}
     open={$appStore.ui.selectedProduct === product.product_id}
     onClose={() => {
@@ -30,11 +30,7 @@
       }
     }}
   >
-    <KeyValue
-      keys={["Name", "Product ID"]}
-      values={[product.name, product.product_id]}
-      compact={true}
-    />
+    <KeyValue keys={["Name", "Product ID"]} values={[product.name, product.product_id]} />
     {#if product.product_identification_helper}
       <ProductIdentificationHelper helper={product.product_identification_helper} />
     {/if}
diff --git a/src/lib/singleview/producttree/product/XGenericURI.svelte b/src/lib/singleview/producttree/product/XGenericURI.svelte
index 6c34fae..275bdf4 100644
--- a/src/lib/singleview/producttree/product/XGenericURI.svelte
+++ b/src/lib/singleview/producttree/product/XGenericURI.svelte
@@ -18,15 +18,6 @@
 <p>X Generic URIs</p>
 <div class="xgeneric">
   {#each x_generic_uris as uri}
-    <KeyValue compact={true} keys={["Namespace", "URI"]} values={[uri.namespace, uri.uri]} />
+    <KeyValue keys={["Namespace", "URI"]} values={[uri.namespace, uri.uri]} />
   {/each}
 </div>
-
-<style>
-  p {
-    margin-bottom: 0;
-  }
-  .xgeneric {
-    margin-left: 3rem;
-  }
-</style>
diff --git a/src/lib/singleview/productvulnerabilities/ProductVulnerabilities.svelte b/src/lib/singleview/productvulnerabilities/ProductVulnerabilities.svelte
index d99f947..d151033 100644
--- a/src/lib/singleview/productvulnerabilities/ProductVulnerabilities.svelte
+++ b/src/lib/singleview/productvulnerabilities/ProductVulnerabilities.svelte
@@ -50,9 +50,9 @@
   {#if productLines.length > 0}
     <div class="crosstable-container">
       <div class="crosstable">
-        <table class="striped">
+        <table>
           <thead>
-            <tr>
+            <tr class="crosstable-header-row">
               {#each headerColumns as column, index}
                 {#if index == 0}
                   <th class="productname">{column}</th>
@@ -71,7 +71,7 @@
               <tr>
                 {#each line as column, index}
                   {#if index < 1}
-                    <td
+                    <td class="productname"
                       ><a id={crypto.randomUUID()} on:click={openProduct} href={column}
                         >{$appStore.doc.productsByID[column]} ({column})</a
                       ></td
@@ -103,76 +103,19 @@
       </div>
     </div>
     <div class="legend">
-      <div class="">
-        <h6>Legend</h6>
-        <dl>
-          <dt><i class="bx bx-check" /></dt>
-          <dd>Fixed</dd>
-          <dt><i class="bx bx-error" /></dt>
-          <dd>Under investigation</dd>
-          <dt><i class="bx bx-x" /></dt>
-          <dd>Known affected</dd>
-          <dt><i class="bx bx-minus" /></dt>
-          <dd>Not affected</dd>
-          <dt><i class="bx bx-heart" /></dt>
-          <dd>Recommended</dd>
-        </dl>
-      </div>
+      <h5>Legend</h5>
+      <dl>
+        <dt><i class="bx bx-check" /></dt>
+        <dd>Fixed</dd>
+        <dt><i class="bx bx-error" /></dt>
+        <dd>Under investigation</dd>
+        <dt><i class="bx bx-x" /></dt>
+        <dd>Known affected</dd>
+        <dt><i class="bx bx-minus" /></dt>
+        <dd>Not affected</dd>
+        <dt><i class="bx bx-heart" /></dt>
+        <dd>Recommended</dd>
+      </dl>
     </div>
   {/if}
 </div>
-
-<style>
-  tr {
-    line-height: 2rem;
-  }
-
-  .legend {
-    margin-top: auto;
-    padding-left: 2.5rem;
-    width: 11vw;
-  }
-  dt {
-    font-size: large;
-    float: left;
-    clear: left;
-    width: 3rem;
-  }
-  dd {
-    margin-bottom: 0.3em;
-  }
-
-  dd:last-of-type {
-    margin-bottom: 0;
-  }
-  th {
-    font-weight: 100;
-  }
-  h6 {
-    font-weight: 600;
-  }
-  .crosstable-overview {
-    display: flex;
-  }
-  .crosstable-container {
-    width: 84vw;
-  }
-  .crosstable {
-    overflow: auto;
-    max-height: 70vh;
-  }
-  .cve {
-    min-width: 14rem;
-    text-align: center;
-  }
-  .total {
-    min-width: 15rem;
-    text-align: center;
-  }
-  .affectionstate {
-    text-align: center;
-  }
-  .productname {
-    min-width: 35rem;
-  }
-</style>
diff --git a/src/lib/singleview/references/Reference.svelte b/src/lib/singleview/references/Reference.svelte
index cbc273d..f052dfa 100644
--- a/src/lib/singleview/references/Reference.svelte
+++ b/src/lib/singleview/references/Reference.svelte
@@ -25,11 +25,5 @@
 </script>
 
 <div class="reference">
-  <KeyValue compact={true} {keys} {values} />
+  <KeyValue {keys} {values} />
 </div>
-
-<style>
-  .reference {
-    margin-bottom: 1rem;
-  }
-</style>
diff --git a/src/lib/singleview/references/References.svelte b/src/lib/singleview/references/References.svelte
index 0857c55..2545b0b 100644
--- a/src/lib/singleview/references/References.svelte
+++ b/src/lib/singleview/references/References.svelte
@@ -17,7 +17,7 @@
   {#each references as reference, index}
     <Reference {reference} />
     {#if references.length > 1 && index < references.length - 1}
-      <hr style="width:80vw;" />
+      <hr />
     {/if}
   {/each}
 {/if}
diff --git a/src/lib/singleview/vulnerabilities/vulnerability/GeneralSection.svelte b/src/lib/singleview/vulnerabilities/vulnerability/GeneralSection.svelte
index bb732f5..68a9f0b 100644
--- a/src/lib/singleview/vulnerabilities/vulnerability/GeneralSection.svelte
+++ b/src/lib/singleview/vulnerabilities/vulnerability/GeneralSection.svelte
@@ -35,4 +35,4 @@
   }
 </script>
 
-<KeyValue compact={true} {keys} {values} />
+<KeyValue {keys} {values} />
diff --git a/src/lib/singleview/vulnerabilities/vulnerability/ID.svelte b/src/lib/singleview/vulnerabilities/vulnerability/ID.svelte
index 4e95c31..4cb2a3c 100644
--- a/src/lib/singleview/vulnerabilities/vulnerability/ID.svelte
+++ b/src/lib/singleview/vulnerabilities/vulnerability/ID.svelte
@@ -19,7 +19,6 @@
 <Collapsible header="IDs" level="4">
   {#each vulnerabilityIds as vulnerabilityID}
     <KeyValue
-      compact={true}
       keys={["Systemname", "Text"]}
       values={[vulnerabilityID.system_name, vulnerabilityID.text]}
     />
diff --git a/src/lib/singleview/vulnerabilities/vulnerability/flags/Flags.svelte b/src/lib/singleview/vulnerabilities/vulnerability/flags/Flags.svelte
index c467ae8..4b6da9c 100644
--- a/src/lib/singleview/vulnerabilities/vulnerability/flags/Flags.svelte
+++ b/src/lib/singleview/vulnerabilities/vulnerability/flags/Flags.svelte
@@ -33,9 +33,3 @@
     {/each}
   {/if}
 </Collapsible>
-
-<style>
-  .spacer {
-    margin-top: 1em;
-  }
-</style>
diff --git a/src/lib/singleview/vulnerabilities/vulnerability/productStatus/ProductStatus.svelte b/src/lib/singleview/vulnerabilities/vulnerability/productStatus/ProductStatus.svelte
index a78e33d..32fdf25 100644
--- a/src/lib/singleview/vulnerabilities/vulnerability/productStatus/ProductStatus.svelte
+++ b/src/lib/singleview/vulnerabilities/vulnerability/productStatus/ProductStatus.svelte
@@ -64,9 +64,3 @@
     {/if}
   </div>
 </Collapsible>
-
-<style>
-  .status {
-    margin-top: 1.5rem;
-  }
-</style>
diff --git a/src/lib/singleview/vulnerabilities/vulnerability/productStatus/ProductStatusValueList.svelte b/src/lib/singleview/vulnerabilities/vulnerability/productStatus/ProductStatusValueList.svelte
index 2b81141..7286469 100644
--- a/src/lib/singleview/vulnerabilities/vulnerability/productStatus/ProductStatusValueList.svelte
+++ b/src/lib/singleview/vulnerabilities/vulnerability/productStatus/ProductStatusValueList.svelte
@@ -28,7 +28,7 @@
 
 {#if $appStore.doc}
   <p>{label}</p>
-  <ul>
+  <ul class="valuelist">
     {#each values as value}
       <li>
         <a id={crypto.randomUUID()} on:click={openProduct} href={value}
@@ -38,14 +38,3 @@
     {/each}
   </ul>
 {/if}
-
-<style>
-  p {
-    margin-bottom: 0;
-  }
-  ul {
-    margin-top: 0;
-    padding-left: 3rem;
-    list-style-type: none;
-  }
-</style>
diff --git a/src/lib/singleview/vulnerabilities/vulnerability/remediations/Remediation.svelte b/src/lib/singleview/vulnerabilities/vulnerability/remediations/Remediation.svelte
index 8ab6a24..1fc1f60 100644
--- a/src/lib/singleview/vulnerabilities/vulnerability/remediations/Remediation.svelte
+++ b/src/lib/singleview/vulnerabilities/vulnerability/remediations/Remediation.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <p>
-  <KeyValue {keys} {values} compact={true} />
+  <KeyValue {keys} {values} />
 </p>
 <ValueField label="Details" value={remediation.details} />
 {#if remediation.entitlements}
diff --git a/src/lib/singleview/vulnerabilities/vulnerability/remediations/Remediations.svelte b/src/lib/singleview/vulnerabilities/vulnerability/remediations/Remediations.svelte
index 3caf292..f92cc77 100644
--- a/src/lib/singleview/vulnerabilities/vulnerability/remediations/Remediations.svelte
+++ b/src/lib/singleview/vulnerabilities/vulnerability/remediations/Remediations.svelte
@@ -19,7 +19,7 @@
 <Collapsible header="Remediations" level="4">
   {#if vulnerability.remediations}
     {#each vulnerability.remediations as remediation}
-      <Collapsible header="Category: {remediation.category}" level="5">
+      <Collapsible header="Category: {remediation.category}" level="4">
         <Remediation {remediation} />
       </Collapsible>
     {/each}
diff --git a/src/lib/singleview/vulnerabilities/vulnerability/scores/Scores.svelte b/src/lib/singleview/vulnerabilities/vulnerability/scores/Scores.svelte
index 6b1a84d..16c3dc0 100644
--- a/src/lib/singleview/vulnerabilities/vulnerability/scores/Scores.svelte
+++ b/src/lib/singleview/vulnerabilities/vulnerability/scores/Scores.svelte
@@ -20,7 +20,7 @@
 <Collapsible header="Scores" level="4">
   {#if vulnerability.scores}
     {#each vulnerability.scores as score, index}
-      <Collapsible header="Score {index + 1}" level="5">
+      <Collapsible header="Score {index + 1}" level="4">
         {#if score.cvss_v2}
           <CVSSV2 {score} />
         {/if}
@@ -35,9 +35,3 @@
     {/each}
   {/if}
 </Collapsible>
-
-<style>
-  .spacer {
-    margin-top: 1.5em;
-  }
-</style>
diff --git a/src/lib/singleview/vulnerabilities/vulnerability/threats/Threats.svelte b/src/lib/singleview/vulnerabilities/vulnerability/threats/Threats.svelte
index 1f4c0c7..fe5f82b 100644
--- a/src/lib/singleview/vulnerabilities/vulnerability/threats/Threats.svelte
+++ b/src/lib/singleview/vulnerabilities/vulnerability/threats/Threats.svelte
@@ -26,9 +26,3 @@
     {/if}
   {/each}
 </Collapsible>
-
-<style>
-  .spacer {
-    margin-top: 1em;
-  }
-</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9ba9d1a..4b54880 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import "boxicons/css/boxicons.min.css";
-  import "chota/dist/chota.min.css";
   import { appStore } from "$lib/store";
   import { base } from "$app/paths";
   /*global __APP_VERSION__*/
@@ -69,59 +68,21 @@
   <!-- svelte-ignore a11y-no-redundant-roles -->
   <div class="header">
     <div class="programname">
-      <h1 role="heading">CSAF Webview</h1>
-      <h4>v{version}</h4>
+      <div>
+        <h1 role="heading">CSAF Webview</h1>
+      </div>
+      <div>
+        <h4>v{version}</h4>
+      </div>
     </div>
-    <div><h4>{headerText}</h4></div>
+    <div class="title"><h3>{headerText}</h3></div>
     <div class="switchbtn">
       <a
         title={mode !== MODE.SINGLE ? "Switch to Advisory" : "Switch to Overview"}
         href={switchToRoute}
-        class="switchbutton button"
-        >{mode !== MODE.SINGLE ? "Switch to Advisory" : "Switch to Overview"}</a
+        class="btn">{mode !== MODE.SINGLE ? "Switch to Advisory" : "Switch to Overview"}</a
       >
     </div>
   </div>
   <slot />
 </div>
-
-<style>
-  .switchbutton {
-    box-shadow: 1px 3px 3px #c1c1c1;
-    color: rgb(63, 65, 68);
-  }
-  .content {
-    margin-left: 3rem;
-    margin-right: 3rem;
-  }
-  .header {
-    display: flex-column;
-    align-items: center;
-    margin-block-end: 2rem;
-  }
-
-  .programname {
-    display: flex;
-    align-items: baseline;
-  }
-
-  h1 {
-    margin-bottom: 0;
-    margin-right: 1rem;
-  }
-  @media only screen and (min-width: 768px) {
-    .header {
-      display: flex;
-      align-items: center;
-      margin-block-end: 1rem;
-    }
-    .programname {
-      min-width: 45vw;
-    }
-    .switchbtn {
-      min-width: 20vw;
-      text-align: right;
-      margin-left: auto;
-    }
-  }
-</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7a92b57..4501037 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -44,5 +44,7 @@
   });
 </script>
 
-<SingleView />
-<Spinner open={$appStore.ui.csafLoading} />
+<div class="appbody">
+  <SingleView />
+  <Spinner open={$appStore.ui.csafLoading} />
+</div>
diff --git a/src/routes/feed/+page.svelte b/src/routes/feed/+page.svelte
index d5bc171..f5deb1e 100644
--- a/src/routes/feed/+page.svelte
+++ b/src/routes/feed/+page.svelte
@@ -38,5 +38,7 @@
   });
 </script>
 
-<FeedView />
-<Spinner open={$appStore.ui.feedLoading} />
+<div class="appbody">
+  <FeedView />
+  <Spinner open={$appStore.ui.feedLoading} />
+</div>
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..8493204
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,464 @@
+/* Sane CSS defaults*/
+::root {
+  font-size: 18px;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  font-family: "Helvetica", "Arial", sans-serif;
+}
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+#root,
+#__next {
+  isolation: isolate;
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: 100;
+}
+
+h2 {
+  font-size: 1.75rem;
+  font-weight: 100;
+}
+
+h3 {
+  font-size: 1.5rem;
+  font-weight: 100;
+}
+
+h4 {
+  font-size: 1.25rem;
+  font-weight: 100;
+}
+
+h5 {
+  font-size: 1rem;
+  font-weight: 100;
+}
+
+h6 {
+  font-size: 0.75rem;
+  font-weight: 100;
+}
+
+hr {
+  width: 66vw;
+  border-top: 1px solid lightgray;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.content {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  margin-bottom: 2rem;
+}
+
+.programname {
+  display: flex;
+  align-items: baseline;
+}
+
+.title {
+  margin-bottom: 1rem;
+}
+
+.btn {
+  box-shadow: 1px 3px 3px #c1c1c1;
+  color: rgb(63, 65, 68);
+  background: lightgrey;
+  padding: 0.5rem;
+  text-decoration: none;
+  border-radius: 3px;
+}
+
+.loader {
+  margin-bottom: 1rem;
+  width: 100%;
+}
+
+.url-outline {
+  padding: 0.5rem;
+  border: 1px solid lightgrey;
+  border-radius: 5px;
+  margin-bottom: 1rem;
+}
+
+.url-container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+}
+
+.postpend {
+  position: absolute;
+  right: 0;
+}
+
+.postpend button {
+  background-color: white;
+  border: 0;
+}
+
+.url-input {
+  width: 85%;
+  margin-left: 1rem;
+}
+
+.url-input input {
+  width: 85%;
+}
+
+.url-outline input {
+  border: 0;
+}
+
+.url-outline input:focus {
+  outline: none;
+}
+
+.upload {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.file-upload-container {
+  border: 1px solid lightgrey;
+  height: 50px;
+  padding: 0.5rem;
+  border-radius: 5px;
+}
+
+.file-upload::file-selector-button {
+  border-radius: 4px;
+  padding: 0 16px;
+  height: 34px;
+  cursor: pointer;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
+  margin-right: 16px;
+  transition: background-color 200ms;
+}
+
+.file-upload::file-selector-button:hover {
+  background-color: lightgrey;
+  color: white;
+}
+
+.file-upload::file-selector-button:active {
+  background-color: lightgrey;
+  color: white;
+}
+
+.droparea {
+  height: 50px;
+  width: 100%;
+  border: 1px dashed gray;
+  color: gray;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 2em;
+}
+
+.droparea-error {
+  background: red;
+  color: white;
+}
+
+.droparea-okay {
+  background-color: green;
+  color: white;
+}
+
+.collapsible {
+  margin-bottom: 0.25rem;
+}
+
+.collapsible-body {
+  margin-left: 1.5rem;
+}
+
+.backbutton {
+  background-color: black;
+  color: white;
+  text-align: center;
+  width: 8rem;
+  padding: 0.5rem;
+  position: sticky;
+  bottom: 1rem;
+  cursor: pointer;
+  float: right;
+}
+
+.tag {
+  border-radius: 5px;
+  border: 1px solid lightgray;
+  padding: 0.25rem;
+}
+
+.key {
+  width: 12rem;
+}
+
+.hint {
+  background: lightgray;
+}
+
+.display-markdown {
+  padding: 0.5rem;
+  border: 1px solid lightgray;
+}
+
+.revisionhistory {
+  width: 80vw;
+  overflow-y: scroll;
+  max-height: 40vh;
+}
+
+.revisionhistory table {
+  border-spacing: 0;
+}
+
+.revisionhistory tr {
+  text-align: left;
+}
+
+.revisionhistory th {
+  border-bottom: 1px solid lightgray;
+}
+
+.revisionhistory table tbody tr:first-child td {
+  padding-top: 1rem;
+}
+
+.revisionhistory tbody tr:last-child td {
+  padding-bottom: 1rem;
+}
+
+.history-date {
+  min-width: 17rem;
+}
+
+.history-number {
+  min-width: 5rem;
+}
+
+.history-summary {
+  min-width: 20rem;
+}
+
+.highlight-section {
+  background-color: lightgrey;
+}
+
+.valuelist {
+  list-style-type: none;
+  padding-inline-start: 1em;
+}
+
+.crosstable {
+  max-height: 70vh;
+  max-width: 85vw;
+  overflow: auto;
+}
+
+.crosstable table {
+  border-spacing: 0;
+}
+
+.crosstable td {
+  line-height: 1.5rem;
+}
+
+.crosstable table tbody tr:nth-of-type(2n) {
+  background: #f2f2f2;
+}
+
+.crosstable table tbody tr:first-child td {
+  padding-top: 1rem;
+}
+
+.crosstable table tbody tr:last-child td {
+  padding-bottom: 1rem;
+}
+
+.crosstable-header-row th {
+  padding: 0.5rem;
+  border-bottom: 1px solid lightgray;
+}
+
+.productname {
+  text-align: left;
+  width: 30rem;
+  white-space: nowrap;
+}
+
+.total {
+  text-align: center;
+  width: 10rem;
+  white-space: nowrap;
+}
+
+.cve {
+  text-align: center;
+  width: 10rem;
+  white-space: nowrap;
+}
+
+.affectionstate {
+  text-align: center;
+}
+
+.crosstable-overview {
+  display: flex;
+  flex-direction: column;
+}
+
+.legend {
+  margin-left: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  white-space: nowrap;
+}
+
+.legend dd {
+  display: inline;
+  margin: 0;
+}
+.legend dd:after {
+  display: block;
+  content: "";
+}
+.legend dt {
+  display: inline-block;
+  min-width: 30px;
+}
+.branch {
+  margin-left: 3rem;
+  margin-bottom: 1rem;
+  margin-top: 0.6rem;
+}
+.xgeneric {
+  margin-left: 3rem;
+}
+
+.category-name {
+  margin-left: 1rem;
+}
+
+.markdowntext {
+  margin-left: 2rem;
+}
+
+.spinner {
+  font-size: xx-large;
+  animation-name: spin;
+  animation-duration: 750ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  /* transform: rotate(3deg); */
+  /* transform: rotate(0.3rad);/ */
+  /* transform: rotate(3grad); */
+  /* transform: rotate(.03turn);  */
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.tlpclear {
+  background: #000;
+  color: #fff;
+  padding: 0.3rem;
+}
+.tlpred {
+  background: #000;
+  color: #ff2b2b;
+  padding: 0.3rem;
+}
+.tlpamber {
+  background: #000;
+  color: #ffc000;
+  padding: 0.3rem;
+}
+.tlpgreen {
+  background: #000;
+  color: #33ff00;
+  padding: 0.3rem;
+}
+
+@media screen and (min-width: 1700px) {
+  .legend {
+    margin-top: auto;
+  }
+  .crosstable-overview {
+    flex-direction: row;
+  }
+}
+
+@media screen and (min-width: 700px) {
+  .header {
+    flex-direction: row;
+    margin-bottom: 1rem;
+  }
+  .programname {
+    min-width: clamp(330px, 25vw, 25vw);
+  }
+  .title {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 0;
+  }
+  .switchbtn {
+    min-width: clamp(130px, 25vw, 25vw);
+    text-align: right;
+  }
+  .upload {
+    flex-direction: row;
+  }
+  .file-upload-container {
+    width: 50%;
+  }
+  .droparea {
+    width: 50%;
+  }
+  .revisionhistory {
+    width: 50vw;
+  }
+}