UI fixes landing page (#2527)

* Change breakpoint and remove {} * UI Fixes Landing Page * Increase space with footer links * CR changes
dfinity · Jul 9, 2024 · 3f74a48 · 3f74a48
1 parent 1c6694e
commit 3f74a48
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 46 deletions.
diff --git a/src/frontend/src/components/landingPage.ts b/src/frontend/src/components/landingPage.ts
@@ -22,37 +22,39 @@ export const landingPage = ({
   const copy = i18n.i18n(copyJson);
 
   return html` <main class="c-landingPage">
-    <div class="c-landingPage__logo">
-      <div class="c-logo">${icLogo}</div>
-    </div>
-    <section class="c-landingPage__right">
-      <div class="c-landingPage__right__content">
-        <div class="c-landingPage__right__content--full-width">${slot}</div>
-      </div>
-    </section>
-    <section class="c-landingPage__left" aria-label="Action Pane">
-      <div class="c-landingPage__left__content">
-        <h1 class="t-title t-title--main">${copy.title}</h1>
-        <p class="t-paragraph">{${copy.subtitle}}</p>
+    <div class="c-landingPage__container">
+      <div class="c-landingPage__logo">
+        <div class="c-logo">${icLogo}</div>
       </div>
-      <div class="c-landingPage__left__footer">
-        ${navigationLink({
-          icon: questionIcon,
-          labelText: "Support",
-          id: "support-link",
-          url: "https://internetidentity.zendesk.com/hc/en-us",
-          rel: "noopener noreferrer",
-          classes: "t-link--discreet c-footer__link",
-        })}
-        ${navigationLink({
-          icon: githubIcon,
-          labelText: "Source code",
-          id: "source-link",
-          url: "https://github.com/dfinity/internet-identity",
-          rel: "noopener noreferrer",
-          classes: "t-link--discreet c-footer__link",
-        })}
-      </div>
-    </section>
+      <section class="c-landingPage__right" aria-label="Marketing Copy">
+        <div class="c-landingPage__right__content">
+          <div class="c-landingPage__right__content--full-width">${slot}</div>
+        </div>
+      </section>
+      <section class="c-landingPage__left" aria-label="Action Pane">
+        <div class="c-landingPage__left__content">
+          <h1 class="c-landingPage__title">${copy.title}</h1>
+          <p class="t-paragraph">${copy.subtitle}</p>
+        </div>
+        <div class="c-landingPage__left__footer">
+          ${navigationLink({
+            icon: questionIcon,
+            labelText: "Support",
+            id: "support-link",
+            url: "https://internetidentity.zendesk.com/hc/en-us",
+            rel: "noopener noreferrer",
+            classes: "t-link--discreet c-footer__link",
+          })}
+          ${navigationLink({
+            icon: githubIcon,
+            labelText: "Source code",
+            id: "source-link",
+            url: "https://github.com/dfinity/internet-identity",
+            rel: "noopener noreferrer",
+            classes: "t-link--discreet c-footer__link",
+          })}
+        </div>
+      </section>
+    </div>
   </main>`;
 };
diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
@@ -326,11 +326,14 @@
 
   --rs-footer-height: 4rem;
 
-  --rs-split-page-padding--mobile: calc(var(--vs-stack) * 3);
-  --rs-split-page-left-pane-padding: calc(var(--vs-gutter) * 8);
-  --rs-split-page-right-pane-padding--desktop: 10vmax;
-  --rs-split-page-right-pane-padding--mobile: calc(var(--vs-stack) * 2);
+  --rs-split-page-bezzel--mobile: calc(var(--vs-stack) * 3);
+  --rs-split-page-left-pane-bezzel: calc(var(--vs-gutter) * 8);
+  --rs-split-page-right-pane-bezzel--desktop: 10vmax;
+  --rs-split-page-right-pane-bezzel-y--mobile: calc(var(--vs-stack) * 3);
+  --rs-split-page-right-pane-bezzel-x--mobile: calc(var(--vs-stack) * 2);
   --rs-split-page-stack: calc(var(--vs-stack) * 4);
+  --rs-split-page-stack--large: calc(var(--vs-stack) * 6);
+  --rs-split-page-title: calc(2.8rem + 1vw);
 
   /* This is not used in CSS, but it's used to compensate for the logo size. */
   --rs-logo-height: 3rem;
@@ -975,17 +978,27 @@ a:hover,
  */
 
 .c-landingPage {
+  height: 100dvh;
+}
+
+.c-landingPage__container {
   display: grid;
   grid-template-columns: 1fr minmax(var(--rs-main-content-width), 1fr);
   grid-template-areas: "left right";
 
-  height: 100dvh;
+  height: 100%;
+}
+
+.c-landingPage__title {
+  font-size: var(--rs-split-page-title);
+  font-weight: 600;
+  line-height: 1.1;
 }
 
 .c-landingPage__logo {
   position: absolute;
-  left: var(--rs-split-page-left-pane-padding);
-  top: var(--rs-split-page-left-pane-padding);
+  left: var(--rs-split-page-left-pane-bezzel);
+  top: var(--rs-split-page-left-pane-bezzel);
 
   color: var(--rc-background--highlight-text);
 }
@@ -1004,7 +1017,7 @@ a:hover,
   flex-direction: column;
   align-items: flex-start;
 
-  padding: var(--rs-split-page-left-pane-padding);
+  padding: var(--rs-split-page-left-pane-bezzel);
 }
 
 .c-landingPage__left__content {
@@ -1061,21 +1074,33 @@ a:hover,
 
 .c-landingPage__left__footer {
   display: flex;
-  gap: var(--rs-inline-grid-gap);
+  gap: var(--rs-list-bullet-space);
 }
 
-@media (max-width: 512px) {
-  .c-landingPage {
-    display: block;
+.c-landingPage__left__footer > a:hover {
+  color: var(--rc-light-transparent);
+}
 
-    padding: 0 var(--rs-split-page-padding--mobile);
+@media (max-width: 1024px) {
+  .c-landingPage {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
     background: var(--rc-background--highlight);
 
     height: auto;
     min-height: 100vh;
   }
 
+  .c-landingPage__container {
+    display: block;
+
+    padding: 0 var(--rs-split-page-bezzel--mobile);
+
+    max-width: var(--rs-main-content-width);
+  }
+
   .c-landingPage__logo {
     display: flex;
     position: static;
@@ -1097,7 +1122,7 @@ a:hover,
     margin-top: var(--rs-split-page-stack);
     padding-bottom: var(--rs-split-page-stack);
 
-    gap: var(--rs-split-page-stack);
+    gap: var(--rs-split-page-stack--large);
   }
 
   .c-landingPage__left__content {
@@ -1111,7 +1136,8 @@ a:hover,
 
     background: var(--rc-light);
     border-radius: var(--rs-card-border-radius);
-    padding: var(--rs-split-page-right-pane-padding--mobile);
+    padding: var(--rs-split-page-right-pane-bezzel-y--mobile)
+      var(--rs-split-page-right-pane-bezzel-x--mobile);
 
     overflow: auto;
   }