Commit efb60381 authored by Wohlgemuth, Jason's avatar Wohlgemuth, Jason
Browse files

feat: Add HaveHeartTwo font to about page

parent c61d7ef4

public/fonts/HaveHeartTwo.woff

0 → 100644
+58.4 KiB

File added.

No diff preview for this file type.

View file

src/components/Header.astro

+7 −2
Original line number Diff line number Diff line 
---

import Menu from "./Menu.tsx";



const { title, subtitle } = Astro.props;

const { title, subtitle, isAboutPage } = Astro.props;

---



<header>

    <Menu client:only />

    <div id="header-banner" class="wrapper" }}>

        <h1 class="title">{title}</h1>

        <p>{subtitle}</p>

        {isAboutPage ? <h2>{subtitle}</h2> : <p>{subtitle}</p>}

    </div>

</header>

<script>
@@ -49,6 +49,11 @@ const { title, subtitle } = Astro.props; 
                    font-size: 1.5rem;

                }

            }

            & > h2 {

                font-size: 5rem;

                font-family: var(--font-family-about);

                margin-left: 4rem;

            }

        }

    }

    #navigation-menu-container::before {

src/layouts/Layout.astro

+9 −1
Original line number Diff line number Diff line
@@ -23,10 +23,11 @@ const { title } = Astro.props; 
<style is:global>

	:root {

		--font-family: "OpenSans", sans-serif;

		--font-family-about: "HaveHeartTwo", sans-serif;

		--primary:#1D722D;

		--primary-lightened: color-mix(in srgb, var(--primary) 50%, white);

		--alternate: #00454D;

		--alternate-lightened: color-mix(in srgb, var(--alternate) 10%, white);

		--alternate-lightened: color-mix(in srgb, var(--alternate) 15%, white);

		--hale-navy: var(--alternate);

		--logo: #007833;

		--secondary: #36A447;
@@ -50,6 +51,13 @@ const { title } = Astro.props; 
		font-style: normal;

		font-weight: normal;

	}

	@font-face {

		font-family: "HaveHeartTwo";

		src: url("/fonts/HaveHeartTwo.woff") format("woff");

		font-display: swap;

		font-style: normal;

		font-weight: normal;

	}

	*,

	*::before,

	*::after {

src/pages/about.astro

+3 −2
Original line number Diff line number Diff line
@@ -9,7 +9,7 @@ import { ChevronRight } from "lucide-react"; 
---



<Layout title="Research Activity Index">

    <Header title="Research Activity Index" />

    <Header title="Research Activity Index" subtitle="What does ORNL do?" isAboutPage />

    <main>

        <article>

            <section>
@@ -90,6 +90,7 @@ import { ChevronRight } from "lucide-react"; 
            padding: 20px 30px 15px 20px;

            font-style: italic;

            background-color: var(--alternate-lightened);

            min-width: 600px;

            &::after {

                --height: calc(1.2rem + 20px + 15px + 10px);

                content: "";
@@ -98,7 +99,7 @@ import { ChevronRight } from "lucide-react"; 
                width: 0;

                margin-left: 30px;

                border-top: var(--height) solid var(--alternate-lightened);

                border-right: var(--height) solid transparent;

                border-right: 30px solid transparent;

                border-bottom: 0px solid transparent;

                border-left: 0px solid transparent;

                background-color: var(--background-color);