frontend redesign

app/src/lib/card.svelte

@@ -1,46 +1,24 @@
 <script>
   export let title;
-
-  let current = "";
-  let i = 0;
-
-  while (title.length > i) {
-    let c = title[i];
-    setTimeout(
-      () => {
-        current += c;
-      },
-      100 * (i + 1)
-    );
-    i += 1;
-  }
 </script>
 
-<div class="main">
-  <div class="title">
-    root@ngn.tf:~# {current}
-  </div>
-  <div class="content">
+<main>
+  <h1 class="title">{title}</h1>
+  <div>
     <slot></slot>
   </div>
-</div>
+</main>
 
 <style>
-  .main {
+  main {
+    flex: 1;
+    flex-basis: 30%;
+
     display: flex;
     flex-direction: column;
-    width: 100%;
-    background: var(--dark-three);
-    box-shadow: var(--box-shadow);
-    border-radius: var(--radius);
-    border: solid 1px var(--border-color);
   }
 
-  .title {
-    background: var(--dark-two);
-    padding: 25px;
-    border-radius: 7px 7px 0px 0px;
-    font-size: 20px;
+  main .title {
     font-family:
       Consolas,
       Monaco,
@@ -50,14 +28,23 @@
       Bitstream Vera Sans Mono,
       Courier New,
       monospace;
-    color: white;
+    color: var(--white-1);
   }
 
-  .content {
-    background: var(--dark-three);
-    padding: 30px;
-    color: white;
-    border-radius: 5px;
-    font-size: 25px;
+  main .title::before {
+    content: "#";
+    margin: 0 10px 0 0;
+    color: var(--white-3);
+  }
+
+  main div {
+    border-left: solid 1px var(--black-4);
+    padding: 25px 25px 10px 25px;
+    font-size: var(--size-4);
+    color: var(--white-1);
+    word-wrap: break-word;
+    align-items: center;
+    margin-left: 7px;
+    flex: 1;
   }
 </style>