From 18af5d265374ba002eff0a48d14d378ce557a205 Mon Sep 17 00:00:00 2001 From: Edward Lu <36934022+edlu77@users.noreply.github.com> Date: Fri, 28 Jun 2024 11:26:27 -0400 Subject: [PATCH] style: :art: CDE landing page styling updates (#484) * Update styling for smallest breakpoint * Update more breakpoints * Changes to large breakpoint * Clean up typography settings * Cleanup and finish adding breakpoints * Fix typo * Separate typography theming for create and landing pages * HRA footer updates --- .../components/header/header.component.scss | 29 +- .../visual-card/visual-card.component.scss | 56 ++-- .../landing-page/landing-page.component.html | 74 ++--- .../landing-page/landing-page.component.scss | 296 +++++++----------- .../landing-page.component.theme.scss | 18 ++ .../visualization.component.scss | 4 +- apps/cde-ui/src/assets/icons/social/email.svg | 12 +- .../src/assets/icons/social/email_large.svg | 9 + .../src/assets/icons/social/facebook.svg | 19 +- .../assets/icons/social/facebook_large.svg | 17 + .../src/assets/icons/social/instagram.svg | 15 +- .../assets/icons/social/instagram_large.svg | 11 + .../src/assets/icons/social/linkedin.svg | 12 +- .../assets/icons/social/linkedin_large.svg | 7 + apps/cde-ui/src/assets/icons/social/x.svg | 6 +- .../src/assets/icons/social/x_large.svg | 4 + .../src/assets/icons/social/youtube.svg | 15 +- .../src/assets/icons/social/youtube_large.svg | 5 + apps/cde-ui/src/assets/logo/cde_logo.svg | 22 +- apps/cde-ui/src/assets/logo/cifar.svg | 26 +- apps/cde-ui/src/assets/logo/iu.svg | 10 +- apps/cde-ui/src/assets/logo/nih.svg | 6 +- .../styles/_landing-page-typographies.scss | 47 +++ apps/cde-ui/src/styles/_material-theming.scss | 17 +- apps/cde-ui/src/styles/_typographies.scss | 3 + apps/cde-ui/src/styles/global/_fonts.scss | 2 +- .../src/styles/themable-sections/_main.scss | 2 + .../footer/src/lib/footer.component.html | 22 +- .../footer/src/lib/footer.component.scss | 122 +++++--- .../footer/src/lib/footer.component.ts | 28 +- 30 files changed, 543 insertions(+), 373 deletions(-) create mode 100644 apps/cde-ui/src/assets/icons/social/email_large.svg create mode 100644 apps/cde-ui/src/assets/icons/social/facebook_large.svg create mode 100644 apps/cde-ui/src/assets/icons/social/instagram_large.svg create mode 100644 apps/cde-ui/src/assets/icons/social/linkedin_large.svg create mode 100644 apps/cde-ui/src/assets/icons/social/x_large.svg create mode 100644 apps/cde-ui/src/assets/icons/social/youtube_large.svg create mode 100644 apps/cde-ui/src/styles/_landing-page-typographies.scss diff --git a/apps/cde-ui/src/app/components/header/header.component.scss b/apps/cde-ui/src/app/components/header/header.component.scss index 90026a06b..0eaa0e23b 100644 --- a/apps/cde-ui/src/app/components/header/header.component.scss +++ b/apps/cde-ui/src/app/components/header/header.component.scss @@ -5,7 +5,7 @@ --mat-text-button-hover-state-layer-opacity: 0; display: flex; - padding: 1rem 0.5rem; + padding: 1rem; align-items: center; gap: 0.25rem; @@ -52,8 +52,6 @@ } @media (min-width: 544px) { - padding: 1rem 1.5rem; - .help { --mdc-text-button-label-text-size: 0.875rem; line-height: 21px; @@ -63,18 +61,13 @@ } @media (min-width: 1012px) { - $logo-height: 3rem !important; - gap: 2rem; - padding: 1.5rem 3rem; - - img { - height: $logo-height; - } + $logo-height: 2.5rem; + gap: 1rem; + padding: 0.75rem 1rem; .hra-home, .cde-home { height: $logo-height; - border-radius: 0.5rem; img { height: $logo-height; @@ -97,7 +90,17 @@ } } - @media (min-width: 1280px) { - padding: 3rem 5rem; + @media (min-width: 1440px) { + $logo-height: 3rem; + padding: 0.5rem 1rem; + + .hra-home, + .cde-home { + height: $logo-height; + + img { + height: $logo-height; + } + } } } diff --git a/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss b/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss index eb50556c3..e64e2cf70 100644 --- a/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss +++ b/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss @@ -1,10 +1,11 @@ @use '../../../styles/cta' as cta; :host { - font-family: 'Metropolis'; display: flex; flex-wrap: wrap; gap: 2.5rem; + column-gap: 1.75rem; + justify-content: center; .visual-card { border-radius: 1rem; @@ -13,9 +14,11 @@ outline-offset: 0; cursor: pointer; display: flex; - width: 100%; flex-direction: column; - height: calc(100vw - 3rem); + justify-content: center; + font-family: Metropolis; + width: 17.5rem; + height: 17.5rem; &:hover { box-shadow: 0px 5px 1rem 5px rgba(32, 30, 61, 0.24); @@ -35,43 +38,50 @@ align-items: center; justify-content: center; margin: auto auto; - font-size: 11px; - letter-spacing: 0.2px; - font-weight: 500; + font-size: 0.75rem; + line-height: 1.125rem; } mat-icon { vertical-align: middle; - margin-left: 0.25rem; height: 1rem; width: 1rem; font-size: 1rem; + margin-left: 0.5rem; } } - @media (min-width: 430px) { + @media (min-width: 768px) { + justify-content: space-between; + } + + @media (min-width: 1012px) { .visual-card { - height: calc(100vw - 5rem) !important; + width: 24.5rem; + height: 24.5rem; + + .label { + font-size: 1rem; + line-height: 1.5rem; + } + + mat-icon { + height: 1.5rem; + width: 1.5rem; + font-size: 1.5rem; + margin-left: 0.75rem; + } } } - @media (min-width: 544px) { - gap: 3rem; + @media (min-width: 1280px) { + column-gap: 2rem; + } + @media (min-width: 1920px) { .visual-card { width: 30.5rem; - height: 30.5rem !important; - } - - .label { - font-size: 1.125rem !important; - } - - mat-icon { - height: 1.5rem !important; - width: 1.5rem !important; - font-size: 1.5rem !important; - margin-left: 0.75rem !important; + height: 30.5rem; } } } diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html index 17052993c..148be8d4b 100644 --- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html +++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html @@ -2,7 +2,7 @@
-

Create and Explore Cell Distance Visualizations

+

Create and explore cell distance visualizations

This website supports visualization and quantification of cells and cell-cell distance distributions in processed spatial molecular data. Resulting data and visualizations can be explored, downloaded, and can be @@ -14,40 +14,44 @@

-

Background Information: Constructing the Vasculature Common Coordinate Framework

-
-
-

- The vasculature is the human body's delivery system. It is also a cornerstone of medicine, helping surgeons - guide surgeries, pathologists diagnose disease, and serving as a landmark for medical practitioners of all - stripes. The Vasculature Common Coordinate Framework (VCCF) taps into this organic infrastructure in order to - map the cells in the body based on their proximity to nearby blood vessels. -

-
- - Read VCCF Paper - east - - - VCCF Visualization Poster - east - +
+

+ Background Information: Constructing the Vasculature Common Coordinate Framework +

+
+
+

+ The vasculature is the human body's delivery system. It is also a cornerstone of medicine, helping surgeons + guide surgeries, pathologists diagnose disease, and serving as a landmark for medical practitioners of all + stripes. The Vasculature Common Coordinate Framework (VCCF) taps into this organic infrastructure in order + to map the cells in the body based on their proximity to nearby blood vessels. +

+
+ + Read VCCF Paper + east + + + VCCF Visualization Poster + east + +
diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss index 23281a15f..fb034323d 100644 --- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss +++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss @@ -6,45 +6,19 @@ background-color: rgba(252, 252, 252, 1); .create-and-explore { - max-width: 120rem; + max-width: 18rem; } .create-explore-content { - padding: 1rem 1.5rem 5rem 1.5rem; - } - - p { - letter-spacing: 0.05em; - font-size: 0.75rem; - line-height: 21px; + padding: 3rem 0 5rem 0; } .header h1 { - font-size: 2.625rem; - max-width: 50%; - line-height: 4rem; - letter-spacing: -0.0325em; - } - - .header h2 { - font-size: 1.5rem; - line-height: 2.25rem; + margin-bottom: 0.5rem; } .header h4 { - font-size: 0.75rem; - line-height: 21px; - letter-spacing: 0.05em; - margin-bottom: 2.5rem; - } - - .header p { - margin: 0 0 3.5rem 0; - } - - cde-visual-card { - margin: 0 auto; - justify-content: center; + margin-bottom: 3rem; } .vccf-container { @@ -56,20 +30,22 @@ } .vccf { - max-width: 120rem; - padding: 3rem 1rem; + max-width: 18rem; + padding: 4rem 0; display: grid; grid-template-columns: 100%; - grid-template-rows: auto auto auto; + grid-template-rows: auto auto; grid-template-areas: 'video' - 'header' - 'content'; + 'content-container'; } - .vccf h2 { - font-size: 15px; - line-height: 22.5px; + .vccf .content-container { + grid-area: content-container; + background: white; + padding: 2rem 1.5rem; + border-radius: 1rem; + box-shadow: 0px 5px 16px 0px rgba(32, 30, 61, 0.24); } .vccf .content { @@ -83,28 +59,27 @@ } .paper p { - margin-bottom: 1rem; + margin-bottom: 2rem; } .background-header { grid-area: header; + margin-bottom: 0.5rem; } .links { display: flex; flex-direction: column; - gap: 0.5rem; + gap: 1rem; } .hra-btn { + --mdc-filled-button-label-text-size: 0.75rem; + --mdc-text-button-label-text-size: 0.75rem; display: flex; - font-weight: 500; width: max-content; - font-size: 11px; height: 2rem; - font-size: 11px; - padding: 8px 0.75rem; - letter-spacing: 0.75px; + padding: 0 0.6875rem 0 0.75rem; .mat-icon { vertical-align: middle; @@ -121,7 +96,7 @@ } .youtube-player { - margin-bottom: 1.75rem; + margin-bottom: 3rem; grid-area: video; ::ng-deep .youtube-player-placeholder, @@ -132,130 +107,87 @@ .youtube-player, ::ng-deep .youtube-player-placeholder, ::ng-deep iframe { - height: 158px !important; + height: 157px !important; @media (min-width: 430px) { - height: 202px !important; - } - - @media (min-width: 544px) { - height: 258px !important; + height: 217px !important; } @media (min-width: 768px) { - height: 287px !important; - } - - @media (min-width: 1012px) { - height: 193px !important; + height: 353px !important; } @media (min-width: 1280px) { - height: 252px !important; + height: 262px !important; } @media (min-width: 1440px) { - height: 278px !important; - } - - @media (min-width: 1920px) { - height: 362px !important; + height: 320px !important; } } } @media (min-width: 430px) { - .create-explore-content { - padding: 1rem 2.5rem 5rem 2.5rem; + .create-and-explore { + max-width: 24.875rem; } .vccf { - padding: 3rem 2.5rem; + max-width: 23.75rem; + + .content-container { + padding: 1.5rem 2rem; + } } .links { - flex-direction: row; - } - } + flex-direction: column; - @media (min-width: 544px) { - .create-explore-content { - padding: 2rem 1.5rem 112px 1.5rem; - } + .hra-btn { + --mdc-filled-button-label-text-size: 0.875rem; + --mdc-text-button-label-text-size: 0.875rem; - .header h2 { - font-size: 2rem; - line-height: 3rem; - } + &.cta-filled { + padding-left: 1rem; + } - p { - font-size: 1.125rem; - line-height: 27px; + .mat-icon { + margin-left: 0.5rem; + } + } } + } - .header h4 { - font-size: 1.125rem; - line-height: 27px; + @media (min-width: 544px) { + .create-and-explore { + max-width: 32rem; } .vccf { - padding: 68px 3rem; + max-width: 29.25rem; } - .vccf h2 { - font-size: 1.5rem; - line-height: 2.25rem; + .youtube-player { + padding: 0 40.5px; } .links { - flex-direction: column; - gap: 1rem; - } - - .links a:last-of-type { - padding-left: 0; - } - - .hra-btn { - font-size: 1.125rem; - padding: 0 1.5rem; - line-height: 27px; - width: max-content; - height: 2.5rem; - - .mat-icon { - margin-left: 0.75rem; - height: 1.5rem; - width: 1.5rem; - font-size: 1.5rem; - } + flex-direction: row; + gap: 0.5rem; } } @media (min-width: 768px) { - .create-explore-content { - padding: 2rem 48px 112px 48px; - } - - .header { - padding: 0 3rem; - } - - .header h4 { - font-size: 1.125rem; - line-height: 27px; - } - - cde-visual-card { - padding: 0 92px; + .create-and-explore { + max-width: 38.75rem; } .vccf { - padding: 68px 4rem; + max-width: 39.4375rem; } .youtube-player { - padding: 0 4rem; + padding: 0; } .links { @@ -269,107 +201,101 @@ } @media (min-width: 1012px) { - .create-explore-content { - padding: 2rem 4rem 112px 4rem; + .create-and-explore { + max-width: 53rem; } - .header { - padding: 0 1rem; + .create-explore-content { + padding: 3rem 0 5rem 0; } - .header h4 { - font-size: 20px; - line-height: 30px; + .header { + padding: 0 4.5rem 0 2.5rem; } .vccf { - padding: 68px 3rem; - grid-template-columns: 55% auto; - grid-template-rows: auto auto auto; - grid-template-areas: - 'header header' - 'content video' - 'content video'; - column-gap: 4rem; + padding: 7.5rem 0; + + .content-container { + padding: 2rem 2.5rem; + } } - .youtube-player { - padding: 0; + .links { + gap: 3rem; + + .hra-btn { + --mdc-filled-button-label-text-size: 1rem; + --mdc-text-button-label-text-size: 1rem; + height: 2.5rem; + padding-right: 0.9375rem; + + &.cta-filled { + padding-left: 1.5rem; + } + + .mat-icon { + height: 1.5rem; + width: 1.5rem; + font-size: 1.5rem; + margin-left: 0.75rem; + } + } } } @media (min-width: 1280px) { - .create-explore-content { - padding: 2rem 7rem 7rem 7rem; - } - - .header { - padding: 0; + .create-and-explore { + max-width: 77.5rem; } - .header h2 { - font-size: 42px; - line-height: 63px; - max-width: 50%; - } - - p { - font-size: 1.25rem; - line-height: 1.875rem; - } - - cde-visual-card { - justify-content: flex-start; - padding: 0; + .create-explore-content { + padding: 3rem 0 5rem 0; } .vccf { - padding: 7.5rem 6rem 7.5rem 6rem; - } - - .vccf h2 { - font-size: 2rem; - line-height: 3rem; + max-width: 71.6875rem; + grid-template-columns: 55% auto; + grid-template-rows: auto; + grid-template-areas: 'content-container video'; + column-gap: 3rem; } .youtube-player { margin-bottom: 0; + display: flex; + flex-direction: column; + justify-content: center; } } @media (min-width: 1440px) { .create-explore-content { - padding: 48px 8rem 7rem 8rem; + padding: 5rem 0 7rem 0; } .vccf { - padding: 10rem 9.75rem; + max-width: 82.625rem; + column-gap: 7.5rem; } } @media (min-width: 1920px) { - .header { - padding: 0 4.5rem 0 2.5rem; + .create-and-explore { + max-width: 100rem; } - .header h2 { - max-width: 100%; + .create-explore-content { + padding: 5rem 0 7rem 0; } - cde-visual-card { - justify-content: space-between; + .header h4 { + margin-bottom: 4rem; } .vccf { - padding: 17.5rem 13.5rem; - grid-template-rows: auto auto; - grid-template-areas: - 'header video' - 'content video'; - } - - .paper p { - margin-bottom: 2rem; + max-width: 94.25rem; + column-gap: 9.5625rem; } } } diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.theme.scss b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.theme.scss index ab05b3960..a6ec09585 100644 --- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.theme.scss +++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.theme.scss @@ -22,6 +22,24 @@ @mixin typography($theme) { cde-landing-page { + h1 { + font: mat.get-theme-typography($theme, headline-5) !important; + letter-spacing: mat.get-theme-typography($theme, headline-5, letter-spacing) !important; + } + + h4 { + font: mat.get-theme-typography($theme, body-1) !important; + letter-spacing: mat.get-theme-typography($theme, body-1, letter-spacing) !important; + } + + h2 { + font: mat.get-theme-typography($theme, headline-6) !important; + } + + p { + font: mat.get-theme-typography($theme, body-2) !important; + letter-spacing: mat.get-theme-typography($theme, body-2, letter-spacing) !important; + } } } diff --git a/apps/cde-ui/src/app/pages/visualization/visualization.component.scss b/apps/cde-ui/src/app/pages/visualization/visualization.component.scss index 70e19ddab..94444ffa1 100644 --- a/apps/cde-ui/src/app/pages/visualization/visualization.component.scss +++ b/apps/cde-ui/src/app/pages/visualization/visualization.component.scss @@ -1,6 +1,6 @@ :host { display: block; - min-width: 1280px; - min-height: 832px; + min-width: 80rem; + min-height: 52rem; height: 100vh; } diff --git a/apps/cde-ui/src/assets/icons/social/email.svg b/apps/cde-ui/src/assets/icons/social/email.svg index 4f598b619..523485ac7 100644 --- a/apps/cde-ui/src/assets/icons/social/email.svg +++ b/apps/cde-ui/src/assets/icons/social/email.svg @@ -1,9 +1,9 @@ - - - - + + + + - - + + diff --git a/apps/cde-ui/src/assets/icons/social/email_large.svg b/apps/cde-ui/src/assets/icons/social/email_large.svg new file mode 100644 index 000000000..7624a60fe --- /dev/null +++ b/apps/cde-ui/src/assets/icons/social/email_large.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/cde-ui/src/assets/icons/social/facebook.svg b/apps/cde-ui/src/assets/icons/social/facebook.svg index 6f0bba002..c2683f86d 100644 --- a/apps/cde-ui/src/assets/icons/social/facebook.svg +++ b/apps/cde-ui/src/assets/icons/social/facebook.svg @@ -1,4 +1,17 @@ - - - + + + + + + + + + + + + + + + + diff --git a/apps/cde-ui/src/assets/icons/social/facebook_large.svg b/apps/cde-ui/src/assets/icons/social/facebook_large.svg new file mode 100644 index 000000000..bf4bfdc43 --- /dev/null +++ b/apps/cde-ui/src/assets/icons/social/facebook_large.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/apps/cde-ui/src/assets/icons/social/instagram.svg b/apps/cde-ui/src/assets/icons/social/instagram.svg index 2f6f74136..ab3cd1360 100644 --- a/apps/cde-ui/src/assets/icons/social/instagram.svg +++ b/apps/cde-ui/src/assets/icons/social/instagram.svg @@ -1,6 +1,11 @@ - - - - - + + + + + + + + + + diff --git a/apps/cde-ui/src/assets/icons/social/instagram_large.svg b/apps/cde-ui/src/assets/icons/social/instagram_large.svg new file mode 100644 index 000000000..0bb67b58e --- /dev/null +++ b/apps/cde-ui/src/assets/icons/social/instagram_large.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/cde-ui/src/assets/icons/social/linkedin.svg b/apps/cde-ui/src/assets/icons/social/linkedin.svg index 03251e0ca..40994c344 100644 --- a/apps/cde-ui/src/assets/icons/social/linkedin.svg +++ b/apps/cde-ui/src/assets/icons/social/linkedin.svg @@ -1,7 +1,7 @@ - - - - - - + + + + + + diff --git a/apps/cde-ui/src/assets/icons/social/linkedin_large.svg b/apps/cde-ui/src/assets/icons/social/linkedin_large.svg new file mode 100644 index 000000000..6a60bb43b --- /dev/null +++ b/apps/cde-ui/src/assets/icons/social/linkedin_large.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/cde-ui/src/assets/icons/social/x.svg b/apps/cde-ui/src/assets/icons/social/x.svg index 85e65da9d..d0f6c2043 100644 --- a/apps/cde-ui/src/assets/icons/social/x.svg +++ b/apps/cde-ui/src/assets/icons/social/x.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/apps/cde-ui/src/assets/icons/social/x_large.svg b/apps/cde-ui/src/assets/icons/social/x_large.svg new file mode 100644 index 000000000..fe9d7ea23 --- /dev/null +++ b/apps/cde-ui/src/assets/icons/social/x_large.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/cde-ui/src/assets/icons/social/youtube.svg b/apps/cde-ui/src/assets/icons/social/youtube.svg index 6738e3cfb..92a33b819 100644 --- a/apps/cde-ui/src/assets/icons/social/youtube.svg +++ b/apps/cde-ui/src/assets/icons/social/youtube.svg @@ -1,5 +1,12 @@ - - - - + + + + + + + + + + + diff --git a/apps/cde-ui/src/assets/icons/social/youtube_large.svg b/apps/cde-ui/src/assets/icons/social/youtube_large.svg new file mode 100644 index 000000000..305cacd97 --- /dev/null +++ b/apps/cde-ui/src/assets/icons/social/youtube_large.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/cde-ui/src/assets/logo/cde_logo.svg b/apps/cde-ui/src/assets/logo/cde_logo.svg index 2d4c2fadd..8495ac4b7 100644 --- a/apps/cde-ui/src/assets/logo/cde_logo.svg +++ b/apps/cde-ui/src/assets/logo/cde_logo.svg @@ -1,16 +1,16 @@ - - - - - - - - + + + + + + + + - + - - + + diff --git a/apps/cde-ui/src/assets/logo/cifar.svg b/apps/cde-ui/src/assets/logo/cifar.svg index 23aa67b15..6dfd3d901 100644 --- a/apps/cde-ui/src/assets/logo/cifar.svg +++ b/apps/cde-ui/src/assets/logo/cifar.svg @@ -1,20 +1,20 @@ - - - - + + + + - - - - - - - + + + + + + + - - + + diff --git a/apps/cde-ui/src/assets/logo/iu.svg b/apps/cde-ui/src/assets/logo/iu.svg index baac16ddb..5b548b75b 100644 --- a/apps/cde-ui/src/assets/logo/iu.svg +++ b/apps/cde-ui/src/assets/logo/iu.svg @@ -1,10 +1,10 @@ - - - + + + - - + + diff --git a/apps/cde-ui/src/assets/logo/nih.svg b/apps/cde-ui/src/assets/logo/nih.svg index 81dbea9aa..24e1666d7 100644 --- a/apps/cde-ui/src/assets/logo/nih.svg +++ b/apps/cde-ui/src/assets/logo/nih.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/apps/cde-ui/src/styles/_landing-page-typographies.scss b/apps/cde-ui/src/styles/_landing-page-typographies.scss new file mode 100644 index 000000000..32585fafd --- /dev/null +++ b/apps/cde-ui/src/styles/_landing-page-typographies.scss @@ -0,0 +1,47 @@ +@use '@angular/material' as mat; + +$xx-small: mat.define-rem-typography-config( + $font-family: 'Metropolis', + $headline-5: mat.define-typography-level(2rem, 3rem, 500, $letter-spacing: -1.25px), + $headline-6: mat.define-typography-level(1.5rem, 2.25rem, 500), + $subtitle-1: mat.define-typography-level(0.875rem, 1.3125rem, 400, $letter-spacing: 0.005em), + $body-1: mat.define-typography-level(1.125rem, 1.6875rem, 400, 'Nunito Sans', $letter-spacing: 0.5px), + $body-2: mat.define-typography-level(0.875rem, 1.3125rem, 400, 'Nunito Sans', $letter-spacing: 0.5px), + $button: mat.define-typography-level(0.6875rem, 1.03125rem, 500, $letter-spacing: 0.002em), +); + +$x-small: mat.define-rem-typography-config( + $font-family: 'Metropolis', + $headline-5: mat.define-typography-level(2rem, 3rem, 500, $letter-spacing: -1.25px), + $headline-6: mat.define-typography-level(1.75rem, 2.625rem, 500), + $subtitle-1: mat.define-typography-level(0.875rem, 1.3125rem, 400, $letter-spacing: 0.005em), + $body-1: mat.define-typography-level(1.125rem, 1.6875rem, 400, 'Nunito Sans', $letter-spacing: 0.5px), + $body-2: mat.define-typography-level(1rem, 1.5rem, 400, 'Nunito Sans', $letter-spacing: 0.5px), + $button: mat.define-typography-level(0.6875rem, 1.03125rem, 500, $letter-spacing: 0.002em), +); + +$small: mat.define-rem-typography-config( + $font-family: 'Metropolis', + $headline-5: mat.define-typography-level(2.375rem, 3.5625rem, 500, $letter-spacing: -1.75px), + $headline-6: mat.define-typography-level(1.75rem, 2.625rem, 500), + $subtitle-1: mat.define-typography-level(1.25rem, 1.875rem, 400, $letter-spacing: 0.013em), + $body-1: mat.define-typography-level(1.125rem, 1.6875rem, 400, 'Nunito Sans', $letter-spacing: 0.5px), + $body-2: mat.define-typography-level(1rem, 1.5rem, 400, 'Nunito Sans', $letter-spacing: 0.5px), + $button: mat.define-typography-level(1.125rem, 1.6875rem, 500), +); + +$medium: $small; + +$large: mat.define-rem-typography-config( + $font-family: 'Metropolis', + $headline-5: mat.define-typography-level(2.625rem, 3.9375rem, 500, $letter-spacing: -1.25px), + $headline-6: mat.define-typography-level(2rem, 3rem, 500), + $subtitle-1: mat.define-typography-level(1.5rem, 2.25rem, 500), + $body-1: mat.define-typography-level(1.125rem, 1.6875rem, 400, 'Nunito Sans', $letter-spacing: 0.5px), + $body-2: mat.define-typography-level(1rem, 1.5rem, 400, 'Nunito Sans', $letter-spacing: 0.5px), + $button: mat.define-typography-level(1.125rem, 1.6875rem, 500), +); + +$x-large: $large; +$xx-large: $x-large; +$xxx-large: $xx-large; diff --git a/apps/cde-ui/src/styles/_material-theming.scss b/apps/cde-ui/src/styles/_material-theming.scss index d0ab14759..941a59511 100644 --- a/apps/cde-ui/src/styles/_material-theming.scss +++ b/apps/cde-ui/src/styles/_material-theming.scss @@ -5,6 +5,7 @@ @use './themes/header' as header-theme; @use './themes/main' as main-theme; @use './typographies' as typographies; +@use './landing-page-typographies' as landing-page-typographies; @use './breakpoints' as breakpoints; $_theme: main-theme.$theme; @@ -30,18 +31,32 @@ $_theme: main-theme.$theme; @include create-visualization-section.theme($_theme); // Typography -@include breakpoints.breakpoint('xx-small', 'x-small') { +@include breakpoints.breakpoint('xx-small') { + @include main-section.typography(landing-page-typographies.$xx-small); + @include create-visualization-section.typography(typographies.$xx-small); +} + +@include breakpoints.breakpoint('x-small') { + @include main-section.typography(landing-page-typographies.$x-small); @include create-visualization-section.typography(typographies.$x-small); } @include breakpoints.breakpoint('small', 'medium') { + @include main-section.typography(landing-page-typographies.$small); @include create-visualization-section.typography(typographies.$small); } @include breakpoints.breakpoint('large') { + @include main-section.typography(landing-page-typographies.$large); @include create-visualization-section.typography(typographies.$large); } @include breakpoints.breakpoint('x-large') { + @include main-section.typography(landing-page-typographies.$x-large); @include create-visualization-section.typography(typographies.$x-large); } + +@include breakpoints.breakpoint('xx-large', 'xxx-large') { + @include main-section.typography(landing-page-typographies.$xx-large); + @include create-visualization-section.typography(typographies.$xx-large); +} diff --git a/apps/cde-ui/src/styles/_typographies.scss b/apps/cde-ui/src/styles/_typographies.scss index ff6746783..e29d5d299 100644 --- a/apps/cde-ui/src/styles/_typographies.scss +++ b/apps/cde-ui/src/styles/_typographies.scss @@ -43,3 +43,6 @@ $x-large: mat.define-rem-typography-config( $body-2: mat.define-typography-level(1.125rem, 1.6875rem, 500), $button: mat.define-typography-level(1.125rem, 1.6875rem, 500), ); + +$xx-large: $x-large; +$xxx-large: $xx-large; diff --git a/apps/cde-ui/src/styles/global/_fonts.scss b/apps/cde-ui/src/styles/global/_fonts.scss index 5254e9733..0b857e9dc 100644 --- a/apps/cde-ui/src/styles/global/_fonts.scss +++ b/apps/cde-ui/src/styles/global/_fonts.scss @@ -8,7 +8,7 @@ .material-symbols-rounded { font-weight: normal; font-style: normal; - font-size: 24px; + font-size: 1.5rem; display: inline-block; line-height: 1; text-transform: none; diff --git a/apps/cde-ui/src/styles/themable-sections/_main.scss b/apps/cde-ui/src/styles/themable-sections/_main.scss index 9e995464d..c5645ea03 100644 --- a/apps/cde-ui/src/styles/themable-sections/_main.scss +++ b/apps/cde-ui/src/styles/themable-sections/_main.scss @@ -1,9 +1,11 @@ @use '../../app/pages/landing-page/landing-page.component.theme.scss' as landing-page; +@use '@angular/material' as mat; @mixin theme($theme) { @include landing-page.theme($theme); } @mixin typography($typography) { + @include mat.typography-hierarchy($typography); @include landing-page.typography($typography); } diff --git a/libs/design-system/footer/src/lib/footer.component.html b/libs/design-system/footer/src/lib/footer.component.html index 9500aa8c6..ab0500531 100644 --- a/libs/design-system/footer/src/lib/footer.component.html +++ b/libs/design-system/footer/src/lib/footer.component.html @@ -1,6 +1,8 @@
- Human Reference Atlas Logo + + Human Reference Atlas Logo + copyright 2024 CNS at Indiana University @@ -10,26 +12,32 @@