From a33760d770bb52456e9a4ebb62870a07d1155a5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lloren=C3=A7?= Date: Thu, 4 Jul 2024 07:56:10 +0200 Subject: [PATCH 1/4] Change breakpoint and remove {} --- src/frontend/src/components/landingPage.ts | 2 +- src/frontend/src/styles/main.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/landingPage.ts b/src/frontend/src/components/landingPage.ts index aafaa03d94..4f7ab6175e 100644 --- a/src/frontend/src/components/landingPage.ts +++ b/src/frontend/src/components/landingPage.ts @@ -33,7 +33,7 @@ export const landingPage = ({

${copy.title}

-

{${copy.subtitle}}

+

${copy.subtitle}

${navigationLink({ diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css index 07d6bac4ec..c65d61b052 100644 --- a/src/frontend/src/styles/main.css +++ b/src/frontend/src/styles/main.css @@ -1064,7 +1064,7 @@ a:hover, gap: var(--rs-inline-grid-gap); } -@media (max-width: 512px) { +@media (max-width: 1024px) { .c-landingPage { display: block; From b5b2780d9ee1302a5fd401addce0039dab3235a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lloren=C3=A7?= Date: Thu, 4 Jul 2024 11:20:39 +0200 Subject: [PATCH 2/4] UI Fixes Landing Page --- src/frontend/src/components/landingPage.ts | 64 +++++++++++----------- src/frontend/src/styles/main.css | 42 +++++++++++--- 2 files changed, 68 insertions(+), 38 deletions(-) diff --git a/src/frontend/src/components/landingPage.ts b/src/frontend/src/components/landingPage.ts index 4f7ab6175e..c5023d3ace 100644 --- 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`
- -
-
-
${slot}
-
-
-
-
-

${copy.title}

-

${copy.subtitle}

+
+ -
- ${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", - })} -
-
+
+
+
${slot}
+
+
+
+
+

${copy.title}

+

${copy.subtitle}

+
+
+ ${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", + })} +
+
+
`; }; diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css index c65d61b052..61df9ea40b 100644 --- a/src/frontend/src/styles/main.css +++ b/src/frontend/src/styles/main.css @@ -329,7 +329,12 @@ --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-right-pane-padding--mobile--vertical: calc( + var(--vs-stack) * 3 + ); + --rs-split-page-right-pane-padding--mobile--horizontal: calc( + var(--vs-stack) * 2 + ); --rs-split-page-stack: calc(var(--vs-stack) * 4); /* This is not used in CSS, but it's used to compensate for the logo size. */ @@ -975,11 +980,21 @@ 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: calc(2.8rem + 1vw); + font-weight: 600; + line-height: 1.1; } .c-landingPage__logo { @@ -1061,14 +1076,18 @@ a:hover, .c-landingPage__left__footer { display: flex; - gap: var(--rs-inline-grid-gap); + gap: var(--rs-list-bullet-space); +} + +.c-landingPage__left__footer > a:hover { + color: var(--rc-light-transparent); } @media (max-width: 1024px) { .c-landingPage { - display: block; - - padding: 0 var(--rs-split-page-padding--mobile); + display: flex; + flex-direction: column; + align-items: center; background: var(--rc-background--highlight); @@ -1076,6 +1095,14 @@ a:hover, min-height: 100vh; } + .c-landingPage__container { + display: block; + + padding: 0 var(--rs-split-page-padding--mobile); + + max-width: var(--rs-main-content-width); + } + .c-landingPage__logo { display: flex; position: static; @@ -1111,7 +1138,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-padding--mobile--vertical) + var(--rs-split-page-right-pane-padding--mobile--horizontal); overflow: auto; } From da5df3a947d96797e1a7e2ef9276a9a274485fbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lloren=C3=A7?= Date: Thu, 4 Jul 2024 14:41:27 +0200 Subject: [PATCH 3/4] Increase space with footer links --- src/frontend/src/styles/main.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css index 61df9ea40b..f55ede46e0 100644 --- a/src/frontend/src/styles/main.css +++ b/src/frontend/src/styles/main.css @@ -336,6 +336,7 @@ var(--vs-stack) * 2 ); --rs-split-page-stack: calc(var(--vs-stack) * 4); + --rs-split-page-stack--large: calc(var(--vs-stack) * 6); /* This is not used in CSS, but it's used to compensate for the logo size. */ --rs-logo-height: 3rem; @@ -1124,7 +1125,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 { From ccae78789b7833a35706ef4bfa93aeadcef6cb7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lloren=C3=A7?= Date: Tue, 9 Jul 2024 08:43:34 +0200 Subject: [PATCH 4/4] CR changes --- src/frontend/src/styles/main.css | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css index f55ede46e0..61cf8f10f9 100644 --- a/src/frontend/src/styles/main.css +++ b/src/frontend/src/styles/main.css @@ -326,17 +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--vertical: calc( - var(--vs-stack) * 3 - ); - --rs-split-page-right-pane-padding--mobile--horizontal: 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; @@ -993,15 +990,15 @@ a:hover, } .c-landingPage__title { - font-size: calc(2.8rem + 1vw); + 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); } @@ -1020,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 { @@ -1099,7 +1096,7 @@ a:hover, .c-landingPage__container { display: block; - padding: 0 var(--rs-split-page-padding--mobile); + padding: 0 var(--rs-split-page-bezzel--mobile); max-width: var(--rs-main-content-width); } @@ -1139,8 +1136,8 @@ a:hover, background: var(--rc-light); border-radius: var(--rs-card-border-radius); - padding: var(--rs-split-page-right-pane-padding--mobile--vertical) - var(--rs-split-page-right-pane-padding--mobile--horizontal); + padding: var(--rs-split-page-right-pane-bezzel-y--mobile) + var(--rs-split-page-right-pane-bezzel-x--mobile); overflow: auto; }