Skip to content

Commit

Permalink
TRI-29692 About page smoothing (#168)
Browse files Browse the repository at this point in the history
* TRI-29692 About page smoothing

* TRI-32829 Change contact section
  • Loading branch information
mike-puzon-tri authored Mar 11, 2024
1 parent c6e897e commit ba3f211
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 98 deletions.
7 changes: 7 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"printWidth": 120,
"trailingComma": "none",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
164 changes: 72 additions & 92 deletions web/frontend/src/pages/About/About.module.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.PageContent{
display: flex;
padding: 40px 160px 40px 160px;
flex-direction: column;
align-items: flex-start;
gap: 40px;
.PageContent {
display: flex;
padding: 40px 160px 40px 160px;
flex-direction: column;
align-items: flex-start;
gap: 40px;
}
@media (max-width: 768px) {
.PageContent {
Expand All @@ -15,22 +15,23 @@
padding: 10px 10px 10px 10px;
}
}
.Breadcrumbs{
color: #212121;
font-size: 16px;
font-family: Gellix-Medium;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.03px;
word-wrap: break-word;
width: 137px;
height: 24px;
gap: 8px;

.Breadcrumbs {
color: #212121;
font-size: 16px;
font-family: Gellix-Medium;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.03px;
word-wrap: break-word;
width: 137px;
height: 24px;
gap: 8px;
}
.mailstyle{
color: var(--info-dark, #0288D1);
font-feature-settings: 'clig' off, 'liga' off;
.mailstyle {
color: var(--info-dark, #0288d1);
font-feature-settings:
'clig' off,
'liga' off;
font-family: Gellix-Regular;
font-size: 16px;
font-style: normal;
Expand All @@ -39,84 +40,63 @@
letter-spacing: 0.15px;
text-decoration-line: underline;
}
.AboutHeader{
align-self: stretch;
color: var(--grey-900, #212121);
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
.AboutHeader {
align-self: stretch;
color: var(--grey-900, #212121);
text-align: center;
font-feature-settings:
'clig' off,
'liga' off;

/* header/h2 */
font-family: Gellix-Regular;
font-size: 34px;
font-style: normal;
font-weight: 400;
line-height: 42px; /* 123.529% */
padding-top: 40px;
padding-bottom: 40px;
/* header/h2 */
font-family: Gellix-Regular;
font-size: 34px;
font-style: normal;
font-weight: 400;
line-height: 42px; /* 123.529% */
padding-top: 40px;
padding-bottom: 40px;
}
.Content{
align-self: stretch;
color: var(--grey-900, #212121);
font-feature-settings: 'clig' off, 'liga' off;
padding-top:8px;
/* body/body 1-regular */
font-family: Gellix-Regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
letter-spacing: 0.15px;
.Content {
align-self: stretch;
color: var(--grey-900, #212121);
font-feature-settings:
'clig' off,
'liga' off;
padding-top: 8px;
/* body/body 1-regular */
font-family: Gellix-Regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
letter-spacing: 0.15px;
}
.Titles{
align-self: stretch;
color: var(--grey-900, #212121);
font-feature-settings: 'clig' off, 'liga' off;
/* header/h4 */
font-family: Gellix-Medium;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 160% */
.Titles {
align-self: stretch;
color: var(--grey-900, #212121);
font-feature-settings:
'clig' off,
'liga' off;
/* header/h4 */
font-family: Gellix-Medium;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 160% */
}
.InnerContainer{
margin-left:10px;
margin-right:10px;
.InnerContainer {
margin-left: 10px;
margin-right: 10px;
}
.highlighted {
border-radius: 10px;
background: #FFFFFF;
box-shadow: 0px 0px 10px 0px #757575;
animation: shadowEffect 4s infinite;
border-radius: 10px;
background: #ffffff;
box-shadow: 0px 0px 15px 0px #757575;
}
.gap{
padding-bottom:40px;
.gap {
padding-bottom: 40px;
}
.spacer {
padding-bottom: 8px;
padding-bottom: 8px;
}
@keyframes shadowEffect {
0% {
box-shadow: 0 0 0 0 #757575;
}
15% {
box-shadow: 0 0 2px 0 #757575;
}
30% {
box-shadow: 0 0 5px 0 #757575;
}
50% {
box-shadow: 0 0 10px 0 #757575;
}
70% {
box-shadow: 0 0 15px 0 #757575;
}
80% {
box-shadow: 0 0 10px 0 #757575;
}
90% {
box-shadow: 0 0 5px 0 #757575;
}
100% {
box-shadow: 0 0 0 0 #757575;
}
}
13 changes: 7 additions & 6 deletions web/frontend/src/pages/About/About.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,12 @@ const About: React.FC<highlightProps> = ({ highlightedParagraph, highlight }) =>
<p className={styles.gap}></p>
<div id="contact">
<div className={styles.InnerContainer}>
<h4 className={styles.Titles}>Contact</h4>
<h4 className={styles.Titles}>The Team</h4>
<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{' '}
Institute: Murat Aykol, Joseph Montoya, Jens Hummelshøj, Chris Fajardo, Michael Puzon, and Reko Ong.
<br />
If you have any questions or feedback, please reach out to us at{' '}
<u>
<a href="mailto:[email protected]" className={styles.mailstyle}>
[email protected]
Expand All @@ -86,7 +87,7 @@ const About: React.FC<highlightProps> = ({ highlightedParagraph, highlight }) =>
</div>
</div>
<p className={styles.gap}></p>
<div id="code">
<div id="code" className="transition-all">
<div className={styles.InnerContainer}>
<h4 className={styles.Titles}>Code</h4>
<p className={styles.Content}>
Expand All @@ -106,12 +107,12 @@ const About: React.FC<highlightProps> = ({ highlightedParagraph, highlight }) =>
</div>
</div>
<p className={styles.gap}></p>
<div id="manuscript">
<div id="manuscript" className="transition-all">
<div className={styles.InnerContainer}>
<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.{' '}
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" rel="noreferrer">
(https://pubs.acs.org/doi/abs/10.1021/jacs.1c04888)
Expand Down

0 comments on commit ba3f211

Please sign in to comment.