Adjust hero position, fix typos, add styles

components/AboutPage/index.scss

@@ -7,27 +7,62 @@
     flex-direction: column;
     position: relative;
     gap: $unit-2x;
+    z-index: 5;
 
     .Hero {
       position: absolute;
       width: 40vw;
       height: 80vh;
-      right: $unit-8x * -1;
+      right: -18vw;
       top: $unit-4x * -1;
+      z-index: 1;
       background-image: linear-gradient(
           90deg,
-          rgba(245, 245, 245, 1) 0%,
+          rgba(245, 245, 245, 1) 5%,
-          rgba(245, 245, 245, 0) 50%,
+          rgba(245, 245, 245, 0.2) 50%,
-          rgba(245, 245, 245, 0) 70%,
+          rgba(245, 245, 245, 0.2) 70%,
-          rgba(245, 245, 245, 1) 100%
+          rgba(245, 245, 245, 1) 95%
         ),
         linear-gradient(
-          rgba(245, 245, 245, 1) 0%,
+          rgba(245, 245, 245, 1) 5%,
-          rgba(245, 245, 245, 0) 40%,
+          rgba(245, 245, 245, 0.4) 40%,
-          rgba(245, 245, 245, 0) 78%,
+          rgba(245, 245, 245, 0.4) 78%,
-          rgba(245, 245, 245, 1) 100%
+          rgba(245, 245, 245, 1) 95%
         ),
         url('https://prd-game-a-granbluefantasy.akamaized.net/assets_en/img/sp/top/bg/bg_23.jpg');
+
+      @include breakpoint(tablet) {
+        right: -14vw;
+        width: 60vw;
+      }
+
+      @include breakpoint(phone) {
+        right: $unit-2x * -1;
+        width: 80vw;
+
+        &::before {
+          content: ' ';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: linear-gradient(
+              90deg,
+              rgba(245, 245, 245, 1) 0%,
+              rgba(245, 245, 245, 0) 50%,
+              rgba(245, 245, 245, 0) 70%,
+              rgba(245, 245, 245, 1) 95%
+            ),
+            linear-gradient(
+              rgba(245, 245, 245, 1) 0%,
+              rgba(245, 245, 245, 0) 40%,
+              rgba(245, 245, 245, 0) 78%,
+              rgba(245, 245, 245, 1) 95%
+            );
+          z-index: 3;
+        }
+      }
     }
 
     p {
@@ -56,7 +91,6 @@
   }
 
   .LinkItem {
-    background: var(--dialog-bg);
     max-width: calc($width / 3 * 2);
   }
 }

components/AboutPage/index.tsx

@@ -50,7 +50,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
           enjoying the tool and want to say thanks, come hang out in Discord.
         </p>
         <p>Feedback and suggestions are greatly appreciated!</p>
-        <div className="LinkItem">
+        <div className="Discord LinkItem">
           <Link href="https://discord.gg/qyZ5hGdPC8">
             <a
               href="https://discord.gg/qyZ5hGdPC8"
@@ -109,7 +109,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
             Fireplace
           </a>{' '}
           and the granblue-tools Discord for all of their help with with bug
-          testing, feature requests, and more support. (P.S. We&apos;re
+          testing, feature requests, and moral support. (P.S. We&apos;re
           recruiting!)
         </p>
       </section>
@@ -117,8 +117,13 @@ const AboutPage: React.FC<Props> = (props: Props) => {
       <section>
         <h2>Contributing</h2>
 
+        <p>
+          If you know how to program, this app is completely open-source.
+          There&apos;s an abundance of features to build and bugs to fix, so
+          help is always greatly appreciated!
+        </p>
         <ul className="Links">
-          <li className="LinkItem">
+          <li className="Github LinkItem">
             <Link href="https://github.com/jedmund/hensei-api">
               <a
                 href="https://github.com/jedmund/hensei-api"
@@ -133,7 +138,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
               </a>
             </Link>
           </li>
-          <li className="LinkItem">
+          <li className="Github LinkItem">
             <Link href="https://github.com/jedmund/hensei-web">
               <a
                 href="https://github.com/jedmund/hensei-web"
@@ -153,7 +158,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
       <section>
         <h2>License</h2>
         <p>
-          This app is open source and licensed under{' '}
+          This app is licensed under{' '}
           <a
             href="https://choosealicense.com/licenses/agpl-3.0/"
             target="_blank"

components/RoadmapPage/index.scss

@@ -29,10 +29,12 @@
 
     p {
       margin-bottom: $unit;
+      font-size: $font-medium;
     }
 
     .LinkItem {
       $diameter: $unit-6x;
+      background: var(--dialog-bg);
       border: 1px solid var(--link-item-bg);
       border-radius: $card-corner;
 
@@ -78,13 +80,6 @@
     }
   }
 
-  p {
-    color: var(--text-secondary);
-
-    font-size: $font-regular;
-    line-height: 1.3;
-  }
-
   ul {
     color: var(--text-primary);
     list-style-type: none;

components/UpdatesPage/index.tsx

@@ -62,7 +62,7 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
                   'unauth',
                   'jpg'
                 )}
-                <h3>No account editing</h3>
+                <h3>Accountless team editing</h3>
                 <p>
                   Now you can edit parties you create later on, even if you
                   don&apos;t make an account. You still won&apos;t have a

styles/globals.scss

@@ -147,20 +147,47 @@ select {
 
   .LinkItem {
     $diameter: $unit-6x;
+    align-items: center;
+    background: var(--dialog-bg);
     border: 1px solid var(--link-item-bg);
     border-radius: $card-corner;
+    display: flex;
+    min-height: 82px;
+    transition: background $duration-zoom ease-in,
+      transform $duration-zoom ease-in;
 
     &:hover {
-      background-color: var(--link-item-bg);
+      background: var(--link-item-bg);
+      color: var(--text-primary);
 
-      svg {
+      .ShareIcon {
-        fill: var(--link-item-image-color-hover);
+        fill: var(--text-primary);
+        transform: translate($unit-half, calc(($unit * -1) / 2));
       }
     }
 
+    &.Github {
+      .Left svg {
+        background: white;
+        border-radius: calc($diameter / 2);
+      }
+
+      &:hover {
+        .Left svg {
+          fill: #6e5494;
+        }
+      }
+    }
+
+    &.Discord:hover .Left svg {
+      fill: #5865f2;
+    }
+
     a {
       display: flex;
+      justify-content: space-between;
       padding: $unit-2x;
+      width: 100%;
 
       &:hover {
         text-decoration: none;
@@ -183,6 +210,7 @@ select {
         fill: var(--link-item-image-color);
         width: $diameter;
         height: auto;
+        transition: fill $duration-zoom ease-in;
 
         &.ShareIcon {
           width: $unit-4x;