feat: styles

LucasDibz · Jan 22, 2024 · 3244860 · 3244860
1 parent 3a1654a
commit 3244860
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 23 deletions.
diff --git a/src/components/Body.tsx b/src/components/Body.tsx
@@ -46,7 +46,7 @@ Body.Article = Article;
 function Link(props: LinkProps) {
   return (
     <_Link
-      className='text-xl text-rose-500 underline underline-offset-4 leading-6 font-semibold w-fit hover:brightness-75 transition'
+      className='text-xl text-rose-400 underline underline-offset-4 leading-6 font-semibold w-fit hover:brightness-75 transition'
       {...props}
     />
   );
@@ -55,7 +55,7 @@ Body.Link = Link;
 
 function PageTitle({ children }: Props) {
   return (
-    <h2 className='text-xl leading-5 text-rose-600 font-semibold'>
+    <h2 className='text-xl leading-5 text-rose-500 font-semibold'>
       {children}
     </h2>
   );
@@ -64,7 +64,7 @@ Body.PageTitle = PageTitle;
 
 function H1({ children }: Props) {
   return (
-    <h1 className='mt-3 md:text-justify text-3xl leading-10 text-amber-600'>
+    <h1 className='mt-3 md:text-justify text-3xl leading-10 text-slate-600'>
       {children}
     </h1>
   );

diff --git a/src/components/Books.tsx b/src/components/Books.tsx
@@ -19,26 +19,35 @@ export function Books({ book }: { book: Book }) {
     <li>
       <Tag
         href={book?.link}
-        className={`items-center block p-3 rounded-lg gap-1 sm:flex${
+        className={`items-center flex flex-col md:flex-row gap-3 p-3 rounded-lg sm:flex${
           book?.link
             ? ' hover:shadow transition bg-ipsi/20 border border-ipsi mb-2'
             : ''
         }`}
         {...TagProps}
       >
-        <div className='flex -space-x-4 rtl:space-x-reverse sm:pr-3 flex-shrink-0'>
+        <div className='flex flex-shrink-0 w-fit -space-x-4 rtl:space-x-reverse sm:pr-3'>
           {book.authors.map((author, index) => (
-            <img
+            <a
               key={author}
-              className={'w-12 h-12 border-2 rounded-full'}
-              style={{ zIndex: 10 - index }}
-              src={getImgSrcFromName(author)}
-              alt={author}
-            />
+              href={getAuthorProps(author)?.url}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='hover:z-50'
+              style={{ zIndex: 5 - index }}
+            >
+              <img
+                src={getAuthorProps(author)?.imgSrc}
+                alt={author}
+                className={
+                  'w-10 h-10 md:w-12 md:h-12 border-2 rounded-full shadow hover:scale-125 transition'
+                }
+              />
+            </a>
           ))}
         </div>
 
-        <div className='flex flex-col gap-1 flex-1'>
+        <div className='flex flex-col gap-3 flex-1'>
           <p className='font-bold text-slate-900'>{book.title}</p>
           {book?.subtitle && (
             <p className='italic text-xs text-end text-slate-500'>
@@ -54,9 +63,9 @@ export function Books({ book }: { book: Book }) {
   );
 }
 
-function getImgSrcFromName(name: string) {
+function getAuthorProps(name: string) {
   const members = Object.values(ipsers).flatMap((category) => category.members);
   const author = members.find((member) => member.name === name);
 
-  return author?.imgSrc;
+  return author;
 }
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -7,7 +7,7 @@ type Props = {
 export function Card({ children, className }: Props & { className?: string }) {
   return (
     <article
-      className={`p-6 border border-slate-200 rounded-lg shadow flex flex-col gap-3${
+      className={`p-6 border border-slate-200 rounded-lg shadow flex flex-col gap-3 ${
         className ? className : 'max-w-lg'
       }`}
     >

diff --git a/src/config/outputs.ts b/src/config/outputs.ts
@@ -19,13 +19,13 @@ export const outputs: Outputs = {
     title: 'Edited books and journal issues',
     books: [
       {
-        title:
-          'Direitos de Autor: As recentes alterações legislativas (UMinho Editora 2023) (with MM Carvalho)',
+        title: 'Direitos de Autor: As recentes alterações legislativas',
+        subtitle: '(UMinho Editora 2023) (with MM Carvalho)',
         authors: ['Giulia Priora'],
       },
       {
-        title:
-          'The Law and the Digital Classroom, JIPITEC 14(2) 2023 (with R Ducato)',
+        title: 'The Law and the Digital Classroom',
+        subtitle: 'JIPITEC 14(2) 2023 (with R Ducato)',
         authors: ['Giulia Priora'],
       },
     ],

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -23,7 +23,7 @@ export function Home() {
       <Body.H1>Our latest scientific output:</Body.H1>
       <Body.Article>
         <div className='flex gap-3'>
-          <BookText size={50} color='gray' fill='antiquewhite' />
+          <BookText size={50} color='gray' />
           <div className='flex flex-col gap-2'>
             <Body.H2>NOVA IPSI Booklet 2023</Body.H2>
 

diff --git a/src/pages/Outputs.tsx b/src/pages/Outputs.tsx
@@ -8,14 +8,14 @@ export function Outputs() {
 
       <Body.Section>
         {Object.values(outputs).map((output) => (
-          <Card key={output.title}>
+          <Card key={output.title} className='max-w-5xl'>
             <Card.Title>{output.title}</Card.Title>
             <Card.Content>
-              <ol className='mt-3 divide-y divider-slate-200'>
+              <ul className='divide-y divider-slate-200'>
                 {output.books.map((book) => (
                   <Books key={book.title} book={book} />
                 ))}
-              </ol>
+              </ul>
             </Card.Content>
           </Card>
         ))}