fix article UI

SuperteamDAO · Jan 20, 2022 · 297d9eb · 297d9eb · vercel · Jan 20, 2022
1 parent 2e21738
commit 297d9eb
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/components/markdown-styles.module.css b/components/markdown-styles.module.css
@@ -18,7 +18,6 @@
   @apply text-white;
 }
 
-
 .markdown p,
 .markdown ul,
 .markdown ol,

diff --git a/lib/api.js b/lib/api.js
@@ -44,11 +44,11 @@ export async function getModifiedPage(page) {
         finalPage = finalPage.replace(embeds[i].string, `<div class="mb-10">${html}</div>`);
       } else {
         const section = `
-        <div className="mb-14">
-          <div className="text-white bg-gray-900 px-6 py-3 rounded-md">
-            <a className="" href="${embeds[i].url}" target="_blank" rel="noreferrer">
-              <p className="text-white font-bold mb-1 mt-0">${result?.twitter_card?.title || result?.open_graph?.title || result?.title}</p>
-              <p className="text-white text-sm m-0">${result?.twitter_card?.description || result?.open_graph?.description}</p>
+        <div class="mb-10">
+          <div class="drop-shadow-xl text-white bg-gray-900 hover:bg-gray-800 px-6 py-3 rounded-md transition-transform hover:-translate-y-0.5">
+            <a class="" href="${embeds[i].url}" target="_blank" rel="noreferrer">
+              <p class="text-white font-bold !mb-1 !mt-0">${result?.twitter_card?.title || result?.open_graph?.title || result?.title}</p>
+              <p class="text-white text-sm !m-0">${result?.twitter_card?.description || result?.open_graph?.description}</p>
             </a>
           </div>
         </div>`;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   content: ['./components/**/*.js', './pages/**/*.js'],
-  safelist: ['mb-10', 'mb-14', 'text-white', 'bg-gray-900', 'px-6', 'py-3', 'rounded-md', 'font-bold', 'mb-1', 'mt-0', 'm-0', 'text-sm'],
+  safelist: ['drop-shadow-xl', 'mb-10', 'mb-14', 'transition-transform', 'hover:-translate-y-0.5', 'text-white', 'bg-gray-800', 'hover:bg-gray-800', 'bg-gray-900', 'px-6', 'py-3', 'rounded-md', 'font-bold', 'mb-1', 'mt-0', 'm-0', '!mb-1', '!mt-0', '!m-0', 'text-sm'],
   theme: {
     extend: {
       fontFamily: {