feat: improved responsive design

kuizuo · Jun 9, 2024 · 67bd557 · 67bd557
1 parent e96c543
commit 67bd557
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/src/components/UserCard/index.tsx b/src/components/UserCard/index.tsx
@@ -7,7 +7,6 @@ import { usePluginData } from '@docusaurus/useGlobalData'
 import { Icon } from '@iconify/react'
 import SocialLinks from '@site/src/components/SocialLinks'
 import { cn } from '@site/src/lib/utils'
-import React from 'react'
 
 import { projects } from '@site/data/projects'
 
@@ -85,7 +84,7 @@ export default function UserCard({ isNavbar = false }: { isNavbar?: boolean }) {
           padding: '0.5em 0',
           justifyContent: 'center',
           gap: '0.5rem',
-          ...(isNavbar ? { borderBottom: '1px solid #eee' } : null),
+          ...(isNavbar ? { borderBottom: '1px solid var(--ifm-border-color)' } : null),
         }}
       />
     </div>

diff --git a/src/components/landing/BlogSection/index.tsx b/src/components/landing/BlogSection/index.tsx
@@ -67,7 +67,10 @@ export default function BlogSection(): JSX.Element {
 
   return (
     <Section title={<Translate id="homepage.blog.title">近期博客</Translate>} icon="ri:quill-pen-line" href={'/blog'}>
-      <div ref={ref} className="grid max-h-[640px] grid-cols-12 gap-4 overflow-hidden rounded-card p-3">
+      <div
+        ref={ref}
+        className="flex flex-col gap-4 overflow-hidden rounded-card p-3 md:grid md:max-h-[640px] md:grid-cols-12"
+      >
         {posts.map((postGroup, index) => (
           <div className="col-span-4" key={index}>
             {postGroup.map((post, i) => (

diff --git a/src/components/landing/ProjectSection/index.tsx b/src/components/landing/ProjectSection/index.tsx
@@ -14,12 +14,12 @@ const Slider = ({ items }: { items: Project[] }) => {
     <div className="relative flex min-h-[260px] items-center overflow-hidden">
       <Marquee pauseOnHover gradient className="[--duration:60s]">
         {items.map(item => (
-          <div className="mx-2 h-full w-96" key={item.title}>
+          <div className="mx-2 h-full w-48 md:w-96" key={item.title}>
             <a className="flex flex-col hover:no-underline" href={item.website} target="_blank" rel="noreferrer">
               <img
                 src={item.preview}
                 alt={item.title}
-                className="h-[240px] w-full rounded-lg object-cover"
+                className="h-[120px] md:h-[240px] w-full rounded-lg object-cover"
                 loading="lazy"
               />
               <div className="w-full py-2 text-center">

diff --git a/src/components/landing/Section/index.tsx b/src/components/landing/Section/index.tsx
@@ -12,7 +12,7 @@ interface SectionProps {
 
 export function Section({ title, icon, href, children }: SectionProps) {
   return (
-    <section className="group/section py-2">
+    <section className="group/section py-2 max-lg:mx-4">
       <div className="mt-8 mb-4 inline-flex w-full items-center justify-between md:mt-6">
         <h2 className="m-0 inline-flex items-center justify-center gap-1 text-base">
           {icon && <Icon icon={icon} />}