Slight relayout for Welcome page

src/pages/welcome.css

@@ -1,3 +1,15 @@
+@keyframes shine2 {
+  0% {
+    left: -100%;
+  }
+  20% {
+    left: 100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
 #welcome {
   text-align: center;
   background-image: radial-gradient(
@@ -8,20 +20,30 @@
     radial-gradient(circle at center, var(--bg-color), transparent 8em);
   background-repeat: no-repeat;
   background-attachment: fixed;
-  padding: 16px;
   cursor: default;
-}
 
-#welcome .hero-container {
+  @media (prefers-color-scheme: dark) {
-  padding-block: 60px;
+    background-image: none;
+  }
+
+  .hero-container {
+    padding: 16px;
     height: 100vh;
     height: 100svh;
     max-height: 800px;
     display: flex;
     flex-direction: column;
-}
 
-#welcome h1 {
+    a {
+      color: inherit;
+
+      &:hover {
+        color: var(--link-text-color);
+      }
+    }
+  }
+
+  h1 {
     margin: 0;
     padding: 0;
     font-size: 5em;
@@ -34,19 +56,12 @@
     align-items: center;
     position: relative;
     mix-blend-mode: multiply;
-}
+
-@keyframes shine2 {
+    @media (prefers-color-scheme: dark) {
-  0% {
+      mix-blend-mode: normal;
-    left: -100%;
     }
-  20% {
+
-    left: 100%;
+    &:before {
-  }
-  100% {
-    left: 100%;
-  }
-}
-#welcome h1:before {
       content: '';
       position: absolute;
       z-index: 2;
@@ -62,49 +77,50 @@
       left: -100%;
       pointer-events: none;
       animation: shine2 5s ease-in-out 1s infinite;
-}
+
-@media (prefers-color-scheme: dark) {
+      @media (prefers-color-scheme: dark) {
-  #welcome {
-    background-image: none;
-  }
-  #welcome h1 {
-    mix-blend-mode: normal;
-  }
-  #welcome h1:before {
         content: none;
       }
-}
+    }
-#welcome img {
+
-  vertical-align: top;
+    img {
-  transition: transform 0.3s ease-out;
-}
-#welcome h1 img {
       filter: drop-shadow(-1px -1px var(--bg-blur-color))
         drop-shadow(0 -1px 1px #fff)
         drop-shadow(0 16px 32px var(--drop-shadow-color));
-}
+
-@media (prefers-color-scheme: dark) {
+      @media (prefers-color-scheme: dark) {
-  #welcome h1 img {
         filter: none;
       }
-}
+    }
 
-#welcome h1:hover img {
+    &:hover img {
       transform: scale(1.05);
-}
+    }
-#welcome .desc {
+  }
+
+  img {
+    vertical-align: top;
+    transition: transform 0.3s ease-out;
+  }
+
+  .desc {
     font-size: 1.4em;
     text-wrap: balance;
     opacity: 0.7;
-}
+  }
-#welcome .hero-container > p {
-  margin-top: 0;
-}
 
-#why-container .sections {
+  .hero-container > p {
+    margin-top: 0;
+  }
+
+  #why-container {
+    padding: 0 16px;
+  }
+
+  .sections {
     padding-inline: 16px;
-}
+
-#why-container .sections section {
+    section {
       text-align: start;
       max-width: 480px;
       background-color: var(--bg-color);
@@ -112,26 +128,57 @@
       overflow: hidden;
       box-shadow: 17px 20px 40px var(--drop-shadow-color);
       margin-bottom: 48px;
-}
+
-#why-container .sections section h4 {
+      h4 {
         margin: 0;
         padding: 30px 30px 0;
         font-size: 1.4em;
         font-weight: 600;
-}
+      }
-#why-container .sections section p {
+
+      p {
         margin-inline: 30px;
         margin-bottom: 30px;
         opacity: 0.7;
         text-wrap: balance;
-}
+      }
-#why-container .sections section img {
+
+      img {
         width: 100%;
         height: auto;
         border-bottom: 1px solid var(--outline-color);
-}
+
-@media (prefers-color-scheme: dark) {
+        @media (prefers-color-scheme: dark) {
-  #why-container .sections section img {
           filter: invert(0.85) hue-rotate(180deg);
         }
+      }
+    }
+  }
+
+  @media (width > 40em) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr auto;
+    height: 100vh;
+    height: 100svh;
+
+    .hero-container {
+      height: auto;
+    }
+
+    #why-container {
+      padding: 32px;
+      overflow: auto;
+      mask-image: linear-gradient(to top, transparent 16px, black 64px);
+    }
+
+    footer {
+      grid-row: 2;
+      grid-column: 1 / span 2;
+    }
+  }
+
+  & ~ :is(#compose-button, #shortcuts) {
+    display: none;
+  }
 }

src/pages/welcome.jsx

@@ -98,6 +98,7 @@ function Welcome() {
           </section>
         </div>
       </div>
+      <footer>
         <hr />
         <p>
           <a href="https://github.com/cheeaun/phanpy" target="_blank">
@@ -123,6 +124,7 @@ function Welcome() {
           </a>
           .
         </p>
+      </footer>
     </main>
   );
 }