Page MenuHomePhabricator
Files F3406279

D8079.diff
No OneTemporary
Actions

D8079.diff
View Options

diff --git a/landing/info-block.css b/landing/info-block.css
--- a/landing/info-block.css
+++ b/landing/info-block.css
@@ -1,32 +1,38 @@
-@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
- .info_block {
- background: rgba(235, 235, 235, 0.05);
- -webkit-backdrop-filter: blur(12px);
- backdrop-filter: blur(12px);
- }
+.textContainer {
+ width: 910px;
+ max-width: 100vw;
+ padding: 120px 32px;
}
-.info_block {
- --border-radius: 8px;
- background: rgba(235, 235, 235, 0.05);
- border-radius: var(--border-radius);
- /* 36 / 28 = 1.28571429 */
- /* 36px is the max padding size, 28px is the max font-size */
- /* Padding scales down with text */
- padding: 1.28571429rem;
+.header {
+ color: var(--white-80);
+ margin-bottom: 40px;
}
-.title {
- font-family: 'iA Writer Duo S', monospace;
- font-style: normal;
- text-align: left;
- line-height: 1.35;
- padding-bottom: clamp(1rem, 0.5817rem + 2.0915vw, 3rem);
- font-size: clamp(1.875rem, 1.6136rem + 1.3072vw, 3.125rem);
+.header span {
+ background: linear-gradient(90deg, #5d34b3 0%, #a314d5 49.31%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
}
-.description {
- line-height: 1.5;
- font-weight: 400;
- font-family: var(--sans-serif);
+.linkContainer {
+ display: flex;
+ align-items: center;
+ width: fit-content;
+}
+
+.link {
+ color: var(--white-100);
+ text-decoration: underline;
+ margin-right: 8px;
+}
+
+.icon {
+ color: var(--white-100);
+}
+
+.linkContainer:hover .link,
+.linkContainer:hover .icon {
+ color: var(--violet-dark-100);
}
diff --git a/landing/info-block.react.js b/landing/info-block.react.js
--- a/landing/info-block.react.js
+++ b/landing/info-block.react.js
@@ -1,31 +1,67 @@
// @flow
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
import * as React from 'react';
+import { NavLink } from 'react-router-dom';
import css from './info-block.css';
-import Picture from './Picture.react.js';
+import typography from './typography.css';
type InfoBlockProps = {
- +title: string,
- +description: string,
- +url: string,
- +alt: string,
- +imageStyle: string,
- +infoStyle: string,
+ +containerClassName: string,
+ +colorHeader: boolean,
+ +headerTextContent: string,
+ +infoBlockContent: React.Node,
+ +navLinkDestination: string,
+ +linkTextContent: string,
};
function InfoBlock(props: InfoBlockProps): React.Node {
- const { title, description, url, alt, imageStyle, infoStyle } = props;
+ const {
+ containerClassName,
+ headerTextContent,
+ colorHeader,
+ infoBlockContent,
+ navLinkDestination,
+ linkTextContent,
+ } = props;
+
+ const headerClassName = classNames([typography.heading1, css.header]);
+
+ const linkClassName = classNames([typography.paragraph1, css.link]);
+
+ let headerText;
+ if (colorHeader) {
+ const lastSpaceIndex = headerTextContent.lastIndexOf(' ');
+ const remainingSentence = headerTextContent.substring(0, lastSpaceIndex);
+ const lastWord = headerTextContent.substring(lastSpaceIndex + 1);
+
+ headerText = (
+ <>
+ {remainingSentence}
+ <span> {lastWord}</span>
+ </>
+ );
+ } else {
+ headerText = headerTextContent;
+ }
return (
- <>
- <div className={imageStyle}>
- <Picture alt={alt} url={url} />
- </div>
- <div className={`${css.info_block} ${infoStyle}`}>
- <p className={css.title}>{title}</p>
- <p className={css.description}>{description}</p>
+ <section className={containerClassName}>
+ <div className={css.textContainer}>
+ <h1 className={headerClassName}>{headerText}</h1>
+ {infoBlockContent}
+ <NavLink to={navLinkDestination} exact className={css.linkContainer}>
+ <p className={linkClassName}>{linkTextContent}</p>
+ <FontAwesomeIcon
+ size="sm"
+ className={css.icon}
+ icon={faExternalLinkAlt}
+ />
+ </NavLink>
</div>
- </>
+ </section>
);
}

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 1:17 AM (11 h, 2 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2615421
Default Alt Text
D8079.diff (4 KB)

Event Timeline