Frontend: Added basic markdown support with custom css. Enlarged by 10% the popup in desktop.

frontend/src/lib/components/projects-popup.svelte

@@ -3,6 +3,7 @@
 
   import "$lib/css/project-popup.css";
   import "$lib/css/slide.css";
+  import "$lib/css/markdown.css";
   import Pill from "$lib/components/pill.svelte";
   import { showPopup, actualData, filterTag } from "$lib/js/popup.js";
   import SvgIcon from "@jamescoyle/svelte-icon";
@@ -138,7 +139,9 @@
           <SvgIcon size="35" path={mdiTextBox} type="mdi" />
           <p class="slide-subtitle slide-aftericon">Description</p>
         </div>
-        <p class="slide-subtitle project-popup-text">{description}</p>
+        <div class="markdown">
+          <SvelteMarkdown source={description} />
+        </div>
       </div>
       <!-- Links -->
       {#if report_link != null || github_link != null || archive_link != null || application_link != null}
@@ -214,8 +217,9 @@
         <SvgIcon size="35" path={mdiTextBox} type="mdi" />
         <p class="slide-subtitle slide-aftericon">Description</p>
       </div>
-      <SvelteMarkdown source={description}/>
-      <!--<p class="slide-subtitle project-popup-text">{description}</p>-->
+      <div class="markdown">
+        <SvelteMarkdown source={description} />
+      </div>
     </div>
   </div>
 </div>

frontend/src/lib/css/base.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&family=Sometype+Mono:wght@500&display=swap');
 
 body,
 html {
@@ -13,6 +13,8 @@ html {
     --color-subtitle: #0C356A;
     --color-special: #0174BE;
     --color-text: #261C2C;
+    --color-subtext: #413543;
     --color-background: #F8F1F1;
+    --color-code: #ECE6F1;
     --color-pill: #D0D4CA;
 }

frontend/src/lib/css/markdown.css

@@ -0,0 +1,119 @@
+.markdown h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: 'Gabarito', sans-serif;
+    font-weight: 700;
+    color: var(--color-text);
+}
+
+.markdown h4,
+h5,
+h6 {
+    font-weight: 400 !important;
+}
+
+.markdown p,
+li {
+    font-family: 'Urbanist', sans-serif;
+    font-weight: 500;
+    color: var(--color-subtext);
+}
+
+.markdown a {
+    color: var(--color-special);
+}
+
+.markdown a:hover {
+    color: var(--color-subtitle);
+}
+
+.markdown a:visited {
+    color: var(--color-title);
+}
+
+.markdown hr {
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    border: none;
+    height: 2px;
+    background-color: #41354330;
+}
+
+/* Code Blcoks */
+.markdown pre {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: var(--color-text);
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: var(--color-code);
+    border-radius: 0.5rem;
+    box-shadow: #352b4027 0px 4px 6px -1px, #352b4016 0px 2px 4px -1px;
+}
+
+.markdown pre>code {
+    font-family: 'Sometype Mono', monospace;
+    font-weight: 500;
+}
+
+.markdown blockquote {
+    padding: 10px 20px;
+    margin: 0 0 20px;
+    font-size: 17.5px;
+    border-left: 5px solid var(--color-subtext);
+}
+
+.markdown table {
+    border-spacing: 0;
+    box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
+}
+
+.markdown tr>th {
+    vertical-align: bottom;
+    border-right: 2px solid var(--color-subtext);
+    padding: 0.5rem;
+    font-family: 'Gabarito', sans-serif;
+    font-weight: 400;
+}
+
+.markdown tr>th:last-child {
+    border-right: none;
+}
+
+.markdown tr>td {
+    background-color: var(--color-code);
+    border-right: 2px solid var(--color-subtext);
+    padding: 8px;
+    line-height: 1.42857143;
+    vertical-align: top;
+}
+
+.markdown tr>td:last-child {
+    border-right: none;
+}
+
+@media screen and (min-width: 1000px) {
+    .markdown img {
+        max-height: 16rem;
+        max-width: 40dvh;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        object-fit: cover;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .markdown img {
+        max-width: 76dvw;
+        max-height: 100%;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        object-fit: cover;
+    }
+}

frontend/src/lib/css/project-popup.css

@@ -3,9 +3,9 @@
         height: 80dvh;
         /* 100-height/2 */
         top: calc(10vh - 1.5rem);
-        width: 60dvw;
+        width: 70dvw;
         /* 100-width/2 */
-        left: calc(20vw - 1.5rem);
+        left: calc(15vw - 1.5rem);
         border-radius: 0.4rem;
         box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
         position: fixed;