fix: projects layout & styles (#399) (#401)

布局与样式问题
Innei · Jul 14, 2024 · 432f005 · 432f005
1 parent d3f7f99
commit 432f005
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/modules/project/ProjectIcon.tsx b/src/components/modules/project/ProjectIcon.tsx
@@ -9,7 +9,7 @@ export const ProjectIcon: Component<{ avatar?: string; name?: string }> = (
   return (
     <div
       className={clsxm(
-        'project-icon flex shrink-0 grow items-center justify-center',
+        'project-icon flex min-w-0 shrink-0 grow items-center justify-center',
         avatar
           ? 'ring-2 ring-slate-200 dark:ring-neutral-800'
           : 'bg-slate-300 text-white dark:bg-neutral-800',

diff --git a/src/components/modules/project/ProjectList.tsx b/src/components/modules/project/ProjectList.tsx
@@ -14,22 +14,22 @@ export type Project = {
 export const ProjectList: FC<{ projects: Project[] }> = (props) => {
   return (
     <section key="list" className="text-center">
-      <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 md:grid-cols-3">
         {props.projects.map((project) => {
           return (
             <Link
               href={routeBuilder(Routes.Project, { id: project.id })}
               key={project.id}
-              className="group grid grid-cols-[1fr_2fr] gap-4"
+              className="group grid grid-cols-[6em_auto] gap-4"
             >
               <ProjectIcon
                 className="group-hover:-translate-y-2 group-hover:shadow-out-sm"
                 avatar={project.avatar}
                 name={project.name}
               />
               <span className="flex shrink-0 grow flex-col gap-2 text-left">
-                <h4 className="font-2xl m-0 p-0 font-medium">{project.name}</h4>
-                <span className="line-clamp-5 text-sm md:line-clamp-4 lg:line-clamp-2">
+                <h4 className="m-0 p-0 text-2xl font-medium">{project.name}</h4>
+                <span className="line-clamp-5 opacity-60 md:line-clamp-4 lg:line-clamp-2">
                   {project.description}
                 </span>
               </span>