From 700bdfd7603aad4f430d1ee539e5a1003d2d98d3 Mon Sep 17 00:00:00 2001 From: galenwinsor Date: Wed, 26 Jun 2024 11:40:44 -0400 Subject: [PATCH 1/4] feat: new bio styling --- src/components/Card.tsx | 41 +++++++++++++++++++----------- src/components/CardContainer.astro | 1 + src/layouts/Layout.astro | 14 +++------- src/styles/global.css | 20 +++++++++------ 4 files changed, 43 insertions(+), 33 deletions(-) diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 25b10aa..1575540 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -11,13 +11,13 @@ interface CardProps { } const Card: React.FC = ({ position, image, title, name, address, phone, email }) => { + const [showDetails, setShowDetails] = React.useState(false) + // strip 'public/' from the avatar string since astro's public folder is available without this in the link const link = image?.replace("/public", "") return (
{image && (
@@ -28,20 +28,31 @@ const Card: React.FC = ({ position, image, title, name, address, phon />
)} -
-
-

{name}

-

{title}

-
+
- {address &&

{address}

} - {phone &&

{phone}

} - {email && ( - - {email} - - )} + + {name} + +

{title}

+ {showDetails ? ( +
+ +
+ {Boolean(phone) &&

{phone}

} + {Boolean(email) && ( + + {email} + + )} + {Boolean(address) &&

{address}

} +
+
+ ) : ( + + )}
) diff --git a/src/components/CardContainer.astro b/src/components/CardContainer.astro index e05a285..866bf6b 100644 --- a/src/components/CardContainer.astro +++ b/src/components/CardContainer.astro @@ -22,6 +22,7 @@ interface PersonProps { return ( <> - +
-
-
-
-

{title}

-
-
- -
-
+

{title}

+
+
diff --git a/src/styles/global.css b/src/styles/global.css index 1810692..d2265a6 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -33,7 +33,7 @@ @apply text-2xl; } - p { + p, a { @apply text-xl; @apply text-neutral-700; } @@ -78,13 +78,6 @@ @apply uppercase; } - main { - @apply flex; - @apply flex-col; - @apply items-center; - @apply gap-6; - } - header { @apply flex; @apply justify-between; @@ -120,6 +113,17 @@ } @layer components { + .three-column-wrapper { + display: grid; + grid-template-columns: 1fr min(1000px, 100%) 1fr; + + padding-inline: 64px; + } + + .three-column-wrapper > * { + grid-column: 2; + } + .subtitle { @apply gap-1; @apply pt-6; From c830ca0cf3e65f65cea186b6c0d832a3c3ac54bf Mon Sep 17 00:00:00 2001 From: galenwinsor Date: Wed, 26 Jun 2024 11:58:09 -0400 Subject: [PATCH 2/4] refactor: reset layout changes --- src/layouts/Layout.astro | 16 +++++++++++----- src/styles/global.css | 11 ----------- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 4f30932..cef9be7 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -15,14 +15,20 @@ const { title, description, lede } = Astro.props - + - +
-

{title}

-
- +
+
+
+

{title}

+
+
+ +
+
diff --git a/src/styles/global.css b/src/styles/global.css index d2265a6..cb8cff0 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -113,17 +113,6 @@ } @layer components { - .three-column-wrapper { - display: grid; - grid-template-columns: 1fr min(1000px, 100%) 1fr; - - padding-inline: 64px; - } - - .three-column-wrapper > * { - grid-column: 2; - } - .subtitle { @apply gap-1; @apply pt-6; From d4745eb957e3732c9da92ce412ae04b8e26dfcc7 Mon Sep 17 00:00:00 2001 From: galenwinsor Date: Wed, 26 Jun 2024 12:04:34 -0400 Subject: [PATCH 3/4] feat: underline on hover nav link --- src/components/HeaderLink.astro | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro index d8c310a..4ec5a21 100644 --- a/src/components/HeaderLink.astro +++ b/src/components/HeaderLink.astro @@ -14,8 +14,9 @@ const isActive = href === pathname || href === "/" + subpath?.[0] href={href} class:list={[ className, + "hover:underline underline-offset-8", { - "text-neutral-900 font-semibold hover:text-gray-600 underline underline-offset-8": isActive, + "text-neutral-900 font-semibold underline": isActive, }, ]} {...props} From 5eae25dda1041811e4dcde3f69e85765575af6da Mon Sep 17 00:00:00 2001 From: galenwinsor Date: Wed, 26 Jun 2024 15:56:53 -0400 Subject: [PATCH 4/4] refactor: only show name, title, and university --- src/components/Card.tsx | 37 ++++--------------- src/components/CardContainer.astro | 8 +--- src/components/CustomInput.tsx | 13 ++----- src/components/DownloadModal.tsx | 29 +++++++++------ src/content/config.ts | 4 +- src/content/people/advisor.md | 7 +--- src/content/people/co-director-1.md | 5 +-- src/content/people/co-director.md | 8 +--- src/content/people/data-entry-specialist.md | 8 +--- .../professor-and-researcher-sni-nivel-iii.md | 7 +--- src/pages/people.astro | 1 + src/styles/global.css | 16 ++++---- tailwind.config.js | 2 + 13 files changed, 47 insertions(+), 98 deletions(-) diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 1575540..7ec9ec5 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -5,14 +5,10 @@ interface CardProps { image?: string title: string name: string - address?: string - phone?: string - email?: string + institution: string } -const Card: React.FC = ({ position, image, title, name, address, phone, email }) => { - const [showDetails, setShowDetails] = React.useState(false) - +const Card: React.FC = ({ position, image, title, name, institution }) => { // strip 'public/' from the avatar string since astro's public folder is available without this in the link const link = image?.replace("/public", "") return ( @@ -29,30 +25,11 @@ const Card: React.FC = ({ position, image, title, name, address, phon
)}
-
- - {name} - -

{title}

-
- {showDetails ? ( -
- -
- {Boolean(phone) &&

{phone}

} - {Boolean(email) && ( - - {email} - - )} - {Boolean(address) &&

{address}

} -
-
- ) : ( - - )} + + {name} + +

{title}

+

{institution}

) diff --git a/src/components/CardContainer.astro b/src/components/CardContainer.astro index 866bf6b..6f85a1e 100644 --- a/src/components/CardContainer.astro +++ b/src/components/CardContainer.astro @@ -7,9 +7,7 @@ interface PersonProps { title: string name: string avatar?: string - email?: string - address?: string - phone?: string + institution: string } } --- @@ -27,9 +25,7 @@ interface PersonProps { title={person.data.title} name={person.data.name} image={person.data.avatar} - email={person.data.email} - phone={person.data.phone} - address={person.data.address} + institution={person.data.institution} /> ) diff --git a/src/components/CustomInput.tsx b/src/components/CustomInput.tsx index 7a31e08..895f037 100644 --- a/src/components/CustomInput.tsx +++ b/src/components/CustomInput.tsx @@ -7,14 +7,9 @@ interface CustomInputProps { export const CustomInput: React.FC = ({ label, placeholder }) => { return ( - <> - - +
+ + +
) } diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx index 4b1c19d..2efc344 100644 --- a/src/components/DownloadModal.tsx +++ b/src/components/DownloadModal.tsx @@ -21,20 +21,25 @@ const DownloadModal = () => { onClick={() => setIsOpen(false)} /> - -
- - - Close - + +
+
+ + + Close + +
+ Download Data +

+ By downloading these data, you agree to the usage guidelines +

- Download Data -
+
- - - - + + + +