Merge pull request #122 from TRI-AMDD/TRI-30864-about-page-transition…

…-and-font-fix [TRI-30864] Adding Gellix-Regular Font
TRI-AMDD · Jan 4, 2024 · f549e55 · f549e55
2 parents 11a0354 + a5f8957
commit f549e55
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 9 deletions.
diff --git a/web/frontend/src/App.tsx b/web/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import CognitoProvider from '@/features/cognito/cognito-hosted';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import './index.css';
+import './fonts.css';
 
 const queryClient = new QueryClient();
 const Home = lazy(() => import('@/pages/Home/Home'));

diff --git a/web/frontend/src/fonts.css b/web/frontend/src/fonts.css
@@ -0,0 +1,10 @@
+@font-face {
+  font-family: 'Gellix-Regular';
+  src: url('./fonts/Gellix-Regular/Gellix-Regular.eot');
+    src: url('./fonts/Gellix-Regular/Gellix-Regular.woff2') format('woff2'),
+         url('./fonts/Gellix-Regular/Gellix-Regular.woff') format('woff');
+}
+
+body {
+  font-family: 'Gellix-Regular', sans-serif;
+}
diff --git a/web/frontend/src/fonts/Gellix-Regular/Gellix-Regular.eot b/web/frontend/src/fonts/Gellix-Regular/Gellix-Regular.eot
diff --git a/web/frontend/src/fonts/Gellix-Regular/Gellix-Regular.woff b/web/frontend/src/fonts/Gellix-Regular/Gellix-Regular.woff
diff --git a/web/frontend/src/fonts/Gellix-Regular/Gellix-Regular.woff2 b/web/frontend/src/fonts/Gellix-Regular/Gellix-Regular.woff2
diff --git a/web/frontend/src/pages/About/About.module.css b/web/frontend/src/pages/About/About.module.css
@@ -10,7 +10,7 @@
 .Breadcrumbs{
      color: #212121;
      font-size: 16px;
-     font-family: Gellix;
+     font-family: Gellix-Regular;
      font-weight: 500;
      line-height: 24px;
      letter-spacing: 0.03px;
@@ -23,7 +23,7 @@
     font-feature-settings: 'clig' off, 'liga' off;
 
     /* header/h2 */
-    font-family: Gellix;
+    font-family: Gellix-Regular;
     font-size: 34px;
     font-style: normal;
     font-weight: 400;
@@ -37,7 +37,7 @@
     font-feature-settings: 'clig' off, 'liga' off;
     padding-top:8px;
     /* body/body 1-regular */
-    font-family: Gellix;
+    font-family: Gellix-Regular;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -49,7 +49,7 @@
     color: var(--grey-900, #212121);
     font-feature-settings: 'clig' off, 'liga' off;
     /* header/h4 */
-    font-family: Gellix;
+    font-family: Gellix-Regular;
     font-size: 20px;
     font-style: normal;
     font-weight: 500;
@@ -68,7 +68,9 @@
 .gap{
     padding-bottom:40px;
 }
-
+.spacer {
+    padding-bottom: 8px;
+}
 @keyframes shadowEffect {
   0% {
     box-shadow: 0 0 0 0 #757575;

diff --git a/web/frontend/src/pages/About/About.tsx b/web/frontend/src/pages/About/About.tsx
@@ -66,7 +66,7 @@ const About: React.FC<highlightProps> = ({highlightedParagraph, highlight}) => {
                         <p className={styles.Content}>
                                 The piro platform is developed by a team of researchers and software developers at Toyota Research Institute: Murat Aykol,
                                 Joseph Montoya, Jens Hummelshøj, Chris Fajardo, Michael Puzon, and Reko Ong.
-                                If you have any questions or feedback, please reach out to us at <a href="mailto:[email protected]">[email protected]</a>
+                                If you have any questions or feedback, please reach out to us at <u><a href="mailto:[email protected]">[email protected]</a></u>.
                         </p></div>
             </div>
             <p className={styles.gap}></p>
@@ -75,8 +75,9 @@ const About: React.FC<highlightProps> = ({highlightedParagraph, highlight}) => {
                     <h4 className={styles.Titles}>Code</h4>
                     <p className={styles.Content}>
                             If you’d like to use the python interface to piro, or to access the code for this site,
-                            please visit our github page: <a href="https://github.com/TRI-AMDD/piro" target="_blank">https://github.com/TRI-AMDD/piro</a>.
+                            please visit our github page: <u><a href="https://github.com/TRI-AMDD/piro" target="_blank">https://github.com/TRI-AMDD/piro</a></u>.
                             Tutorial jupyter notebooks showing how to use piro locally are provided in the notebooks folder.
+                            <div className={styles.spacer}></div>
                     </p>
                 </div>
             </div>
@@ -86,8 +87,8 @@ const About: React.FC<highlightProps> = ({highlightedParagraph, highlight}) => {
                     <h4 className={styles.Titles}>Manuscript</h4>
                     <p className={styles.Content}>
                             For more information about the physical theory behind piro, please read our paper,
-                            “Rational Solid-State Synthesis Routes for Inorganic Materials” by Murat Aykol et al.
-                            <a href="https://pubs.acs.org/doi/abs/10.1021/jacs.1c04888" target="_blank">(https://pubs.acs.org/doi/abs/10.1021/jacs.1c04888)</a>.
+                            “Rational Solid-State Synthesis Routes for Inorganic Materials” by Murat Aykol et al. <u><a href="https://pubs.acs.org/doi/abs/10.1021/jacs.1c04888" target="_blank">(https://pubs.acs.org/doi/abs/10.1021/jacs.1c04888)</a></u>.
+                            <div className={styles.spacer}></div>
                     </p></div>
             </div>
         </article>