xs
sm
md
diff --git a/apps/site/src/app/_styles/globals.css b/apps/site/src/app/_styles/globals.css
index a31e44411..4a9a8149b 100644
--- a/apps/site/src/app/_styles/globals.css
+++ b/apps/site/src/app/_styles/globals.css
@@ -1,3 +1,143 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
+
+@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/forms";
+
+@theme {
+ --color-brand-100: #eff6fc;
+ --color-brand-200: #d8ebfb;
+ --color-brand-300: #73b4ed;
+ --color-brand-400: #0090ff;
+ --color-brand-500: #154ed9;
+ --color-brand-600: #0621a4;
+ --color-brand-700: #06094e;
+ --color-brand-800: #08072e;
+
+ --outline-brand: 2px solid var(--color-brand-100);
+}
+
+@utility animate-slide-in-from-top {
+ animation: slide-in-from-top 300ms cubic-bezier(0.41, 0.73, 0.51, 1.02);
+}
+
+@utility animate-shrink-and-fade-out {
+ animation: shrink-and-fade-out 150ms ease-in forwards;
+}
+
+@utility brand-outline {
+ outline: var(--outline-brand);
+ outline-offset: 0;
+ border-color: transparent;
+}
+
+@utility max-w-readable {
+ max-width: 60ch;
+}
+
+@utility prose {
+ --tw-prose-body: var(--color-brand-100);
+ --tw-prose-headings: var(--color-brand-100);
+ --tw-prose-bold: var(--color-brand-100);
+ --tw-prose-links: var(--color-brand-300);
+ --tw-prose-quotes: var(--color-brand-100);
+ --tw-prose-quote-borders: var(--color-brand-300);
+ --tw-prose-counters: var(--color-brand-100);
+ --tw-prose-bullets: var(--color-brand-100);
+ --tw-prose-code: var(--color-brand-100);
+ --tw-prose-pre-bg: var(--color-brand-700);
+ --tw-prose-pre-code: var(--color-brand-100);
+ --tw-prose-captions: var(--color-neutral-400);
+ --tw-prose-td-borders: var(--color-brand-300);
+ --tw-prose-th-borders: var(--color-brand-300);
+}
+
+.prose a {
+ text-decoration: none;
+}
+
+.prose a:hover {
+ text-decoration: underline;
+}
+
+.prose a:focus,
+.prose a:focus-visible {
+ outline: var(--outline-brand);
+}
+
+.prose code::before,
+.prose code::after {
+ content: none !important;
+}
+
+.prose pre {
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-brand-600);
+}
+
+.prose iframe {
+ width: 100%;
+}
+
+.prose iframe[src*='youtube.com'] {
+ width: 100%;
+ height: auto;
+ aspect-ratio: 16/9;
+}
+
+.prose figure {
+ text-align: center;
+}
+
+.prose figcaption {
+ text-align: left;
+ font-size: 10px;
+}
+
+.prose table thead th {
+ color: var(--color-brand-300);
+}
+
+@layer components {
+ .text-link {
+ color: var(--color-brand-300);
+ }
+
+ .text-link:hover {
+ text-decoration: underline;
+ }
+
+ .text-link:focus {
+ outline: var(--outline-brand);
+ outline-offset: var(--outline-brand-offset);
+ border-color: var(--outline-brand-border-color);
+ }
+
+ .toc-header {
+ color: var(--color-brand-200);
+
+ @apply text-sm font-semibold uppercase;
+ }
+}
+
+@keyframes slide-in-from-top {
+ 0% {
+ transform: translateY(-100%);
+ }
+
+ 100% {
+ transform: translateY(0);
+ }
+}
+
+@keyframes shrink-and-fade-out {
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+
+ 100% {
+ transform: scale(0.9);
+ opacity: 0;
+ }
+}
diff --git a/apps/site/src/app/events/[slug]/components/ScheduleSection/Tabs.tsx b/apps/site/src/app/events/[slug]/components/ScheduleSection/Tabs.tsx
index 47e86835b..ff75362c2 100644
--- a/apps/site/src/app/events/[slug]/components/ScheduleSection/Tabs.tsx
+++ b/apps/site/src/app/events/[slug]/components/ScheduleSection/Tabs.tsx
@@ -58,7 +58,7 @@ export function Tabs({ schedule }: TabsProps) {
{sortedDays.map((day) => (
{formatDate(day.date)}
diff --git a/apps/site/src/app/governance/components/CalendarCards/Calendar.tsx b/apps/site/src/app/governance/components/CalendarCards/Calendar.tsx
index b6e4d5c5d..9754e16d4 100644
--- a/apps/site/src/app/governance/components/CalendarCards/Calendar.tsx
+++ b/apps/site/src/app/governance/components/CalendarCards/Calendar.tsx
@@ -10,7 +10,7 @@ export function Calendar({ startDate }: CalendarProps) {
const { day, month } = formatDateComponentsFromISO(startDate)
return (
-
+
{month}
diff --git a/apps/site/src/app/orbit/page.tsx b/apps/site/src/app/orbit/page.tsx
index 5c4ffe62f..2138286f7 100644
--- a/apps/site/src/app/orbit/page.tsx
+++ b/apps/site/src/app/orbit/page.tsx
@@ -172,7 +172,7 @@ export default async function Orbit(props: Props) {
-
+
Where can I find info about the Filecoin Orbit 2021 conference?
diff --git a/apps/site/src/app/security/maturity-model/components/CoreFunctions.tsx b/apps/site/src/app/security/maturity-model/components/CoreFunctions.tsx
index 12e61d2bd..5d5a14144 100644
--- a/apps/site/src/app/security/maturity-model/components/CoreFunctions.tsx
+++ b/apps/site/src/app/security/maturity-model/components/CoreFunctions.tsx
@@ -6,7 +6,7 @@ import { Article } from './Article'
export function CoreFunctions() {
return (
-
+
{coreFunctionsData.map(({ title, Content, slug }, index) => (
diff --git a/apps/site/src/app/security/maturity-model/components/DesktopTableOfContents.tsx b/apps/site/src/app/security/maturity-model/components/DesktopTableOfContents.tsx
index 1ed4ae350..879e6efc3 100644
--- a/apps/site/src/app/security/maturity-model/components/DesktopTableOfContents.tsx
+++ b/apps/site/src/app/security/maturity-model/components/DesktopTableOfContents.tsx
@@ -8,16 +8,12 @@ import { coreFunctionsData } from '../data/coreFunctionsData'
import { scrollToSection } from '../utils/scrollToSection'
import { useUrlHash } from '../utils/useUrlHash'
-import styles from './TableOfContents.module.scss'
-
export function DesktopTableOfContents() {
const { isSectionActive, getHashFromSlug } = useUrlHash()
return (