Small optimizations

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.1.10",
+	"version": "0.1.11",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",

src/layouts/aboutSection.astro

@@ -15,15 +15,19 @@ const { title } = Astro.props
 
 <style>
   h1 {
-    font-size: 26px;
-    line-height: 32px;
+    font-size: 40px;
+    line-height: 48px;
     letter-spacing: -1px;
     color: white;
-    margin: 0.5rem 0.75rem 0.5rem 0.75rem;
+    font-size: 2.25rem;
+    margin-top: 1rem;
+    margin-bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
     padding: 0.25rem 0.75rem;
-    width: max-content;
+    max-width: max-content;
     background-color: var(--c-darkgray);
-    padding: 0.25rem 1rem;
+    padding: 0.25rem 1.5rem;
     border-radius: 0.5rem;
     padding-bottom: 0.5rem;
   }
@@ -61,4 +65,10 @@ const { title } = Astro.props
       justify-content: left;
     }
   }
+
+  @media (min-width: 520px) {
+    h1 {
+      margin: 0.5rem 0.75rem 0.5rem 0.75rem;
+    }
+  }
 </style>

src/layouts/blogSection.astro

@@ -83,6 +83,9 @@ const { title } = Astro.props
     .line {
       margin-left: 2.1rem;
     }
+    h1 {
+      margin-left: 3rem;
+    }
   }
   @media (min-width: 1500px) {
     .wrapper {

src/pages/about.astro

@@ -23,15 +23,15 @@ const description =
     This is a small sideproject that I'm creating. First time doing webdev in
     general, and first project using Typescript.
   </AboutSection>
-  <AboutSection title="Technologies used">
+  <ContactSection title="Technologies used">
     {technologydata.map((item) => <TechnologyCard {...item} />)}
-  </AboutSection>
+  </ContactSection>
   <ContactSection title="Contact me">
     {contactdata.map((item) => <ContactCard {...item} />)}
   </ContactSection>
-  <AboutSection title="Disclaimers">
+  <ContactSection title="Disclaimers">
     <CustomFooter />
-  </AboutSection>
+  </ContactSection>
 </Layout>
 
 <style></style>