diff --git a/package.json b/package.json index 29c3c15..20eb0f0 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@types/react-dom": "^18.3.0", "astro": "^4.10.2", "astro-font": "^0.0.81", + "dayjs": "^1.11.11", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 41c31d5..3607664 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ dependencies: astro-font: specifier: ^0.0.81 version: 0.0.81 + dayjs: + specifier: ^1.11.11 + version: 1.11.11 react: specifier: ^18.3.1 version: 18.3.1 @@ -4863,6 +4866,10 @@ packages: is-data-view: 1.0.1 dev: true + /dayjs@1.11.11: + resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==} + dev: false + /debug@4.3.4: resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} diff --git a/src/content/press/2022-03-mtpc-ida-network.yml b/src/content/press/2022-03-mtpc-ida-network.yml new file mode 100644 index 0000000..daa8898 --- /dev/null +++ b/src/content/press/2022-03-mtpc-ida-network.yml @@ -0,0 +1,4 @@ +title: MTPC launches IDA Network and partnership with Namesake Collaborative +date: 2022-03-31 +url: https://www.masstpc.org/ida-network-namesake-announcement/ +outlet: Massachusetts Transgender Political Coalition diff --git a/src/content/press/2023-06-mtpc-launch.yml b/src/content/press/2023-06-mtpc-launch.yml new file mode 100644 index 0000000..b13c31b --- /dev/null +++ b/src/content/press/2023-06-mtpc-launch.yml @@ -0,0 +1,4 @@ +title: MTPC and Namesake launch online platform to assist with legal name and gender marker corrections for trans and nonbinary MA residents +date: 2023-06-21 +url: https://www.masstpc.org/namesake-press-release/ +outlet: Massachusetts Transgender Political Coalition diff --git a/src/pages/press.astro b/src/pages/press.astro index 673980d..34fb768 100644 --- a/src/pages/press.astro +++ b/src/pages/press.astro @@ -1,10 +1,12 @@ --- import { Image } from "astro:assets"; import BaseLayout from "../layouts/BaseLayout.astro"; +import dayjs from "dayjs"; import { getCollection } from "astro:content"; const pressArticles = await getCollection("press"); +pressArticles.sort((a, b) => b.data.date.getTime() - a.data.date.getTime()); --- <BaseLayout @@ -19,11 +21,11 @@ const pressArticles = await getCollection("press"); pressArticles.map((article) => ( <li class="article"> <time datetime={article.data.date.toISOString()}> - {article.data.date.toDateString()} + {dayjs(article.data.date).format("MMMM YYYY")} </time> <strong class="outlet">{article.data.outlet}</strong> <a href={article.data.url} class="title" target="_blank"> - {article.data.title} + <span>{article.data.title}</span> </a> {article.data.image && ( <Image @@ -54,7 +56,8 @@ const pressArticles = await getCollection("press"); margin: 0; display: flex; flex-direction: column; - padding-bottom: var(--space-xl); + gap: var(--space-3xl); + padding-bottom: var(--space-3xl); } .article { @@ -66,11 +69,17 @@ const pressArticles = await getCollection("press"); font-size: var(--step-3); font-weight: 600; text-wrap: balance; + + span { + background: var(--bg-purple-overlay); + box-decoration-break: clone; + } } } .image { align-self: flex-end; - margin-block-start: var(--space-l); + margin-block-start: calc(-1 * var(--space-2xl)); + z-index: -1; } </style> diff --git a/src/styles/theme.css b/src/styles/theme.css index 9422552..b5ed82e 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -37,6 +37,7 @@ /* Colors */ --bg-purple: #CDA5EF; + --bg-purple-overlay: rgb(205 165 239 / 0.8); --text: #111111; --text-placeholder: rgba(0, 0, 0, 0.5); --white: #FFFFFF;