Padding been fixed (i guess)

package.json

@@ -16,7 +16,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-tooltip": "^5.25.0",
-    "react-twemoji": "^0.5.0"
+    "react-twemoji": "^0.5.0",
+    "sharp": "^0.33.1"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ dependencies:
   react-twemoji:
     specifier: ^0.5.0
     version: 0.5.0(react@18.2.0)
+  sharp:
+    specifier: ^0.33.1
+    version: 0.33.1
 
 devDependencies:
   "@tailwindcss/typography":
@@ -56,6 +59,17 @@ packages:
     engines: { node: ">=10" }
     dev: true
 
+  /@emnapi/runtime@0.44.0:
+    resolution:
+      {
+        integrity: sha512-ZX/etZEZw8DR7zAB1eVQT40lNo0jeqpb6dCgOvctB6FIQ5PoXfMuNY8+ayQfu8tNQbAB8gQWSSJupR8NxeiZXw==,
+      }
+    requiresBuild: true
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+    optional: true
+
   /@floating-ui/core@1.5.2:
     resolution:
       {
@@ -82,6 +96,332 @@ packages:
       }
     dev: false
 
+  /@img/sharp-darwin-arm64@0.33.1:
+    resolution:
+      {
+        integrity: sha512-esr2BZ1x0bo+wl7Gx2hjssYhjrhUsD88VQulI0FrG8/otRQUOxLWHMBd1Y1qo2Gfg2KUvXNpT0ASnV9BzJCexw==,
+      }
+    engines:
+      {
+        glibc: ">=2.26",
+        node: ^18.17.0 || ^20.3.0 || >=21.0.0,
+        npm: ">=9.6.5",
+        pnpm: ">=7.1.0",
+        yarn: ">=3.2.0",
+      }
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    optionalDependencies:
+      "@img/sharp-libvips-darwin-arm64": 1.0.0
+    dev: false
+    optional: true
+
+  /@img/sharp-darwin-x64@0.33.1:
+    resolution:
+      {
+        integrity: sha512-YrnuB3bXuWdG+hJlXtq7C73lF8ampkhU3tMxg5Hh+E7ikxbUVOU9nlNtVTloDXz6pRHt2y2oKJq7DY/yt+UXYw==,
+      }
+    engines:
+      {
+        glibc: ">=2.26",
+        node: ^18.17.0 || ^20.3.0 || >=21.0.0,
+        npm: ">=9.6.5",
+        pnpm: ">=7.1.0",
+        yarn: ">=3.2.0",
+      }
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    optionalDependencies:
+      "@img/sharp-libvips-darwin-x64": 1.0.0
+    dev: false
+    optional: true
+
+  /@img/sharp-libvips-darwin-arm64@1.0.0:
+    resolution:
+      {
+        integrity: sha512-VzYd6OwnUR81sInf3alj1wiokY50DjsHz5bvfnsFpxs5tqQxESoHtJO6xyksDs3RIkyhMWq2FufXo6GNSU9BMw==,
+      }
+    engines: { macos: ">=11", npm: ">=9.6.5", pnpm: ">=7.1.0", yarn: ">=3.2.0" }
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-libvips-darwin-x64@1.0.0:
+    resolution:
+      {
+        integrity: sha512-dD9OznTlHD6aovRswaPNEy8dKtSAmNo4++tO7uuR4o5VxbVAOoEQ1uSmN4iFAdQneTHws1lkTZeiXPrcCkh6IA==,
+      }
+    engines:
+      { macos: ">=10.13", npm: ">=9.6.5", pnpm: ">=7.1.0", yarn: ">=3.2.0" }
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-libvips-linux-arm64@1.0.0:
+    resolution:
+      {
+        integrity: sha512-xTYThiqEZEZc0PRU90yVtM3KE7lw1bKdnDQ9kCTHWbqWyHOe4NpPOtMGy27YnN51q0J5dqRrvicfPbALIOeAZA==,
+      }
+    engines:
+      { glibc: ">=2.26", npm: ">=9.6.5", pnpm: ">=7.1.0", yarn: ">=3.2.0" }
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-libvips-linux-arm@1.0.0:
+    resolution:
+      {
+        integrity: sha512-VwgD2eEikDJUk09Mn9Dzi1OW2OJFRQK+XlBTkUNmAWPrtj8Ly0yq05DFgu1VCMx2/DqCGQVi5A1dM9hTmxf3uw==,
+      }
+    engines:
+      { glibc: ">=2.28", npm: ">=9.6.5", pnpm: ">=7.1.0", yarn: ">=3.2.0" }
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-libvips-linux-s390x@1.0.0:
+    resolution:
+      {
+        integrity: sha512-o9E46WWBC6JsBlwU4QyU9578G77HBDT1NInd+aERfxeOPbk0qBZHgoDsQmA2v9TbqJRWzoBPx1aLOhprBMgPjw==,
+      }
+    engines:
+      { glibc: ">=2.28", npm: ">=9.6.5", pnpm: ">=7.1.0", yarn: ">=3.2.0" }
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-libvips-linux-x64@1.0.0:
+    resolution:
+      {
+        integrity: sha512-naldaJy4hSVhWBgEjfdBY85CAa4UO+W1nx6a1sWStHZ7EUfNiuBTTN2KUYT5dH1+p/xij1t2QSXfCiFJoC5S/Q==,
+      }
+    engines:
+      { glibc: ">=2.26", npm: ">=9.6.5", pnpm: ">=7.1.0", yarn: ">=3.2.0" }
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-libvips-linuxmusl-arm64@1.0.0:
+    resolution:
+      {
+        integrity: sha512-OdorplCyvmSAPsoJLldtLh3nLxRrkAAAOHsGWGDYfN0kh730gifK+UZb3dWORRa6EusNqCTjfXV4GxvgJ/nPDQ==,
+      }
+    engines:
+      { musl: ">=1.2.2", npm: ">=9.6.5", pnpm: ">=7.1.0", yarn: ">=3.2.0" }
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-libvips-linuxmusl-x64@1.0.0:
+    resolution:
+      {
+        integrity: sha512-FW8iK6rJrg+X2jKD0Ajhjv6y74lToIBEvkZhl42nZt563FfxkCYacrXZtd+q/sRQDypQLzY5WdLkVTbJoPyqNg==,
+      }
+    engines:
+      { musl: ">=1.2.2", npm: ">=9.6.5", pnpm: ">=7.1.0", yarn: ">=3.2.0" }
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-linux-arm64@0.33.1:
+    resolution:
+      {
+        integrity: sha512-59B5GRO2d5N3tIfeGHAbJps7cLpuWEQv/8ySd9109ohQ3kzyCACENkFVAnGPX00HwPTQcaBNF7HQYEfZyZUFfw==,
+      }
+    engines:
+      {
+        glibc: ">=2.26",
+        node: ^18.17.0 || ^20.3.0 || >=21.0.0,
+        npm: ">=9.6.5",
+        pnpm: ">=7.1.0",
+        yarn: ">=3.2.0",
+      }
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      "@img/sharp-libvips-linux-arm64": 1.0.0
+    dev: false
+    optional: true
+
+  /@img/sharp-linux-arm@0.33.1:
+    resolution:
+      {
+        integrity: sha512-Ii4X1vnzzI4j0+cucsrYA5ctrzU9ciXERfJR633S2r39CiD8npqH2GMj63uFZRCFt3E687IenAdbwIpQOJ5BNA==,
+      }
+    engines:
+      {
+        glibc: ">=2.28",
+        node: ^18.17.0 || ^20.3.0 || >=21.0.0,
+        npm: ">=9.6.5",
+        pnpm: ">=7.1.0",
+        yarn: ">=3.2.0",
+      }
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      "@img/sharp-libvips-linux-arm": 1.0.0
+    dev: false
+    optional: true
+
+  /@img/sharp-linux-s390x@0.33.1:
+    resolution:
+      {
+        integrity: sha512-tRGrb2pHnFUXpOAj84orYNxHADBDIr0J7rrjwQrTNMQMWA4zy3StKmMvwsI7u3dEZcgwuMMooIIGWEWOjnmG8A==,
+      }
+    engines:
+      {
+        glibc: ">=2.28",
+        node: ^18.17.0 || ^20.3.0 || >=21.0.0,
+        npm: ">=9.6.5",
+        pnpm: ">=7.1.0",
+        yarn: ">=3.2.0",
+      }
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      "@img/sharp-libvips-linux-s390x": 1.0.0
+    dev: false
+    optional: true
+
+  /@img/sharp-linux-x64@0.33.1:
+    resolution:
+      {
+        integrity: sha512-4y8osC0cAc1TRpy02yn5omBeloZZwS62fPZ0WUAYQiLhSFSpWJfY/gMrzKzLcHB9ulUV6ExFiu2elMaixKDbeg==,
+      }
+    engines:
+      {
+        glibc: ">=2.26",
+        node: ^18.17.0 || ^20.3.0 || >=21.0.0,
+        npm: ">=9.6.5",
+        pnpm: ">=7.1.0",
+        yarn: ">=3.2.0",
+      }
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      "@img/sharp-libvips-linux-x64": 1.0.0
+    dev: false
+    optional: true
+
+  /@img/sharp-linuxmusl-arm64@0.33.1:
+    resolution:
+      {
+        integrity: sha512-D3lV6clkqIKUizNS8K6pkuCKNGmWoKlBGh5p0sLO2jQERzbakhu4bVX1Gz+RS4vTZBprKlWaf+/Rdp3ni2jLfA==,
+      }
+    engines:
+      {
+        musl: ">=1.2.2",
+        node: ^18.17.0 || ^20.3.0 || >=21.0.0,
+        npm: ">=9.6.5",
+        pnpm: ">=7.1.0",
+        yarn: ">=3.2.0",
+      }
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      "@img/sharp-libvips-linuxmusl-arm64": 1.0.0
+    dev: false
+    optional: true
+
+  /@img/sharp-linuxmusl-x64@0.33.1:
+    resolution:
+      {
+        integrity: sha512-LOGKNu5w8uu1evVqUAUKTix2sQu1XDRIYbsi5Q0c/SrXhvJ4QyOx+GaajxmOg5PZSsSnCYPSmhjHHsRBx06/wQ==,
+      }
+    engines:
+      {
+        musl: ">=1.2.2",
+        node: ^18.17.0 || ^20.3.0 || >=21.0.0,
+        npm: ">=9.6.5",
+        pnpm: ">=7.1.0",
+        yarn: ">=3.2.0",
+      }
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      "@img/sharp-libvips-linuxmusl-x64": 1.0.0
+    dev: false
+    optional: true
+
+  /@img/sharp-wasm32@0.33.1:
+    resolution:
+      {
+        integrity: sha512-vWI/sA+0p+92DLkpAMb5T6I8dg4z2vzCUnp8yvxHlwBpzN8CIcO3xlSXrLltSvK6iMsVMNswAv+ub77rsf25lA==,
+      }
+    engines:
+      {
+        node: ^18.17.0 || ^20.3.0 || >=21.0.0,
+        npm: ">=9.6.5",
+        pnpm: ">=7.1.0",
+        yarn: ">=3.2.0",
+      }
+    cpu: [wasm32]
+    requiresBuild: true
+    dependencies:
+      "@emnapi/runtime": 0.44.0
+    dev: false
+    optional: true
+
+  /@img/sharp-win32-ia32@0.33.1:
+    resolution:
+      {
+        integrity: sha512-/xhYkylsKL05R+NXGJc9xr2Tuw6WIVl2lubFJaFYfW4/MQ4J+dgjIo/T4qjNRizrqs/szF/lC9a5+updmY9jaQ==,
+      }
+    engines:
+      {
+        node: ^18.17.0 || ^20.3.0 || >=21.0.0,
+        npm: ">=9.6.5",
+        pnpm: ">=7.1.0",
+        yarn: ">=3.2.0",
+      }
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-win32-x64@0.33.1:
+    resolution:
+      {
+        integrity: sha512-XaM69X0n6kTEsp9tVYYLhXdg7Qj32vYJlAKRutxUsm1UlgQNx6BOhHwZPwukCGXBU2+tH87ip2eV1I/E8MQnZg==,
+      }
+    engines:
+      {
+        node: ^18.17.0 || ^20.3.0 || >=21.0.0,
+        npm: ">=9.6.5",
+        pnpm: ">=7.1.0",
+        yarn: ">=3.2.0",
+      }
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@isaacs/cliui@8.0.2:
     resolution:
       {
@@ -541,14 +881,33 @@ packages:
     engines: { node: ">=7.0.0" }
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name@1.1.4:
     resolution:
       {
         integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==,
       }
-    dev: true
+
+  /color-string@1.9.1:
+    resolution:
+      {
+        integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==,
+      }
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    dev: false
+
+  /color@4.2.3:
+    resolution:
+      {
+        integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==,
+      }
+    engines: { node: ">=12.5.0" }
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+    dev: false
 
   /commander@4.1.1:
     resolution:
@@ -579,6 +938,14 @@ packages:
     hasBin: true
     dev: true
 
+  /detect-libc@2.0.2:
+    resolution:
+      {
+        integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==,
+      }
+    engines: { node: ">=8" }
+    dev: false
+
   /didyoumean@1.2.2:
     resolution:
       {
@@ -809,6 +1176,13 @@ packages:
       function-bind: 1.1.2
     dev: true
 
+  /is-arrayish@0.3.2:
+    resolution:
+      {
+        integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==,
+      }
+    dev: false
+
   /is-binary-path@2.1.0:
     resolution:
       {
@@ -1021,6 +1395,16 @@ packages:
     engines: { node: 14 || >=16.14 }
     dev: true
 
+  /lru-cache@6.0.0:
+    resolution:
+      {
+        integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==,
+      }
+    engines: { node: ">=10" }
+    dependencies:
+      yallist: 4.0.0
+    dev: false
+
   /markdown-it@14.0.0:
     resolution:
       {
@@ -1513,6 +1897,50 @@ packages:
       kind-of: 6.0.3
     dev: false
 
+  /semver@7.5.4:
+    resolution:
+      {
+        integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==,
+      }
+    engines: { node: ">=10" }
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: false
+
+  /sharp@0.33.1:
+    resolution:
+      {
+        integrity: sha512-iAYUnOdTqqZDb3QjMneBKINTllCJDZ3em6WaWy7NPECM4aHncvqHRm0v0bN9nqJxMiwamv5KIdauJ6lUzKDpTQ==,
+      }
+    engines: { libvips: ">=8.15.0", node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+    requiresBuild: true
+    dependencies:
+      color: 4.2.3
+      detect-libc: 2.0.2
+      semver: 7.5.4
+    optionalDependencies:
+      "@img/sharp-darwin-arm64": 0.33.1
+      "@img/sharp-darwin-x64": 0.33.1
+      "@img/sharp-libvips-darwin-arm64": 1.0.0
+      "@img/sharp-libvips-darwin-x64": 1.0.0
+      "@img/sharp-libvips-linux-arm": 1.0.0
+      "@img/sharp-libvips-linux-arm64": 1.0.0
+      "@img/sharp-libvips-linux-s390x": 1.0.0
+      "@img/sharp-libvips-linux-x64": 1.0.0
+      "@img/sharp-libvips-linuxmusl-arm64": 1.0.0
+      "@img/sharp-libvips-linuxmusl-x64": 1.0.0
+      "@img/sharp-linux-arm": 0.33.1
+      "@img/sharp-linux-arm64": 0.33.1
+      "@img/sharp-linux-s390x": 0.33.1
+      "@img/sharp-linux-x64": 0.33.1
+      "@img/sharp-linuxmusl-arm64": 0.33.1
+      "@img/sharp-linuxmusl-x64": 0.33.1
+      "@img/sharp-wasm32": 0.33.1
+      "@img/sharp-win32-ia32": 0.33.1
+      "@img/sharp-win32-x64": 0.33.1
+    dev: false
+
   /shebang-command@2.0.0:
     resolution:
       {
@@ -1539,6 +1967,15 @@ packages:
     engines: { node: ">=14" }
     dev: true
 
+  /simple-swizzle@0.2.2:
+    resolution:
+      {
+        integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==,
+      }
+    dependencies:
+      is-arrayish: 0.3.2
+    dev: false
+
   /source-map-js@1.0.2:
     resolution:
       {
@@ -1836,6 +2273,13 @@ packages:
       strip-ansi: 7.1.0
     dev: true
 
+  /yallist@4.0.0:
+    resolution:
+      {
+        integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==,
+      }
+    dev: false
+
   /yaml@2.3.4:
     resolution:
       {

src/pages/index.jsx

@@ -9,9 +9,7 @@ const inter = Inter({ subsets: ["latin"] })
 
 export default function Home() {
   return (
-    <main
+    <>
-      className={`flex min-h-screen items-center justify-center ${inter.className}`}
-    >
       <Head>
         <title>About blueskychan_ :3</title>
         <meta property="og:title" content="Hello, World! >3" key="title" />
@@ -20,8 +18,12 @@ export default function Home() {
           content="About some stupid person call blueskychan, aka Fuse/Mind :3"
         />
       </Head>
-      <div className="backdrop-blur-md bg-gray-700/50 rounded-lg p-2">
+
-        <div className="flex flex-row space-x-3 p-4 items-center ">
+      <main
+        className={`flex min-h-screen items-center justify-center ${inter.className}`}
+      >
+        <div className="backdrop-blur-md bg-gray-700/50 rounded-lg p-3 max-w-md md:max-w-lg overflow-hidden overflow-ellipsis">
+          <div className="flex flex-row space-x-3 items-center p-3">
             <Avatar />
             <Profile />
           </div>
@@ -31,5 +33,6 @@ export default function Home() {
           </div>
         </div>
       </main>
+    </>
   )
 }

src/pages/post/[slug].jsx

@@ -28,7 +28,6 @@ export async function getStaticProps({ params: { slug } }) {
 }
 
 export default function PostPage({ frontmatter, content }) {
-
   const postTags = frontmatter.tags.map((tag) => (
     <div
       className="inline-block border-2 rounded-md p-1 w-fit h-fit font-bold text-lg mr-1"