Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add icons for project aims #62

Merged
merged 1 commit into from
Jun 28, 2024
Merged

feat: add icons for project aims #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions src/components/ProjectAim.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
interface Props {
color: "blue" | "primary" | "brown"
}

const { color } = Astro.props
---

<div class="flex-1 flex flex-col gap-4">
<span
class={color === "blue"
? "text-secondary-blue-500"
: color === "primary"
? "text-primary-500"
: "text-secondary-brown-500"}
>
<slot name="icon" />
</span>
<hr
class={`h-1 w-36 border-none ${
color === "blue"
? "bg-secondary-blue-500"
: color === "primary"
? "bg-primary-500"
: "bg-secondary-brown-500"
} `}
/>
<p><slot /></p>
</div>
1 change: 0 additions & 1 deletion src/layouts/Home.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import BaseHead from "../components/BaseHead.astro"
import Header from "../components/Header.astro"
import Footer from "../components/Footer.astro"
import FootPrint from "../components/svg/FootPrint"

interface Props {
title: string
Expand Down
37 changes: 19 additions & 18 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
import Home from "../layouts/Home.astro"
import CircleIcon from "../components/svg/Circle"
import MiniMapSvg from "../components/svg/MiniMaps"
import FootPrint from "../components/svg/FootPrint"
import { GlobeIcon, Pencil1Icon, TargetIcon } from "@radix-ui/react-icons"
import ProjectAim from "../components/ProjectAim.astro"
---

<Home
Expand All @@ -13,8 +14,8 @@ import FootPrint from "../components/svg/FootPrint"
<div class="hidden xl:block absolute top-24 left-12">
<FootPrint />
</div>
<div class="space-y-24">
<section class="space-y-6 py-6 lg:w-3/4">
<div class="flex flex-col gap-24">
<section class="space-y-8 py-6 lg:w-3/4">
<p>
The Mexican Migration Project (MMP) was created in 1982 by an interdisciplinary team of
researchers to further our understanding of the complex process of Mexican migration to the
Expand All @@ -36,24 +37,24 @@ import FootPrint from "../components/svg/FootPrint"
behavior of Mexican migrants.
</p>
</section>
<section class="space-y-4">
<section class="space-y-12">
<h3 class="title font-semibold">Project Aims</h3>
<div class="flex space-x-6">
<div>
<CircleIcon styling="fill-secondary-blue-500" />
<p>Gather and maintain high quality data on Mexican migration to the US</p>
</div>
<div>
<CircleIcon styling="fill-primary-500" />
<p>Make data public and confidential</p>
</div>
<div>
<CircleIcon styling="fill-secondary-brown-500" />
<p>Investigate the evolving transnational dynamics of migration</p>
</div>
<div class="flex flex-wrap gap-20 justify-center">
<ProjectAim color="blue">
<TargetIcon slot="icon" height={36} width={36} />
Gather and maintain high quality data on Mexican migration to the US
</ProjectAim>
<ProjectAim color="primary">
<GlobeIcon slot="icon" height={36} width={36} />
Make data public and confidential
</ProjectAim>
<ProjectAim color="brown">
<Pencil1Icon slot="icon" height={36} width={36} />
Investigate the evolving transnational dynamics of migration
</ProjectAim>
</div>
</section>
<section class="space-y-4 lg:w-3/4">
<section class="space-y-12 lg:w-3/4">
<h3 class="title font-semibold">Where are we located?</h3>
<p>
The MMP has offices, in Mexico, at the Departamento de Investigacion sobre Movimientos
Expand Down