chore: fix profile style

fand · Jun 23, 2024 · 0a13511 · 0a13511
1 parent 81e2555
commit 0a13511
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 40 deletions.
diff --git 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
@@ -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>