Browse Source

footer样式问题

fogwind 3 ngày trước cách đây
mục cha
commit
4eb61f07dd

+ 6 - 6
src/components/layout/footer/FooterMenu.tsx

@@ -19,11 +19,11 @@ const getUrlparams = (url: string) => {
 
 const FooterMenuItem = ({ item }: { item: ThemeOptions }) => {
   return (
-    <li className="text-selected-black dark:text-neutral-300">
+    <li className="text-selected-black">
       <Link
         aria-label={`${item?.title}`}
         title={`${item?.title}`}
-        className="block px-0 py-1 md:p-2 text-nowrap text-sm underline-offset-4 text-selected-black dark:text-neutral-300 hover:text-black hover:underline md:inline-block dark:hover:text-neutral-300"
+        className="block px-0 py-1 text-nowrap text-sm underline-offset-4 text-selected-black"
         href={getUrlparams(item.url)}
       >
         {item.title}
@@ -46,10 +46,10 @@ export default function FooterMenu({
     : firstTranslation?.options;
 
   return (
-    <div className="flex justify-between gap-x-8 lg:gap-x-[50px]">
+    <div className="">
       {/* Render columns 1 */}
       {isArray(channels?.column_1) ? (
-        <nav className="w-full lg:min-w-[160px] xl:min-w-[200px]">
+        <nav className="w-full">
           <ul>
             {channels.column_1.map((item: ThemeOptions, index: number) => {
               return <FooterMenuItem key={index} item={item} />;
@@ -60,7 +60,7 @@ export default function FooterMenu({
 
       {/* Render columns 2 */}
       {isArray(channels?.column_2) ? (
-        <nav className="w-full lg:min-w-[160px] xl:min-w-[200px]">
+        <nav className="w-full">
           <ul>
             {channels.column_2.map((item: ThemeOptions, index: number) => {
               return <FooterMenuItem key={index} item={item} />;
@@ -71,7 +71,7 @@ export default function FooterMenu({
 
       {/* Render columns 3 */}
       {isArray(channels?.column_3) ? (
-        <nav className="w-full lg:min-w-[160px] xl:min-w-[200px]">
+        <nav className="w-full">
           <ul>
             {channels.column_3.map((item: ThemeOptions, index: number) => {
               return <FooterMenuItem key={index} item={item} />;

+ 4 - 4
src/components/layout/footer/index.tsx

@@ -52,11 +52,11 @@ export default async function Footer() {
 
   return (
     <>
-      <footer className="border-t border-neutral-200 text-sm text-neutral-500 dark:border-neutral-700 dark:text-neutral-400">
-        <div className="mx-auto flex w-full max-w-screen-2xl flex-col justify-between gap-6 gap-y-6 px-6 py-12 text-sm dark:border-neutral-700 min-[880px]:flex-row min-[880px]:gap-12 min-[880px]:gap-y-20 min-[880px]:px-4">
+      <footer className="border-t border-neutral-200 text-sm text-neutral-500">
+        <div className="mx-auto flex w-full flex-col justify-between gap-6 gap-y-6 px-6 py-12 text-sm">
           <div className="flex flex-col gap-[14px]">
             <Link
-              className="flex items-center gap-2 md:pt-1 cursor-pointer"
+              className="flex items-center gap-2 cursor-pointer"
               href="/"
               aria-label="Go to homepage"
               title="Go to homepage"
@@ -97,7 +97,7 @@ export default async function Footer() {
               </Link>
             </div>
           </div>
-          <div className="flex flex-col gap-x-8 md:flex-row lg:gap-x-[50px]">
+          <div className="flex flex-col gap-x-8">
             <Suspense
               fallback={
                 <div className="flex h-[188px] w-[200px] flex-col gap-2">