feat: Add about page (2c8fddaf) · Commits · Research Enablement / Sites / Research

src/components/Menu.tsx

+2 −2

Original line number	Diff line number	Diff line
		@@ -13,10 +13,10 @@ export default () => (
		<NavigationMenuLink className="NavigationMenuLink" href="/">Home</NavigationMenuLink>
		</NavigationMenuItem>
		<NavigationMenuItem>
		<NavigationMenuLink className="NavigationMenuLink" href="#">About</NavigationMenuLink>
		<NavigationMenuLink className="NavigationMenuLink" href="/about">About</NavigationMenuLink>
		</NavigationMenuItem>
		<NavigationMenuItem>
		<NavigationMenuLink className="NavigationMenuLink" href="#">Help</NavigationMenuLink>
		<NavigationMenuLink className="NavigationMenuLink" href="#">Contact</NavigationMenuLink>
		</NavigationMenuItem>
		</NavigationMenuList>
		</NavigationMenu>

src/layouts/Layout.astro

+2 −0

Original line number	Diff line number	Diff line
		@@ -26,6 +26,8 @@ const { title } = Astro.props;
		--primary:#1D722D;
		--primary-lightened: color-mix(in srgb, var(--primary) 50%, white);
		--alternate: #00454D;
		--alternate-lightened: color-mix(in srgb, var(--alternate) 10%, white);
		--hale-navy: var(--alternate);
		--logo: #007833;
		--secondary: #36A447;
		--accent: #F57E2A;

src/pages/about.astro

0 → 100644

+139 −0

Original line number	Diff line number	Diff line
		---
		import "@/styles/globals.css";
		import { Debug } from "astro/components";
		import { Button } from '@/components/ui/button';
		import Header from "../components/Header.astro";
		import Footer from "../components/Footer.astro";
		import Layout from "../layouts/Layout.astro";
		import { ChevronRight } from "lucide-react"
		---

		<Layout title="Research Activity Index">
		<Header
		title="Research Activity Index"
		/>
		<main>
		<article>
		<section>
		<h2>Project-level insights for lab-wide understanding</h2>
		<h3>We're here to answer the question, "What does ORNL do?"</h3>
		<p>
		The Research Activity Index (<abbr title="Research Activity Index">RAI</abbr>), part of the <span><a href="https://research.ornl.gov/research-enablement">Research Enablement</a></span> initiative, communicates and improves research by helping people — including ourselves — find and understand projects when they come to ORNL to solve scientific challenges.
		</p>
		</section>
		<section>
		<h2>The nexus of science and communications</h2>
		<p>
		The RAI isn't just a method of communicating science — it's the result of <span>applying science to communications</span>. Structuring, standardizing, and automating content can create actionable data about ORNL research to be analyzed, filtered and searched.
		</p>
		<p>
		This allows users to discover insights and create efficiencies that <span>enable new research</span>.
		</p>
		</section>
		<div class="button-wrapper">
		<Button id="about-learn-more">Learn more <ChevronRight/></Button>
		</div>
		</article>
		</main>
		<Footer />
		</Layout>
		<script>
		const button = document.getElementById("about-learn-more");
		button?.addEventListener("click", () => {
		const url = "https://code.ornl.gov/groups/research-enablement/-/wikis/home";
		window.open(url, '_blank')?.focus();
		});
		</script>
		<style>
		main {
		display: flex;
		font-family: var(--font-family);
		flex-direction: column;
		width: 100%;
		max-width: 1000px;
		margin: 20px auto;
		margin-bottom: 20px;
		color: #333;
		& h1 {
		font-size: 3rem;
		margin-top: 20px;
		margin-bottom: 0px;
		}
		& > article {
		margin: 0px 60px 60px 50px;
		}
		& > article section {
		margin: 30px 0;
		}
		& > article h2 {
		color: var(--hale-navy);
		font-size: 2.1rem;
		margin-bottom: 10px;
		}
		& > article h3 {
		display: inline-block;
		position: relative;
		font-size: 1.2rem;
		margin-left: 1rem;
		margin-bottom: 15px;
		color: var(--hale-navy);
		border-left: 4px solid var(--hale-navy);
		padding: 20px 30px 15px 20px;
		font-style: italic;
		background-color: var(--alternate-lightened);
		&::after {
		--height: calc( 1.2rem + 20px + 15px + 10px );
		content: "";
		position: absolute;
		top: 0;
		width: 0;
		margin-left: 30px;
		border-top: var(--height) solid var(--alternate-lightened);
		border-right: var(--height) solid transparent;
		border-bottom: 0px solid transparent;
		border-left: 0px solid transparent;
		background-color: var(--background-color);
		}
		}
		& > article p {
		margin: 15px 0;
		}
		& > article .button-wrapper {
		display: block;
		margin-top: 60px;
		position: relative;
		text-align: center;
		}
		}
		#about-learn-more {
		background: var(--hale-navy);
		border: 2px solid var(--hale-navy);
		border-radius: 5px;
		box-sizing: border-box;
		color: var(--background-color);
		cursor: pointer;
		font-size: 1.2rem;
		outline: none;
		margin: 0 5px;
		padding: 0 4rem;
		position: relative;
		transition: all 0.1s ease-in-out;
		&:hover {
		border: 2px solid var(--hale-navy);
		background-color: var(--background-color);
		color: var(--hale-navy);
		}
		}
		@media screen and (max-width: 400px) {
		main {
		display: flex;
		flex-direction: column;
		margin: 40px;
		justify-content: center;
		& > article {
		width: 900px;
		flex-grow: 1;
		}
		}
		}
		</style>

Admin message