feat: make the themes look nicer

ReeceM · Feb 28, 2020 · a89fcc0 · a89fcc0
1 parent 4c94cf4
commit a89fcc0
Showing 1 changed file with 26 additions and 19 deletions.
diff --git a/src/config/styling.js b/src/config/styling.js
@@ -9,7 +9,7 @@ export const styling = {
     wrapper: "hb-flex hb-w-full hd-flex-col md:hb-flex-row sm:hb-flex-row hb-text-sm hb-py-2 md:hb-px-20 hb-px-1 hb-items-center hb-justify-between",
     linkWrapper: "hb-flex hb-items-center",
     badge: "hb-px-2 hb-mx-2 hb-leading-relaxed hb-tracking-wider hb-uppercase hb-font-semibold hb-rounded-full hb-text-xs",
-    postTitle: "hover:hb-underline",
+    postTitle: "hover:hb-underline hb-inline-flex hb-items-center",
     secondaryLink: "hb-mx-5 hb-cursor-pointer hover:hb-underline",
 }
 
@@ -26,53 +26,60 @@ export const themes = {
         postTitle: "hover:hb-text-gray-300",
         secondaryLink: "hover:hb-text-gray-300"
     },
+    lightGray: {
+        wrapper: "hb-bg-gray-400 hb-text-gray-900",
+        linkWrapper: "",
+        badge: "hb-bg-white hb-text-gray-900 shadow",
+        postTitle: "hover:hb-text-gray-600",
+        secondaryLink: "hover:hb-text-gray-600"
+    },
     blue: {
         wrapper: "hb-bg-blue-900 hb-text-blue-100",
         linkWrapper: "",
-        badge: "hb-bg-blue-100 hb-text-blue-900",
+        badge: "hb-bg-blue-100 hb-text-blue-900 shadow",
         postTitle: "hover:hb-text-blue-300",
         secondaryLink: "hover:hb-text-blue-300"
     },
     green: {
-        wrapper: "hb-bg-green-900 hb-text-green-100",
+        wrapper: "hb-bg-green-600 hb-text-green-100",
         linkWrapper: "",
         badge: "hb-bg-green-100 hb-text-green-900",
         postTitle: "hover:hb-text-green-300",
         secondaryLink: "hover:hb-text-green-300"
     },
     indigo: {
-        wrapper: "hb-bg-indigo-900 hb-text-indigo-100",
+        wrapper: "hb-bg-indigo-800 hb-text-indigo-100",
         linkWrapper: "",
-        badge: "hb-bg-indigo-100 hb-text-indigo-900",
+        badge: "hb-bg-indigo-100 hb-text-indigo-900 shadow",
         postTitle: "hover:hb-text-indigo-300",
         secondaryLink: "hover:hb-text-indigo-300"
     },
     orange: {
-        wrapper: "hb-bg-orange-900 hb-text-orange-100",
+        wrapper: "hb-bg-orange-300 hb-text-orange-900",
         linkWrapper: "",
-        badge: "hb-bg-orange-100 hb-text-orange-900",
-        postTitle: "hover:hb-text-orange-300",
-        secondaryLink: "hover:hb-text-orange-300"
+        badge: "hb-bg-orange-800 hb-text-orange-100 shadow",
+        postTitle: "hover:hb-text-orange-700",
+        secondaryLink: "hover:hb-text-orange-700"
     },
     yellow: {
-        wrapper: "hb-bg-yellow-900 hb-text-yellow-100",
+        wrapper: "hb-bg-yellow-300 hb-text-yellow-900",
         linkWrapper: "",
-        badge: "hb-bg-yellow-100 hb-text-yellow-900",
-        postTitle: "hover:hb-text-yellow-300",
-        secondaryLink: "hover:hb-text-yellow-300"
+        badge: "hb-bg-yellow-100 hb-text-yellow-900 shadow",
+        postTitle: "hover:hb-text-yellow-700",
+        secondaryLink: "hover:hb-text-yellow-700"
     },
     teal: {
-        wrapper: "hb-bg-teal-900 hb-text-teal-100",
+        wrapper: "hb-bg-teal-500 hb-text-teal-100",
         linkWrapper: "",
-        badge: "hb-bg-teal-100 hb-text-teal-900",
+        badge: "hb-bg-teal-900 hb-text-teal-100 shadow",
         postTitle: "hover:hb-text-teal-300",
         secondaryLink: "hover:hb-text-teal-300"
     },
     red: {
-        wrapper: "hb-bg-red-900 hb-text-red-100",
+        wrapper: "hb-bg-red-400 hb-text-red-900",
         linkWrapper: "",
-        badge: "hb-bg-red-100 hb-text-red-900",
-        postTitle: "hover:hb-text-red-300",
-        secondaryLink: "hover:hb-text-red-300"
+        badge: "hb-bg-red-100 hb-text-red-900 shadow",
+        postTitle: "hover:hb-text-red-100",
+        secondaryLink: "hover:hb-text-red-100"
     },
 }