🩹 Fix out-of-order headings (#6)

Author: aaronmondal

src/global.css

@@ -23,6 +23,16 @@ h1 {
 }
 
 h2 {
+  text-shadow: 0px 0px 0.05rem oklch(65% 0.3 145); /* ii-lightgreen */
+  background: linear-gradient(
+    345deg in oklch longer hue,
+    oklch(65% 0.295 99),
+    oklch(65% 0.295 120)
+  );
+  background-clip: text;
+}
+
+h3 {
   text-shadow: 0px 0px 0.05rem oklch(70% 0.3 0); /* ii-lightblue */
   background: linear-gradient(
     5deg in oklch longer hue,
@@ -32,7 +42,7 @@ h2 {
   background-clip: text;
 }
 
-h3 {
+h4 {
   text-shadow: 0px 0px 0.05rem oklch(65% 0.2 22); /* ii-lightred */
   background: linear-gradient(
     15deg in oklch longer hue,
@@ -61,13 +71,3 @@ a {
   );
   background-clip: text;
 }
-
-h4 {
-  text-shadow: 0px 0px 0.05rem oklch(65% 0.3 145); /* ii-lightgreen */
-  background: linear-gradient(
-    345deg in oklch longer hue,
-    oklch(65% 0.295 99),
-    oklch(65% 0.295 120)
-  );
-  background-clip: text;
-}

src/routes/index.tsx

@@ -82,18 +82,18 @@ export default component$(() => {
       <div class="flex max-w-md py-2.5">
         <div>
           <h1 class="text-center text-transparent text-7xl">eomii</h1>
-          <h4 class="text-right text-xl text-transparent -rotate-12">
+          <h2 class="text-right text-xl text-transparent -rotate-12">
             えおみい!
-          </h4>
+          </h2>
           <p class="rotate-6 text-center text-xl text-transparent mb-3">
             (/*.*)/ Bleeding Edge Software Infrastructure \(*.*\)
           </p>
 
-          <h2 class="text-center text-transparent text-4xl mt-10">Projects</h2>
+          <h3 class="text-center text-transparent text-4xl mt-10">Projects</h3>
 
           <Project {...RulesLl} />
 
-          <h2 class="text-center text-transparent text-4xl mt-10">Team</h2>
+          <h3 class="text-center text-transparent text-4xl mt-10">Team</h3>
 
           <TeamMember {...AaronMondal} />
           <TeamMember {...JannisFengler} />
@@ -141,9 +141,9 @@ interface ProjectProps {
 const TeamMember = component$<TeamMemberProps>((props) => {
   return (
     <>
-      <h3 class="text-left text-3xl text-transparent -rotate-6 mb-6">
+      <h4 class="text-left text-3xl text-transparent -rotate-6 mb-6">
         {props.name}
-      </h3>
+      </h4>
       {props.references.map((ref, index) => (
         <p class="text-center text-xl text-transparent mb-3" key={index}>
           <ReferenceLink url={ref.url} description={ref.description} />
@@ -157,9 +157,9 @@ const Project = component$<ProjectProps>((props) => {
   return (
     <>
       <div>
-        <h3 class="text-left text-3xl text-transparent -rotate-6 mb-6">
+        <h4 class="text-left text-3xl text-transparent -rotate-6 mb-6">
           {props.name}
-        </h3>
+        </h4>
         <p class="text-center text-xl text-transparent mb-3">
           {props.description}
         </p>