Remade the title block to be multi-purpose and added the facebook widget

styles/_styles.scss

@@ -4,7 +4,7 @@
 @import "anchoring";
 @import "carousel";
 @import "image";
-@import "main-title";
+@import "title-block";
 @import "footer";
 
 @tailwind base;
@@ -18,6 +18,8 @@ html {
     --header-textColor: #ffd39c;
     --header-Height: 5.375rem;
 
+    --default-link-color: #d8ac74;
+
     scroll-padding-top: var(--header-Height);
 }
 
@@ -32,13 +34,16 @@ html {
 
 .default-text-color {
     color: var(--primaryColor);
-    --tw-prose-bold: #124498;
+    --tw-prose-bold: var(--primaryColor);
+    --tw-prose-headings: var(--primaryColor)
 }
 
 .default-paragraph-style {
     color: var(--primaryColor);
-    --tw-prose-bold: #124498;
-    --tw-prose-bullets: #124498;
+    --tw-prose-links: var(--default-link-color);
+    --tw-prose-headings: var(--primaryColor);
+    --tw-prose-bold: var(--primaryColor);
+    --tw-prose-bullets: var(--primaryColor);
     li > div {
         margin: 0;
     }

styles/footer.scss

@@ -14,6 +14,6 @@ footer {
   }
 
   a {
-    color: #d8ac74;
+    color: var(--default-link-color);
   }
 }

styles/main-title.scss

@@ -1,6 +0,0 @@
-.main-title {
-  font-size: 2.5rem;
-}
-.main-title + h2 {
-  margin-top: 0;
-}

styles/title-block.scss

@@ -0,0 +1,17 @@
+.title-block {
+  &.title-size-h1 {
+    font-size: 2.5rem;
+  }
+  &.title-size-h2 {
+    font-size: 2rem;
+  }
+  &.title-size-h3 {
+    font-size: 1.25rem;
+  }
+  &.title-size-h4 {
+    font-size: 1rem;
+  }
+}
+.title-block + h2 {
+  margin-top: 0;
+}