JumboCode · AlexW-F · Apr 30, 2024
diff --git a/public/font/AvenirLTStd-Medium.otf b/public/font/AvenirLTStd-Medium.otf
diff --git a/public/font/Mrs_Eaves_OT_Bold.otf b/public/font/Mrs_Eaves_OT_Bold.otf
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
@@ -25,7 +25,7 @@ const Layout: React.FC<Props> = ({ children }) => {
 					<div className="mt-28 border-t border-enc-green overflow-auto h-screen">
 						<Link
 							href="/admin/popups"
-							className="w-full h-20 flex items-center justify-start border-b  font-questrial text-xl font-thin text-enc-green hover:bg-enc-yellow border-r border-enc-green"
+							className="w-full h-20 flex items-center justify-start border-b text-xl font-thin text-enc-green hover:bg-enc-yellow border-r border-enc-green"
 						>
 							<div className="w-12"></div>
 							<span className="ml-4">Map Popups</span>

diff --git a/src/app/arnold-arboretum/attractions/page.tsx b/src/app/arnold-arboretum/attractions/page.tsx
@@ -89,9 +89,9 @@ export default function ArnArbAttractions () {
           </div>
         </div>
               {/* QUESTRIAL is broken */}
-        <p className='text-white font-orelega text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
+        <h1 className='text-white text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
           Arnold Arboretum{' '}
-        </p>
+        </h1>
       </div>
 
       <div className='bg-custom-HistoryBackgroundGreen w-full'>

diff --git a/src/app/back-bay-fens/attractions/page.tsx b/src/app/back-bay-fens/attractions/page.tsx
@@ -157,9 +157,9 @@ export default function BackBayAttractions () {
           </div>
         </div>
         {/* QUESTRIAL is broken */}
-        <p className='text-white font-orelega text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
+        <h1 className='text-white text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
           Back Bay Fens{' '}
-        </p>
+        </h1>
       </div>
 
       <div className='bg-custom-HistoryBackgroundGreen w-full'>

diff --git a/src/app/franklin-park/attractions/page.tsx b/src/app/franklin-park/attractions/page.tsx
@@ -189,10 +189,10 @@ export default function FranklinAttractions () {
           </div>
         </div>
         {/* QUESTRIAL is broken */}
-        <p className='text-white font-orelega text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
+        <h1 className='text-white text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
           {/* Update: Name */}
 		  Franklin Park{' '}
-        </p>
+        </h1>
       </div>
 
       <div className='bg-custom-HistoryBackgroundGreen w-full'>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,7 +1,3 @@
-/* FONT IMPORTS MUST BE ABOVE TAILWIND IMPORTS */
-@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Orelega+One&display=swap');
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -12,6 +8,22 @@
 	--background-end-rgb: 255, 255, 255;
 }
 
+@font-face {
+	font-family: 'Avenir';
+	src: url('/font/AvenirLTStd-Medium.otf') format('opentype');
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Eaves';
+	src: url('/font/Mrs_Eaves_OT_Bold.otf') format('opentype');
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
 @media (prefers-color-scheme: dark) {
 	:root {
 		--foreground-rgb: 255, 255, 255;
@@ -25,7 +37,21 @@ body {
 }
 
 p {
-	font-family: "questrial", "sans-serif";
+	font-family: "Avenir", "sans-serif";
+}
+
+h2 {
+	font-family: "Eaves", "serif";
+	-webkit-font-smoothing: subpixel-antialiased !important;
+	text-rendering:optimizeLegibility;
+	-webkit-text-stroke: .3px;
+}
+
+h1 {
+	font-family: "Eaves", "serif";
+	-webkit-font-smoothing: subpixel-antialiased !important;
+	text-rendering:optimizeLegibility;
+	-webkit-text-stroke: .3px;
 }
 
 .button {

diff --git a/src/app/jamaica-pond/attractions/page.tsx b/src/app/jamaica-pond/attractions/page.tsx
@@ -93,10 +93,10 @@ export default function JamaicaAttractions () {
           </div>
         </div>
         {/* QUESTRIAL is broken */}
-        <p className='text-white font-orelega text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
+        <h1 className='text-white text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
           {/* Update: Name */}
 		  Jamaica Pond{' '}
-        </p>
+        </h1>
       </div>
 
       <div className='bg-custom-HistoryBackgroundGreen w-full'>

diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
@@ -33,7 +33,7 @@ enum park {
   Back_Bay
 }
 const text: string[] = [
-  'At 527 acres, Franklin Park is the largest park in the Emerald Necklace. Named for Benjamin Franklin, the park brings together rural scenery, spectacular rock outcroppings, a woodland preserve, expansive pastoral vistas and an area for active recreation and sports.',
+  'At 527 acres, Franklin Park is the largest park in the Emerald Necklace. Named for Benjamin Franklin, the park brings together rural scenery, spectacular rock outcroppings, a woodland preserve, and expansive pastoral vistas .',
   'Established in 1872, the Arnold Arboretum is open daily to the public as a free landscape for the study and enjoyment of trees, shrubs, and vines. The Arboretum is both a beautiful landscape of mature plants and a site for vital scientific research.',
   'A pure, glacial kettle hole, Jamaica Pond captivated landscape architect Fredrick Law Olmsted with its “great beauty in reflections and flickering half-lights.” The boathouse at Jamaica Pond provides facilities for sailing, rowing, and fishing. The pond is stocked with trout and salmon raised in state hatcheries.',
   'Landscape architect Fredrick Law Olmsted designed the park as “a chain of picturesque fresh-water ponds, alternating with attractive natural groves and meads.” Pathways, bridges, and plantings provide a series of vignettes with scene changes along the way.',

diff --git a/src/app/olmsted-park/attractions/page.tsx b/src/app/olmsted-park/attractions/page.tsx
@@ -124,10 +124,10 @@ export default function OlmstedAttractions () {
           </div>
         </div>
         {/* QUESTRIAL is broken */}
-        <p className='text-white font-orelega text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
+        <h1 className='text-white text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
           {/* Update: Name */}
 		  Olmsted Park{' '}
-        </p>
+        </h1>
       </div>
 
       <div className='bg-custom-HistoryBackgroundGreen w-full'>

diff --git a/src/app/riverway/attractions/page.tsx b/src/app/riverway/attractions/page.tsx
@@ -94,10 +94,10 @@ export default function RiverwayAttractions () {
           </div>
         </div>
         {/* QUESTRIAL is broken */}
-        <p className='text-white font-orelega text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
+        <h1 className='text-white text-6xl absolute bottom-0 left-0 ml-10 mb-20'>
           {/* Update: Name */}
 		  Riverway{' '}
-        </p>
+        </h1>
       </div>
 
       <div className='bg-custom-HistoryBackgroundGreen w-full'>

diff --git a/src/components/AttractionCircle.tsx b/src/components/AttractionCircle.tsx
@@ -15,7 +15,7 @@ const AttractionCircle: React.FC<AttractionCircleProps> = ({ num, size, fontSize
     <div
       className='bg-custom-yellow w-12 h-12 rounded-full flex justify-center items-center'
       style={{ height: circleSize, width: circleSize}}>
-      <h1 className='text-black text-xl font-questrial' style={{fontSize: fSize}}>{num}</h1>
+      <h1 className='text-black text-xl' style={{fontSize: fSize}}>{num}</h1>
     </div>
   )
 }

diff --git a/src/components/AttractionInformation.tsx b/src/components/AttractionInformation.tsx
@@ -21,10 +21,10 @@ const AttractionInformation: React.FC<AttractionInformationProps> = ({
       />
       <div className='p-4'></div> {/* Padding here */}
       <div className='inline-block bg-custom-yellow p-1'>
-        <h1 className='text-black text-xl font-questrial'>{attractionName}</h1>
+        <h1 className='text-black text-xl'>{attractionName}</h1>
       </div>
       <div className='p-2'></div> {/* Padding here */}
-      <div className='inline-block bg-black bg-opacity-50 text-white p-2 w-3/4'>{attractionText}</div>
+      <div className='inline-block bg-black bg-opacity-50 text-white p-2 w-3/4'><p>{attractionText}</p></div>
     </div>
   )
 }

diff --git a/src/components/AttractionNumber.tsx b/src/components/AttractionNumber.tsx
@@ -15,7 +15,7 @@ const AttractionNumber: React.FC<AttractionNumber> = ({ number }) => {
     return (
         <div className="absolute top-0 left-0 mt-10 ml-10">
             <div className="p-6 max-w-sm">
-                <h1 className="text-2xl font-semibold font-Inter mb-4">{number}</h1>
+                <h1 className="text-2xl font-semibold mb-4">{number}</h1>
             </div>
         </div>
     );

diff --git a/src/components/MapButton.tsx b/src/components/MapButton.tsx
@@ -11,7 +11,7 @@ const MapButton = () => {
         <div className = "fixed bottom-0 right-0 p-1">
             <div className="bg-custom-NavBarGreen p-2 rounded-b-lg rounded-t-lg shadow-md">
             <button onClick={handleClick} style={{ color: 'white', fontSize: '20px', padding: '10px 10px' }}> 
-      SIGNUP
+        <h2>SIGNUP</h2>
     </button> 
             </div>
         </div>

diff --git a/src/components/MenuButton2.tsx b/src/components/MenuButton2.tsx
@@ -33,7 +33,7 @@ const MenuButton2: React.FC<DropdownProps> = ({ options }) => {
               href={`#${index}`}
               className='block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white border-b-2 border-black'
             >
-              {option}
+              <p>{option}</p>
             </a>
           ))}
         </div>

diff --git a/src/components/ParkModal.tsx b/src/components/ParkModal.tsx
@@ -29,13 +29,13 @@ const Modal: React.FC<ModalProps> = ({ title, text, url, open }) => {
 						<h2 className="text-3xl text-white text-center mt-2">
 							{title}
 						</h2>
-						<p className="px-6 py-6  text-white">{text}</p>
+						<p className="px-10 py-6 text-xl text-white">{text}</p>
 						<div className="flex items-center justify-center">
 							<Link
 								href={url}
 								className="text-lg bg-[#D6DF3D] py-4 rounded-[10px] px-8"
 							>
-								Check it Out
+								<h2>Check it Out!</h2>
 							</Link>
 						</div>
 					</div>
@@ -56,7 +56,7 @@ const Modal: React.FC<ModalProps> = ({ title, text, url, open }) => {
 								href={url}
 								className="text-lg bg-[#D6DF3D] py-4 rounded-[10px] px-8"
 							>
-								Check it Out
+								<h2>Check it Out!</h2>
 							</Link>
 						</div>
 					</div>
@@ -77,7 +77,7 @@ const Modal: React.FC<ModalProps> = ({ title, text, url, open }) => {
 								href={url}
 								className="text-lg bg-[#D6DF3D] py-4 rounded-[10px] px-8"
 							>
-								Check it Out!
+								<h2>Check it Out!</h2>
 							</Link>
 						</div>
 					</div>

diff --git a/src/components/ParkName.tsx b/src/components/ParkName.tsx
@@ -1,13 +1,6 @@
-// import { Orelega_One } from "next/font/google";
 import React, {useState} from 'react'
 import ParkModal from '@/components/ParkModal'
 
-
-// const orelega_One = Orelega_One({
-//     subsets: ['latin'],
-//     weight: "400",
-//     variable: '--font-orelega_One'
-// });
 enum park {
     Franklin_Park,
     Arnold_Arboretum,
@@ -36,10 +29,10 @@ const ParkName: React.FC<ParkNameProps> = ({ name, text, open, setOpen, index })
 
 	return (
 		<>
-			<button 
+			<button
 				className="button-border"
 				onClick={handleClick}>
-				{name}
+				<h1>{name}</h1>
 			</button>
 			<ParkModal title={name} url={`/${name.replace(/\s/g, "-").toLowerCase()}`} text={text} open={open[index]}/>
 		</>

diff --git a/src/components/ParkNav.tsx b/src/components/ParkNav.tsx
@@ -19,7 +19,7 @@ const NavButton: React.FC<NavButtonProps> = ({ label, selected, onClick }) => {
         selected ? 'bg-custom-yellow' : 'bg-transparent'
       } hover:bg-green-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 transition duration-300 ease-in-out`}
     >
-      {label}
+      <h2>{label}</h2>
     </button>
   );
 }

diff --git a/src/components/admin/AttractionsPage.tsx b/src/components/admin/AttractionsPage.tsx
@@ -61,7 +61,7 @@ const AttractionPage: React.FC<Props> = ({ park }) => {
 					<Title title={`${park.name} - Attractions`} />
 					<button
 						onClick={addAttraction}
-						className="bg-white rounded-md  hover:bg-enc-light-green h-min font-questrial text-black text-center w-32 mr-5 p-2"
+						className="bg-white rounded-md  hover:bg-enc-light-green h-min text-black text-center w-32 mr-5 p-2"
 					>
 						Add Attraction
 					</button>

diff --git a/src/components/admin/HistoryPage.tsx b/src/components/admin/HistoryPage.tsx
@@ -47,7 +47,7 @@ const HistoryPage: React.FC<Props> = ({ park }) => {
 				</form>
 				<div className="">
 					<div className="bg-enc-light-green w-full h-12 flex items-center pl-12">
-						<h2 className="font-questrial text-2xl text-[#33333] text-light">
+						<h2 className="text-2xl text-[#33333] text-light">
 							Images
 						</h2>
 					</div>

diff --git a/src/components/admin/MenuBar.tsx b/src/components/admin/MenuBar.tsx
@@ -18,23 +18,23 @@ const MenuBar: React.FC<MenuBarProps> = ({ id, saving }) => {
 	return (
 		<div className="flex w-full py-4 px-8 border-b border-enc-green h-28 bg-white">
 			<div className="flex items-center justify-center space-x-4 ml-auto mr-20">
-				<button className="font-questrial text-xl text-[#333333] font-thin  bg-enc-light-green h-min py-3 px-10 rounded-lg hover:bg-enc-yellow">
-					Preview
+				<button className="text-xl text-[#333333] font-thin  bg-enc-light-green h-min py-3 px-10 rounded-lg hover:bg-enc-yellow">
+					<h2>Preview</h2>
 				</button>
 
 				<button
 					form={id}
 					type="submit"
-					className="font-questrial text-2xl font-superthin bg-white text-enc-green border-enc-green border py-3 px-10 rounded-lg hover:bg-enc-yellow h-16 flex items-center justify-center w-36"
+					className="text-2xl font-superthin bg-white text-enc-green border-enc-green border py-3 px-10 rounded-lg hover:bg-enc-yellow h-16 flex items-center justify-center w-36"
 				>
-					{saving ? <CircleLoader color="#567534" /> : 'Save'}
+					<h2>{saving ? <CircleLoader color="#567534" /> : 'Save'}</h2>
 				</button>
 
 				<Link
 					href="/logout"
-					className="font-questrial text-2xl font-superthin bg-white text-enc-green border-enc-green border h-16 py-3 px-10 rounded-lg hover:bg-enc-yellow"
+					className="text-2xl font-superthin bg-white text-enc-green border-enc-green border h-16 py-3 px-10 rounded-lg hover:bg-enc-yellow"
 				>
-					Log Out
+					<h2>Log Out</h2>
 				</Link>
 			</div>
 		</div>

diff --git a/src/components/admin/MenuItem.tsx b/src/components/admin/MenuItem.tsx
@@ -20,7 +20,7 @@ const MenuItem: React.FC<MenuItemProps> = ({ label, url }) => {
 		<div className="">
 			<button
 				onClick={() => setOpen(!open)}
-				className={`w-full h-20 flex items-center justify-start border-b  font-questrial text-xl font-thin text-enc-green hover:bg-enc-light-green border-r border-enc-green ${
+				className={`w-full h-20 flex items-center justify-start border-b text-xl font-thin text-enc-green hover:bg-enc-light-green border-r border-enc-green ${
 					isActive(pathname, url) && 'bg-enc-yellow'
 				}`}
 			>

diff --git a/src/components/admin/Section.tsx b/src/components/admin/Section.tsx
@@ -8,12 +8,12 @@ const Section: React.FC<Props> = ({ title, id, defaultValue }) => {
 	return (
 		<div className="bg-[#333333]">
 			<div className="bg-enc-light-green w-full h-12 flex items-center pl-12">
-				<h2 className="font-questrial text-2xl text-[#33333] text-light">
+				<h2 className="text-2xl text-[#33333] text-light">
 					{title}
 				</h2>
 			</div>
 			<textarea
-				className="bg-transparent w-full font-questrial text-white text-lg  p-4 focus:outline-none"
+				className="bg-transparent w-full text-white text-lg  p-4 focus:outline-none"
 				id={id}
 				name={id}
 				// type="text"
@@ -39,14 +39,14 @@ export const SectionWithTitle: React.FC<Props> = ({
 				<input
 					id={`${id}-title`}
 					name={`${id}-title`}
-					className="bg-transparent w-full font-questrial text-[#33333] text-2xl focus:outline-none placeholder:text-gray-500"
+					className="bg-transparent w-full text-[#33333] text-2xl focus:outline-none placeholder:text-gray-500"
 					required
 					placeholder="title"
 					defaultValue={title}
 				/>
 			</div>
 			<textarea
-				className="bg-transparent w-full font-questrial text-white text-lg  p-4 focus:outline-none placeholder:text-gray-500"
+				className="bg-transparent w-full text-white text-lg  p-4 focus:outline-none placeholder:text-gray-500"
 				id={id}
 				name={id}
 				// type="text"

diff --git a/src/components/admin/Title.tsx b/src/components/admin/Title.tsx
@@ -5,7 +5,7 @@ interface Props {
 const Title: React.FC<Props> = ({ title }) => {
 	return (
 		<div className="bg-enc-yellow w-full h-20 flex items-center pl-12">
-			<h2 className="font-questrial text-2xl text-[#33333] text-light">
+			<h2 className="text-2xl text-[#33333] text-light">
 				{title}
 			</h2>
 		</div>