Improve project descriptions readability (#32)

* Improve project descriptions readability

* Fix: mode icon wasn't visible in light mode

* Fixed AVS image path

* Shorten flowmap description

* Group description styling

Author: ilyabo

app/projects/project-card.tsx

@@ -17,11 +17,11 @@ export const ProjectCard = ({
 }: ProjectEntry) => (
   <a
     href={url}
-    className="group flex flex-row h-16 rounded-md overflow-hidden transition-all duration-300 hover:bg-white/40 dark:hover:bg-gray-800/40"
+    className="group flex flex-row h-auto min-h-[5rem] sm:h-20 sm:hover:h-auto rounded-md overflow-hidden transition-all duration-300 hover:bg-white/40 dark:hover:bg-gray-800/40"
     target="_blank"
     rel="noopener noreferrer"
   >
-    <div className="relative w-24 flex-shrink-0">
+    <div className="relative w-24 min-h-[5rem] sm:h-20 sm:group-hover:h-[inherit] flex-shrink-0">
       <Image
         src={image}
         alt={name}
@@ -36,7 +36,7 @@ export const ProjectCard = ({
       <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
         {name}
       </h3>
-      <p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-1">
+      <p className="text-xs text-gray-500 dark:text-gray-400 sm:line-clamp-2 sm:group-hover:line-clamp-none">
         {description}
       </p>
     </div>

app/projects/project-group.tsx

@@ -72,7 +72,7 @@ export const ProjectGroup = ({
       >
         {group.description && (
           <div
-            className="prose dark:prose-invert prose-xs max-w-none mb-2 text-gray-600 dark:text-gray-400"
+            className="prose dark:prose-invert prose-sm max-w-none mb-4 text-gray-600 dark:text-gray-400"
             dangerouslySetInnerHTML={{
               __html: markdownToHtml(group.description),
             }}

components/navigation/navigation-bar.tsx

@@ -45,7 +45,7 @@ const ModeToggle = () => {
       className="group"
       onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
     >
-      <Sun className="h-6 w-6 fill-gray-100 stroke-gray-500 transition group-hover:fill-gray-200 group-hover:stroke-gray-700 dark:hidden [@media(prefers-color-scheme:dark)]:fill-white [@media(prefers-color-scheme:dark)]:stroke-white [@media(prefers-color-scheme:dark)]:group-hover:fill-white [@media(prefers-color-scheme:dark)]:group-hover:stroke-teal-600" />
+      <Sun className="h-6 w-6 stroke-2 text-black dark:hidden dark:text-white group-hover:text-gray-600" />
       <Moon className="hidden h-6 w-6 fill-gray-700 stroke-gray-500 transition dark:block [@media(prefers-color-scheme:dark)]:group-hover:stroke-gray-400 [@media_not_(prefers-color-scheme:dark)]:fill-teal-400/10 [@media_not_(prefers-color-scheme:dark)]:stroke-white" />
     </button>
   );

content/projects.json

@@ -51,7 +51,7 @@
             {
               "name": "AVS/streetscape.gl",
               "url": "https://avs.auto/demo/index.html",
-              "image": "/visgl/images/frameworks/atg.png",
+              "image": "/visgl/images/atg.png",
               "description": "Autonomous vehicle visualization built on deck.gl (independent project)."
             }
           ]
@@ -73,7 +73,7 @@
               "name": "flowmap.gl",
               "url": "https://flowmap.gl/",
               "image": "/visgl/images/frameworks/FlowmapBlue.jpg",
-              "description": "A powerful flow map drawing layer for deck.gl. For visualization of geographic movement."
+              "description": "A powerful flow map drawing layer for visualization of geographic movement."
             },
             {
               "name": "graph-layers",