initial commit of across missions overview (nasa-gcn#1723)

Co-authored-by: Leo Singer <[email protected]>

app/routes/labs.missions/route.tsx

@@ -0,0 +1,81 @@
+/*!
+ * Copyright © 2023 United States Government as represented by the
+ * Administrator of the National Aeronautics and Space Administration.
+ * All Rights Reserved.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { GridContainer } from '@trussworks/react-uswds'
+
+import fermiHeroImage from './Fermi_Earth_GWs.jpg'
+import { Meatball } from '~/components/meatball/Meatball'
+import type { BreadcrumbHandle } from '~/root/Title'
+
+import fleet from './AstroFleetChart.png'
+
+export const handle: BreadcrumbHandle = {
+  breadcrumb: 'Missions',
+}
+
+export default function () {
+  return (
+    <>
+      <img
+        alt="Fermi satellite with a GRB in the background, both positioned over earth"
+        src={fermiHeroImage}
+        height="1184"
+        width="3546"
+        className="width-full height-auto"
+      />
+      <GridContainer className="usa-section">
+        <h1>Mutimessenger missions</h1>
+        <h3>Overview</h3>
+        <p className="usa-paragraph">
+          The joint discovery of gravitational waves and electromagnetic
+          radiation from the binary neutron star merger GW170817 was a watershed
+          moment for astrophysics. NASA missions played a critical role in this
+          discovery, from constraining the speed of gravity, to determining the
+          site of heavy (r-process) element formation, to furthering our
+          understanding of the formation and structure of relativistic jets. The
+          recent detection of a neutrino correlated in space and time with a
+          flare from gamma-ray blazar has also provided a tantalizing clue to
+          the origin of high-energy cosmic neutrinos. These studies of
+          astrophysical transients and time-domain and multimessenger phenomena
+          are perhaps the most rapidly growing field of astrophysics, rich with
+          opportunities for exciting discoveries. In the present/near-future,
+          NASA is well-positioned to capitalize on the exciting scientific
+          opportunities in time-domain and multimessenger astrophysics. As
+          highlighted in the 2019 Astrophysics Senior Review of Operating
+          Missions, the portfolio provides a suite of capabilities that is
+          “greater than the sum of its parts”, and will contribute significantly
+          to the major science questions in this field.
+        </p>
+        <figure>
+          <img
+            alt="a diagram depicting all the missions in the fleet over time shaped as a swirl"
+            src={fleet}
+            height="2160"
+            width="3840"
+            className="mobile:width-mobile width-tablet height-auto"
+          />
+          <figcaption>
+            The current NASA Astrophysics fleet, flying and in development.
+          </figcaption>
+        </figure>
+
+        <figure className="bordered">
+          <blockquote>
+            "The complementary nature of these missions makes the overall
+            capability of the portfolio more than the sum of its parts, and many
+            of the most exciting developments in contemporary astrophysics draw
+            on observations from several of these observatories simultaneously."
+          </blockquote>
+          <figcaption>
+            <Meatball className="height-auto width-5" />
+            2019 Astrophysics Senior Review, Executive Summary, Page 2
+          </figcaption>
+        </figure>
+      </GridContainer>
+    </>
+  )
+}

app/routes/labs/route.tsx

@@ -25,8 +25,7 @@ export default function () {
   return (
     <>
       <Header />
-      <h1>ACROSS</h1>
-      <main id="main-content">
+      <main id="main-content" className="usa-prose--dark">
         <Outlet />
       </main>
       <Footer />

app/theme.scss

@@ -387,3 +387,27 @@ input.react-tags__combobox-input:focus {
 .usa-input-prefix.wide-input-prefix + * {
   padding-left: units(10);
 }
+
+.usa-prose--dark {
+  @include u-bg('ink');
+  @include u-text('white');
+}
+
+/*
+ * Workaround for https://github.com/uswds/uswds/issues/5695
+ */
+figure {
+  & > figcaption {
+    @include u-text('gray-30');
+    margin-left: 2rem;
+    font-style: italic;
+  }
+  & > figcaption > img {
+    padding-bottom: 1rem;
+    padding-right: 0.5rem;
+    float: left;
+  }
+}
+figure.bordered {
+  @include u-border-left(2px, 'base');
+}