filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-27 02:52:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

community page styling + link fixes

Browse Source
This commit is contained in:
tarafanlin 2020-09-13 22:03:03 -07:00
parent 0de5f02fce
commit 0f80c3e813
2 changed files with 130 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
pages/_/marketing-candidate/community.js
View File

@ -6,9 +6,10 @@ import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader"; import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter"; import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
import IssuesList from "~/components/core/marketing/IssuesList"; import IssuesList from "~/components/core/marketing/IssuesList";
import CodeTerminal from "~/components/core/marketing/CodeTerminal"; import CodeBlock from "~/components/system/CodeBlock";
import { css, keyframes } from "@emotion/react"; import { css, keyframes } from "@emotion/react";
import { SceneUtils } from "three";
const STYLES_ROOT = css` const STYLES_ROOT = css`
display: flex; display: flex;
@ -20,56 +21,47 @@ const STYLES_ROOT = css`
`; `;
const STYLES_H1 = css` const STYLES_H1 = css`
font: ${Constants.font.semiBold}; font-size: ${Constants.typescale.lvl5};
font-size: ${Constants.typescale.lvl7}; font-family: ${Constants.font.medium};
line-height: 1.25; font-weight: 400;
line-height: 1.3;
padding: 0px 0px 16px 0px;
letter-spacing: -0.021rem;
width: 100%; width: 100%;
color: ${Constants.system.slate}; color: ${Constants.system.slate};
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl6};
padding: 0px 0px 16px 0px;
}
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl5}; font-size: ${Constants.typescale.lvl3};
padding: 0px 0px 8px 0px;
} }
`; `;
const STYLES_H2 = css` const STYLES_H2 = css`
font-size: ${Constants.typescale.lvl5}; font-size: ${Constants.typescale.lvl3};
line-height: 1.25; font-family: ${Constants.font.medium};
padding: 16px 0px 0 0px; font-weight: 400;
line-height: 1.3;
letter-spacing: -0.019rem;
padding: 0 0 16px 0;
width: 100%; width: 100%;
color: ${Constants.system.black}; color: ${Constants.system.slate};
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl4};
padding: 8px 0px 0px 0px;
}
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl3}; font-size: ${Constants.typescale.lvl2};
padding: 8px 0px 0 0px;
line-height: 1.5;
} }
`; `;
const STYLES_H3 = css` const STYLES_H3 = css`
font-size: ${Constants.typescale.lvl3}; font-size: ${Constants.typescale.lvl2};
font-family: ${Constants.font.text};
font-weight: 400;
line-height: 1.5; line-height: 1.5;
padding: 16px 0px 0px 0px; letter-spacing: -0.014rem;
padding: 0 0 8px 0;
color: ${Constants.system.slate}; color: ${Constants.system.slate};
opacity: 0.7;
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl2};
padding: 8px 0px 0px 0px;
}
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl1}; font-size: ${Constants.typescale.lvl1};
padding: 8px 0px 0px 0px;
} }
`; `;
@ -86,16 +78,18 @@ const STYLES_SECTION_HERO = css`
} }
`; `;
const STYLES_TEXT_BLOCK = css` const STYLES_BLOCK = css`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: space-between;
width: 56vw; max-width: 56vw;
width: 100%;
align-self: center; align-self: center;
margin-bottom: 16px;
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
width: 88vw; width: 100%;
right: 24px; max-width: 100vw;
} }
`; `;
@ -122,7 +116,7 @@ const STYLES_BUTTON_PRIMARY = css`
border: 0; border: 0;
min-height: 48px; min-height: 48px;
padding: 0px 24px 0px 24px; padding: 0px 24px 0px 24px;
margin: 20px 0px; margin: 24px 0 16px 0;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -137,9 +131,9 @@ const STYLES_BUTTON_PRIMARY = css`
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
:hover { :hover {
background-color: ${Constants.system.pitchBlack}; background-color: ${Constants.system.white};
box-shadow: 0px 10px 90px 20px rgba(207, 206, 211, 0.3); box-shadow: 0px 10px 90px 20px rgba(207, 206, 211, 0.3);
color: ${Constants.system.wall}; color: ${Constants.system.slate};
} }
:focus { :focus {
@ -152,45 +146,23 @@ const STYLES_BUTTON_PRIMARY = css`
`; `;
const STYLES_SECTION_WRAPPER = css` const STYLES_SECTION_WRAPPER = css`
width: 100vw;
padding: 32px 88px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 88px; justify-content: center;
width: 100vw; background: ${Constants.system.foreground};
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
padding: 88px 24px; padding: 64px 24px;
display: block; display: block;
} }
`; `;
const STYLES_SECTION_CHILD_FULL = css`
margin: 80px 0 0 0;
display: flex;
justify-content: space-between;
@media (max-width: ${Constants.sizes.mobile}px) {
flex-direction: column;
}
`;
const STYLES_SECTION_CHILD_SPLIT = css`
width: 64%;
height: 40vh;
@media (max-width: ${Constants.sizes.mobile}px) {
height: 24vh;
width: 100%;
flex-direction: column;
}
`;
const STYLES_CARD_GROUP = css` const STYLES_CARD_GROUP = css`
display: flex; display: flex;
margin-top: 48px; flex-wrap: wrap;
flex-flow: row wrap; align-items: left;
@media (max-width: ${Constants.sizes.tablet}px) {
align-items: left;
4margin-top: 16px;
}
`; `;
const STYLES_CARD_NAME = css` const STYLES_CARD_NAME = css`
@ -249,49 +221,43 @@ const SLATE_CORE_TEAM = [
name: "Jason Leyser", name: "Jason Leyser",
url: "https://github.com/jasonleyser", url: "https://github.com/jasonleyser",
username: "jasonleyser", username: "jasonleyser",
imageUrl: imageUrl: "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4",
"https://slate.textile.io/ipfs/bafkreidw22xqcr6fo6m7k25qe3yemby6w4dlawbsu6yxs7qjnpu5gyoiwm"
}, },
{ {
id: 2, id: 2,
name: "Cake", name: "Cake",
url: "https://github.com/STYLES_CARD_GROUPmylee", url: "https://github.com/jimmylee",
username: "jimmylee", username: "jimmylee",
imageUrl: imageUrl: "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4",
"https://slate.textile.io/ipfs/bafkreigxoyf43vw3p2hbc4ycsyh2og36cgy3s47xkb2n4w3i7auv2a6cei"
}, },
{ {
id: 3, id: 3,
name: "Martina Long", name: "Martina Long",
url: "https://github.com/martinalong", url: "https://github.com/martinalong",
username: "martinalong", username: "martinalong",
imageUrl: imageUrl: "https://avatars2.githubusercontent.com/u/33686587?s=400&u=d1841da2872f30f7f8cb80e67cdc9b385d0f50e1&v=4",
"https://slate.textile.io/ipfs/bafkreiasfgunf66fxncazlfzff3vp2btfe4j55jxgb2epcthrnvwkthwrq"
}, },
{ {
id: 4, id: 4,
name: "Haris Butt", name: "Haris Butt",
url: "https://github.com/harisbutt", url: "https://github.com/harisbutt",
username: "harisbutt", username: "harisbutt",
imageUrl: imageUrl: "https://avatars2.githubusercontent.com/u/13544493?s=400&u=264f4b9241b2520ba13e4eb4d71042b05adc5f74&v=4",
"https://slate.textile.io/ipfs/bafkreih3tbsh6f4m3m2yv3uyc7cupriovl4b354rsyyxuh6l5sv7ftdgzq"
}, },
{ {
id: 5, id: 5,
name: "Tara Lin", name: "Tara Lin",
url: "https://github.com/tarafanlin", url: "https://github.com/tarafanlin",
username: "tarafanlin", username: "tarafanlin",
imageUrl: imageUrl: "https://avatars2.githubusercontent.com/u/35607644?s=400&u=48483bdf251e5293fefb30ae993bfa04d06601a6&v=4",
"https://slate.textile.io/ipfs/bafkreieuxq4itewoes3wnpfxw2dfat6oi6rsy2snix7tvtgv7d7bgre64q"
}, },
{ {
id: 6, id: 6,
name: "William Felker", name: "William Felker",
url: "https://slate.host/gndclouds/urban-gardens", url: "https://slate.host/gndclouds/urban-gardens",
username: "gndclouds", username: "gndclouds",
imageUrl: imageUrl: "https://bafkreih2b33oaftlflmsg6njtu7i54f2nwws5gfhhf5w4qaezcejs6gjte.ipfs.slate.textile.io/",
"https://bafkreih2b33oaftlflmsg6njtu7i54f2nwws5gfhhf5w4qaezcejs6gjte.ipfs.slate.textile.io/" },
}
]; ];
const SLATE_CONTRIBUTOR_TEAM = [ const SLATE_CONTRIBUTOR_TEAM = [
{ {
@ -299,92 +265,79 @@ const SLATE_CONTRIBUTOR_TEAM = [
name: "Pooja Shah", name: "Pooja Shah",
url: "https://github.com/pooja", url: "https://github.com/pooja",
username: "pooja", username: "pooja",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreier4xffhrpconlprzxvzslqsovykqet7xj6zhhptxgu4nm2qw5i3u",
"https://slate.textile.io/ipfs/bafkreier4xffhrpconlprzxvzslqsovykqet7xj6zhhptxgu4nm2qw5i3u"
}, },
{ {
id: 2, id: 2,
name: "Why", name: "Why",
url: "https://github.com/whyrusleeping", url: "https://github.com/whyrusleeping",
username: "whyrusleeping", username: "whyrusleeping",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreigvs53l22cuswtc4dtgndmc3aqns2unpc5xndnzx5gjdbw4yv6qhm",
"https://slate.textile.io/ipfs/bafkreigvs53l22cuswtc4dtgndmc3aqns2unpc5xndnzx5gjdbw4yv6qhm"
}, },
{ {
id: 4, id: 4,
name: "Aaron Stula", name: "Aaron Stula",
url: "https://github.com/asutula", url: "https://github.com/asutula",
username: "asutula", username: "asutula",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreig3vnxyqqsxnrs24zpbbuc6jh5wvdsa7w6fx5gvi4j3t7rhoelhlm",
"https://slate.textile.io/ipfs/bafkreig3vnxyqqsxnrs24zpbbuc6jh5wvdsa7w6fx5gvi4j3t7rhoelhlm"
}, },
{ {
id: 3, id: 3,
name: "Ignacio Hagopian", name: "Ignacio Hagopian",
url: "https://github.com/jsign", url: "https://github.com/jsign",
username: "jsign", username: "jsign",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreicktewpelagb3uvgd6psacr4kra66ii7254ghqflklek7taahni2m",
"https://slate.textile.io/ipfs/bafkreicktewpelagb3uvgd6psacr4kra66ii7254ghqflklek7taahni2m"
}, },
{ {
id: 5, id: 5,
name: "Sander Pick", name: "Sander Pick",
url: "https://github.com/sanderpick", url: "https://github.com/sanderpick",
username: "sanderpick", username: "sanderpick",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreihptnrkusu7qnsm4qure7noknmsrhftyrx7zy6aaj4e2cxmtcey6q",
"https://slate.textile.io/ipfs/bafkreihptnrkusu7qnsm4qure7noknmsrhftyrx7zy6aaj4e2cxmtcey6q"
}, },
{ {
id: 6, id: 6,
name: "Andrew Hill", name: "Andrew Hill",
url: "https://github.com/andrewxhill", url: "https://github.com/andrewxhill",
username: "andrewxhill", username: "andrewxhill",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreicfbr2qpmineh2ezi2kjfbshbpizkikectbdurfskczwatjkdfcoa",
"https://slate.textile.io/ipfs/bafkreicfbr2qpmineh2ezi2kjfbshbpizkikectbdurfskczwatjkdfcoa"
}, },
{ {
id: 7, id: 7,
name: "Akuoko Daniel Jnr", name: "Akuoko Daniel Jnr",
url: "https://github.com/akuokojnr", url: "https://github.com/akuokojnr",
username: "akuokojnr", username: "akuokojnr",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreiblpimmchcbvsv3xh5aimjzrjw6bmiz6yg2dtifssf2oencg5z54q",
"https://slate.textile.io/ipfs/bafkreiblpimmchcbvsv3xh5aimjzrjw6bmiz6yg2dtifssf2oencg5z54q"
}, },
{ {
id: 8, id: 8,
name: "Narative", name: "Narative",
url: "https://github.com/narative", url: "https://github.com/narative",
username: "Narative", username: "Narative",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreihdkapriwuzfh42zkhs3kwj5qki43dvyu6mq5j3rug3uf6i7egs6y",
"https://slate.textile.io/ipfs/bafkreihdkapriwuzfh42zkhs3kwj5qki43dvyu6mq5j3rug3uf6i7egs6y"
}, },
{ {
id: 9, id: 9,
name: "Colin S. McCaleb", name: "Colin S. McCaleb",
url: "https://github.com/uonai", url: "https://github.com/uonai",
username: "uonai", username: "uonai",
imageUrl: imageUrl: "https://slate.textile.io/ipfs/bafkreigbjyxbmc2cirha3g4y2rmlrntau2l2gjy4ft3y6ii3kyh4ifw5li",
"https://slate.textile.io/ipfs/bafkreigbjyxbmc2cirha3g4y2rmlrntau2l2gjy4ft3y6ii3kyh4ifw5li" },
}
]; ];
export const getServerSideProps = async context => { export const getServerSideProps = async (context) => {
return { return {
props: { ...context.query } props: { ...context.query },
}; };
}; };
const SlateTeamCards = props => { const SlateTeamCards = (props) => {
return ( return (
<div key={props.id} css={STYLES_CARD_WRAPPER}> <div key={props.id} css={STYLES_CARD_WRAPPER}>
<a href={props.url}> <a href={props.url}>
<System.HoverTile height={250} width={200} style={{ borderRadius: 4 }}> <System.HoverTile height={250} width={200} style={{ borderRadius: 4 }}>
<div css={STYLES_SLATE_CARD_EFFECTS}> <div css={STYLES_SLATE_CARD_EFFECTS}>
<img <img css={STYLES_IMG} alt={`Github Profile Photo for ${props.handle}`} src={props.preview} />
css={STYLES_IMG}
alt={`Github Profile Photo for ${props.handle}`}
src={props.preview}
/>
<div css={STYLES_CARD_TEXT}> <div css={STYLES_CARD_TEXT}>
<p css={STYLES_CARD_NAME}>{props.name}</p> <p css={STYLES_CARD_NAME}>{props.name}</p>
<p css={STYLES_CARD_GITHUB}>{`@${props.handle}`}</p> <p css={STYLES_CARD_GITHUB}>{`@${props.handle}`}</p>
@ -401,18 +354,16 @@ export default class CommunityPage extends React.Component {
super(props); super(props);
this.state = { this.state = {
issues: [] issues: [],
}; };
} }
async componentDidMount() { async componentDidMount() {
try { try {
const response = await fetch( const response = await fetch(`https://api.github.com/repos/filecoin-project/slate/issues?labels=For+the+public`);
`https://api.github.com/repos/filecoin-project/slate/issues?labels=For+the+public`
);
const issues = await response.json(); const issues = await response.json();
this.setState({ this.setState({
issues issues,
}); });
} catch (e) {} } catch (e) {}
} }
@ -427,32 +378,22 @@ export default class CommunityPage extends React.Component {
let count = 0; let count = 0;
return ( return (
<WebsitePrototypeWrapper <WebsitePrototypeWrapper title={title} description={description} url={url}>
title={title}
description={description}
url={url}
>
<WebsitePrototypeHeader /> <WebsitePrototypeHeader />
<div css={STYLES_ROOT}> <div css={STYLES_ROOT}>
<div css={STYLES_SECTION_HERO}> <div css={STYLES_SECTION_HERO}>
<div css={STYLES_TEXT_BLOCK}> <div css={STYLES_BLOCK}>
<img <img
css={STYLES_HEROIMG} css={STYLES_HEROIMG}
src="https://slate.textile.io/ipfs/bafybeigtl3tjyozxxkabdvfdhopkep62ux4grgritlslwusgww6gdmm5da" src="https://slate.textile.io/ipfs/bafybeigtl3tjyozxxkabdvfdhopkep62ux4grgritlslwusgww6gdmm5da"
alt="blocks evolving into different structures" alt="blocks evolving into different structures"
/> />
<h1 css={STYLES_H1}>Community</h1> <h1 css={STYLES_H1}>Community</h1>
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}> <h3 css={STYLES_H3}>
Slate is designed and built by a growing community of hackers, Slate is designed and built by a growing community of hackers, artists, and creatives on the web.
artists, and creatives on the web.
</h3> </h3>
<br />
<br />
<div> <div>
<button <button css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("https://filecoin.io/slack")}>
css={STYLES_BUTTON_PRIMARY}
onClick={() => window.open("https://filecoin.io/slack")}
>
Join our community Join our community
</button> </button>
</div> </div>
@ -460,96 +401,85 @@ export default class CommunityPage extends React.Component {
</div> </div>
<div css={STYLES_SECTION_WRAPPER}> <div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_TEXT_BLOCK}> <div css={STYLES_BLOCK}>
<h2 css={STYLES_H2}>Core Team</h2> <h2 css={STYLES_H2}>Core Team</h2>
</div> <div css={STYLES_CARD_GROUP}>
<div css={STYLES_CARD_GROUP}> {SLATE_CORE_TEAM.map((each) => (
{SLATE_CORE_TEAM.map(each => ( <SlateTeamCards
<SlateTeamCards key={each.name}
key={each.name} preview={each.imageUrl}
preview={each.imageUrl} url={each.url}
url={each.url} name={each.name}
name={each.name} username={each.username}
username={each.username} />
/> ))}
))} </div>
</div> </div>
</div> </div>
<div css={STYLES_SECTION_WRAPPER}> <div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_TEXT_BLOCK}> <div css={STYLES_BLOCK}>
<h2 css={STYLES_H2}>Contributors</h2> <h2 css={STYLES_H2}>Contributors</h2>
</div> <div css={STYLES_CARD_GROUP}>
<div css={STYLES_CARD_GROUP}> {SLATE_CONTRIBUTOR_TEAM.map((each) => (
{SLATE_CONTRIBUTOR_TEAM.map(each => ( <SlateTeamCards
<SlateTeamCards key={each.name}
key={each.name} preview={each.imageUrl}
preview={each.imageUrl} url={each.url}
url={each.imageUrl} name={each.name}
name={each.name} username={each.username}
username={each.username} />
/> ))}
))} </div>
</div> </div>
</div> </div>
<div css={STYLES_SECTION_WRAPPER}> <div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_TEXT_BLOCK}> <div css={STYLES_BLOCK}>
<h1 css={STYLES_H1}>Get involved</h1> <h1 css={STYLES_H1}>Get involved</h1>
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}> <h3 css={STYLES_H3}>
The Slate Project is the byproduct of a growing community of The Slate Project is the byproduct of a growing community of contributors from around the world. We’d
contributors from around the world. We’d love for you to join love for you to join us, get involved in the project and contribute.
us, get involved in the project and contribute.
</h3> </h3>
<div css={STYLES_SECTION_CHILD_SPLIT}> </div>
<h3 css={STYLES_H3}>Contribute</h3> </div>
<br /> <div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_BLOCK}>
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}> <h2 css={STYLES_H2}>Contribute</h2>
Find something you want to work on and file an issue. If you <h3 css={STYLES_H3}>
see something you want to fix or change, submit a pull Find something you want to work on and file an issue. If you see something you want to fix or change,
request. submit a pull request.
</h3> </h3>
<br /> <IssuesList issues={this.state.issues} />
<br /> <br />
<div>
<button <button
css={STYLES_BUTTON_PRIMARY} css={STYLES_BUTTON_PRIMARY}
onClick={() => onClick={() => window.open("https://github.com/filecoin-project/slate")}
window.open("https://github.com/filecoin-project/slate")
}
> >
Github View Github repo
</button> </button>
</div> </div>
</div>
<IssuesList issues={this.state.issues} /> </div>
<div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_SECTION_CHILD_FULL}> <div css={STYLES_BLOCK}>
<h3 css={STYLES_H3}>Design System</h3> <h2 css={STYLES_H2}>Integrate</h2>
<div css={STYLES_SECTION_CHILD_SPLIT}> <h3 css={STYLES_H3}>
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}> Explore our API and SDK and build on top of Slate. Check out our open source design system for your
Check out our open source design system for your projects. projects.
</h3> </h3>
<br /> <br />
<br /> <CodeBlock>npm install --save slate-react-system</CodeBlock>
<br />
<CodeTerminal /> <div>
<br /> <button css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("http://localhost:1337/_/system")}>
<br /> Use Slate design system
<button </button>
css={STYLES_BUTTON_PRIMARY}
style={{ marginRight: 24 }}
onClick={() =>
window.open("http://localhost:1337/_/system")
}
>
Design system
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<WebsitePrototypeFooter /> <WebsitePrototypeFooter />
</WebsitePrototypeWrapper> </WebsitePrototypeWrapper>
); );

1
pages/_/marketing-candidate/download.js
View File

@ -53,6 +53,7 @@ const STYLES_H3 = css`
letter-spacing: -0.014rem; letter-spacing: -0.014rem;
padding: 0 0 8px 0; padding: 0 0 8px 0;
color: ${Constants.system.slate}; color: ${Constants.system.slate};
opacity: 0.7;
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl1}; font-size: ${Constants.typescale.lvl1};