UI new changes (#343)

* hiding zipcode from start screen * code changes * code changes * code changes * code changes * code cleanup * code cleanup * code cleanup * WIP: Home page * added styles * added components * added components * styles fixes for media tags * added media tags * added styles and modules * Media Page and styles * code changes and styling fixes * code changes * code changes * style changes * Home page * research page styles * Media Page * Resource Page * styling changes for resources * Added links to home page * fixed format * added links to media page and fixed format * added links to research page and fixed format * added link resources page,fixed format,added files * updated links of home page * in-screen video player * background image sizing * url changes * url changes * hash strategy changes for site visualization * URL Changes for visualizations * URL changes for site visualizations * URL changes for site-vis * Re-enable output hashing * Katy Last name fix, deleted media video thumbnails * meta charset tag * deleted thumbnails of videos * downwards arrow * code changes * styling changes * stying changes * styling changes * page center, more styles * removed blue box, stylings * changed font, issue #2 * updated svg, added back button to home * visualization improved, button font fix * button fixes * padding changes for home page --------- Co-authored-by: Bruce W. Herr II <bherr@indiana.edu>
cns-iu · Aug 28, 2023 · 7d1eb46 · 7d1eb46
1 parent 83033d4
commit 7d1eb46
Show file tree

Hide file tree

Showing 14 changed files with 433 additions and 655 deletions.
diff --git a/packages/client-mav/src/app/app.component.html b/packages/client-mav/src/app/app.component.html
@@ -10,7 +10,10 @@
       routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
       {{routeLink.label}}
     </a>
+    <a mat-tab-link href="https://xmacroscope.org/" target="_blank">
+      xMacroscope
+    </a>
   </nav>
 </div>
 
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
diff --git a/packages/website-static/assets/age-time-heatmap.svg b/packages/website-static/assets/age-time-heatmap.svg
diff --git a/packages/website-static/assets/arrow_downward.svg b/packages/website-static/assets/arrow_downward.svg
diff --git a/packages/website-static/assets/height-time-heatmap.svg b/packages/website-static/assets/height-time-heatmap.svg
diff --git a/packages/website-static/assets/scatterplot-matrix.svg b/packages/website-static/assets/scatterplot-matrix.svg
diff --git a/packages/website-static/assets/scatterplot.svg b/packages/website-static/assets/scatterplot.svg
diff --git a/packages/website-static/index.html b/packages/website-static/index.html
@@ -3,8 +3,6 @@
 
 <head>
   <meta charset="utf-8">
-  <link href="https://fonts.googleapis.com/css2?family=Lexend&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;900&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
   <link rel="stylesheet" href="styles.css">
@@ -24,18 +22,22 @@
   </ul>
 
   <!-- The main home page -->
-
-  <div class="home-page">
-    <div class="home-page-contents">
-      <div class="title">
-        xMacroscope
-      </div>
-      <div class="text-below-title">
-        A design, build, and research project to study how visitors at science centers understand data visualization
-        techniques.
+  <section class="main-page-wrapper">
+    <div class="home-page">
+      <div class="home-page-contents">
+        <div class="title">
+          xMacroscope
+        </div>
+        <div class="text-below-title">
+          A design, build, and research project to study how visitors at science centers understand data visualization
+          techniques.
+        </div>
+        <div>
+          <img class="downward-arrow" src="../assets/arrow_downward.svg" alt="Downward arrow">
+        </div>
       </div>
     </div>
-  </div>
+  </section>
 
   <!-- The About page (below home page)-->
 
@@ -45,25 +47,25 @@
         About the <br> xMacroscope Platform
       </div>
 
-      <div class="blue-box"></div>
-
       <div class="text-below-about">
         The xMacroscope is an open-source software and technology platform. It will allow us to build science center
         exhibit experiences that let visitors construct visualizations using their own experiences.
       </div>
 
-      <div class="about-button">
-        <a class="default-button" href="/demo/" target="_blank">
-          <img class="new-tab-logo" src="../assets/open_in_new.svg" alt="New Tab">
-          xMacroscope Demo
-        </a>
-
-        <div class="filler"></div>
+      <div class="about-buttons">
+        <div class="about-button">
+          <a class="default-button" href="/demo/" target="_blank">
+            <img class="new-tab-logo" src="../assets/open_in_new.svg" alt="New Tab">
+            xMacroscope Demo
+          </a>
+        </div>
 
-        <a class="default-button" href="https://github.com/cns-iu/xmacroscope" target="_blank">
-          <img class="new-tab-logo" src="../assets/open_in_new.svg" alt="New Tab">
-          xMacroscope GitHub
-        </a>
+        <div class="about-button">
+          <a class="default-button" href="https://github.com/cns-iu/xmacroscope" target="_blank">
+            <img class="new-tab-logo" src="../assets/open_in_new.svg" alt="New Tab">
+            xMacroscope GitHub
+          </a>
+        </div>
       </div>
 
       <img class="about-image" src="../assets/scatter-plot.svg" alt="Scatter Plot">
@@ -147,9 +149,9 @@
 
   <!-- Partnership Section -->
 
-  <div class="xM-partnership-page">
-    <div class="xM-partnership-page-content">
-      <div class="xM-partnership-page-title">
+  <div class="partnership-page">
+    <div class="partnership-page-content">
+      <div class="partnership-page-title">
         xMacroscope is a <br> partnership between:
       </div>