style: 🎨 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
hubmapconsortium · Jun 28, 2024 · 18af5d2 · 18af5d2
1 parent 008009c
commit 18af5d2
Show file tree

Hide file tree

Showing 30 changed files with 543 additions and 373 deletions.
diff --git 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
@@ -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
@@ -2,7 +2,7 @@
 <section class="create-and-explore">
   <div class="create-explore-content">
     <div class="header">
-      <h2>Create and Explore Cell Distance Visualizations</h2>
+      <h1>Create and explore cell distance visualizations</h1>
       <h4>
         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 @@ <h4>
 </section>
 <section class="vccf-container">
   <div class="vccf">
-    <h2 class="background-header">Background Information: Constructing the Vasculature Common Coordinate Framework</h2>
-    <div class="content">
-      <div class="paper">
-        <p>
-          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.
-        </p>
-        <div class="links">
-          <a
-            mat-flat-button
-            class="hra-btn cta-filled"
-            href="https://doi.org/10.3389/fcvm.2020.00029"
-            target="_blank"
-            rel="noopener noreferrer"
-            color="primary"
-            disableRipple
-          >
-            Read VCCF Paper
-            <mat-icon iconPositionEnd> east </mat-icon>
-          </a>
-          <a
-            mat-button
-            class="hra-btn cta-flat"
-            href="assets/VCCF_March2024.pdf"
-            target="_blank"
-            rel="noopener noreferrer"
-            color="primary"
-            disableRipple
-          >
-            VCCF Visualization Poster
-            <mat-icon iconPositionEnd> east </mat-icon>
-          </a>
+    <div class="content-container">
+      <h2 class="background-header">
+        Background Information: Constructing the Vasculature Common Coordinate Framework
+      </h2>
+      <div class="content">
+        <div class="paper">
+          <p>
+            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.
+          </p>
+          <div class="links">
+            <a
+              mat-flat-button
+              class="hra-btn cta-filled"
+              href="https://doi.org/10.3389/fcvm.2020.00029"
+              target="_blank"
+              rel="noopener noreferrer"
+              color="primary"
+              disableRipple
+            >
+              Read VCCF Paper
+              <mat-icon iconPositionEnd> east </mat-icon>
+            </a>
+            <a
+              mat-button
+              class="hra-btn cta-flat"
+              href="assets/VCCF_March2024.pdf"
+              target="_blank"
+              rel="noopener noreferrer"
+              color="primary"
+              disableRipple
+            >
+              VCCF Visualization Poster
+              <mat-icon iconPositionEnd> east </mat-icon>
+            </a>
+          </div>
         </div>
       </div>
     </div>