Connect CalDAV todos to DB-Items, finish todo component and add it to pipeline items

resources/css/app.css

@@ -131,7 +131,14 @@ @layer utilities {
         letter-spacing: 0.006em;
     }
 
-    @media (min-width: 1281px) { body, html { font-size: 16px; } }
+    @media (min-width: 1281px) {
+
+        body,
+        html {
+            font-size: 16px;
+        }
+    }
+
     /* @media (min-width: 1921px) { body, html { font-size: 18px; } } */
 
     /* Fluid scaling */
@@ -170,10 +177,10 @@ :root {
     --accent: var(--color-zinc-100);
     --accent-foreground: hsl(0 0% 9%);
     --destructive: var(--color-red-500);
-    --destructive-foreground: hsl(0 0% 98%);
+    --destructive-foreground: var(--color-red-50);
     --success: var(--color-lime-400);
     --success-foreground: var(--color-foreground);
-    --warning: var(--color-amber-300);
+    --warning: var(--color-amber-400);
     --warning-foreground: var(--color-amber-900);
     --action: var(--color-blue-500);
     --action-foreground: var(--color-white);
@@ -187,7 +194,8 @@ :root {
     --chart-5: hsl(27 87% 67%);
     --radius: 0.5rem;
     --main-background: var(--color-zinc-50);
-    --sidebar-background: oklch(95.5% 0.003 286.35);;
+    --sidebar-background: oklch(95.5% 0.003 286.35);
+    ;
     --sidebar-foreground: var(--foreground);
     --sidebar-icon: var(--color-zinc-500);
     --sidebar-primary: hsl(0 0% 10%);
@@ -225,9 +233,9 @@ .dark {
     --destructive-foreground: var(--color-red-100);
     --success: var(--color-lime-700);
     --success-foreground: var(--color-lime-200);
-    --warning: var(--color-amber-900);
-    --warning-foreground: var(--color-amber-400);
-    --action: var(--color-blue-600);
+    --warning: var(--color-amber-400);
+    --warning-foreground: var(--color-amber-900);
+    --action: var(--color-blue-400);
     --action-foreground: var(--color-blue-200);
     --border: var(--color-neutral-700);
     --input: var(--color-neutral-700);
@@ -269,6 +277,83 @@ @layer base {
     .lucide {
         stroke-width: 1.666;
     }
+
+    .content {
+        h1 {
+            @apply text-xl font-bold;
+        }
+
+        h2 {
+            @apply text-lg font-bold;
+        }
+
+        h3,
+        h4,
+        h5,
+        h6 {
+            @apply text-md font-bold;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            @apply mb-4;
+        }
+
+        h1:not(:first-child),
+        h2:not(:first-child),
+        h3:not(:first-child),
+        h4:not(:first-child),
+        h5:not(:first-child),
+        h6:not(:first-child) {
+            @apply mt-8;
+        }
+
+        a {
+            @apply text-action hover:underline;
+            @apply cursor-pointer;
+        }
+
+        ol, ul {
+            @apply my-4 ml-6;
+        }
+        ol {
+            @apply list-decimal list-inside;
+        }
+
+        ul {
+            @apply list-disc list-inside;
+        }
+
+        ol p, ul p {
+            @apply inline;
+        }
+
+        p:not(:last-child) {
+            margin-bottom: calc(var(--spacing) * 1.333);
+        }
+
+        article:not(:last-child) {
+            margin-bottom: calc(var(--spacing) * 3);
+        }
+
+        article:not(:last-child) .note-content {
+            padding-bottom: calc(var(--spacing) * 3);
+        }
+
+        blockquote {
+            margin: calc(var(--spacing) * 4) 0;
+            padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6);
+            color: var(--color-muted-foreground);
+            background-color: var(--color-muted);
+            border-radius: var(--radius-lg);
+            border-left: 4px solid var(--color-border);
+            box-shadow: var(--shadow-md);
+        }
+    }
 }
 
 @layer components {