Merge pull request #100 from dhawal-793/bugfixes/article-route

Bugfixes/article route
dhawal-793 · Jun 1, 2023 · eeb6e77 · eeb6e77 · vercel · Jun 1, 2023
2 parents 2bbfc8c + fab824c
commit eeb6e77
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 23 deletions.
diff --git a/components/Article.tsx b/components/Article.tsx
@@ -16,8 +16,9 @@ const Article = ({ article }: Props) => {
                     <section className="mt-2 flex-1">
                         <p className="text-xs line-clamp-3 text-article-dark-primary dark:text-article-light-primary">{article.description}</p>
                     </section>
-                    <footer className="text-xs text-right ml-auto flex space-x-2 pt-5 italic text-article-light-secondary">
-                        <p>{article.source} -</p>
+                    <footer className="text-xs text-right ml-auto flex flex-col space-y-2 xs:flex-row xs:space-y-0 xs:space-x-2 pt-5 italic text-article-light-secondary">
+                        <p>{article.source} <span className="hidden xs:inline
+                        ">-</span></p>
                         <p>{article.published_at}</p>
                     </footer>
                 </div>

diff --git a/components/ArticlePage.tsx b/components/ArticlePage.tsx
@@ -25,27 +25,27 @@ const ArticlePage = () => {
         <>
             <article>
                 <section className="flex flex-col pb-24 w-full mx-auto md:max-w-3xl lg:max-w-5xl ">
-                    <h1 className="tracking-wider text-4xl sm:text-5xl lg:text-6xl font-serif capitalize pt-5 pb-8 border-b-2 border-light-primary  dark:border-light-secondary text-dark dark:text-light">{article.title}</h1>
+                    <h1 className="tracking-wider text-2xl xs:text-4xl sm:text-5xl lg:text-6xl font-serif capitalize pt-5 pb-8 text-dark dark:text-light">{article.title}</h1>
                     <img src={ImageSrc} alt={article.title ? article.title : "Image not Available"} className=" w-full  object-cover rounded-lg shadow-md" />
                     <div className="">
-                        <div className="flex flex-wrap justify-between sm:divide-x-2 divide-light-primary sm:space-x-4 py-5">
-                            <h2 className="font-bold w-1/2 sm:w-auto space-x-2">
+                        <div className="text-xs flex flex-wrap justify-between sm:divide-x-2 divide-light-primary sm:space-x-4 py-5">
+                            <h2 className="font-bold w-full xs:w-1/2 sm:w-auto space-x-2">
                                 <span className="text-accent">  By:</span>
                                 <span className="text-light-secondary">
                                     {article.author || "Unknown"}
                                 </span>
                             </h2>
-                            <h2 className="font-bold text-right sm:pl-4 w-1/2 sm:w-auto space-x-2">
+                            <h2 className="font-bold xs:text-right sm:pl-4 w-full xs:w-1/2 sm:w-auto space-x-2">
                                 <span className="text-accent">  Source:</span>
                                 <span className="text-light-secondary">
                                     {article.source || "Unknown"}
                                 </span>
                             </h2>
-                            <p className="w-full flex-1 text-right sm:text-left sm:pl-4 text-accent-primary dark:text-accent">
+                            <p className="w-full flex-1 xs:text-right sm:text-left sm:pl-4 text-accent-primary dark:text-accent">
                                 {article.published_at}
                             </p>
                         </div>
-                        <p className="py-5 text-lg text-left text-dark-primary dark:text-light-primary" dangerouslySetInnerHTML={{ __html: Description }}></p>
+                        <p className="py-5 text-lg text-left break-words text-dark-primary dark:text-light-primary" dangerouslySetInnerHTML={{ __html: Description }}></p>
                     </div>
                 </section>
             </article>

diff --git a/components/BackToTopButton.tsx b/components/BackToTopButton.tsx
@@ -21,7 +21,7 @@ const BackToTopButton = () => {
 
     return (
         <button onClick={handleScroll}>
-            <div className={` ${!btnVisiblity ? "-translate-y-[100vh]" : "translate-y-0"} fixed z-30 bottom-2 right-2 transition-all delay-100 duration-500 w-8 h-8 rounded-full cursor-pointer flex justify-center items-center dark:text-dark text-light bg-accent text-2xl group`}>
+            <div className={` ${!btnVisiblity ? "-translate-y-[200vh]" : "translate-y-0"} fixed z-30 bottom-2 right-2 transition-all delay-100 duration-500 w-8 h-8 rounded-full cursor-pointer flex justify-center items-center dark:text-dark text-light bg-accent text-2xl group`}>
                 <ChevronUpIcon className='group-hover:scale-125 duration-500 transition-all h-5 w-5' />
             </div>
         </button>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -3,16 +3,16 @@ import { HeartIcon } from "@heroicons/react/24/solid"
 const Footer = () => {
     const year = new Date().getFullYear().toString()
     return (
-        <footer className="w-full p-5  border-t-2 border-light-primary dark:border-dark-primary
+        <footer className="w-full p-5 border-t-2 border-light-primary dark:border-dark-primary
         text-dark-primary dark:text-light-primary ">
-            <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-3">
-                <div className="text-xs">Copyright &copy; {year} <a href="https://github.com/dhawal-793/Dev_News" target="_blank" className="text-accent">DevNews</a>
-                </div>
-                <div className="text-sm flex">
+            <div className="max-w-6xl mx-auto flex flex-col justify-between items-center gap-3">
+                <small className="text-[0.6rem] xs:text-xs">Copyright &copy; {year} <a href="https://github.com/dhawal-793/Dev_News" target="_blank" className="text-accent">DevNews</a>
+                </small>
+                <small className="text-[0.7rem] xs:text-sm flex">
                     Made with <HeartIcon className="mx-1 text-cancel w-4 h4" /> by <a href="https://dhawal-793-portfolio.onrender.com" target="_blank" className="ml-1 text-accent">
                         Dhawal Vijayvargiya
                     </a>
-                </div>
+                </small>
             </div>
         </footer>
     )

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -32,7 +32,7 @@ export default Header
 
 const BlurdArea = () => {
     return (
-        <div className="">
+        <div>
             <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[1]" />
             <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.95]" />
             <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.9]" />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,3 +1,6 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -7,42 +10,46 @@ module.exports = {
   ],
   darkMode: "class",
   theme: {
+    screens: {
+      'xs': '475px',
+      ...defaultTheme.screens,
+    },
     extend: {
       colors: {
         light: {
           DEFAULT: '#f3f4f6',
           primary: '#9ca3af',
-          secondary:'#6b7280'
+          secondary: '#6b7280'
         },
         dark: {
           DEFAULT: '#18181b',
           primary: '#27272a',
-          secondary:'#71717a'
+          secondary: '#71717a'
         },
         'article': {
           light: {
             DEFAULT: '#e2e8f0',
             primary: '#cbd5e1',
-            secondary:'#94a3b8'   
+            secondary: '#94a3b8'
           },
           dark: {
             DEFAULT: '#1e293b',
             primary: '#334155',
-            secondary:'#475569'
+            secondary: '#475569'
           }
         },
         'loading': {
           light: '#c7d2fe',
           dark: '#6b7280'
         },
         'accent': {
-          DEFAULT:'#fb923c',
+          DEFAULT: '#fb923c',
           primary: '#f97316',
-          secondary:'#1e293b'
+          secondary: '#1e293b'
         },
         'sun': '#f59e0b',
         'moon': '#1e3a8a',
-        'cancel':'#dc2626'
+        'cancel': '#dc2626'
 
       }
     }