Started to design MetaData for Letters

HaWeb/wwwroot/css/output.css

@@ -1016,6 +1016,26 @@ body {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+/* Classes for Letter View */
+
+.ha-letterheader {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+  padding-top: 2.25rem;
+}
+
+@media (min-width: 1024px) {
+  .ha-letterheader {
+    padding-left: 4rem;
+    padding-right: 4rem;
+    padding-top: 3rem;
+  }
+}
+
+/* Classes for MetaData View */
+
 /* Classes from .NET */
 
 .ha-title {

HaWeb/wwwroot/css/site.css

@@ -133,7 +133,7 @@
         @apply underline decoration-solid
     }
 
-    /* Classes for static pages */
+/* Classes for static pages */
 
     .ha-static {
         @apply w-full bg-slate-50 py-12 px-12 md:px-16 hyphenate font-serif
@@ -191,7 +191,7 @@
         @apply inline-block absolute text-right w-8 -left-10
     }
 
-    /* Classes for register pages */
+/* Classes for register pages */
 
     .ha-register {
         @apply w-full font-serif numeric-mediaeval
@@ -297,7 +297,19 @@
         @apply hover:text-gray-900 no-underline
     }
 
-    /* Classes from .NET */
+/* Classes for Letter View */
+
+    .ha-letterheader {
+        @apply bg-slate-50 pt-9 md:pt-12 px-9 md:px-16
+    }
+
+/* Classes for MetaData View */
+
+
+
+
+
+/* Classes from .NET */
     .ha-title {
         @apply inline italic
     }
@@ -338,7 +350,8 @@
         @apply relative -top-[0.5em] text-[80%]
     }
 
-    /* Classes from Javascript */
+/* Classes from Javascript */
+
     .active {
         @apply !text-hamannHighlight pointer-events-none
     }