🎨 feat(layout): update open graph description

Improve the open graph description for the blog to be more concise and
informative.

app/globals.css

@@ -15,5 +15,5 @@
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: "Roboto Mono", monospace;
+  font-family: "JetBrains Mono", monospace;
 }

app/layout.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
   authors: [{ name: 'AderKI' }],
   openGraph: {
     title: 'AderKI Blog',
-    description: 'Welcome to AderKI Blog.  There will be posts about science',
+    description: 'Welcome to AderKI Blog. There will be posts about science',
     url: 'https://blog.aderk.tech/',
     images: [
       {

app/page.tsx

@@ -25,7 +25,7 @@ const blogposts = [
 
 export default function Home() {
   return (
-    <div className="text-xl mx-48">
+    <div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
       <header className="flex flex-col">
         <div className="flex flex-row mt-12 mb-22">
           <ul className="w-full flex flex-row justify-between items-baseline list-none">
@@ -48,8 +48,8 @@ export default function Home() {
           </ul>
         </div>
         <div className="text-2xl mb-20">
-          <p>
+          <p className="leading-10">
-          Hello. I am is a programmer, hacker, gamer and otaku. Love comics, coding, read books. There I am posting articles about computer science and another staff, that’s im like.
+          Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
           </p>
         </div>
         <HeaderToolbar />
@@ -59,7 +59,7 @@ export default function Home() {
         <BlogArea blogposts={blogposts} />
       </main>
 
-      <footer className="border-t border-white pt-4 flex flex-row justify-around text-2xl">
+      <footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
         <ul className="list-none m-4">
           <li className="text-3xl"><h3>Socials</h3></li>
           <li className="p-3 text-xl"><AnimatedLink href="https://www.instagram.com/aderkitty/">Instagram</AnimatedLink></li>

components/blogpost.tsx

@@ -31,7 +31,7 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                                 />
                             </div>
                         </div>
-                        <div className="right flex flex-col">
+                        <div className="right flex flex-col w-full">
                             <div className="blogpost-label text-2xl mb-4">
                                 <h2>
                                     <AnimatedLink href={blogpost.get_absolute_url}>