From 0a13511f68f3bfabe0cc4539944a9d0ef631b469 Mon Sep 17 00:00:00 2001
From: fand <mail@amagi.dev>
Date: Sun, 23 Jun 2024 00:55:58 -0700
Subject: [PATCH] chore: fix profile style

---
 packages/docs-vfx-js/index.css  | 18 +++++-----
 packages/docs-vfx-js/index.html | 62 ++++++++++++++++-----------------
 2 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/packages/docs-vfx-js/index.css b/packages/docs-vfx-js/index.css
index d2cb55e..75ad3c8 100644
--- a/packages/docs-vfx-js/index.css
+++ b/packages/docs-vfx-js/index.css
@@ -12,6 +12,8 @@
     --author-icon-margin: 0;
     --author-text-size: 3rem;
     --author-link-size: 2rem;
+    --author-link-margin-top: 0.5rem;
+    --author-link-margin-bottom: 1rem;
 }
 
 @media (max-width: 767px) {
@@ -28,6 +30,8 @@
         --author-icon-margin: -0.25rem;
         --author-text-size: 2rem;
         --author-link-size: 1.5rem;
+        --author-link-margin-top: 0;
+        --author-link-margin-bottom: 0;
     }
 }
 
@@ -221,12 +225,9 @@ section video {
 .AuthorSection .column {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: end;
     align-items: center;
-}
-.AuthorSection .line {
-    height: 3rem;
-    position: relative;
+    gap: 16px;
 }
 .AuthorSection .icon {
     width: var(--author-icon-size);
@@ -240,14 +241,15 @@ section video {
     line-height: 1;
 }
 .AuthorSection .links {
-    position: absolute;
-    left: 0.1rem;
-    top: calc(var(--author-text-size) * 1.5);
     width: 100%;
+    height: 2rem;
     display: flex;
     justify-content: var(--author-align-items);
     align-items: start;
     gap: 16px;
+    margin-left: 0.1rem;
+    margin-top: var(--author-link-margin-top);
+    margin-bottom: var(--author-link-margin-bottom);
 }
 .AuthorSection .link {
     width: var(--author-link-size);
diff --git a/packages/docs-vfx-js/index.html b/packages/docs-vfx-js/index.html
index 9ff004f..7baa9e3 100644
--- a/packages/docs-vfx-js/index.html
+++ b/packages/docs-vfx-js/index.html
@@ -373,38 +373,36 @@ <h3>Custom Shaders</h3>
             <div id="profile" class="row">
                 <img class="icon" src="./amagi.png" />
                 <div class="column">
-                    <div class="line">
-                        <h2>Made by Amagi</h2>
-                        <div class="links">
-                            <a href="https://github.com/fand" target="_blank">
-                                <img
-                                    class="link"
-                                    src="./github.svg"
-                                    alt="GitHub link"
-                                />
-                            </a>
-                            <a
-                                href="https://twitter.com/amagitakayosi"
-                                target="_blank"
-                            >
-                                <img
-                                    class="link"
-                                    src="./twitter.svg"
-                                    alt="Twitter link"
-                                />
-                            </a>
-                            <a
-                                href="https://threads.net/amagitakayosi"
-                                target="_blank"
-                            >
-                                <img
-                                    class="link"
-                                    src="./threads.svg"
-                                    alt="Threads link"
-                                    style="margin-left: -8%"
-                                />
-                            </a>
-                        </div>
+                    <h2>Made by Amagi</h2>
+                    <div class="links">
+                        <a href="https://github.com/fand" target="_blank">
+                            <img
+                                class="link"
+                                src="./github.svg"
+                                alt="GitHub link"
+                            />
+                        </a>
+                        <a
+                            href="https://twitter.com/amagitakayosi"
+                            target="_blank"
+                        >
+                            <img
+                                class="link"
+                                src="./twitter.svg"
+                                alt="Twitter link"
+                            />
+                        </a>
+                        <a
+                            href="https://threads.net/amagitakayosi"
+                            target="_blank"
+                        >
+                            <img
+                                class="link"
+                                src="./threads.svg"
+                                alt="Threads link"
+                                style="margin-left: -8%"
+                            />
+                        </a>
                     </div>
                 </div>
             </div>