From 20479ccad29fdf0f267dc6bd48ac1f455d1a48b8 Mon Sep 17 00:00:00 2001 From: tarafanlin <35607644+tarafanlin@users.noreply.github.com> Date: Thu, 3 Sep 2020 22:57:35 -0700 Subject: [PATCH] landing: styling tweaks --- common/logo.js | 8 +- components/core/NewWebsitePrototypeFooter.js | 41 ++-- components/core/NewWebsitePrototypeHeader.js | 41 ++-- pages/_/test_mark/tara-test-new-index.js | 189 ++++++++++--------- 4 files changed, 151 insertions(+), 128 deletions(-) diff --git a/common/logo.js b/common/logo.js index fecfbd2c..38276263 100644 --- a/common/logo.js +++ b/common/logo.js @@ -1,10 +1,5 @@ export const Logo = (props) => ( - + @@ -15,3 +10,4 @@ export const Logo = (props) => ( ); +export default Logo; diff --git a/components/core/NewWebsitePrototypeFooter.js b/components/core/NewWebsitePrototypeFooter.js index 1e300a98..a9871565 100644 --- a/components/core/NewWebsitePrototypeFooter.js +++ b/components/core/NewWebsitePrototypeFooter.js @@ -2,7 +2,6 @@ import * as React from "react"; import * as Constants from "~/common/constants"; import { css } from "@emotion/react"; -import { motion } from "framer-motion"; const STYLES_CONTAINER = css` font-family: ${Constants.font.text}; @@ -26,7 +25,7 @@ const STYLES_CONTAINER = css` `; const STYLES_LINK = css` - color: ${Constants.system.moonstone}; + color: ${Constants.system.darkGray}; text-decoration: none; transition: 200ms ease color; line-height: 1.5; @@ -39,26 +38,25 @@ const STYLES_LINK = css` const STYLES_LEFT = css` flex-shrink: 0; font-size: 1.563rem; - color: ${Constants.system.white}; + color: ${Constants.system.c}; `; const STYLES_SLATE = css` flex-shrink: 0; padding: 0px 0px 8px 0px; font-size: 1.563rem; - color: ${Constants.system.white}; + color: ${Constants.system.gray}; `; const STYLES_TRADEMARK = css` - width: 80px; - margin: -8px 16px 16px 0px; + margin: 0px 16px 16px 0px; `; const STYLES_CREDIT = css` flex-shrink: 0; padding: 8px 0px 8px 0px; font-size: 1rem; - color: ${Constants.system.white}; + color: ${Constants.system.gray}; line-height: 1.5; `; @@ -81,11 +79,14 @@ const STYLES_RIGHT = css` } `; -export default (props) => { +export const NewWebsitePrototypeFooter = (props) => { return (
- +
@@ -94,11 +95,11 @@ export default (props) => {
Powered by{" "} - + Textile {" "} and{" "} - + Filecoin
@@ -111,11 +112,11 @@ export default (props) => {

Reach out


- + Twitter
- + Slack
@@ -124,15 +125,19 @@ export default (props) => {

Resources


- - Github + + Design system
- + + View source + +
+ Community Guidelines
- + Privacy
@@ -140,3 +145,5 @@ export default (props) => {
); }; + +export default NewWebsitePrototypeFooter; diff --git a/components/core/NewWebsitePrototypeHeader.js b/components/core/NewWebsitePrototypeHeader.js index 62eccd2a..915ac5f5 100644 --- a/components/core/NewWebsitePrototypeHeader.js +++ b/components/core/NewWebsitePrototypeHeader.js @@ -2,11 +2,12 @@ import React, { useState } from "react"; import * as Constants from "~/common/constants"; import { css } from "@emotion/react"; +import { Logo } from "~/common/logo.js"; const STYLES_CONTAINER = css` font-family: ${Constants.font.text}; font-size: 1rem; - width: 100%; + width: 100vw; display: flex; justify-content: space-between; padding: 16px 88px; @@ -40,6 +41,7 @@ const STYLES_LINK = css` const STYLES_LEFT = css` flex-shrink: 0; padding: 12px 0; + height: 24px; `; const STYLES_RIGHT = css` @@ -54,7 +56,6 @@ const STYLES_RIGHT = css` } `; -// Tara: [WIP] mobile burger menu const STYLES_BURGER = css` display: none; @media (max-width: ${Constants.sizes.mobile}px) { @@ -156,8 +157,9 @@ const STYLES_BURGER_BUN2_OPEN = css` const STYLES_MENU = css` display: none; + visibility: 0; + opacity: 0; @media (max-width: ${Constants.sizes.mobile}px) { - display: flex; flex-direction: column; justify-content: center; background: ${Constants.system.pitchBlack}; @@ -170,6 +172,7 @@ const STYLES_MENU = css` right: 0; transition: transform 0.3s ease-in-out; transform: translateX(100%); + transition-property: transform, opacity, visibility; a { padding: 16px 0; @@ -177,7 +180,7 @@ const STYLES_MENU = css` text-decoration: none; transition: color 0.3s linear; - font-size: 2.441em; + font-size: 1.563rem; text-align: left; &:hover { @@ -188,9 +191,10 @@ const STYLES_MENU = css` `; const STYLES_MENU_OPEN = css` - display: none; + opacity: 1; + visibility: visible; + display: flex; @media (max-width: ${Constants.sizes.mobile}px) { - display: flex; flex-direction: column; justify-content: center; background: ${Constants.system.pitchBlack}; @@ -203,6 +207,7 @@ const STYLES_MENU_OPEN = css` right: 0; transition: transform 0.3s ease-in-out; transform: translateX(0); + transition-property: transform, opacity, visibility; a { padding: 16px 0; @@ -210,7 +215,7 @@ const STYLES_MENU_OPEN = css` text-decoration: none; transition: color 0.3s linear; - font-size: 2.441em; + font-size: 1.563rem; text-align: left; &:hover { @@ -220,27 +225,21 @@ const STYLES_MENU_OPEN = css` } `; -export default (props) => { +export const NewWebsitePrototypeHeader = (props) => { const [open, setOpen] = useState(false); return (
- - Slate {Constants.values.version} + +
- - View Source - - - Design System - - Community + Get involved - Sign Up + Sign up Download @@ -253,9 +252,7 @@ export default (props) => {
- View source - Design system - Community + Get involved Sign up Download
@@ -263,3 +260,5 @@ export default (props) => {
); }; + +export default NewWebsitePrototypeHeader; diff --git a/pages/_/test_mark/tara-test-new-index.js b/pages/_/test_mark/tara-test-new-index.js index 3d67c744..ea4b4fe3 100644 --- a/pages/_/test_mark/tara-test-new-index.js +++ b/pages/_/test_mark/tara-test-new-index.js @@ -1,14 +1,13 @@ import * as React from "react"; import * as Constants from "~/common/constants"; import * as Actions from "~/common/actions"; -import * as System from "~/components/system"; import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader"; import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter"; import TextLoop from "react-text-loop"; -import { motion, useViewportScroll, useTransform } from "framer-motion"; +// import { motion, useViewportScroll, useTransform } from "framer-motion"; import { css, keyframes } from "@emotion/react"; const STYLES_ROOT = css` @@ -17,20 +16,23 @@ const STYLES_ROOT = css` justify-content: space-between; h1 { font-size: 3.815rem; + line-height: 1.25; padding: 0px 0px 32px 0px; width: 100%; - color: ${Constants.system.moonstone}; + color: ${Constants.system.darkGray}; } h2 { font-size: 2.441em; + line-height: 1.25; padding: 0px 0px 32px 0px; width: 100%; - color: ${Constants.system.moonstone}; + color: ${Constants.system.darkGray}; } h3 { font-size: 1.563em; - padding: 0px 0px 32px 0px; - color: ${Constants.system.moonstone}; + line-height: 1.5; + padding: 0px 0px 16px 0px; + color: ${Constants.system.darkGray}; } p { font-size: 1rem; @@ -59,7 +61,7 @@ const STYLES_ROOT = css` h1 { font-size: 1.953rem; padding: 0px 0px 16px 0px; - line-height: 1.5; + line-height: 1.25; } h2 { font-size: 1.25rem; @@ -93,9 +95,9 @@ const STYLES_SECTION_HERO = css` flex-direction: column; justify-content: center; margin: -88px 0px 0px 0px; - background: ${Constants.system.pitchBlack}; + background: ${Constants.system.black}; @media (max-width: ${Constants.sizes.mobile}px) { - padding: 40vh 24px 0 24px; + padding: 40vh 24px 48px 24px; display: block; } `; @@ -118,7 +120,7 @@ const STYLES_SECTION_SLATE = css` flex-direction: column; padding: 88px; width: 100vw; - background: ${Constants.system.pitchBlack}; + background: ${Constants.system.slate}; @media (max-width: ${Constants.sizes.mobile}px) { padding: 64px 24px; @@ -126,13 +128,13 @@ const STYLES_SECTION_SLATE = css` } `; -const STYLES_SECTION_WALL = css` +const STYLES_SECTION_PITCHBLACK = css` display: flex; flex-direction: column; justify-content: space-between; padding: 88px; width: 100vw; - background: ${Constants.system.wall}; + background: ${Constants.system.pitchBlack}; @media (max-width: ${Constants.sizes.mobile}px) { padding: 64px 24px; @@ -149,7 +151,7 @@ const STYLES_IMAGE = css` box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1); } video { - margin: 32px auto; + margin: 32px auto 88px auto; border-radius: 8px; width: 100%; height: auto; @@ -180,7 +182,6 @@ const STYLES_IMAGE_SMALL = css` width: 32vw; height: auto; display: block; - box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1); } @media (max-width: ${Constants.sizes.mobile}px) { img { @@ -188,7 +189,6 @@ const STYLES_IMAGE_SMALL = css` border-radius: 4px; width: 70%; height: auto; - box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1); } } `; @@ -197,16 +197,52 @@ const STYLES_MEDIA_LEFT = css` img { margin: 64px 0 0 -240px; width: 80vw; - border-radius: 8px; - box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1); + border-radius: 4px; + box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.2); + } + video { + margin: 64px 0 0 -240px; + border-radius: 4px; + width: 80vw; + box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.2); } @media (max-width: ${Constants.sizes.mobile}px) { img { margin: 24px 0 0 -80px; width: 80vw; - border-radius: 8px; - box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1); + border-radius: 4px; + box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.2); + } + } +`; + +const STYLES_MEDIA_LEFT_OVERLAP = css` + img { + margin: -320px 0 0 -48px; + width: 60vw; + } + + @media (max-width: ${Constants.sizes.mobile}px) { + img { + margin: 24px 0 0 -80px; + width: 100vw; + } + } +`; + +const STYLES_MEDIA_RIGHT_OVERLAP = css` + img { + float: right; + margin-right: 240px; + margin-top: -80px; + width: 24vw; + } + + @media (max-width: ${Constants.sizes.mobile}px) { + img { + margin: 24px 0 0 80px; + width: 50vw; } } `; @@ -217,10 +253,12 @@ const STYLES_TEXT_BLOCK = css` justify-content: space-between; width: 56vw; align-self: center; + z-index: 10; @media (max-width: ${Constants.sizes.mobile}px) { width: 88%; right: 24px; + z-index: 10; } `; @@ -381,15 +419,15 @@ const STYLES_SLATE_CARD_TITLE = css` `; const STYLES_SLATE_CARD_CTA_TITLE = css` - font-size: 2.441em; + font-size: 3.815rem; font-weight: 700; text-align: left; width: 100%; padding: 12px; - + color: ${Constants.system.moonstone}; @media (max-width: ${Constants.sizes.mobile}px) { padding: 0px; - font-size: 1rem; + font-size: 1.953rem; } `; @@ -419,7 +457,7 @@ const STYLES_SLATE_CARD_CTA_PARAGRAPH = css` text-align: left; @media (max-width: ${Constants.sizes.mobile}px) { - font-size: 0.78rem; + font-size: 1rem; } `; @@ -429,11 +467,11 @@ export const getServerSideProps = async (context) => { }; }; -export const MyComponent = () => ; -export const MyMotion = () => { - const { scrollYProgress } = useViewportScroll(); - return ; -}; +// export const MyComponent = () => ; +// export const MyMotion = () => { +// const { scrollYProgress } = useViewportScroll(); +// return ; +// }; export default class IndexPage extends React.Component { async componentDidMount() { @@ -443,20 +481,24 @@ export default class IndexPage extends React.Component { render() { const title = `Slate`; - const description = "The place for all of your assets. Powered by Textile and Filecoin."; + const description = "Welcome to the future of file sharing. Powered by Textile, Filecoin, IPFS."; const url = "https://slate.host"; + const image = "https://bafybeifedze7dm4zesvgekukziw23gbtfodxiz63nxgybbyo2koxeybmla.ipfs.slate.textile.io/"; return ( - +

- Welcome to + A file storage network
- the future of file sharing + + for you, your files,
+ and your friends +

-

Powered by Textile, Filecoin, IPFS

+
window.open("/_")}> Use Slate @@ -464,10 +506,11 @@ export default class IndexPage extends React.Component {

+
- {/*
+

Slate{" "} @@ -479,37 +522,17 @@ export default class IndexPage extends React.Component {
organize it any way you like,
and share it with the world securely. -

-
-
window.open("/_")}> - Use Slate -
-
-
*/} -
-
-
-

- Store, organize, share
-

+
+ +

Powered by

- Slate{" "} - - is a fully open-source file sharing network designed for research and collaboration. + + Textile
+ Filecoin
+ IPFS -
-
- Store your data, -
- organize it any way you like,
- and share it with the world securely.

-
-
window.open("/_")}> - Use Slate -
-
@@ -520,16 +543,17 @@ export default class IndexPage extends React.Component { for your{" "} - image - video - text - URL + images + videos + audios + ePUBs + PDFs

Easily upload any kind of file to your storage system.
- Organize them any way you like with Slates. + Organize them any way you like with slates.

@@ -545,11 +569,11 @@ export default class IndexPage extends React.Component {

The Slate Chrome extension lets you seamlessly upload files to your - Slates from anywhere on the web. + slates from anywhere on the web.

- +
@@ -559,7 +583,7 @@ export default class IndexPage extends React.Component { Organize and publish

- Modular interface for your files, giving you complete flexibility. + A modular interface for your files, giving you complete flexibility.


@@ -568,7 +592,7 @@ export default class IndexPage extends React.Component {

- Create moodboard + Create moodboards

@@ -592,7 +616,7 @@ export default class IndexPage extends React.Component {

- Share presentation + Share presentations

@@ -607,12 +631,12 @@ export default class IndexPage extends React.Component {

A file sharing network built on top of a storage system making it - possible to connect. + possible to connect with other people on the Filecoin network.

-
- +
+
@@ -623,7 +647,7 @@ export default class IndexPage extends React.Component { trust, privacy, and security

- Slate is built on Filecoin and IPFS — technologies built for + Slate is built on Filecoin and IPFS — technologies built around ownership and transparency for the future of the web.

@@ -633,24 +657,21 @@ export default class IndexPage extends React.Component {
-
+
-
-

- Join us
- in the open, secure network -

-