Create class

src/app/about/page.tsx

@@ -4,9 +4,7 @@ import Link from "next/link";
 export default async function Home() {
   return (
     <MainLayout currentPage="/about/" title="About" subtitle="abtmtr.link v9">
-      <img style={{
-        marginTop: 16
-      }} src="/headers/about.png" alt="ABOUT"></img>
+      <img className="headerImage" src="/headers/about.png" alt="ABOUT"></img>
       <h1>abtmtr.link</h1>
       <p>Created by <b>MeowcaTheoRange</b></p>
       <p>Licensed under the <Link href="https://git.abtmtr.link/MeowcaTheoRange/KarkatPublicLicense/src/branch/master/LICENSE-v2.2" target="_blank">Karkat Public License (KKPL) v2.2</Link>.</p>

src/app/blog/page.tsx

@@ -17,9 +17,7 @@ export default async function Home({
   const blogs = await fetch(`https://blog.abtmtr.link/api/collections/mtr/posts?page=${curPage}`).then(x=>x.json());
   return (
     <MainLayout currentPage="/blog/" title="Blog" subtitle="via blog.abtmtr.link">
-      <img style={{
-        marginTop: 16
-      }} src="/headers/blog.png" alt="BLOG"></img>
+      <img className="headerImage" src="/headers/blog.png" alt="BLOG"></img>
       {blogs.data.posts.map((post:{
         title: string,
         body: string,

src/app/characters/page.tsx

@@ -17,9 +17,7 @@ export default async function Home({
 
   return (
     <MainLayout currentPage="/characters/" title="Characters" subtitle="">
-      <img style={{
-        marginTop: 16
-      }} src="/headers/characters.png" alt="CHARACTERS"></img>
+      <img className="headerImage" src="/headers/characters.png" alt="CHARACTERS"></img>
       <div className={styles.CharacterContainerGrid}>
         {characters.map(async (character:{
           id: string,

src/app/gallery/page.tsx

@@ -16,9 +16,7 @@ export default async function Home({
   const blogs = await fetch(`https://img.abtmtr.link/api/collections/mtr/posts?page=${curPage}`).then(x=>x.json());
   return (
     <MainLayout currentPage="/gallery/" title="Gallery" subtitle="via img.abtmtr.link">
-      <img style={{
-        marginTop: 16
-      }} src="/headers/gallery.png" alt="GALLERY"></img>
+      <img className="headerImage" src="/headers/gallery.png" alt="GALLERY"></img>
       {blogs.data.posts.map((post:{
         title: string,
         body: string,

src/app/links/page.tsx

@@ -6,9 +6,7 @@ export default async function Home() {
 
   return (
     <MainLayout currentPage="/links/" title="Links" subtitle="to other places I've been">
-      <img style={{
-        marginTop: 16
-      }} src="/headers/links.png" alt="LINKS"></img>
+      <img className="headerImage" src="/headers/links.png" alt="LINKS"></img>
       {data.links.map((link:string) => (
         <div style={{
           margin: "16px 0"

src/app/oao/page.tsx

@@ -4,9 +4,7 @@ import Link from "next/link";
 export default async function Home() {
   return (
     <MainLayout currentPage="/oao/" title="Opinions and Objections">
-      <img style={{
-        marginTop: 16
-      }} src="/headers/oao.png" alt="OPINIONS & OBJECTIONS"></img>
+      <img className="headerImage" src="/headers/oao.png" alt="OPINIONS & OBJECTIONS"></img>
       <p>As a sentient, living being with thoughts, I have opinions on certain things. Here are mine.</p>
       <ul>
         <li>

src/app/page.tsx

@@ -11,9 +11,7 @@ export default async function Home() {
   const goodNames = data.names.filter((x:{status:string})=>x.status == "okay");
   return (
     <MainLayout currentPage="/" title="Root">
-      <img style={{
-        marginTop: 16
-      }} src="/welcome.png" alt="WELCOME! Enjoy your stay at abtmtr.link!"></img>
+      <img className="headerImage" src="/welcome.png" alt="WELCOME! Enjoy your stay at abtmtr.link!"></img>
       <p>abtmtr.link is a domain for a suite of services, ranging from micro-blogging to web search.</p>
       <p>I'm {goodNames[0].value}, otherwise known as {goodNames.slice(1).map((name:{value:string}, idx:number) => (
         idx == goodNames.length - 2 ? (<>or <b>{name.value}</b></>) : (<><b>{name.value}</b>{goodNames.length <= 2 ? ", " : " "}</>)

src/app/projects/page.tsx

@@ -7,9 +7,7 @@ export default async function Home() {
   const projects = await fetch("https://projects.abtmtr.link/projects.json").then(x=>x.json());
   return (
     <MainLayout currentPage="/projects/" title="Projects" subtitle="by MeowcaTheoRange">
-      <img style={{
-        marginTop: 16
-      }} src="/headers/projects.png" alt="PROJECTS"></img>
+      <img className="headerImage" src="/headers/projects.png" alt="PROJECTS"></img>
       {projects.items.map((project:{
         name: string,
         date: number,

src/app/stories/page.tsx

@@ -15,9 +15,7 @@ export default async function Home({
   const blogs = await fetch(`https://blog.abtmtr.link/api/collections/stories/posts?page=${curPage}`).then(x=>x.json());
   return (
     <MainLayout currentPage="/stories/" title="Stories" subtitle="via blog.abtmtr.link">
-      <img style={{
-        marginTop: 16
-      }} src="/headers/stories.png" alt="STORIES"></img>
+      <img className="headerImage" src="/headers/stories.png" alt="STORIES"></img>
       {blogs.data.posts.map((post:{
         title: string,
         body: string,

src/styles/style.css

@@ -83,3 +83,9 @@ button.fw:hover {
   background-color: var(--bg-2);
   opacity: 1;
 }
+img.headerImage {
+  margin-top: 16px;
+  width: 100%;
+  display: inline-block;
+  aspect-ratio: 768/300;
+}