add header card (hcard) styling

scipost_django/scipost/static/scipost/assets/css/_common.scss

+// HTMX component styling
 .htmx-crud-button-actions {
     display: flex;
     flex-direction: column;
@@ -120,4 +121,38 @@
         border-radius: 0.25rem;
     }
 
+}
+
+// HTML bootstrap-like components
+.hcard {
+    --sp-hcard-bg-color: transparent;
+    --sp-hcard-outline-color: #{$body-color};
+
+    border: 1px solid var(--sp-hcard-outline-color);
+
+    >*:first-child {
+        padding: 0.25rem;
+        // It would have been background-color: var(--sp-hcard-bg-color), 
+        // but I need components to be separated for the opacity to work
+        background-color: rgba(var(--sp-hcard-bg-color-r), var(--sp-hcard-bg-color-g), var(--sp-hcard-bg-color-b), var(--#{$prefix}bg-opacity, 1));
+
+        >* {
+            margin: 0;
+        }
+    }
+
+    >*:not(:first-child) {
+        margin: 0;
+        padding: 0.25rem 0.5rem 0.5rem 0.5rem;
+    }
+}
+
+@each $color, $value in $theme-colors {
+    .hcard-#{$color} {
+        --sp-hcard-bg-color: #{$value};
+        --sp-hcard-bg-color-r: #{red($value)};
+        --sp-hcard-bg-color-g: #{green($value)};
+        --sp-hcard-bg-color-b: #{blue($value)};
+        --sp-hcard-outline-color: #{$value};
+    }
 }
\ No newline at end of file