From 548817641e313f381ebccf771ccddf9dd916acd6 Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Mon, 4 May 2020 15:13:08 +0900 Subject: [PATCH 01/31] header --- src/components/Footer.tsx | 100 ++++++++++++++++++++++---- src/components/header/SiteNav.tsx | 92 +++++++++++------------- src/components/header/SiteNavLogo.tsx | 9 ++- src/components/icons/facebook.tsx | 6 +- src/components/icons/github.tsx | 14 +++- src/components/icons/help.tsx | 12 +++- src/components/icons/medium.tsx | 10 ++- src/components/icons/rss.tsx | 12 ++++ src/components/icons/twitter.tsx | 6 +- src/content/img/logo.svg | 16 +++++ src/pages/about.tsx | 9 +-- src/pages/index.tsx | 58 +++++++-------- src/styles/colors.ts | 2 + src/styles/shared.ts | 10 +-- src/website-config.ts | 2 + 15 files changed, 241 insertions(+), 117 deletions(-) create mode 100644 src/components/icons/rss.tsx create mode 100644 src/content/img/logo.svg diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 809bd4c..b5132f8 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -8,6 +8,13 @@ import { colors } from '../styles/colors'; import { outer, inner } from '../styles/shared'; import config from '../website-config'; +import { SocialLink } from './../styles/shared'; +import Facebook from './icons/facebook'; +import Twitter from './icons/twitter'; +import Medium from './icons/medium'; +import GitHub from './icons/github'; +import RSS from './icons/rss'; + import t from '../content/i18n'; const SiteFooter = css` @@ -15,7 +22,7 @@ const SiteFooter = css` padding-top: 20px; padding-bottom: 60px; color: #fff; - background: ${setLightness('0.0015', colors.darkgrey)}; + background: ${colors.backgroundgray}; `; const SiteFooterContent = css` @@ -23,10 +30,10 @@ const SiteFooterContent = css` flex-wrap: wrap; justify-content: space-between; align-items: center; - color: rgba(255, 255, 255, 0.7); + color: #474747; font-size: 1.3rem; a { - color: rgba(255, 255, 255, 0.7); + color: #474747; } a:hover { color: rgba(255, 255, 255, 1); @@ -67,6 +74,15 @@ const SiteFooterNav = styled.nav` } `; +const SocialLinks = styled.div` + flex-shrink: 0; + display: flex; + align-items: center; + a:last-of-type { + padding-right: 20px; + } +`; + const Footer: React.FunctionComponent = () => { return ( + ); +}; + +export default Footer; + +/* {config.facebook && ( Facebook @@ -95,12 +179,4 @@ const Footer: React.FunctionComponent = () => { GitHub )} - - RSS - - - - ); -}; - -export default Footer; +*/ diff --git a/src/components/header/SiteNav.tsx b/src/components/header/SiteNav.tsx index 3ca13c0..c028d96 100644 --- a/src/components/header/SiteNav.tsx +++ b/src/components/header/SiteNav.tsx @@ -3,18 +3,10 @@ import { Link } from 'gatsby'; import * as React from 'react'; import styled from '@emotion/styled'; import { css } from 'emotion'; +import { SiteHeader, outer, inner } from '../../styles/shared'; -import { SocialLink } from '../../styles/shared'; -import config from '../../website-config'; import SubscribeModal from '../subsribe/SubscribeOverlay'; import SiteNavLogo from './SiteNavLogo'; -import LanguageToggle from '../LanguangeToggle'; - -import Facebook from '../icons/facebook'; -import Twitter from '../icons/twitter'; -import Medium from '../icons/medium'; -import GitHub from '../icons/github'; - import t from '../../content/i18n'; const HomeNavRaise = css` @@ -31,7 +23,7 @@ const SiteNavStyles = css` justify-content: space-between; align-items: flex-start; overflow-y: hidden; - height: 40px; + height: 30px; font-size: 1.2rem; `; @@ -70,7 +62,7 @@ const NavStyles = css` li a { display: block; margin: 0; - padding: 10px 12px; + padding: 0 12px; color: #fff; opacity: 0.8; } @@ -85,22 +77,13 @@ const SiteNavRight = styled.div` flex-shrink: 0; display: flex; align-items: center; - height: 40px; + height: 24px; @media (max-width: 700px) { display: none; } `; -const SocialLinks = styled.div` - flex-shrink: 0; - display: flex; - align-items: center; - a:last-of-type { - padding-right: 20px; - } -`; - const SubscribeButton = styled.a` display: block; padding: 4px 10px; @@ -146,29 +129,40 @@ class SiteNav extends React.Component { const linkPrefix = this.props.langKey === 'en' ? '' : this.props.langKey; console.log(this.props); return ( - - ); - } -} - -export default SiteNav; +*/ diff --git a/src/components/header/SiteNavLogo.tsx b/src/components/header/SiteNavLogo.tsx index 4185ae1..b00d6c3 100644 --- a/src/components/header/SiteNavLogo.tsx +++ b/src/components/header/SiteNavLogo.tsx @@ -1,7 +1,7 @@ import { graphql, Link, StaticQuery } from 'gatsby'; import * as React from 'react'; import { css } from 'emotion'; -import logo from '../../content/img/xanthouslogo.svg'; +import logo from '../../content/img/logo.svg'; import config from '../../website-config'; @@ -22,8 +22,11 @@ const SiteNavLogoStyles = css` img { display: block; - width: auto; - height: 36px; + position: absolute; + width: 100px; + height: 18.8px; + left: 0px; + top: 2px; } `; diff --git a/src/components/icons/facebook.tsx b/src/components/icons/facebook.tsx index 6e26671..740c2e0 100644 --- a/src/components/icons/facebook.tsx +++ b/src/components/icons/facebook.tsx @@ -2,7 +2,11 @@ import * as React from 'react'; const Facebook: React.FunctionComponent = () => ( - + ); diff --git a/src/components/icons/github.tsx b/src/components/icons/github.tsx index f8a5a12..8b31e43 100644 --- a/src/components/icons/github.tsx +++ b/src/components/icons/github.tsx @@ -2,8 +2,18 @@ import * as React from 'react'; const GitHub: React.FunctionComponent = () => ( - - + + ); export default GitHub; diff --git a/src/components/icons/help.tsx b/src/components/icons/help.tsx index c92ef78..9d43037 100644 --- a/src/components/icons/help.tsx +++ b/src/components/icons/help.tsx @@ -2,6 +2,16 @@ import * as React from 'react'; const Help: React.FunctionComponent = () => ( - + + + + + ); export default Help; diff --git a/src/components/icons/medium.tsx b/src/components/icons/medium.tsx index 0bcd35e..8ed8216 100644 --- a/src/components/icons/medium.tsx +++ b/src/components/icons/medium.tsx @@ -2,9 +2,13 @@ import * as React from 'react'; const Medium: React.FunctionComponent = () => ( - - + + ); -export default Medium; \ No newline at end of file +export default Medium; diff --git a/src/components/icons/rss.tsx b/src/components/icons/rss.tsx new file mode 100644 index 0000000..9c4fa0d --- /dev/null +++ b/src/components/icons/rss.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +const RSS: React.FunctionComponent = () => ( + + + +); + +export default RSS; diff --git a/src/components/icons/twitter.tsx b/src/components/icons/twitter.tsx index 72885c4..208bd64 100644 --- a/src/components/icons/twitter.tsx +++ b/src/components/icons/twitter.tsx @@ -2,7 +2,11 @@ import * as React from 'react'; const Twitter: React.FunctionComponent = () => ( - + ); diff --git a/src/content/img/logo.svg b/src/content/img/logo.svg new file mode 100644 index 0000000..932cf28 --- /dev/null +++ b/src/content/img/logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/pages/about.tsx b/src/pages/about.tsx index d91365f..15e80ee 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -1,7 +1,7 @@ import IndexLayout from '../layouts'; import Wrapper from '../components/Wrapper'; import SiteNav from '../components/header/SiteNav'; -import { SiteHeader, outer, inner, SiteMain, AuthorProfileImage } from '../styles/shared'; +import { outer, SiteMain, AuthorProfileImage } from '../styles/shared'; import * as React from 'react'; import { css } from 'emotion'; import t from '../content/i18n'; @@ -186,11 +186,8 @@ const About: React.FunctionComponent = props => { {currentData.title} Xanthous Tech -
-
- -
- + +
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e6b012d..d53da04 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,6 @@ import { graphql } from 'gatsby'; import * as React from 'react'; -import { css } from 'emotion' +import { css } from 'emotion'; import Helmet from 'react-helmet'; import MessengerCustomerChat from 'react-messenger-customer-chat'; @@ -79,7 +79,7 @@ export interface IndexProps { pageContext: { langKey: string; slug: string; - } + }; data: { logo: { childImageSharp: { @@ -122,7 +122,7 @@ export interface IndexProps { const IndexPage: React.FunctionComponent = props => { const width = props.data.header.childImageSharp.fluid.sizes.split(', ')[1].split('px')[0]; const height = String(Number(width) / props.data.header.childImageSharp.fluid.aspectRatio); - console.log(props) + console.log(props); return ( @@ -134,7 +134,10 @@ const IndexPage: React.FunctionComponent = props => { - + {config.facebook && } @@ -144,25 +147,29 @@ const IndexPage: React.FunctionComponent = props => { name="twitter:image" content={config.siteUrl + props.data.header.childImageSharp.fluid.src} /> - {config.twitter && } + {config.twitter && ( + + )} - + -
- -
+ -
+
-
+
@@ -183,7 +190,7 @@ const IndexPage: React.FunctionComponent = props => { @@ -225,16 +232,11 @@ export const pageQuery = graphql` } } posts: allMdx( - limit: 4, + limit: 4 sort: { fields: [frontmatter___date], order: DESC } filter: { - fields: { - langKey: {eq: "en"} - } - frontmatter: { - layout: {eq: "post"} - draft: { ne: true } - } + fields: { langKey: { eq: "en" } } + frontmatter: { layout: { eq: "post" }, draft: { ne: true } } } ) { edges { @@ -276,17 +278,11 @@ export const pageQuery = graphql` } } projects: allMdx( - limit: 4, + limit: 4 sort: { fields: [frontmatter___date], order: DESC } filter: { - fields: { - langKey: {eq: "en"} - } - frontmatter: { - layout: {eq: "project"} - highlighted: { eq: true } - draft: { ne: true } - } + fields: { langKey: { eq: "en" } } + frontmatter: { layout: { eq: "project" }, highlighted: { eq: true }, draft: { ne: true } } } ) { edges { diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 28ae5dc..c969ab0 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -11,4 +11,6 @@ export const colors = { whitegrey: '#e5eff5', pink: '#fa3a57', brown: '#a3821a', + gray: '#272727', + backgroundgray: '#F8F8F8', }; diff --git a/src/styles/shared.ts b/src/styles/shared.ts index bab273d..63a65ba 100644 --- a/src/styles/shared.ts +++ b/src/styles/shared.ts @@ -1,5 +1,5 @@ import { css } from 'emotion'; -import styled from '@emotion/styled' +import styled from '@emotion/styled'; import { colors } from './colors'; import { darken, lighten } from 'polished'; @@ -59,7 +59,7 @@ export const SocialLink = css` align-items: center; margin: 0; padding: 10px; - color: #fff; + color: #474747; opacity: 0.8; :hover { @@ -74,11 +74,11 @@ export const SocialLink = css` export const SiteHeader = css` position: relative; - padding-top: 12px; - padding-bottom: 12px; + padding: 12px 72px; color: #fff; + height: 50px; /* background: color(var(--darkgrey) l(-5%)) no-repeat center center; */ - background: ${darken('0.05', colors.midgrey)} no-repeat center center; + background: ${darken('0.05', colors.gray)} no-repeat center center; background-size: cover; `; diff --git a/src/website-config.ts b/src/website-config.ts index e235502..3284ab0 100644 --- a/src/website-config.ts +++ b/src/website-config.ts @@ -16,6 +16,7 @@ export interface WebsiteConfig { twitter?: string; medium?: string; github?: string; + rss?: string; /** * hide or show all email subscribe boxes */ @@ -41,6 +42,7 @@ const config: WebsiteConfig = { twitter: 'https://twitter.com/XanthousTech', medium: 'https://medium.com/xanthous', github: 'https://github.com/xanthous-tech', + rss: '/rss.xml', showSubscribe: true, mailchimpAction: 'https://twitter.us19.list-manage.com/subscribe/post?u=a89b6987ac248c81b0b7f3a0f&id=7d777b7d75', From 088635465cbaa359ac1abf9d1de6dec18257beef Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Mon, 4 May 2020 16:18:20 +0900 Subject: [PATCH 02/31] header position, footer social links --- src/components/Footer.tsx | 8 +- src/components/header/SiteNav.tsx | 8 +- src/components/icons/facebook.tsx | 11 ++- src/components/icons/github.tsx | 13 +-- src/components/icons/medium.tsx | 11 ++- src/components/icons/twitter.tsx | 18 ++-- src/pages/blog.tsx | 56 ++++++------- src/pages/blog.zh.tsx | 55 ++++++------ src/pages/contact.tsx | 11 +-- src/pages/contact.zh.tsx | 7 +- src/pages/index.zh.tsx | 63 ++++++-------- src/pages/projects.tsx | 50 ++++++----- src/styles/shared.ts | 4 +- src/templates/author.tsx | 135 ++++++++++++++---------------- src/templates/post.tsx | 7 +- src/templates/project.tsx | 6 +- src/templates/tags.tsx | 45 +++++----- src/templates/tech.tsx | 108 ++++++++++++------------ 18 files changed, 287 insertions(+), 329 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index b5132f8..8e4b91f 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -19,8 +19,7 @@ import t from '../content/i18n'; const SiteFooter = css` position: relative; - padding-top: 20px; - padding-bottom: 60px; + padding: 43px 95px; color: #fff; background: ${colors.backgroundgray}; `; @@ -78,9 +77,6 @@ const SocialLinks = styled.div` flex-shrink: 0; display: flex; align-items: center; - a:last-of-type { - padding-right: 20px; - } `; const Footer: React.FunctionComponent = () => { @@ -148,8 +144,6 @@ const Footer: React.FunctionComponent = () => { )} - - RSS
diff --git a/src/components/header/SiteNav.tsx b/src/components/header/SiteNav.tsx index c028d96..d0ea672 100644 --- a/src/components/header/SiteNav.tsx +++ b/src/components/header/SiteNav.tsx @@ -12,9 +12,9 @@ import t from '../../content/i18n'; const HomeNavRaise = css` @media (min-width: 900px) { position: relative; - top: -70px; } `; +// top: -70px; const SiteNavStyles = css` position: relative; @@ -29,12 +29,12 @@ const SiteNavStyles = css` const SiteNavLeft = styled.div` display: flex; + z-index: 900; align-items: center; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-right: 10px; - padding-bottom: 80px; letter-spacing: 0.4px; white-space: nowrap; @@ -62,7 +62,7 @@ const NavStyles = css` li a { display: block; margin: 0; - padding: 0 12px; + padding-left: 40px; color: #fff; opacity: 0.8; } @@ -131,7 +131,7 @@ class SiteNav extends React.Component { return (
-
*/}
- {(!props.data.allMdx) ? null : props.data.allMdx.edges.map(post => { - return ; - })} + {!props.data.allMdx + ? null + : props.data.allMdx.edges.map(post => { + return ; + })}
@@ -194,13 +197,8 @@ export const pageQuery = graphql` limit: 1000 sort: { fields: [frontmatter___date], order: DESC } filter: { - fields: { - langKey: { eq: "en" } - }, - frontmatter: { - layout: { eq: "post" } - draft: { ne: true } - } + fields: { langKey: { eq: "en" } } + frontmatter: { layout: { eq: "post" }, draft: { ne: true } } } ) { edges { diff --git a/src/pages/blog.zh.tsx b/src/pages/blog.zh.tsx index d3c547f..c6d27ea 100644 --- a/src/pages/blog.zh.tsx +++ b/src/pages/blog.zh.tsx @@ -127,36 +127,38 @@ const IndexPage: React.FunctionComponent = props => { -
-
- - - {props.data.logo ? ( - {config.title} - ) : ( - config.title - )} - - {config.description} - - -
-
+
*/} + + + {props.data.logo ? ( + {config.title} + ) : ( + config.title + )} + + {config.description} + + + {/*
+ */}
- {(!props.data.allMdx) ? null : props.data.allMdx.edges.map(post => { - return ; - })} + {!props.data.allMdx + ? null + : props.data.allMdx.edges.map(post => { + return ; + })}
@@ -194,13 +196,8 @@ export const pageQuery = graphql` limit: 1000 sort: { fields: [frontmatter___date], order: DESC } filter: { - fields: { - langKey: { eq: "zh" } - }, - frontmatter: { - layout: { eq: "post" } - draft: { ne: true } - } + fields: { langKey: { eq: "zh" } } + frontmatter: { layout: { eq: "post" }, draft: { ne: true } } } ) { edges { diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx index f686053..ae71062 100644 --- a/src/pages/contact.tsx +++ b/src/pages/contact.tsx @@ -17,18 +17,13 @@ const PageTemplate = css` } `; - const Contact: React.FunctionComponent = () => ( Contact Us - Xanthous Tech -
-
- -
-
+
@@ -38,8 +33,8 @@ const Contact: React.FunctionComponent = () => (

- If you have an idea, or need help to solve challenging technical problems, please drop us a line - at hi@x-tech.io! + If you have an idea, or need help to solve challenging technical problems, please + drop us a line at hi@x-tech.io!

diff --git a/src/pages/contact.zh.tsx b/src/pages/contact.zh.tsx index 6d4e891..154de74 100644 --- a/src/pages/contact.zh.tsx +++ b/src/pages/contact.zh.tsx @@ -17,18 +17,13 @@ const PageTemplate = css` } `; - const Contact: React.FunctionComponent = () => ( 联系我们 - Xanthous Tech -
-
- -
-
+
diff --git a/src/pages/index.zh.tsx b/src/pages/index.zh.tsx index 30cca8d..df20b83 100644 --- a/src/pages/index.zh.tsx +++ b/src/pages/index.zh.tsx @@ -1,6 +1,6 @@ import { graphql } from 'gatsby'; import * as React from 'react'; -import { css } from 'emotion' +import { css } from 'emotion'; import Helmet from 'react-helmet'; import Footer from '../components/Footer'; @@ -11,14 +11,7 @@ import Faq from '../components/Faq'; import Introduce from '../components/Introduce/Introduce'; import IndexLayout from '../layouts'; import config from '../website-config'; -import { - inner, - outer, - PostFeed, - PostFeedRaise, - SiteHeader, - SiteMain, -} from '../styles/shared'; +import { inner, outer, PostFeed, PostFeedRaise, SiteHeader, SiteMain } from '../styles/shared'; import Testimonial from '../components/Testimonial'; // tslint:disable-next-line:no-import-side-effect @@ -74,7 +67,7 @@ const HomePosts = css` const IndexPage: React.FunctionComponent = props => { const width = props.data.header.childImageSharp.fluid.sizes.split(', ')[1].split('px')[0]; const height = String(Number(width) / props.data.header.childImageSharp.fluid.aspectRatio); - console.log(props) + console.log(props); return ( @@ -86,7 +79,10 @@ const IndexPage: React.FunctionComponent = props => { - + {config.facebook && } @@ -96,24 +92,28 @@ const IndexPage: React.FunctionComponent = props => { name="twitter:image" content={config.siteUrl + props.data.header.childImageSharp.fluid.src} /> - {config.twitter && } + {config.twitter && ( + + )} - + -
- -
+ -
+
-
+
@@ -169,16 +169,11 @@ export const pageQuery = graphql` } } posts: allMdx( - limit: 4, + limit: 4 sort: { fields: [frontmatter___date], order: DESC } filter: { - fields: { - langKey: {eq: "zh"} - } - frontmatter: { - layout: {eq: "post"} - draft: { ne: true } - } + fields: { langKey: { eq: "zh" } } + frontmatter: { layout: { eq: "post" }, draft: { ne: true } } } ) { edges { @@ -219,17 +214,11 @@ export const pageQuery = graphql` } } projects: allMdx( - limit: 4, + limit: 4 sort: { fields: [frontmatter___date], order: DESC } filter: { - fields: { - langKey: {eq: "zh"} - } - frontmatter: { - layout: {eq: "project"} - highlighted: { eq: true } - draft: { ne: true } - } + fields: { langKey: { eq: "zh" } } + frontmatter: { layout: { eq: "project" }, highlighted: { eq: true }, draft: { ne: true } } } ) { edges { diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx index 2e381ca..1e6749f 100644 --- a/src/pages/projects.tsx +++ b/src/pages/projects.tsx @@ -172,36 +172,42 @@ const IndexPage: React.FunctionComponent = props => { -
-
- - - {props.data.logo ? ( - {config.title} - ) : ( - config.title - )} - - {config.description} - - -
-
+
+ + FOR ORIGINAL CHECK PROJECTS.ZH.TSX*/} + + + + + {props.data.logo ? ( + {config.title} + ) : ( + config.title + )} + + {config.description} + + + {/*
+ */}
- {(!props.data.allMdx) ? null : props.data.allMdx.edges.map(post => { - return ; - })} + {!props.data.allMdx + ? null + : props.data.allMdx.edges.map(post => { + return ; + })}
diff --git a/src/styles/shared.ts b/src/styles/shared.ts index 63a65ba..387d448 100644 --- a/src/styles/shared.ts +++ b/src/styles/shared.ts @@ -11,9 +11,9 @@ export const outer = css` // Centered content container blocks export const inner = css` margin: 0 auto; - max-width: 1040px; width: 100%; `; +// max-width: 1040px; export const SiteMain = css` z-index: 100; @@ -58,7 +58,7 @@ export const SocialLink = css` justify-content: center; align-items: center; margin: 0; - padding: 10px; + padding: 0; color: #474747; opacity: 0.8; diff --git a/src/templates/author.tsx b/src/templates/author.tsx index 186da8f..411a2f2 100644 --- a/src/templates/author.tsx +++ b/src/templates/author.tsx @@ -134,7 +134,7 @@ interface AuthorTemplateProps { const Author: React.FunctionComponent = props => { const { allMdx, authorYaml: author } = props.data; - let { edges } = (allMdx || {}); + let { edges } = allMdx || {}; if (!edges) { edges = []; @@ -171,7 +171,7 @@ const Author: React.FunctionComponent = props => { )} -
= props => { : '', }} > -
- - - {author.id} - {author.name} - {author.title && {t[author.title]()}} - {author.bio && {t[author.bio]()}} - - {author.location && ( -
- {t[author.location]()} -
- )} -
- {edges.length >= 1 && `${edges.length} posts`} - {edges.length === 0 && `No posts`} -
- {author.website && ( -
- - - -
- )} - {author.twitter && ( - - - - )} - {author.facebook && ( - - - - )} - {/* TODO: RSS for author */} - {/* */} + + + {author.id} + {author.name} + {author.title && {t[author.title]()}} + {author.bio && {t[author.bio]()}} + + {author.location && ( +
+ {t[author.location]()} +
+ )} +
+ {edges.length >= 1 && `${edges.length} posts`} + {edges.length === 0 && `No posts`} +
+ {author.website && ( +
+ )} + {author.twitter && ( + + + + )} + {author.facebook && ( + + + + )} + {/* TODO: RSS for author */} + {/* = props => { */} -
-
-
-
+ + + {/*
+ */}
@@ -304,12 +304,7 @@ export const pageQuery = graphql` allMdx( limit: 2000 sort: { fields: [frontmatter___date], order: DESC } - filter: { - frontmatter: { - author: { eq: $author }, - draft: { ne: true } - } - } + filter: { frontmatter: { author: { eq: $author }, draft: { ne: true } } } ) { totalCount edges { diff --git a/src/templates/post.tsx b/src/templates/post.tsx index d1abb21..299c11f 100644 --- a/src/templates/post.tsx +++ b/src/templates/post.tsx @@ -279,11 +279,8 @@ const PageTemplate: React.FunctionComponent = props => { {height && } -
-
- -
-
+ +
{/* TODO: no-image css tag? */} diff --git a/src/templates/project.tsx b/src/templates/project.tsx index 34d0d43..2912dbd 100644 --- a/src/templates/project.tsx +++ b/src/templates/project.tsx @@ -284,11 +284,7 @@ const PageTemplate: React.FunctionComponent = props => { {height && } -
-
- -
-
+
{/* TODO: no-image css tag? */} diff --git a/src/templates/tags.tsx b/src/templates/tags.tsx index 930a6be..aeb885d 100644 --- a/src/templates/tags.tsx +++ b/src/templates/tags.tsx @@ -87,7 +87,7 @@ const Tags: React.FunctionComponent = props => { )} -
= props => { : '', }} > -
- - - {tag} - - {tagData && tagData.node.description ? ( - tagData.node.description - ) : ( - <> - A collection of {totalCount > 1 && `${totalCount} posts`} - {totalCount === 1 && `1 post`} - {totalCount === 0 && `No posts`} - - )} - - -
-
+
*/} + + + {tag} + + {tagData && tagData.node.description ? ( + tagData.node.description + ) : ( + <> + A collection of {totalCount > 1 && `${totalCount} posts`} + {totalCount === 1 && `1 post`} + {totalCount === 0 && `No posts`} + + )} + + + {/*
+ */}
@@ -154,12 +154,7 @@ export const pageQuery = graphql` allMdx( limit: 2000 sort: { fields: [frontmatter___date], order: DESC } - filter: { - frontmatter: { - tags: { in: [$tag] } - draft: { ne: true } - } - } + filter: { frontmatter: { tags: { in: [$tag] }, draft: { ne: true } } } ) { totalCount edges { diff --git a/src/templates/tech.tsx b/src/templates/tech.tsx index 435c34a..5e14c62 100644 --- a/src/templates/tech.tsx +++ b/src/templates/tech.tsx @@ -1,7 +1,7 @@ import { graphql } from 'gatsby'; import React from 'react'; -import styled from '@emotion/styled' -import { css } from 'emotion' +import styled from '@emotion/styled'; +import { css } from 'emotion'; import Footer from '../components/Footer'; import SiteNav from '../components/header/SiteNav'; @@ -129,55 +129,64 @@ const Tech: React.FunctionComponent = props => { - {config.twitter && } - {config.twitter && - } + {config.twitter && ( + + )} + {config.twitter && ( + + )} -
-
- - - {tech.name} - {tech.name} - {tech.desc && {t[tech.desc]()}} - -
- {totalCount > 1 && `${totalCount} posts`} - {totalCount === 1 && `1 post`} - {totalCount === 0 && `No posts`} -
- {tech.website && ( -
- - - -
- )} -
-
-
-
+
*/} + + + {tech.name} + {tech.name} + {tech.desc && {t[tech.desc]()}} + +
+ {totalCount > 1 && `${totalCount} posts`} + {totalCount === 1 && `1 post`} + {totalCount === 0 && `No posts`} +
+ {tech.website && ( +
+ + + +
+ )} +
+
+ {/*
+ */}
{edges.map(({ node }) => { - if (node.frontmatter.meta.techstack && node.frontmatter.meta.techstack.map(t => t.id).includes(tech.id)) { + if ( + node.frontmatter.meta.techstack && + node.frontmatter.meta.techstack.map(t => t.id).includes(tech.id) + ) { return ; } return null; @@ -209,15 +218,10 @@ export const pageQuery = graphql` } } allMdx( - limit: 2000, + limit: 2000 filter: { - frontmatter: { - layout: { eq: "project"} - draft: { ne: true } - }, - fields: { - langKey: { eq: $lang } - } + frontmatter: { layout: { eq: "project" }, draft: { ne: true } } + fields: { langKey: { eq: $lang } } } sort: { fields: [frontmatter___date], order: DESC } ) { @@ -274,4 +278,4 @@ export const pageQuery = graphql` } } } -`; \ No newline at end of file +`; From 6fec6bd1a498bdff754f385b9c9015eafdf6661a Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Mon, 4 May 2020 19:27:18 +0900 Subject: [PATCH 03/31] saira font added --- gatsby-config.js | 63 +++++++++++++++++++------------ package.json | 1 + src/components/header/SiteNav.tsx | 53 +++++++++++++++++--------- src/layouts/index.tsx | 6 +-- yarn.lock | 5 +++ 5 files changed, 81 insertions(+), 47 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 6c3a288..232d6a8 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -11,7 +11,8 @@ module.exports = { 'Mdx.frontmatter.meta.techstack': 'TechstackYaml', 'Mdx.frontmatter.meta.teammembers': 'AuthorYaml', }, - plugins: [{ + plugins: [ + { resolve: 'gatsby-plugin-i18n', options: { langKeyDefault: 'en', @@ -42,7 +43,8 @@ module.exports = { resolve: `gatsby-mdx`, options: { extensions: ['.mdx', '.md'], - gatsbyRemarkPlugins: [{ + gatsbyRemarkPlugins: [ + { resolve: 'gatsby-remark-responsive-iframe', options: { wrapperStyle: 'margin-bottom: 1rem', @@ -95,26 +97,24 @@ module.exports = { } } `, - feeds: [{ - serialize: ({ - query: { - site, - allMdx - } - }) => { - return allMdx.edges.map(edge => { - return Object.assign({}, edge.node.frontmatter, { - description: edge.node.excerpt, - date: edge.node.frontmatter.date, - url: site.siteMetadata.siteUrl + edge.node.fields.slug, - guid: site.siteMetadata.siteUrl + edge.node.fields.slug, - custom_elements: [{ - 'content:encoded': edge.node.html - }], + feeds: [ + { + serialize: ({ query: { site, allMdx } }) => { + return allMdx.edges.map(edge => { + return Object.assign({}, edge.node.frontmatter, { + description: edge.node.excerpt, + date: edge.node.frontmatter.date, + url: site.siteMetadata.siteUrl + edge.node.fields.slug, + guid: site.siteMetadata.siteUrl + edge.node.fields.slug, + custom_elements: [ + { + 'content:encoded': edge.node.html, + }, + ], + }); }); - }); - }, - query: ` + }, + query: ` { allMdx( limit: 1000, @@ -134,9 +134,10 @@ module.exports = { } } `, - output: '/rss.xml', - title: 'Gatsby RSS Feed', - }, ], + output: '/rss.xml', + title: 'Gatsby RSS Feed', + }, + ], }, }, @@ -146,6 +147,18 @@ module.exports = { postCssPlugins: [require('postcss-color-function'), require('cssnano')()], }, }, + + { + resolve: `gatsby-plugin-google-fonts`, + options: { + fonts: [ + `saira\:100,200,300,400,500,600,700,800,900`, + // you can also specify font weights and styles + ], + display: 'swap', + }, + }, + { resolve: `gatsby-plugin-google-analytics`, options: { @@ -166,4 +179,4 @@ module.exports = { }, 'gatsby-plugin-emotion', ], -}; \ No newline at end of file +}; diff --git a/package.json b/package.json index ff5ab89..67570c0 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "gatsby-plugin-emotion": "^2.0.0-rc.5", "gatsby-plugin-feed": "^2.0.11", "gatsby-plugin-google-analytics": "^2.0.8", + "gatsby-plugin-google-fonts": "^1.0.1", "gatsby-plugin-i18n": "^0.4.2", "gatsby-plugin-manifest": "^2.0.29", "gatsby-plugin-postcss": "2.0.2", diff --git a/src/components/header/SiteNav.tsx b/src/components/header/SiteNav.tsx index d0ea672..a6a2c4b 100644 --- a/src/components/header/SiteNav.tsx +++ b/src/components/header/SiteNav.tsx @@ -62,9 +62,12 @@ const NavStyles = css` li a { display: block; margin: 0; - padding-left: 40px; + padding-left: 60px; color: #fff; - opacity: 0.8; + opacity: 0.85; + font-family: Saira; + font-size: 16px; + line-height: 12px; } li a:hover { @@ -73,6 +76,10 @@ const NavStyles = css` } `; +const bold = css` + font-weight: 800; +`; + const SiteNavRight = styled.div` flex-shrink: 0; display: flex; @@ -127,6 +134,7 @@ class SiteNav extends React.Component { render() { const { isHome = false } = this.props; const linkPrefix = this.props.langKey === 'en' ? '' : this.props.langKey; + console.log(this.props); return (
@@ -135,22 +143,11 @@ class SiteNav extends React.Component { {!isHome && }
    - {/* TODO: mark current nav item - add class nav-current */} -
  • - {t['general.nav.home']()} -
  • -
  • - {t['general.nav.about']()} -
  • -
  • - {t['general.nav.blog']()} -
  • -
  • - {t['general.nav.projects']()} -
  • -
  • - {t['general.nav.contact']()} -
  • + + + + +
@@ -160,6 +157,26 @@ class SiteNav extends React.Component { } } +const SiteNavItem: React.FC<{ path: string; label: string; exact?: boolean }> = ({ + label, + path, + exact, +}) => { + const currentSlug = () => { + if (exact) { + return window.location.pathname === path ? `${bold}` : ''; + } + + return window.location.pathname.startsWith(path) ? `${bold}` : ''; + }; + + return ( +
  • + {label} +
  • + ); +}; + export default SiteNav; /* diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 767b526..7c077b4 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -274,7 +274,7 @@ body { overflow-x: hidden; /* color: color(var(--midgrey) l(-25%)); */ color: ${darken('0.25', colors.midgrey)}; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, Saira, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 1.5rem; line-height: 1.6em; font-weight: 400; @@ -495,9 +495,7 @@ const IndexLayout: React.FunctionComponent = props => { const langKey: String = props.langKey || 'en'; return ( -
    - {props.children} -
    +
    {props.children}
    ); }; diff --git a/yarn.lock b/yarn.lock index 6578aa3..1dee61f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5766,6 +5766,11 @@ gatsby-plugin-google-analytics@^2.0.8: dependencies: "@babel/runtime" "^7.0.0" +gatsby-plugin-google-fonts@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/gatsby-plugin-google-fonts/-/gatsby-plugin-google-fonts-1.0.1.tgz#d71054f7bf207b9a8da227380369e18e6f4e0201" + integrity sha512-p1NVkn27GUnDA5qHM+Z4cCcLCJIardzZXMon3640sT4xuL/AZJbsx3HEt2KY/5oZu0UXIkytkxzV2Da4rQeUIg== + gatsby-plugin-i18n@^0.4.2: version "0.4.2" resolved "https://registry.yarnpkg.com/gatsby-plugin-i18n/-/gatsby-plugin-i18n-0.4.2.tgz#30eb0f98b99e016f4965c00ac39eff5274f3af96" From e34296663624db624c8a3ecc61048a07b2c5da33 Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Mon, 4 May 2020 20:40:44 +0900 Subject: [PATCH 04/31] home banner --- gatsby-config.js | 1 + src/components/Button.tsx | 7 ++ src/components/LanguangeToggle.tsx | 33 ++++----- src/components/Splash/index.tsx | 110 +++++++++++++++-------------- src/components/header/SiteNav.tsx | 4 +- src/layouts/index.tsx | 15 +++- src/styles/colors.ts | 1 + 7 files changed, 95 insertions(+), 76 deletions(-) create mode 100644 src/components/Button.tsx diff --git a/gatsby-config.js b/gatsby-config.js index 232d6a8..8aafb53 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -153,6 +153,7 @@ module.exports = { options: { fonts: [ `saira\:100,200,300,400,500,600,700,800,900`, + `sarala\:400,700`, // you can also specify font weights and styles ], display: 'swap', diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..dad0053 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,7 @@ +import * as React from 'react'; +import styled from '@emotion/styled'; + +export const Button = styled.a` + background: #ffce27; + border-radius: 7px; +`; diff --git a/src/components/LanguangeToggle.tsx b/src/components/LanguangeToggle.tsx index 91f0b1f..d56bb61 100644 --- a/src/components/LanguangeToggle.tsx +++ b/src/components/LanguangeToggle.tsx @@ -5,40 +5,35 @@ import styled from '@emotion/styled'; const Wrapper = styled.div` display: block; padding: 4px 10px; - border: #fff 1px solid; color: #fff; - font-size: 1.2rem; - line-height: 1em; border-radius: 10px; opacity: 0.8; - margin-left: 5px; + margin-left: 60px; + font-family: Saira; + font-weight: normal; + font-size: 16px; + line-height: 12px; + /* or 75% */ :hover { text-decoration: none; opacity: 1; cursor: pointer; } -` +`; export interface LanguageToggleProps { langKey: string; slug: string; } -const LanguageToggle: React.FunctionComponent = (props) => { - console.log("$$$$", props) +const LanguageToggle: React.FunctionComponent = props => { + console.log('$$$$', props); return ( - - - { - (props.langKey === "en") - ? "中文" - : "English" - } - + + {props.langKey === 'en' ? '中文' : 'English'} + ); +}; - ) -} - -export default LanguageToggle; \ No newline at end of file +export default LanguageToggle; diff --git a/src/components/Splash/index.tsx b/src/components/Splash/index.tsx index e08a98c..2c321ca 100644 --- a/src/components/Splash/index.tsx +++ b/src/components/Splash/index.tsx @@ -1,8 +1,10 @@ -import * as React from "react"; -import { Link } from "gatsby"; -import styled from "@emotion/styled"; +import * as React from 'react'; +import { Link } from 'gatsby'; +import styled from '@emotion/styled'; import logo from '../../content/img/x-tech-logo.svg'; -import t from '../../content/i18n' +import t from '../../content/i18n'; +import { Button } from '../Button'; +import { colors } from '../../styles/colors'; const StyledSplash = styled.section` position: relative; @@ -28,13 +30,14 @@ const StyledSplash = styled.section` .intro > .intro-title { position: absolute; - top: 242px; + top: 130px; left: 96px; - font-family: Cabin; - font-size: 64px; - font-weight: bold; + font-family: Saira; letter-spacing: 1px; + color: black; + line-height: 84px; margin-bottom: 0; + position: absolute; } .intro-title > div { @@ -47,36 +50,41 @@ const StyledSplash = styled.section` z-index: 2; } - .intro-title .ghost { + .intro > .intro-quote { position: absolute; - width: 100%; - height: 25px; - background-color: #ffcd38; - opacity: 0.4; - left: 0; - bottom: 0; - z-index: 1; + width: 133px; + height: 154px; + left: 45px; + top: 32px; + font-family: Saira; + font-style: normal; + font-weight: 500; + font-size: 300px; + line-height: 300px; + color: ${colors.whitegrey}; } .intro > .intro-text { position: absolute; - width: 50%; - top: 428px; + width: 689px; + top: 388px; left: 103px; - font-family: PingFangHK-Regular; - font-size: 18px; - line-height: 24px; + height: 96px; + //TODO + font-family: Sarala, sans-serif; + font-size: 26px; + line-height: 42px; letter-spacing: 0.8px; } .intro > .intro-invitation { position: absolute; - width: 223px; - height: 64px; + width: 200px; + height: 83px; top: 553px; left: 103px; - background-color: #ffcc33; - border-radius: 64px; + background: #ffce27; + border-radius: 7px; display: flex; justify-content: center; align-items: center; @@ -84,49 +92,43 @@ const StyledSplash = styled.section` } .intro-invitation > a { - font-family: Cabin; + color: ${colors.darkyellow}; + font-family: Saira; + font-weight: 600; font-size: 30px; - color: #fff; + line-height: 56px; } - @media (min-width:376px) and (max-width:425px){ - .intro-invitation { - margin-top: 100px; + + @media (min-width: 376px) and (max-width: 425px) { + .intro-invitation { + margin-top: 100px; + } } -} -@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ - .intro-invitation { - margin-top: 100px; + @media (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { + .intro-invitation { + margin-top: 100px; + } } -} `; export interface SplashProps { - bg: String + bg: String; } const Splash: React.FunctionComponent = ({ bg }) => ( -
    -
    - -
    +
    +
    -
    -

    {t["general.splash.title1"]()}

    -
    -
    -
    -

    {t["general.splash.title2"]()}

    -
    -
    +

    + {t['general.splash.title1']()} +
    + {t['general.splash.title2']()} +

    -

    - {t["general.splash.intro-text"]()} -

    +

    {t['general.splash.intro-text']()}

    - - {t["general.splash.lets-chat"]()} - + {t['general.splash.lets-chat']()}
    diff --git a/src/components/header/SiteNav.tsx b/src/components/header/SiteNav.tsx index a6a2c4b..3f4e9da 100644 --- a/src/components/header/SiteNav.tsx +++ b/src/components/header/SiteNav.tsx @@ -6,6 +6,7 @@ import { css } from 'emotion'; import { SiteHeader, outer, inner } from '../../styles/shared'; import SubscribeModal from '../subsribe/SubscribeOverlay'; +import LanguageToggle from '../LanguangeToggle'; import SiteNavLogo from './SiteNavLogo'; import t from '../../content/i18n'; @@ -149,6 +150,7 @@ class SiteNav extends React.Component { +
    @@ -230,5 +232,5 @@ export default SiteNav; Subscribe )} {config.showSubscribe && } - + */ diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 7c077b4..9dc6d0f 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -274,7 +274,7 @@ body { overflow-x: hidden; /* color: color(var(--midgrey) l(-25%)); */ color: ${darken('0.25', colors.midgrey)}; - font-family: -apple-system, BlinkMacSystemFont, Saira, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: Sarala, Saira, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 1.5rem; line-height: 1.6em; font-weight: 400; @@ -433,7 +433,7 @@ h6 { h1 { margin: 0 0 0.5em 0; - font-size: 5rem; + font-size: 6.6rem; font-weight: 700; } @media (max-width: 500px) { @@ -484,6 +484,17 @@ h6 { body { background: #f4f8fb; } + +/* Custom Stylesheet */ + +h1.bold { + font-weight: 600; +} + +a.saira { + font-family: Saira; +} + `; interface IndexProps { diff --git a/src/styles/colors.ts b/src/styles/colors.ts index c969ab0..546b156 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -13,4 +13,5 @@ export const colors = { brown: '#a3821a', gray: '#272727', backgroundgray: '#F8F8F8', + darkyellow: '#735D13', }; From a7d8c1a7a9bacdcce56e2ed21fdc8411794c41ec Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Mon, 4 May 2020 22:15:25 +0900 Subject: [PATCH 05/31] footer code clean up --- src/components/Footer.tsx | 102 +++++++----------------------- src/components/Splash/index.tsx | 2 +- src/components/header/SiteNav.tsx | 54 ---------------- 3 files changed, 23 insertions(+), 135 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 8e4b91f..509b145 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,5 +1,4 @@ import { Link } from 'gatsby'; -import { setLightness } from 'polished'; import * as React from 'react'; import styled from '@emotion/styled'; import { css } from 'emotion'; @@ -15,8 +14,6 @@ import Medium from './icons/medium'; import GitHub from './icons/github'; import RSS from './icons/rss'; -import t from '../content/i18n'; - const SiteFooter = css` position: relative; padding: 43px 95px; @@ -88,61 +85,11 @@ const Footer: React.FunctionComponent = () => { - {config.facebook && ( - - - - )} - {config.twitter && ( - - - - )} - {config.medium && ( - - - - )} - {config.github && ( - - - - )} - {config.rss && ( - - - - )} + } /> + } /> + } /> + } /> + } />
    @@ -152,25 +99,20 @@ const Footer: React.FunctionComponent = () => { export default Footer; -/* - {config.facebook && ( - - Facebook - - )} - {config.twitter && ( - - Twitter - - )} - {config.medium && ( - - Medium - - )} - {config.github && ( - - GitHub - - )} -*/ +const SocialLinkItem: React.FC<{ + path: string | undefined; + title: string; + svg: React.ReactElement; +}> = ({ path, title, svg }) => { + return path ? ( + + {svg} + + ) : null; +}; diff --git a/src/components/Splash/index.tsx b/src/components/Splash/index.tsx index 2c321ca..eeaf92d 100644 --- a/src/components/Splash/index.tsx +++ b/src/components/Splash/index.tsx @@ -70,7 +70,7 @@ const StyledSplash = styled.section` top: 388px; left: 103px; height: 96px; - //TODO + /* //TODO font-family sarala */ font-family: Sarala, sans-serif; font-size: 26px; line-height: 42px; diff --git a/src/components/header/SiteNav.tsx b/src/components/header/SiteNav.tsx index 3f4e9da..10005ec 100644 --- a/src/components/header/SiteNav.tsx +++ b/src/components/header/SiteNav.tsx @@ -180,57 +180,3 @@ const SiteNavItem: React.FC<{ path: string; label: string; exact?: boolean }> = }; export default SiteNav; - -/* - - {config.facebook && ( - - - - )} - {config.twitter && ( - - - - )} - {config.medium && ( - - - - )} - {config.github && ( - - - - )} - - {config.showSubscribe && ( - Subscribe - )} - {config.showSubscribe && } - -*/ From eb50cefe32719b0f8063cca73cb5f91514a42ffb Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Tue, 5 May 2020 17:31:32 +0900 Subject: [PATCH 06/31] card component, our clients section --- package.json | 12 +- src/components/Button.tsx | 22 +- src/components/Card.tsx | 68 ++++++ src/components/Clients/index.tsx | 47 ++++ src/components/Introduce/Introduce.tsx | 213 ++++++++++--------- src/components/Splash/index.tsx | 10 +- src/components/icons/chat.tsx | 14 ++ src/components/icons/clients/initialView.tsx | 16 ++ src/components/icons/clients/koch.tsx | 42 ++++ src/content/i18n/index.js | 4 +- src/content/intro.yaml | 6 +- src/pages/index.tsx | 2 + src/styles/colors.ts | 4 +- yarn.lock | 181 +++++++++++----- 14 files changed, 468 insertions(+), 173 deletions(-) create mode 100644 src/components/Card.tsx create mode 100644 src/components/Clients/index.tsx create mode 100644 src/components/icons/chat.tsx create mode 100644 src/components/icons/clients/initialView.tsx create mode 100644 src/components/icons/clients/koch.tsx diff --git a/package.json b/package.json index 67570c0..88ac2c7 100644 --- a/package.json +++ b/package.json @@ -63,10 +63,10 @@ "prism-themes": "1.0.1", "prismjs": "1.15.0", "prop-types": "^15.6.2", - "react": "16.7.0", - "react-dom": "16.7.0", + "react": "^16.13.1", + "react-dom": "^16.13.1", "react-helmet": "5.2.0", - "react-intl": "^2.7.2", + "react-intl": "^4.5.2", "react-messenger-customer-chat": "^0.7.2", "react-slick": "^0.23.2", "refractor": "^2.6.2", @@ -78,10 +78,10 @@ "@types/classnames": "2.2.6", "@types/lodash": "4.14.119", "@types/node": "10.12.18", - "@types/react": "16.7.18", - "@types/react-dom": "16.0.11", + "@types/react": "^16.9.34", + "@types/react-dom": "^16.9.7", "@types/react-helmet": "5.0.8", - "@types/react-intl": "^2.3.17", + "@types/react-intl": "^3.0.0", "babel-plugin-styled-components": "1.10.0", "prettier": "^1.15.3", "rimraf": "2.6.2", diff --git a/src/components/Button.tsx b/src/components/Button.tsx index dad0053..bdf580f 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,7 +1,25 @@ import * as React from 'react'; import styled from '@emotion/styled'; +import { colors } from '../styles/colors'; export const Button = styled.a` - background: #ffce27; - border-radius: 7px; + position: absolute; + width: 200px; + height: 83px; + top: 553px; + left: 103px; + background: ${colors.yellow}; + border-radius: 7px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 7px 13px 18px 6px rgba(255 205 54, 0.17); + } + + .intro-invitation > a { + color: ${colors.darkyellow}; + font-family: Saira; + font-weight: 600; + font-size: 30px; + line-height: 56px; `; diff --git a/src/components/Card.tsx b/src/components/Card.tsx new file mode 100644 index 0000000..d519609 --- /dev/null +++ b/src/components/Card.tsx @@ -0,0 +1,68 @@ +import * as React from 'react'; +import styled from '@emotion/styled'; +import { colors } from '../styles/colors'; +import ChatIcon from './icons/chat'; + +const CardWrapper = styled.div` + width: 50%; + display: inline-block; + height: 318px; +`; + +const Card = styled.div` + position: relative; + display: flex; + background: ${colors.backgroundgray}; + padding: 53px 20px; + margin: 36px 0; + width: 48%; + max-height: 440px; + @media (max-width: 950px) { + flex-direction: column; + width: 100%; + } + /* @media (max-width: 1270px) { + max-width: 400px; + } + @media (max-width: 1070px) { + max-width: 300px; + } */ +`; + +const CardDescription = styled.div` + font-family: Sarala; + font-size: 26px; + line-height: 36px; + @media (max-width: 420px) { + font-size: 20px; + line-height: 30px; + } +`; + +const Icon = styled.div` + position: absolute; + z-index: 10; + left: 19px; + top: -43px; +`; + +export interface ICard { + text: string; +} + +const CardComponent: React.FC = ({ text }) => { + const maxLength = 220; + const sentenceCutter = (sentence = '') => + sentence.length > maxLength ? sentence.substr(0, maxLength) + '...' : sentence; + console.log(text, sentenceCutter(text)); + return ( + + + + + {sentenceCutter(text)} + + ); +}; + +export default CardComponent; diff --git a/src/components/Clients/index.tsx b/src/components/Clients/index.tsx new file mode 100644 index 0000000..5021956 --- /dev/null +++ b/src/components/Clients/index.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; +import { css } from 'emotion'; +import { StaticQuery, graphql } from 'gatsby'; +import Koch from '../icons/clients/koch'; +import InitialView from '../icons/clients/initialView'; +import { colors } from '../../styles/colors'; + +const StyledDiv = styled.div` + background-color: #ffffff; + width: 100%; + padding: 70px 250px; + display: grid; +`; + +const ClientsWrapper = styled.div` + display: flex; + justify-content: space-between; + margin-top: 10px; +`; + +const title = css` + font-family: Saira; + align-self: center; + justify-self: center; + line-height: 42px; + font-size: 30px; + color: ${colors.textcolor}; +`; + +const Clients: React.FC<{}> = ({}) => { + return ( + +

    Our clients

    + + + + + + + +
    + ); +}; + +export default Clients; diff --git a/src/components/Introduce/Introduce.tsx b/src/components/Introduce/Introduce.tsx index bbc7ee2..70ed9d5 100644 --- a/src/components/Introduce/Introduce.tsx +++ b/src/components/Introduce/Introduce.tsx @@ -1,122 +1,137 @@ -import * as React from "react"; -import styled from "@emotion/styled"; -import { StaticQuery, graphql } from "gatsby"; -import t from '../../content/i18n'; +import * as React from 'react'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; +import { StaticQuery, graphql } from 'gatsby'; +import CardComponent from '../Card'; -const StyledDiv = styled.div` - /* background-color: #f8f0f0; */ +const StyledDiv = styled.section` + background-color: #ffffff; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: 40px 103px; + overflow: hidden; + @media (max-width: 600px) { + padding: 40px 20px; + } +`; + +const renderAsk = (data: any, f: any): React.ReactNode => { + const sourceData = data.allIntroYaml.edges; + + return ( + + {sourceData.map((d: any) => ( + + ))} + + ); +}; + +const Ask: React.FunctionComponent = () => { + const { formatMessage: f } = useIntl(); + + return ( + renderAsk(data, f)} + /> + ); +}; + +export default Ask; + +//
    +{ + /*
    + +
    */ +} +//
    +//
    {t[d.node.title]()}
    +//
    +//

    {t[d.node.content]()}

    +//
    +//
    +//
    + +/* display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; - .intro-wrapper{ + .intro-wrapper { display: flex; - text-align: left; + justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; - padding:50px; - border-bottom: 2px solid #eeeeee; + padding: 50px; + width: 80vw; - &:last-child{ + &:last-child { border-bottom: none; } - .intro-info > .title{ + .intro-info > .title { font-size: 1.55555555555555555555em; - font-family: 'prophetmedium',sans-serif; - color: #40404C; - margin-bottom: .64285714285714285714em; + font-family: 'prophetmedium', sans-serif; + color: #40404c; + margin-bottom: 0.64285714285714285714em; line-height: 1.2; align-self: left; } - .content,.title{ - text-align:left; + .content, + .title { + text-align: left; } - .content{ + .content { word-wrap: break-word; width: 80%; } } - @media (min-width:376px) and (max-width:425px){ - .content{ - width: 50%; - max-width: 580px; - } - .intro-wrapper{ - padding:20px - } - .intro-invitation{ - top: 666px!important; - } + @media (min-width: 376px) and (max-width: 425px) { + .content { + width: 50%; + max-width: 580px; + } + .intro-wrapper { + padding: 20px; + } + .intro-invitation { + top: 666px !important; + } } - @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ - .content{ - width: 50%; - max-width: 580px; - } - .intro-wrapper{ - padding:20px - } - .intro-invitation{ - top: 666px!important; - } + @media (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { + .content { + width: 50%; + max-width: 580px; + } + .intro-wrapper { + padding: 20px; + } + .intro-invitation { + top: 666px !important; + } } -`; - -const renderAsk = (data: any): React.ReactNode => { - const sourceData = data.allIntroYaml.edges; - return ( - - { - sourceData.map((d: any) => ( -
    - {/*
    - -
    */} -
    -
    - {t[d.node.title]()} -
    -
    -

    - {t[d.node.content]()} -

    -
    -
    -
    - )) - } -
    - ) -} - - -const Ask: React.FunctionComponent = () => ( - -); - -export default Ask; +*/ diff --git a/src/components/Splash/index.tsx b/src/components/Splash/index.tsx index eeaf92d..6b08da4 100644 --- a/src/components/Splash/index.tsx +++ b/src/components/Splash/index.tsx @@ -10,7 +10,6 @@ const StyledSplash = styled.section` position: relative; margin-left: auto; margin-right: auto; - padding-bottom: 70px; width: auto; background-color: #ffffff; @@ -21,7 +20,7 @@ const StyledSplash = styled.section` .intro { width: 100vw; - min-height: 802px; + min-height: 650px; background-size: auto; background-repeat: no-repeat; background-position: right; @@ -83,7 +82,7 @@ const StyledSplash = styled.section` height: 83px; top: 553px; left: 103px; - background: #ffce27; + background: ${colors.yellow}; border-radius: 7px; display: flex; justify-content: center; @@ -91,12 +90,17 @@ const StyledSplash = styled.section` box-shadow: 7px 13px 18px 6px rgba(255 205 54, 0.17); } + .intro-invitation:hover { + background: ${colors.fadedyellow}; + } + .intro-invitation > a { color: ${colors.darkyellow}; font-family: Saira; font-weight: 600; font-size: 30px; line-height: 56px; + text-decoration: none; } @media (min-width: 376px) and (max-width: 425px) { diff --git a/src/components/icons/chat.tsx b/src/components/icons/chat.tsx new file mode 100644 index 0000000..088e106 --- /dev/null +++ b/src/components/icons/chat.tsx @@ -0,0 +1,14 @@ +// tslint:disable:no-http-string +import * as React from 'react'; + +const ChatIcon: React.FunctionComponent = () => ( + + + + +); + +export default ChatIcon; diff --git a/src/components/icons/clients/initialView.tsx b/src/components/icons/clients/initialView.tsx new file mode 100644 index 0000000..95044ec --- /dev/null +++ b/src/components/icons/clients/initialView.tsx @@ -0,0 +1,16 @@ +import * as React from 'react' + +const InitialView: React.FC=() => ( + + + + + + + + + + +) + +export default InitialView \ No newline at end of file diff --git a/src/components/icons/clients/koch.tsx b/src/components/icons/clients/koch.tsx new file mode 100644 index 0000000..1a85cd5 --- /dev/null +++ b/src/components/icons/clients/koch.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +const Koch: React.FC = () => ( + + + + + + + + + + + + + + + + +); + +export default Koch; diff --git a/src/content/i18n/index.js b/src/content/i18n/index.js index ecdb7a6..3fe588b 100644 --- a/src/content/i18n/index.js +++ b/src/content/i18n/index.js @@ -8,13 +8,13 @@ const injectableFormattedMessage = (id, intl) => { return intl.formatMessage({ id, }); - } + } return ; }; const result = Object.keys(data).reduce((r, key) => { // setField(r, `${key}`, injectableFormattedMessage.bind(null, key)); - r[key] = injectableFormattedMessage.bind(null, key) + r[key] = injectableFormattedMessage.bind(null, key); return r; }, {}); diff --git a/src/content/intro.yaml b/src/content/intro.yaml index 4dac179..7a8a2e4 100644 --- a/src/content/intro.yaml +++ b/src/content/intro.yaml @@ -1,9 +1,9 @@ - id: whoWeAre title: general.intro.whoWeAre.title content: general.intro.whoWeAre.content -- id: whatWeDo +- id: whatWeDo title: general.intro.whatWeDo.title content: general.intro.whatWeDo.content -- id: howWeDoIt +- id: howWeDoIt title: general.intro.howWeDoIt.title - content: general.intro.howWeDoIt.content \ No newline at end of file + content: general.intro.howWeDoIt.content diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d53da04..8d99d4e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -9,6 +9,7 @@ import PostCard from '../components/PostCard'; import Wrapper from '../components/Wrapper'; import Splash from '../components/Splash'; import Faq from '../components/Faq'; +import Clients from '../components/Clients'; import Introduce from '../components/Introduce/Introduce'; import IndexLayout from '../layouts'; import config from '../website-config'; @@ -164,6 +165,7 @@ const IndexPage: React.FunctionComponent = props => { +
    diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 546b156..644c5f0 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -3,7 +3,8 @@ export const colors = { darkblue: '#2c96dd', green: '#a4d037', purple: '#ad26b4', - yellow: '#fecd35', + yellow: '#ffce27', + fadedyellow: '#FFDB60', red: '#f05230', darkgrey: '#15171A', midgrey: '#738a94', @@ -14,4 +15,5 @@ export const colors = { gray: '#272727', backgroundgray: '#F8F8F8', darkyellow: '#735D13', + textcolor: '#474747', }; diff --git a/yarn.lock b/yarn.lock index 1dee61f..8ee87d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -951,6 +951,39 @@ reflect-metadata "^0.1.12" tslib "^1.8.1" +"@formatjs/intl-displaynames@^1.2.9": + version "1.2.9" + resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-1.2.9.tgz#be30523a91b3f5102fcd1754679073be6f8ee545" + integrity sha512-XQF2rHM0DaxShGtr03wt1eWBye0t8WDSvXfpby0ewSPs0n0uUjQOkyouTqFUderNuXV3aY8vpxq+pnHEkW/VNg== + dependencies: + "@formatjs/intl-utils" "^2.2.5" + +"@formatjs/intl-listformat@^1.4.7": + version "1.4.7" + resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-1.4.7.tgz#6529663d535ba24c1a33b26bdb4f6e0c1616466e" + integrity sha512-g0oXgMYhe7CFdH8jEUz64K7sLjo2p8tQAuGGXjcibODCsJvBV+YrC69WGmzQpJPCoeK5kxG7PXQRUO1Sr6NEfA== + dependencies: + "@formatjs/intl-utils" "^2.2.5" + +"@formatjs/intl-relativetimeformat@^4.5.15": + version "4.5.15" + resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-4.5.15.tgz#1e31cdfc334603e380032745398186265ecc6049" + integrity sha512-DVtiHWMpwsuqPBtszOTmhv6m94RuiPN6/ltWCm6tul/lIFKotoJOvo1CkytfzWJ3ypjnfbYsfPRhvCCQTqVarQ== + dependencies: + "@formatjs/intl-utils" "^2.2.5" + +"@formatjs/intl-unified-numberformat@^3.3.6": + version "3.3.6" + resolved "https://registry.yarnpkg.com/@formatjs/intl-unified-numberformat/-/intl-unified-numberformat-3.3.6.tgz#ab69818f7568894023cb31fdb5b5c7eed62c6537" + integrity sha512-VQYswh9Pxf4kN6FQvKprAQwSJrF93eJstCDPM1HIt3c3O6NqPFWNWhZ91PLTppOV11rLYsFK11ZxiGbnLNiPTg== + dependencies: + "@formatjs/intl-utils" "^2.2.5" + +"@formatjs/intl-utils@^2.2.5": + version "2.2.5" + resolved "https://registry.yarnpkg.com/@formatjs/intl-utils/-/intl-utils-2.2.5.tgz#eaafd94df3d102ee13e54e80f992a33868a6b1e8" + integrity sha512-p7gcmazKROteL4IECCp03Qrs790fZ8tbemUAjQu0+K0AaAlK49rI1SIFFq3LzDUAqXIshV95JJhRe/yXxkal5g== + "@mapbox/hast-util-table-cell-style@^0.1.3": version "0.1.3" resolved "https://registry.yarnpkg.com/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.1.3.tgz#5b7166ae01297d72216932b245e4b2f0b642dca6" @@ -1051,6 +1084,19 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220" integrity sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q== +"@types/hoist-non-react-statics@^3.3.1": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + +"@types/invariant@^2.2.31": + version "2.2.32" + resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.32.tgz#cf523a609062564e36e7a7dadb5089ed87da6382" + integrity sha512-WjY4WVFaehHv+TOgm+dS3UI559NvsPGFz/C0nIo7KOOdC+HeC7Y3/yLzdJYQ3+oFQaTXrOVm7cNtIgMataIDVg== + "@types/lodash@4.14.119": version "4.14.119" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39" @@ -1094,10 +1140,10 @@ "@types/history" "*" "@types/react" "*" -"@types/react-dom@16.0.11": - version "16.0.11" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.11.tgz#bd10ccb0d9260343f4b9a49d4f7a8330a5c1f081" - integrity sha512-x6zUx9/42B5Kl2Vl9HlopV8JF64wLpX3c+Pst9kc1HgzrsH+mkehe/zmHMQTplIrR48H2gpU7ZqurQolYu8XBA== +"@types/react-dom@^16.9.7": + version "16.9.7" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.7.tgz#60844d48ce252d7b2dccf0c7bb937130e27c0cd2" + integrity sha512-GHTYhM8/OwUCf254WO5xqR/aqD3gC9kSTLpopWGpQLpnw23jk44RvMHsyUSEplvRJZdHxhJGMMLF0kCPYHPhQA== dependencies: "@types/react" "*" @@ -1108,10 +1154,12 @@ dependencies: "@types/react" "*" -"@types/react-intl@^2.3.17": - version "2.3.17" - resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-2.3.17.tgz#e1fc6e46e8af58bdef9531259d509380a8a99e8e" - integrity sha512-FGd6J1GQ7zvl1GZ3BBev83B7nfak8dqoR2PZ+l5MoisKMpd4xOLhZJC1ugpmk3Rz5F85t6HbOg9mYqXW97BsNA== +"@types/react-intl@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-3.0.0.tgz#a2cce0024b6cfe403be28ccf67f49d720fa810ec" + integrity sha512-k8F3d05XQGEqSWIfK97bBjZe4z9RruXU9Wa7OZ2iUC5pdeIpzuQDZe/9C2J3Xir5//ZtAkhcv08Wfx3n5TBTQg== + dependencies: + react-intl "*" "@types/react-slick@^0.23.2": version "0.23.2" @@ -1128,10 +1176,10 @@ "@types/prop-types" "*" csstype "^2.2.0" -"@types/react@16.7.18": - version "16.7.18" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.18.tgz#f4ce0d539a893dd61e36cd11ae3a5e54f5a48337" - integrity sha512-Tx4uu3ppK53/iHk6VpamMP3f3ahfDLEVt3ZQc8TFm30a1H3v9lMsCntBREswZIW/SKrvJjkb3Hq8UwO6GREBng== +"@types/react@^16.9.34": + version "16.9.34" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349" + integrity sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow== dependencies: "@types/prop-types" "*" csstype "^2.2.0" @@ -6758,11 +6806,18 @@ hoek@4.x.x: resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb" integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA== -hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^2.5.5: +hoist-non-react-statics@^2.5.0: version "2.5.5" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + home-or-tmp@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8" @@ -7150,29 +7205,25 @@ internal-ip@^3.0.1: default-gateway "^2.6.0" ipaddr.js "^1.5.2" -intl-format-cache@^2.0.5: - version "2.1.0" - resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-2.1.0.tgz#04a369fecbfad6da6005bae1f14333332dcf9316" - integrity sha1-BKNp/sv61tpgBbrh8UMzMy3PkxY= - -intl-messageformat-parser@1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075" - integrity sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU= +intl-format-cache@^4.2.27: + version "4.2.27" + resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-4.2.27.tgz#d25fa83639913aec10ca5a8f9e3b6449bb0eacf2" + integrity sha512-blHXX9qBp8H6fGhQc0jHGh7j97HF0megj4rIB878iazMBdFk/tR7b3av0PJxE72TP8MycLFpeXW9vLY5cBmF4A== -intl-messageformat@^2.0.0, intl-messageformat@^2.1.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz#345bcd46de630b7683330c2e52177ff5eab484fc" - integrity sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw= +intl-messageformat-parser@^5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-5.0.3.tgz#f281a9446b896f24a8f00ab9415019a28d59ca57" + integrity sha512-u2goKAXOJLkiHBy0zB3HTMuHhWDNFYUyPVevvUeSuacGFqe04jvyvYIJIoVgHD3RYhFJ9T+0UgT0dNbu+51TEw== dependencies: - intl-messageformat-parser "1.4.0" + "@formatjs/intl-unified-numberformat" "^3.3.6" -intl-relativeformat@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-2.1.0.tgz#010f1105802251f40ac47d0e3e1a201348a255df" - integrity sha1-AQ8RBYAiUfQKxH0OPhogE0iiVd8= +intl-messageformat@^8.3.10: + version "8.3.10" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-8.3.10.tgz#4346cf6f3a525fb69f4df2f46e804bf855ea796a" + integrity sha512-0CWciO3DniD8WH0FDkxLlFGAHAYrkeGT2T5sRkrmmg1xFJV64MzgmJU0AiBHbdy/2DGyOxZlba8v6xhrHAygNQ== dependencies: - intl-messageformat "^2.0.0" + intl-format-cache "^4.2.27" + intl-messageformat-parser "^5.0.3" into-stream@^3.1.0: version "3.1.0" @@ -7182,7 +7233,7 @@ into-stream@^3.1.0: from2 "^2.1.1" p-is-promise "^1.1.0" -invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4: +invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -10698,15 +10749,15 @@ react-dev-utils@^4.2.1: strip-ansi "3.0.1" text-table "0.2.0" -react-dom@16.7.0: - version "16.7.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8" - integrity sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg== +react-dom@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" + integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.12.0" + scheduler "^0.19.1" react-error-overlay@^3.0.0: version "3.0.0" @@ -10738,16 +10789,28 @@ react-hot-loader@^4.6.2: shallowequal "^1.0.2" source-map "^0.7.3" -react-intl@^2.7.2: - version "2.8.0" - resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.8.0.tgz#20b0c1f01d1292427768aa8ec9e51ab7e36503ba" - integrity sha512-1cSasNkHxZOXYYhms9Q1tSEWF8AWZQNq3nPLB/j8mYV0ZTSt2DhGQXHfKrKQMu4cgj9J1Crqg7xFPICTBgzqtQ== - dependencies: - hoist-non-react-statics "^2.5.5" - intl-format-cache "^2.0.5" - intl-messageformat "^2.1.0" - intl-relativeformat "^2.1.0" - invariant "^2.1.1" +react-intl@*, react-intl@^4.5.2: + version "4.5.2" + resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-4.5.2.tgz#896920103d5c0e2d17b02ce4cec0f6ac1a618e5c" + integrity sha512-QNhNDWh24VbtYmFEp81AE3Gt7zBDtnABPJ6zSIZewcoAiobyRgug9QqZFdNfNs7xb4m6H8zptQYiBPd/wDo2sw== + dependencies: + "@formatjs/intl-displaynames" "^1.2.9" + "@formatjs/intl-listformat" "^1.4.7" + "@formatjs/intl-relativetimeformat" "^4.5.15" + "@formatjs/intl-unified-numberformat" "^3.3.6" + "@formatjs/intl-utils" "^2.2.5" + "@types/hoist-non-react-statics" "^3.3.1" + "@types/invariant" "^2.2.31" + hoist-non-react-statics "^3.3.2" + intl-format-cache "^4.2.27" + intl-messageformat "^8.3.10" + intl-messageformat-parser "^5.0.3" + shallow-equal "^1.2.1" + +react-is@^16.7.0: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== react-is@^16.8.1: version "16.8.3" @@ -10786,15 +10849,14 @@ react-slick@^0.23.2: prettier "^1.14.3" resize-observer-polyfill "^1.5.0" -react@16.7.0: - version "16.7.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381" - integrity sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A== +react@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" + integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.12.0" read-chunk@^1.0.1: version "1.0.1" @@ -11519,10 +11581,10 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.12.0: - version "0.12.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0.tgz#8ab17699939c0aedc5a196a657743c496538647b" - integrity sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw== +scheduler@^0.19.1: + version "0.19.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" + integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" @@ -11711,6 +11773,11 @@ shallow-compare@^1.2.2: resolved "https://registry.yarnpkg.com/shallow-compare/-/shallow-compare-1.2.2.tgz#fa4794627bf455a47c4f56881d8a6132d581ffdb" integrity sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg== +shallow-equal@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da" + integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA== + shallowequal@^1.0.1, shallowequal@^1.0.2: version "1.1.0" resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" From 39b8ae07bb9f22aa5ea66daaad63724152ae8cc0 Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Tue, 5 May 2020 18:26:50 +0900 Subject: [PATCH 07/31] clients shrink according to screen size --- src/components/Clients/index.tsx | 47 ++++- src/components/Splash/index.tsx | 7 +- src/components/Testimonial/index.tsx | 270 ++++++++++++++++----------- src/layouts/index.tsx | 2 +- src/styles/colors.ts | 3 +- 5 files changed, 199 insertions(+), 130 deletions(-) diff --git a/src/components/Clients/index.tsx b/src/components/Clients/index.tsx index 5021956..a11d15a 100644 --- a/src/components/Clients/index.tsx +++ b/src/components/Clients/index.tsx @@ -10,14 +10,33 @@ import { colors } from '../../styles/colors'; const StyledDiv = styled.div` background-color: #ffffff; width: 100%; - padding: 70px 250px; + padding: 60px 230px; display: grid; + @media (max-width: 800px) { + padding: 60px 100px; + } + @media (max-width: 500px) { + padding: 60px 50px; + } `; const ClientsWrapper = styled.div` display: flex; justify-content: space-between; - margin-top: 10px; + flex-wrap: wrap; + + .client { + width: 16%; + position: relative; + display: flex; + justify-content: center; + margin-top: 20px; + } + @media (max-width: 1300px) { + .client { + width: 30%; + } + } `; const title = css` @@ -26,7 +45,6 @@ const title = css` justify-self: center; line-height: 42px; font-size: 30px; - color: ${colors.textcolor}; `; const Clients: React.FC<{}> = ({}) => { @@ -34,11 +52,24 @@ const Clients: React.FC<{}> = ({}) => {

    Our clients

    - - - - - +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    ); diff --git a/src/components/Splash/index.tsx b/src/components/Splash/index.tsx index 6b08da4..2221bc2 100644 --- a/src/components/Splash/index.tsx +++ b/src/components/Splash/index.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; import { Link } from 'gatsby'; import styled from '@emotion/styled'; -import logo from '../../content/img/x-tech-logo.svg'; import t from '../../content/i18n'; -import { Button } from '../Button'; import { colors } from '../../styles/colors'; const StyledSplash = styled.section` @@ -66,10 +64,9 @@ const StyledSplash = styled.section` .intro > .intro-text { position: absolute; width: 689px; - top: 388px; + top: 350px; left: 103px; height: 96px; - /* //TODO font-family sarala */ font-family: Sarala, sans-serif; font-size: 26px; line-height: 42px; @@ -80,7 +77,7 @@ const StyledSplash = styled.section` position: absolute; width: 200px; height: 83px; - top: 553px; + top: 540px; left: 103px; background: ${colors.yellow}; border-radius: 7px; diff --git a/src/components/Testimonial/index.tsx b/src/components/Testimonial/index.tsx index adf7712..61e68ef 100644 --- a/src/components/Testimonial/index.tsx +++ b/src/components/Testimonial/index.tsx @@ -1,112 +1,52 @@ import React from 'react'; -import styled from "@emotion/styled"; -import Slider from "react-slick"; -import { StaticQuery, graphql } from "gatsby"; +import styled from '@emotion/styled'; +import Slider from 'react-slick'; +import { StaticQuery, graphql } from 'gatsby'; const TestimonialContainer = styled.div` - .testimonials-01 { - padding: 50px 0 200px; - text-align: center; } - @media (max-device-width: 800px) { - testimonials-01 { - padding: 70px 0 0px 0px; - } - } - .heading{ - margin-bottom:70px; - font-size:48px; - } - .testimonials-01 .slick-prev { - left: 50px; - &::before{ - color: #333; - } - } - .testimonials-01 .slick-next { - right: 50px; - &::before{ - color: #333; - } - } - @media (max-width: 800px) { - .testimonials-01 .slick-dots { - bottom: -20px; } } - .testimonials-01 .slick-slide { - padding: 0 15px; } - .testimonials-01 .slider__box:before { - position: absolute; - z-index: 100; - top: 0; - bottom: 0; - left: 0; - width: 15px; - background-image: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0) 100%); } - @media (max-width: 800px) { - .testimonials-01 .slider__box:before { - content: ""; } } - .testimonials-01 .slider__box:after { - position: absolute; - z-index: 100; - top: 0; - bottom: 0; - right: 0; - width: 15px; - background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 100%); } - @media (max-width: 800px) { - .testimonials-01 .slider__box:after { - content: ""; } } - - @media (max-width: 800px) { - .testimonials-01__container { - padding-left: 0; - padding-right: 0; } } - - .testimonials-01__item { - display: inline-block; - position: relative; - padding: 35px 30px 25px; - max-width: 580px; - margin-bottom: 20px; - margin-top: 20px; - border-radius: 10px; - box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); - background-color: white; - text-align: left; } + position: relative; + display: flex; + justify-content: space-between; + padding: 90px; + width: auto; + background-color: #ffffff; + min-height: 650px; - .testimonials-01__logo { - max-height: 30px; } - .testimonials-01__logo--round { - border-radius: 50%; - box-shadow: 0 5px 15px 0 rgba(37, 44, 97, 0.15); } - - .testimonials-01__text { - color: #636363; - line-height: 1.6; } + .title { + position: absolute; - .testimonials-01__author { - text-align: right; - color: #4D61FC; - font-size: 14px; - line-height: 1.4; } + font-family: Saira; + letter-spacing: 1px; + color: black; + line-height: 84px; + margin-bottom: 0; + position: absolute; + } `; export interface TestimonialProps { - [key: string]: any, + [key: string]: any; } export interface TestimonialCardProps { - id: string, - name: string, - title: string, - testimonial: string, + id: string; + name: string; + title: string; + testimonial: string; } -const TestimonialCard: React.FunctionComponent = (props: TestimonialCardProps) => ( +const TestimonialCard: React.FunctionComponent = ( + props: TestimonialCardProps, +) => (
    {/* */}

    {props.testimonial}

    -
    {props.name}
    {props.title}
    +
    + {props.name} +
    + {props.title} +
    ); @@ -115,27 +55,23 @@ const renderTestimonial = (data: any): React.ReactNode => { const testimonials: any[] = data.allTestimonialYaml.edges.map((x: any): any => x.node); return ( -
    -
    -
    -

    What People Say

    - {/*

    Grey, aged pudding is best marinated with sweet hollanders sauce.

    */} -
    -
    -
    - - {testimonials.map( - testimonial => - )} - -
    +
    +

    What People Say

    +
    + +
    + + {testimonials.map(testimonial => ( + + ))} +
    ); @@ -170,4 +106,110 @@ class Testimonial extends React.Component { } } -export default Testimonial; \ No newline at end of file +export default Testimonial; + +/* +const TestimonialContainer = styled.div` + .testimonials-01 { + padding: 50px 0 200px; + text-align: center; + } + @media (max-device-width: 800px) { + testimonials-01 { + padding: 70px 0 0px 0px; + } + } + .heading { + margin-bottom: 70px; + font-size: 48px; + } + .testimonials-01 .slick-prev { + left: 50px; + &::before { + color: #333; + } + } + .testimonials-01 .slick-next { + right: 50px; + &::before { + color: #333; + } + } + @media (max-width: 800px) { + .testimonials-01 .slick-dots { + bottom: -20px; + } + } + .testimonials-01 .slick-slide { + padding: 0 15px; + } + .testimonials-01 .slider__box:before { + position: absolute; + z-index: 100; + top: 0; + bottom: 0; + left: 0; + width: 15px; + background-image: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0) 100%); + } + @media (max-width: 800px) { + .testimonials-01 .slider__box:before { + content: ''; + } + } + .testimonials-01 .slider__box:after { + position: absolute; + z-index: 100; + top: 0; + bottom: 0; + right: 0; + width: 15px; + background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 100%); + } + @media (max-width: 800px) { + .testimonials-01 .slider__box:after { + content: ''; + } + } + + @media (max-width: 800px) { + .testimonials-01__container { + padding-left: 0; + padding-right: 0; + } + } + + .testimonials-01__item { + display: inline-block; + position: relative; + padding: 35px 30px 25px; + max-width: 580px; + margin-bottom: 20px; + margin-top: 20px; + border-radius: 10px; + box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); + background-color: white; + text-align: left; + } + + .testimonials-01__logo { + max-height: 30px; + } + .testimonials-01__logo--round { + border-radius: 50%; + box-shadow: 0 5px 15px 0 rgba(37, 44, 97, 0.15); + } + + .testimonials-01__text { + color: #636363; + line-height: 1.6; + } + + .testimonials-01__author { + text-align: right; + color: #4d61fc; + font-size: 14px; + line-height: 1.4; + } +`; +*/ diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 9dc6d0f..2849d1c 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -273,7 +273,7 @@ html { body { overflow-x: hidden; /* color: color(var(--midgrey) l(-25%)); */ - color: ${darken('0.25', colors.midgrey)}; + color: ${colors.midgrey}; font-family: Sarala, Saira, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 1.5rem; line-height: 1.6em; diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 644c5f0..93487b3 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -7,7 +7,7 @@ export const colors = { fadedyellow: '#FFDB60', red: '#f05230', darkgrey: '#15171A', - midgrey: '#738a94', + midgrey: '#474747', lightgrey: '#c5d2d9', whitegrey: '#e5eff5', pink: '#fa3a57', @@ -15,5 +15,4 @@ export const colors = { gray: '#272727', backgroundgray: '#F8F8F8', darkyellow: '#735D13', - textcolor: '#474747', }; From 619aa12a5aaee14332e73d64ff4b7bb972e28264 Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Wed, 6 May 2020 18:17:52 +0900 Subject: [PATCH 08/31] testimonials --- src/components/Splash/index.tsx | 1 - src/components/Testimonial/index.tsx | 170 ++++++++++++++++++++++++--- src/components/icons/medium.tsx | 4 +- src/components/icons/rss.tsx | 4 +- src/components/icons/twitter.tsx | 17 +-- src/layouts/index.tsx | 8 +- 6 files changed, 166 insertions(+), 38 deletions(-) diff --git a/src/components/Splash/index.tsx b/src/components/Splash/index.tsx index 2221bc2..7519294 100644 --- a/src/components/Splash/index.tsx +++ b/src/components/Splash/index.tsx @@ -54,7 +54,6 @@ const StyledSplash = styled.section` left: 45px; top: 32px; font-family: Saira; - font-style: normal; font-weight: 500; font-size: 300px; line-height: 300px; diff --git a/src/components/Testimonial/index.tsx b/src/components/Testimonial/index.tsx index 61e68ef..00a3271 100644 --- a/src/components/Testimonial/index.tsx +++ b/src/components/Testimonial/index.tsx @@ -1,26 +1,159 @@ import React from 'react'; import styled from '@emotion/styled'; import Slider from 'react-slick'; +import { colors } from '../../styles/colors'; import { StaticQuery, graphql } from 'gatsby'; +import Koch from '../icons/clients/koch'; const TestimonialContainer = styled.div` position: relative; display: flex; - justify-content: space-between; padding: 90px; width: auto; background-color: #ffffff; min-height: 650px; + flex-direction: row; .title { - position: absolute; - - font-family: Saira; - letter-spacing: 1px; + position: relative; + max-width: 350px; + width: 100%; color: black; line-height: 84px; - margin-bottom: 0; + font-family: Saira; + font-weight: 600 !important; + font-size: 66px; + line-height: 84px; + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='2' stroke-dasharray='10' stroke-dashoffset='23' stroke-linecap='square'/%3e%3c/svg%3e"); + } + + .quote { position: absolute; + width: 133px; + height: 70px; + right: 30px; + bottom: 100px; + font-family: Saira; + font-weight: 500; + font-size: 300px; + line-height: 300px; + color: ${colors.yellow}; + transform: rotate(180deg); + } + + .testimonials-container { + width: 65%; + flex: 1; + + background-color: ${colors.backgroundgray}; + } + + .slick-dots { + text-align: end; + } + + @media (max-width: 800px) { + & { + flex-direction: column; + } + + .title { + max-width: 100%; + width: 100%; + } + + .quote { + bottom: 0; + right: -95px; + } + + .testimonials-container { + width: 100%; + } + } + + .testimonials-01 .slick-prev { + left: 50px; + &::before { + color: #333; + } + } + .testimonials-01 .slick-next { + right: 50px; + &::before { + color: #333; + } + } + @media (max-width: 800px) { + .testimonials-01 .slick-dots { + bottom: -20px; + } + } + .testimonials-01 .slick-slide { + padding: 0 15px; + } + .testimonials-01 .slider__box:before { + position: absolute; + z-index: 100; + top: 0; + bottom: 0; + left: 0; + width: 15px; + background-image: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0) 100%); + } + @media (max-width: 800px) { + .testimonials-01 .slider__box:before { + content: ''; + } + } + .testimonials-01 .slider__box:after { + position: absolute; + z-index: 100; + top: 0; + bottom: 0; + right: 0; + width: 15px; + background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 100%); + } + @media (max-width: 800px) { + .testimonials-01 .slider__box:after { + content: ''; + } + } + + @media (max-width: 800px) { + .testimonials-01__container { + padding-left: 0; + padding-right: 0; + } + } + + .testimonials-01__item { + position: relative; + margin-bottom: 20px; + text-align: left; + padding: 40px; + } + + .testimonials-01__logo { + float: right; + } + .testimonials-01__logo--round { + border-radius: 50%; + box-shadow: 0 5px 15px 0 rgba(37, 44, 97, 0.15); + } + + .testimonial_title { + font-weight: bold; + font-size: 30px; + line-height: 36px; + color: black; + } + + .testimonials-01__text { + color: #636363; + font-size: 20px; + line-height: 36px; } `; @@ -38,15 +171,17 @@ export interface TestimonialCardProps { const TestimonialCard: React.FunctionComponent = ( props: TestimonialCardProps, ) => ( -
    -
    - {/* */} -

    {props.testimonial}

    -
    - {props.name} -
    - {props.title} -
    +
    +
    + +
    +

    Testimonial title

    +

    {props.testimonial}

    + +
    + {props.name} +
    + {props.title}
    ); @@ -56,10 +191,11 @@ const renderTestimonial = (data: any): React.ReactNode => { return (
    -

    What People Say

    +

    What people say

    +
    -
    +
    ( - + diff --git a/src/components/icons/rss.tsx b/src/components/icons/rss.tsx index 9c4fa0d..5ae01c3 100644 --- a/src/components/icons/rss.tsx +++ b/src/components/icons/rss.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; const RSS: React.FunctionComponent = () => ( - + diff --git a/src/components/icons/twitter.tsx b/src/components/icons/twitter.tsx index 3408a51..a2d2615 100644 --- a/src/components/icons/twitter.tsx +++ b/src/components/icons/twitter.tsx @@ -2,18 +2,11 @@ import * as React from 'react'; const Twitter: React.FunctionComponent = () => ( - - - - - - - - - + + ); export default Twitter; diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 2849d1c..7a2e370 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -444,17 +444,17 @@ h1 { h2 { margin: 1.5em 0 0.5em 0; - font-size: 2rem; + font-size: 5rem; } @media (max-width: 500px) { h2 { - font-size: 1.8rem; + font-size: 2rem; } } h3 { margin: 1.5em 0 0.5em 0; - font-size: 1.8rem; + font-size: 4rem; font-weight: 500; } @media (max-width: 500px) { @@ -465,7 +465,7 @@ h3 { h4 { margin: 1.5em 0 0.5em 0; - font-size: 1.6rem; + font-size: 3rem; font-weight: 500; } From bda00a6f57ac72be1f8a1e6a0b4b7ee6dafcf99e Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Thu, 7 May 2020 10:43:35 +0900 Subject: [PATCH 09/31] window --- src/components/header/SiteNav.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/header/SiteNav.tsx b/src/components/header/SiteNav.tsx index 10005ec..0a5504c 100644 --- a/src/components/header/SiteNav.tsx +++ b/src/components/header/SiteNav.tsx @@ -165,6 +165,10 @@ const SiteNavItem: React.FC<{ path: string; label: string; exact?: boolean }> = exact, }) => { const currentSlug = () => { + if (typeof window === 'undefined') { + return; + } + if (exact) { return window.location.pathname === path ? `${bold}` : ''; } From 55cfa574478934d650589bef08a6e279263e8686 Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Thu, 7 May 2020 10:55:46 +0900 Subject: [PATCH 10/31] testimonials title hardcoded --- src/components/Testimonial/index.tsx | 9 +++++++-- src/layouts/index.tsx | 4 ++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/Testimonial/index.tsx b/src/components/Testimonial/index.tsx index 00a3271..50bfcec 100644 --- a/src/components/Testimonial/index.tsx +++ b/src/components/Testimonial/index.tsx @@ -21,7 +21,6 @@ const TestimonialContainer = styled.div` color: black; line-height: 84px; font-family: Saira; - font-weight: 600 !important; font-size: 66px; line-height: 84px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='2' stroke-dasharray='10' stroke-dashoffset='23' stroke-linecap='square'/%3e%3c/svg%3e"); @@ -191,7 +190,13 @@ const renderTestimonial = (data: any): React.ReactNode => { return (
    -

    What people say

    +

    + What +
    + the people +
    + say +

    diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 7a2e370..4319ece 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -427,14 +427,14 @@ h5, h6 { margin-top: 0; line-height: 1.15; - font-weight: 700; + font-weight: 600; text-rendering: optimizeLegibility; } h1 { margin: 0 0 0.5em 0; font-size: 6.6rem; - font-weight: 700; + font-weight: 600; } @media (max-width: 500px) { h1 { From 0b5eb2ecb041c2280d3b0ed0719bbbf34df366a6 Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Thu, 7 May 2020 16:21:20 +0900 Subject: [PATCH 11/31] projects highlights, blog in progress. tags change color --- src/components/HighlightedProject/index.tsx | 193 +++++++++++--------- src/components/PostCard.tsx | 56 +++--- src/components/Tag.tsx | 49 +++++ src/components/Testimonial/index.tsx | 106 ----------- src/components/icons/arrow.tsx | 20 ++ src/content/projects/Lionstep/index.en.md | 2 +- src/pages/index.tsx | 11 +- 7 files changed, 213 insertions(+), 224 deletions(-) create mode 100644 src/components/Tag.tsx create mode 100644 src/components/icons/arrow.tsx diff --git a/src/components/HighlightedProject/index.tsx b/src/components/HighlightedProject/index.tsx index 6912161..24e6a4e 100644 --- a/src/components/HighlightedProject/index.tsx +++ b/src/components/HighlightedProject/index.tsx @@ -1,80 +1,110 @@ import React from 'react'; import Img from 'gatsby-image'; -import styled from "@emotion/styled"; -import Slider from "react-slick"; -import { StaticQuery, graphql, Link } from "gatsby"; +import styled from '@emotion/styled'; +import Slider from 'react-slick'; +import { StaticQuery, graphql, Link } from 'gatsby'; import t from '../../content/i18n'; import { PageContext } from '../../templates/project'; +import { settings } from 'cluster'; const HighlightedProjectContainer = styled.div` -align-content: center; -.slider-01 { - padding-top: 70px; - width: 100%; - margin: 0 auto; - padding-bottom: 100px; } - .slider-01 .slick-list { - border-radius: 10px; - box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); } - .slider-01 .slick-prev { + align-content: center; + .slider-01 { + padding-top: 70px; + width: 100%; + margin: 0 auto; + padding-bottom: 100px; + } + /* .slider-01 .slick-list { + height: 100%; + } */ + /* .slider-01 .slick-prev { left: 50px; z-index: 99; - &::before{ - color:#333; + &::before { + color: #333; } } .slider-01 .slick-next { right: 50px; z-index: 99; - &::before{ - color:#333; + &::before { + color: #333; } - } - -.slider-01__title_box { - text-align: center; - margin-bottom: 30px; } + } */ -.slider-01__container { - text-align: center; } - - .slider { - position: relative; } + .slider-01__title_box { + text-align: center; + margin-bottom: 30px; + } -.slider__arrow { - position: absolute; - z-index: 10; - top: 50%; - transform: translateY(-50%); } - .slider__arrow--prev { - left: 0; } + /* .slider-01__container { + text-align: center; + height: 500px; + } */ + + /* .slider__arrow { + position: absolute; + z-index: 10; + top: 50%; + transform: translateY(-50%); + } */ + /* .slider__arrow--prev { + left: 0; + } .slider__arrow--next { - right: 0; } + right: 0; + } */ @media (max-width: 1275px) { .slider__arrow { - display: none; } } + display: none; + } + } -.slider__box { - padding: 0; - margin: 0; - list-style: none; } + .slider__box { + padding: 0; + margin: 0; + width: 100vw; + margin-left: 100px; + list-style: none; + height: 450px; + } -.slick-slide { - outline: none; } -.slick-list{ - box-shadow:0 0 0 0 transparent!important; -} + .slick-slide { + outline: none; + } + .slick-list { + box-shadow: 0 0 0 0 transparent !important; + } -.slider__img { - width: 100%; } -.slider__item_box{ - width:65%; - margin: auto; + .slider__img { + width: 100%; + height: 300px; } + + .slick-current .slider__item_box { + /* transform: scale(1.4); */ + transition-delay: 0.1s; + transition-duration: 0.4s; + padding: 0; + margin: 0; + height: 450px; + width: 600px; + } + + .slider__item_box { + margin: 50px 0 0 50px; + padding: 50px 0 0 0; + } + + /* .slick-list { + padding: 45px 60px !important; + margin-left: 30px !important; + } */ `; export interface TestimonialProps { - [key: string]: any, + [key: string]: any; } export interface HighlightedProjectItemProps { @@ -89,21 +119,19 @@ export interface HighlightedProjectItemProps { fields: { langKey: string; slug: string; - } + }; } -const ProjectCard: React.FunctionComponent = (props: HighlightedProjectItemProps) => ( +const ProjectCard: React.FunctionComponent = props => (
    - +
    -
    - {props.frontmatter.title} -
    +
    {props.frontmatter.title}
    ); @@ -115,43 +143,38 @@ export interface HighlightedProjectProps { }; } - -const HighlightedProject: React.FunctionComponent= ({projects}) => { +const HighlightedProject: React.FunctionComponent = ({ projects }) => { if (!projects) { return null; } - const highlightedProjects: PageContext[] = projects.edges.map((x) => x.node); + const highlightedProjects: PageContext[] = projects.edges.map(x => x.node); return ( -
    -
    -
    -

    {t["general.projects.title"]()}

    -

    - {t["general.projects.subtitle"]()} -

    -
    -
    -
    -
    - - {highlightedProjects.map( - highlightedProject => - )} - -
    + {/*
    */} +
    +
    +

    {t['general.projects.title']()}

    +

    {t['general.projects.subtitle']()}

    + + + {highlightedProjects.concat(highlightedProjects).map(highlightedProject => ( + + ))} + + {/*
    */} ); }; -export default HighlightedProject; \ No newline at end of file +export default HighlightedProject; diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index 59905e9..a559a15 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -5,6 +5,7 @@ import { lighten } from 'polished'; import * as React from 'react'; import styled from '@emotion/styled'; import { css } from 'emotion'; +import { Tag } from './Tag'; import { colors } from '../styles/colors'; import { PageContext } from '../templates/post'; @@ -14,8 +15,8 @@ const PostCardStyles = css` display: flex; flex-direction: column; overflow: hidden; - margin: 0 20px 40px; - min-height: 300px; + margin: 0 10px 40px; + max-height: 420px; background: #fff center center; background-size: cover; border-radius: 5px; @@ -32,12 +33,11 @@ const PostCardStyles = css` const PostCardImageLink = css` position: relative; display: block; - overflow: hidden; border-radius: 5px 5px 0 0; `; const PostCardImage = styled.div` - width: auto; + width: 100%; height: 200px; background: ${colors.lightgrey} no-repeat center center; background-size: cover; @@ -54,7 +54,7 @@ const PostCardContentLink = css` position: relative; flex-grow: 1; display: block; - padding: 25px 25px 0; + padding: 10px 16px; color: ${colors.darkgrey}; :hover { @@ -62,19 +62,16 @@ const PostCardContentLink = css` } `; -const PostCardTags = styled.span` - display: block; - margin-bottom: 4px; - color: ${colors.midgrey}; - font-size: 1.2rem; - line-height: 1.15em; - font-weight: 500; - letter-spacing: 0.5px; - text-transform: uppercase; +const TagList = styled.div` + display: flex; + flex-wrap: wrap; `; const PostCardTitle = styled.h2` - margin-top: 0; + margin-top: 10px; + font-weight: bold; + font-size: 30px; + line-height: 44px; `; const PostCardExcerpt = styled.section` @@ -198,13 +195,13 @@ export interface PostCardProps { const PostCard: React.FunctionComponent = ({ post }) => { return ( -
    +
    {post.frontmatter.image && ( - + {post.frontmatter.image && post.frontmatter.image.childImageSharp.fluid && ( {`${post.frontmatter.title} = ({ post }) => { )} - + -
    - {post.frontmatter.tags && {post.frontmatter.tags[0]}} - {post.frontmatter.title} -
    - + + {post.frontmatter.tags && post.frontmatter.tags.map(tag => {tag})} + + {post.frontmatter.title} + + {/*

    {post.excerpt}

    -
    +
    */} - + {/* - - {post.frontmatter.author.name} - + {post.frontmatter.author.name} = ({ post }) => { {post.timeToRead} min read - + */}
    ); diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx new file mode 100644 index 0000000..4b37390 --- /dev/null +++ b/src/components/Tag.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import styled from '@emotion/styled'; + +const TagItem = styled.a` + text-decoration: none !important; + display: block; + padding: 0 8px; + margin-right: 10px; + background-color: ${(props: any) => props.inputColor || 'gray'}; + border-radius: 3rem; + width: fit-content; + height: 22px; + font-weight: 600; + font-size: 13px; + line-height: 22px; + text-transform: uppercase; + color: white; + text-align: center; +`; + +export interface ITagProps { + name: string; +} + +export const Tag: React.FC = ({ name }) => { + const hashCode = (str: string) => { + let hash = 0; + for (let i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5) - hash); + } + return hash; + }; + + const intToRGB = (i: number) => { + let c = (i & 0x00ffffff).toString(16).toUpperCase(); + console.log(name, i, i & 0x00ffffff); + return { + isDark: (i & 0x00ffffff) < 11725151, + inputColor: '#' + '00000'.substring(0, 6 - c.length) + c, + }; + }; + + const intToHSL = (i: number) => { + var shortened = i % 360; + return { inputColor: 'hsl(' + shortened + ',70%,38%)' }; + }; + + return {name}; +}; diff --git a/src/components/Testimonial/index.tsx b/src/components/Testimonial/index.tsx index 50bfcec..94ca65e 100644 --- a/src/components/Testimonial/index.tsx +++ b/src/components/Testimonial/index.tsx @@ -248,109 +248,3 @@ class Testimonial extends React.Component { } export default Testimonial; - -/* -const TestimonialContainer = styled.div` - .testimonials-01 { - padding: 50px 0 200px; - text-align: center; - } - @media (max-device-width: 800px) { - testimonials-01 { - padding: 70px 0 0px 0px; - } - } - .heading { - margin-bottom: 70px; - font-size: 48px; - } - .testimonials-01 .slick-prev { - left: 50px; - &::before { - color: #333; - } - } - .testimonials-01 .slick-next { - right: 50px; - &::before { - color: #333; - } - } - @media (max-width: 800px) { - .testimonials-01 .slick-dots { - bottom: -20px; - } - } - .testimonials-01 .slick-slide { - padding: 0 15px; - } - .testimonials-01 .slider__box:before { - position: absolute; - z-index: 100; - top: 0; - bottom: 0; - left: 0; - width: 15px; - background-image: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0) 100%); - } - @media (max-width: 800px) { - .testimonials-01 .slider__box:before { - content: ''; - } - } - .testimonials-01 .slider__box:after { - position: absolute; - z-index: 100; - top: 0; - bottom: 0; - right: 0; - width: 15px; - background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 100%); - } - @media (max-width: 800px) { - .testimonials-01 .slider__box:after { - content: ''; - } - } - - @media (max-width: 800px) { - .testimonials-01__container { - padding-left: 0; - padding-right: 0; - } - } - - .testimonials-01__item { - display: inline-block; - position: relative; - padding: 35px 30px 25px; - max-width: 580px; - margin-bottom: 20px; - margin-top: 20px; - border-radius: 10px; - box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); - background-color: white; - text-align: left; - } - - .testimonials-01__logo { - max-height: 30px; - } - .testimonials-01__logo--round { - border-radius: 50%; - box-shadow: 0 5px 15px 0 rgba(37, 44, 97, 0.15); - } - - .testimonials-01__text { - color: #636363; - line-height: 1.6; - } - - .testimonials-01__author { - text-align: right; - color: #4d61fc; - font-size: 14px; - line-height: 1.4; - } -`; -*/ diff --git a/src/components/icons/arrow.tsx b/src/components/icons/arrow.tsx new file mode 100644 index 0000000..4b2f62f --- /dev/null +++ b/src/components/icons/arrow.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; + +const Arrow: React.FC = () => ( + + + + + +); + +export default Arrow; diff --git a/src/content/projects/Lionstep/index.en.md b/src/content/projects/Lionstep/index.en.md index dd02d0a..db1baa1 100644 --- a/src/content/projects/Lionstep/index.en.md +++ b/src/content/projects/Lionstep/index.en.md @@ -24,4 +24,4 @@ We quickly kicked off a proof-of-concept project with them, showing how we could We also saw that the raw data processing had a big issue - the client's data science team who is actively improving the data was having trouble doing iterations on the raw data set of over a hundred million records, which prevents them from surfacing more candidate to their customers. -At the end, we proposed to also set up a fully automated data pipeline to help their data scientists speed up their data processing workflow. We deployed two production-grade Elasticsearch cluster to hold both the raw data and the processed data, with the ease of scheduling cron jobs alongside of the cluster using Kubernetes. We now see a huge improvement of search performance for over 20 million records which can be done within seconds, and also with the improved workflow, the candidate data pool is growing steadily. \ No newline at end of file +At the end, we proposed to also set up a fully automated data pipeline to help their data scientists speed up their data processing workflow. We deployed two production-grade Elasticsearch cluster to hold both the raw data and the processed data, with the ease of scheduling cron jobs alongside of the cluster using Kubernetes. We now see a huge improvement of search performance for over 20 million records which can be done within seconds, and also with the improved workflow, the candidate data pool is growing steadily. diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8d99d4e..78f1585 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -26,6 +26,7 @@ import { } from '../styles/shared'; import { PageContext } from '../templates/post'; import Testimonial from '../components/Testimonial'; +import Arrow from '../components/icons/arrow'; // tslint:disable-next-line:no-import-side-effect import 'slick-carousel/slick/slick.css'; @@ -35,7 +36,7 @@ import HighlightedProject from '../components/HighlightedProject'; import SiteNav from '../components/header/SiteNav'; const HomePosts = css` - @media (min-width: 795px) { + /* @media (min-width: 795px) { .post-card:nth-child(6n + 1):not(.no-image) { flex: 1 1 100%; flex-direction: row; @@ -73,7 +74,7 @@ const HomePosts = css` .post-card:nth-child(6n + 1):not(.no-image) .post-card-meta { padding: 0 40px 30px; } - } + } */ `; export interface IndexProps { @@ -185,6 +186,12 @@ const IndexPage: React.FunctionComponent = props => { {props.data.posts.edges.map(post => { return ; })} +
    +

    Get more out of Xanthous

    + + LEARN MORE + +
    From d23675d757b164e9a599aa5792fb33505ba0a668 Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Thu, 7 May 2020 17:31:31 +0900 Subject: [PATCH 12/31] get more link style --- src/components/PostCard.tsx | 2 +- src/components/Wrapper.tsx | 2 +- src/pages/index.tsx | 30 +++++++++++++++++++++++++++--- src/styles/shared.ts | 4 ++-- 4 files changed, 31 insertions(+), 7 deletions(-) diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index a559a15..c0f7be3 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -11,7 +11,7 @@ import { colors } from '../styles/colors'; import { PageContext } from '../templates/post'; const PostCardStyles = css` - flex: 1 1 300px; + flex: 1; display: flex; flex-direction: column; overflow: hidden; diff --git a/src/components/Wrapper.tsx b/src/components/Wrapper.tsx index 5483e63..2ece86e 100644 --- a/src/components/Wrapper.tsx +++ b/src/components/Wrapper.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import styled from '@emotion/styled' +import styled from '@emotion/styled'; const StyledWrapper = styled.div` display: flex; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 78f1585..c93a964 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -75,6 +75,30 @@ const HomePosts = css` padding: 0 40px 30px; } } */ + .getMore_container { + max-width: 300px; + margin-left: 70px; + max-width: 300px; + margin-left: 70px; + display: flex; + flex-direction: column; + justify-content: space-between; + max-height: 410px; + } + + .getMore_title { + font-family: Saira; + text-align: right; + color: black; + } + + .getMore_link { + align-self: flex-end; + font-size: 30px; + line-height: 44px; + color: #474747; + font-weight: bold; + } `; export interface IndexProps { @@ -186,9 +210,9 @@ const IndexPage: React.FunctionComponent = props => { {props.data.posts.edges.map(post => { return ; })} -
    -

    Get more out of Xanthous

    - + diff --git a/src/styles/shared.ts b/src/styles/shared.ts index 387d448..48618c4 100644 --- a/src/styles/shared.ts +++ b/src/styles/shared.ts @@ -42,13 +42,13 @@ export const PostFeed = css` position: relative; display: flex; flex-wrap: wrap; - margin: 0 -20px; + margin: 20px; padding: 40px 0 0 0; `; export const PostFeedRaise = css` @media (min-width: 900px) { - margin-top: -70px; + /* margin-top: -70px; */ padding-top: 0; } `; From ff03a5f0bc4f89a7f5227a31f36f62128bd851f8 Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Fri, 8 May 2020 17:00:27 +0900 Subject: [PATCH 13/31] projects carousel --- src/components/Clients/index.tsx | 2 +- src/components/Footer.tsx | 4 +- src/components/HighlightedProject/index.tsx | 66 +++++++-------------- src/components/Introduce/Introduce.tsx | 2 +- src/components/LanguangeToggle.tsx | 1 - src/components/Splash/index.tsx | 8 +-- src/components/Wrapper.tsx | 5 +- src/components/header/SiteNav.tsx | 39 ++++++------ src/components/header/SiteNavLogo.tsx | 3 +- src/layouts/index.tsx | 6 +- src/pages/index.tsx | 25 ++++++-- src/styles/shared.ts | 4 +- 12 files changed, 76 insertions(+), 89 deletions(-) diff --git a/src/components/Clients/index.tsx b/src/components/Clients/index.tsx index a11d15a..8e09b1e 100644 --- a/src/components/Clients/index.tsx +++ b/src/components/Clients/index.tsx @@ -10,7 +10,7 @@ import { colors } from '../../styles/colors'; const StyledDiv = styled.div` background-color: #ffffff; width: 100%; - padding: 60px 230px; + padding: 65px 215px; display: grid; @media (max-width: 800px) { padding: 60px 100px; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 509b145..c85a233 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -17,7 +17,7 @@ import RSS from './icons/rss'; const SiteFooter = css` position: relative; padding: 43px 95px; - color: #fff; + /* color: #fff; */ background: ${colors.backgroundgray}; `; @@ -28,6 +28,8 @@ const SiteFooterContent = css` align-items: center; color: #474747; font-size: 1.3rem; + max-width: 1440px; + margin: auto; a { color: #474747; } diff --git a/src/components/HighlightedProject/index.tsx b/src/components/HighlightedProject/index.tsx index 24e6a4e..28eaa7d 100644 --- a/src/components/HighlightedProject/index.tsx +++ b/src/components/HighlightedProject/index.tsx @@ -15,46 +15,12 @@ const HighlightedProjectContainer = styled.div` margin: 0 auto; padding-bottom: 100px; } - /* .slider-01 .slick-list { - height: 100%; - } */ - /* .slider-01 .slick-prev { - left: 50px; - z-index: 99; - &::before { - color: #333; - } - } - .slider-01 .slick-next { - right: 50px; - z-index: 99; - &::before { - color: #333; - } - } */ .slider-01__title_box { text-align: center; margin-bottom: 30px; } - /* .slider-01__container { - text-align: center; - height: 500px; - } */ - - /* .slider__arrow { - position: absolute; - z-index: 10; - top: 50%; - transform: translateY(-50%); - } */ - /* .slider__arrow--prev { - left: 0; - } - .slider__arrow--next { - right: 0; - } */ @media (max-width: 1275px) { .slider__arrow { display: none; @@ -72,6 +38,7 @@ const HighlightedProjectContainer = styled.div` .slick-slide { outline: none; + width: 500px; } .slick-list { box-shadow: 0 0 0 0 transparent !important; @@ -83,24 +50,32 @@ const HighlightedProjectContainer = styled.div` } .slick-current .slider__item_box { - /* transform: scale(1.4); */ + transform: scale(1.2); + transform-origin: bottom right; transition-delay: 0.1s; transition-duration: 0.4s; - padding: 0; - margin: 0; - height: 450px; - width: 600px; + padding-left: 63px; } .slider__item_box { margin: 50px 0 0 50px; - padding: 50px 0 0 0; + padding: 80px 0 0 0; + transform-origin: bottom right; + transition-delay: 0.1s; + transition-duration: 0.4s; + } + + .slick-dots { + bottom: -60px; + width: 100%; + list-style: none; + text-align: center; + max-width: 1260px; } - /* .slick-list { - padding: 45px 60px !important; - margin-left: 30px !important; - } */ + .slick-dots li { + margin: 0; + } `; export interface TestimonialProps { @@ -128,7 +103,7 @@ const ProjectCard: React.FunctionComponent = props - +
    {props.frontmatter.title}
    @@ -167,6 +142,7 @@ const HighlightedProject: React.FunctionComponent = ({ autoplay={false} autoplaySpeed={3000} infinite={true} + swipeToSlide={true} > {highlightedProjects.concat(highlightedProjects).map(highlightedProject => ( diff --git a/src/components/Introduce/Introduce.tsx b/src/components/Introduce/Introduce.tsx index 70ed9d5..4dc64a9 100644 --- a/src/components/Introduce/Introduce.tsx +++ b/src/components/Introduce/Introduce.tsx @@ -9,7 +9,7 @@ const StyledDiv = styled.section` display: flex; justify-content: space-between; flex-wrap: wrap; - padding: 40px 103px; + padding: 40px 90px; overflow: hidden; @media (max-width: 600px) { padding: 40px 20px; diff --git a/src/components/LanguangeToggle.tsx b/src/components/LanguangeToggle.tsx index d56bb61..f2a8cf4 100644 --- a/src/components/LanguangeToggle.tsx +++ b/src/components/LanguangeToggle.tsx @@ -4,7 +4,6 @@ import styled from '@emotion/styled'; const Wrapper = styled.div` display: block; - padding: 4px 10px; color: #fff; border-radius: 10px; opacity: 0.8; diff --git a/src/components/Splash/index.tsx b/src/components/Splash/index.tsx index 7519294..45a3573 100644 --- a/src/components/Splash/index.tsx +++ b/src/components/Splash/index.tsx @@ -28,7 +28,7 @@ const StyledSplash = styled.section` .intro > .intro-title { position: absolute; top: 130px; - left: 96px; + left: 90px; font-family: Saira; letter-spacing: 1px; color: black; @@ -52,7 +52,7 @@ const StyledSplash = styled.section` width: 133px; height: 154px; left: 45px; - top: 32px; + top: 30px; font-family: Saira; font-weight: 500; font-size: 300px; @@ -64,7 +64,7 @@ const StyledSplash = styled.section` position: absolute; width: 689px; top: 350px; - left: 103px; + left: 90px; height: 96px; font-family: Sarala, sans-serif; font-size: 26px; @@ -77,7 +77,7 @@ const StyledSplash = styled.section` width: 200px; height: 83px; top: 540px; - left: 103px; + left: 90px; background: ${colors.yellow}; border-radius: 7px; display: flex; diff --git a/src/components/Wrapper.tsx b/src/components/Wrapper.tsx index 2ece86e..0db98a6 100644 --- a/src/components/Wrapper.tsx +++ b/src/components/Wrapper.tsx @@ -2,9 +2,8 @@ import * as React from 'react'; import styled from '@emotion/styled'; const StyledWrapper = styled.div` - display: flex; - flex-direction: column; - min-height: 100vh; + max-width: 1440px; + margin: auto; `; interface WrapperProps { diff --git a/src/components/header/SiteNav.tsx b/src/components/header/SiteNav.tsx index 0a5504c..5898c82 100644 --- a/src/components/header/SiteNav.tsx +++ b/src/components/header/SiteNav.tsx @@ -15,17 +15,14 @@ const HomeNavRaise = css` position: relative; } `; -// top: -70px; const SiteNavStyles = css` position: relative; - z-index: 300; display: flex; justify-content: space-between; - align-items: flex-start; - overflow-y: hidden; - height: 30px; - font-size: 1.2rem; + max-width: 1440px; + margin: auto; + padding: 0 60px; `; const SiteNavLeft = styled.div` @@ -139,21 +136,21 @@ class SiteNav extends React.Component { console.log(this.props); return (
    -
    - -
    + {/*
    */} + + {/*
    */}
    ); } diff --git a/src/components/header/SiteNavLogo.tsx b/src/components/header/SiteNavLogo.tsx index b00d6c3..124e975 100644 --- a/src/components/header/SiteNavLogo.tsx +++ b/src/components/header/SiteNavLogo.tsx @@ -9,7 +9,7 @@ const SiteNavLogoStyles = css` flex-shrink: 0; display: block; margin-right: 24px; - padding: 11px 0; + padding: 5px 0; color: #fff; font-size: 1.7rem; line-height: 1em; @@ -22,7 +22,6 @@ const SiteNavLogoStyles = css` img { display: block; - position: absolute; width: 100px; height: 18.8px; left: 0px; diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 4319ece..d2df5c8 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -179,7 +179,7 @@ svg:not(:root) { overflow: hidden; } mark { - background-color: #fdffb6; + background-color: #ffffff; } code, kbd, @@ -291,7 +291,7 @@ body { ::selection { text-shadow: none; /* background: color(var(--blue) lightness(+30%)); */ - background: ${lighten('0.3', colors.blue)}; + background: #fff; } hr { @@ -482,7 +482,7 @@ h6 { } body { - background: #f4f8fb; + background: #ffffff; } /* Custom Stylesheet */ diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c93a964..379e32b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -75,6 +75,7 @@ const HomePosts = css` padding: 0 40px 30px; } } */ + .getMore_container { max-width: 300px; margin-left: 70px; @@ -99,6 +100,12 @@ const HomePosts = css` color: #474747; font-weight: bold; } + + .arrow { + display: inline-block; + margin-left: 30px; + /* background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='2' stroke-dasharray='10' stroke-dashoffset='5' stroke-linecap='square'/%3e%3c/svg%3e"); */ + } `; export interface IndexProps { @@ -186,9 +193,9 @@ const IndexPage: React.FunctionComponent = props => { content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> - - + + @@ -213,7 +220,10 @@ const IndexPage: React.FunctionComponent = props => {

    Get more out of Xanthous

    - LEARN MORE + LEARN MORE +
    + +
    @@ -227,8 +237,8 @@ const IndexPage: React.FunctionComponent = props => { loggedInGreeting="Hey! If you have any questions, please drop us a note with your contact info!" loggedOutGreeting="Hey! If you have any questions, please drop us a note with your contact info!" /> -
    {props.children} - -
    +
    ); }; diff --git a/src/pages/blog.zh.tsx b/src/pages/blog.zh.tsx index c6d27ea..74a1ecb 100644 --- a/src/pages/blog.zh.tsx +++ b/src/pages/blog.zh.tsx @@ -125,7 +125,8 @@ const IndexPage: React.FunctionComponent = props => { )} - + {' '} + {/*
    = props => { {config.description} - + {/*
    */}
    diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx index ae71062..1d2f611 100644 --- a/src/pages/contact.tsx +++ b/src/pages/contact.tsx @@ -22,8 +22,8 @@ const Contact: React.FunctionComponent = () => ( Contact Us - Xanthous Tech + -
    @@ -40,8 +40,8 @@ const Contact: React.FunctionComponent = () => (
    -
    {props.children} -
    - + {' '} +
    ); }; diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx index 1e6749f..98bfaa0 100644 --- a/src/pages/projects.tsx +++ b/src/pages/projects.tsx @@ -171,18 +171,8 @@ const IndexPage: React.FunctionComponent = props => { + - {/*
    -
    - - FOR ORIGINAL CHECK PROJECTS.ZH.TSX*/} - - {props.data.logo ? ( @@ -212,9 +202,8 @@ const IndexPage: React.FunctionComponent = props => {
    {props.children} - -
    +
    ); }; diff --git a/src/pages/projects.zh.tsx b/src/pages/projects.zh.tsx index 4f447f2..266a274 100644 --- a/src/pages/projects.zh.tsx +++ b/src/pages/projects.zh.tsx @@ -127,7 +127,29 @@ const IndexPage: React.FunctionComponent = props => { + +
    +
    +
    + {!props.data.allMdx + ? null + : props.data.allMdx.edges.map(post => { + return ; + })} +
    +
    +
    + {props.children} +
    +
    + + ); +}; + +export default IndexPage; + +/*
    = props => {
    -
    -
    -
    - {(!props.data.allMdx) ? null : props.data.allMdx.edges.map(post => { - return ; - })} -
    -
    -
    - {props.children} - -
    {props.children} diff --git a/src/styles/shared.ts b/src/styles/shared.ts index daaf6dc..c97ffa2 100644 --- a/src/styles/shared.ts +++ b/src/styles/shared.ts @@ -48,7 +48,6 @@ export const PostFeed = css` export const PostFeedRaise = css` @media (min-width: 900px) { - /* margin-top: -70px; */ padding-top: 0; } `; From af7e0e65892a0511a1d51bb1c453c298d0884ac6 Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Tue, 12 May 2020 19:56:37 +0900 Subject: [PATCH 24/31] responsive homepage --- src/components/Card.tsx | 2 +- src/components/HighlightedProject/index.tsx | 3 +- src/components/PostCard.tsx | 2 +- src/components/PostFeed/index.tsx | 133 ++++++++++++++++++++ src/components/Splash/index.tsx | 1 + src/components/Testimonial/index.tsx | 6 +- src/pages/index.tsx | 99 +-------------- src/styles/shared.ts | 2 +- 8 files changed, 149 insertions(+), 99 deletions(-) create mode 100644 src/components/PostFeed/index.tsx diff --git a/src/components/Card.tsx b/src/components/Card.tsx index c7bbb5d..ddc1b96 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -14,7 +14,7 @@ const Card = styled.div` display: flex; background: ${colors.backgroundgray}; padding: 53px 20px; - margin: 36px 0; + margin-top: 36px; width: 48%; max-height: 440px; @media (max-width: 950px) { diff --git a/src/components/HighlightedProject/index.tsx b/src/components/HighlightedProject/index.tsx index e39d297..477b979 100644 --- a/src/components/HighlightedProject/index.tsx +++ b/src/components/HighlightedProject/index.tsx @@ -9,6 +9,7 @@ import { settings } from 'cluster'; const HighlightedProjectContainer = styled.div` align-content: center; + padding: 60px 0; .heading { font-family: Saira; @@ -109,7 +110,7 @@ const HighlightedProjectContainer = styled.div` } .slick-dots { - bottom: -60px; + bottom: -20px; width: 100%; list-style: none; text-align: center; diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index e3bb38c..f624397 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -29,7 +29,7 @@ const PostCardStyles = css` transform: translate3D(0, -1px, 0) scale(1.02); } - @media (max-width: 900px) { + @media (max-width: 1355px) { :nth-child(3) { display: none; } diff --git a/src/components/PostFeed/index.tsx b/src/components/PostFeed/index.tsx new file mode 100644 index 0000000..2af5c0b --- /dev/null +++ b/src/components/PostFeed/index.tsx @@ -0,0 +1,133 @@ +import React from 'react'; +import styled from '@emotion/styled'; +import { PageContext } from '../../templates/post'; +import PostCard from '../PostCard'; +import Arrow from '../icons/arrow'; + +const PostFeedContainer = styled.div` + align-content: center; + padding: 60px 30px; + + .getMore_container { + max-width: 300px; + margin-left: 70px; + max-width: 300px; + margin-left: 70px; + display: flex; + flex-direction: column; + justify-content: space-between; + max-height: 410px; + } + + .getMore_title { + font-family: Saira; + text-align: right; + color: black; + } + + .getMore_link { + align-self: flex-end; + font-size: 30px; + line-height: 44px; + color: #474747; + font-weight: bold; + } + + .arrow { + display: inline-block; + margin-left: 30px; + height: 45px; + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='1' stroke-dasharray='5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); + } + + @media (max-width: 900px) { + .getMore_container { + display: none; + } + + .getMore_link { + position: absolute; + right: 70px; + font-size: 20px; + line-height: 30px; + font-weight: bold; + } + + .arrow { + display: inline-block; + margin-left: 20px; + height: 40px; + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='1' stroke-dasharray='5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); + } + } +`; + +const PostsContainer = styled.div` + position: relative; + display: flex; + flex-wrap: wrap; + margin-bottom: 20px; + @media (max-width: 900px) { + padding: 0 70px; + } +`; + +const PostFeedTitle = styled.div` + max-width: 100%; + width: 100%; + justify-content: center; + align-items: center; + display: none; + @media (max-width: 900px) { + display: flex; + } +`; + +const PostFeedLink = styled.div` + display: none; + @media (max-width: 900px) { + display: flex; + } +`; + +export interface PostFeedProps { + posts: { + edges: { + node: PageContext; + }[]; + }; +} + +const PostFeed: React.FunctionComponent = ({ posts }) => { + return ( + + +

    Get more out of Xanthous

    +
    + + {posts.edges.slice(0, 3).map(post => { + return ; + })} +
    +

    Get more out of Xanthous

    + + LEARN MORE +
    + +
    +
    +
    +
    + + + LEARN MORE +
    + +
    +
    +
    +
    + ); +}; + +export default PostFeed; diff --git a/src/components/Splash/index.tsx b/src/components/Splash/index.tsx index b0f9115..5d2e6f0 100644 --- a/src/components/Splash/index.tsx +++ b/src/components/Splash/index.tsx @@ -125,6 +125,7 @@ const StyledSplash = styled.section` @media (max-width: 1025px) { .intro { + min-height: 550px; background-size: 400px; } .intro > .intro-quote { diff --git a/src/components/Testimonial/index.tsx b/src/components/Testimonial/index.tsx index 41c7ab1..d0a4ae2 100644 --- a/src/components/Testimonial/index.tsx +++ b/src/components/Testimonial/index.tsx @@ -7,12 +7,14 @@ import { StaticQuery, graphql } from 'gatsby'; const TestimonialContainer = styled.div` position: relative; display: flex; - padding: 90px 20px; + padding: 60px 30px; width: auto; background-color: #ffffff; min-height: 650px; flex-direction: row; - + @media (max-width: 900px) { + padding: 60px 70px; + } .title { position: relative; display: flex; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5926cb7..0c89efa 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -20,10 +20,7 @@ import Introduce from '../components/Introduce/Introduce'; import { PageContext } from '../templates/post'; import HighlightedProject from '../components/HighlightedProject'; import Testimonial from '../components/Testimonial'; -import PostCard from '../components/PostCard'; - -import Arrow from '../components/icons/arrow'; -import { inner, outer, PostFeed, PostFeedRaise, SiteMain } from '../styles/shared'; +import PostFeed from '../components/PostFeed'; const HomePosts = css` /* @media (min-width: 795px) { @@ -65,59 +62,6 @@ const HomePosts = css` padding: 0 40px 30px; } } */ - - .getMore_container { - max-width: 300px; - margin-left: 70px; - max-width: 300px; - margin-left: 70px; - display: flex; - flex-direction: column; - justify-content: space-between; - max-height: 410px; - } - - .getMore_title { - font-family: Saira; - text-align: right; - color: black; - } - - .getMore_link { - align-self: flex-end; - font-size: 30px; - line-height: 44px; - color: #474747; - font-weight: bold; - } - - .arrow { - display: inline-block; - margin-left: 30px; - height: 45px; - background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='1' stroke-dasharray='5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); - } - - @media (max-width: 900px) { - .getMore_container { - display: none; - } - - .getMore_link { - position: absolute; - right: 70px; - font-size: 20px; - line-height: 30px; - font-weight: bold; - } - - .arrow { - display: inline-block; - margin-left: 20px; - height: 35px; - background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='1' stroke-dasharray='5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); - } - } `; export interface IndexProps { @@ -167,7 +111,7 @@ export interface IndexProps { const IndexPage: React.FunctionComponent = props => { const width = props.data.header.childImageSharp.fluid.sizes.split(', ')[1].split('px')[0]; const height = String(Number(width) / props.data.header.childImageSharp.fluid.aspectRatio); - const linkPrefix = props.langKey === 'en' ? '' : props.langKey; + // const linkPrefix = props.langKey === 'en' ? '' : props.langKey; return ( @@ -211,42 +155,11 @@ const IndexPage: React.FunctionComponent = props => { -
    - -
    + + {/* */} -
    - -
    -
    -
    - {/*
    - {props.data.projects.edges.map(post => { - return ; - })} -
    */} -
    - {props.data.posts.edges.slice(0, 3).map(post => { - return ; - })} -
    -

    Get more out of Xanthous

    - - LEARN MORE -
    - -
    -
    -
    -
    - - LEARN MORE -
    - -
    -
    -
    -
    + + {props.children} Date: Wed, 27 May 2020 10:29:05 +0900 Subject: [PATCH 25/31] overall styles --- src/components/Card.tsx | 1 - src/components/Clients/index.tsx | 3 +-- src/components/Introduce/Introduce.tsx | 2 +- src/components/PostFeed/index.tsx | 8 ++++---- src/components/Splash/index.tsx | 14 ++++++++++++-- src/components/Testimonial/index.tsx | 6 ++++++ src/layouts/index.tsx | 13 +++++++++---- 7 files changed, 33 insertions(+), 14 deletions(-) diff --git a/src/components/Card.tsx b/src/components/Card.tsx index ddc1b96..c9e3929 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -20,7 +20,6 @@ const Card = styled.div` @media (max-width: 950px) { flex-direction: column; width: 100%; - margin: 30px 50px; } /* @media (max-width: 1270px) { max-width: 400px; diff --git a/src/components/Clients/index.tsx b/src/components/Clients/index.tsx index 213655a..a66148a 100644 --- a/src/components/Clients/index.tsx +++ b/src/components/Clients/index.tsx @@ -47,13 +47,12 @@ const title = css` align-self: center; justify-self: center; line-height: 42px; - font-size: 30px; `; const Clients: React.FC<{}> = ({}) => { return ( -

    Our clients

    +

    Our clients

    diff --git a/src/components/Introduce/Introduce.tsx b/src/components/Introduce/Introduce.tsx index a026d66..9f44d88 100644 --- a/src/components/Introduce/Introduce.tsx +++ b/src/components/Introduce/Introduce.tsx @@ -9,7 +9,7 @@ const StyledDiv = styled.section` display: flex; justify-content: space-between; flex-wrap: wrap; - padding: 40px 30px; + padding: 40px 70px; overflow: hidden; `; diff --git a/src/components/PostFeed/index.tsx b/src/components/PostFeed/index.tsx index 2af5c0b..19ba90c 100644 --- a/src/components/PostFeed/index.tsx +++ b/src/components/PostFeed/index.tsx @@ -6,7 +6,7 @@ import Arrow from '../icons/arrow'; const PostFeedContainer = styled.div` align-content: center; - padding: 60px 30px; + padding: 60px 70px; .getMore_container { max-width: 300px; @@ -23,6 +23,9 @@ const PostFeedContainer = styled.div` font-family: Saira; text-align: right; color: black; + @media (max-width: 1440px) { + text-align: center; + } } .getMore_link { @@ -67,9 +70,6 @@ const PostsContainer = styled.div` display: flex; flex-wrap: wrap; margin-bottom: 20px; - @media (max-width: 900px) { - padding: 0 70px; - } `; const PostFeedTitle = styled.div` diff --git a/src/components/Splash/index.tsx b/src/components/Splash/index.tsx index 5d2e6f0..a023737 100644 --- a/src/components/Splash/index.tsx +++ b/src/components/Splash/index.tsx @@ -55,7 +55,7 @@ const StyledSplash = styled.section` position: absolute; } - @media (max-width: 769px) { + @media (max-width: 1200px) { .intro > .intro-title { font-size: 48px; line-height: 72px; @@ -123,7 +123,7 @@ const StyledSplash = styled.section` text-decoration: none; } - @media (max-width: 1025px) { + @media (max-width: 1200px) { .intro { min-height: 550px; background-size: 400px; @@ -134,14 +134,24 @@ const StyledSplash = styled.section` } .intro > .intro-title { top: 70px; + left: 70px; } .intro > .intro-text { top: 210px; font-size: 20px; width: 340px; + left: 70px; } .intro > .intro-invitation { top: 445px; + left: 70px; + } + .intro > .dashed { + display: none; + } + + .intro > .dashed-pic-border { + display: none; } } diff --git a/src/components/Testimonial/index.tsx b/src/components/Testimonial/index.tsx index d0a4ae2..dc23a8f 100644 --- a/src/components/Testimonial/index.tsx +++ b/src/components/Testimonial/index.tsx @@ -131,10 +131,16 @@ const TestimonialContainer = styled.div` margin-bottom: 20px; text-align: left; padding: 40px; + @media (max-width: 900px) { + padding: 40px 0; + } } .testimonials_logo { float: right; + @media (max-width: 900px) { + padding: 0 20px; + } } .testimonials_logo--round { border-radius: 50%; diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 96ab3dc..74d0cf4 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -436,12 +436,12 @@ h1 { font-size: 6.6rem; font-weight: 600; } -@media (max-width: 1025px) { +@media (max-width: 1440px) { h1 { font-size: 4.8rem; } } -@media (max-width: 500px) { +@media (max-width: 600px) { h1 { font-size: 2.2rem; } @@ -451,7 +451,12 @@ h2 { margin: 1.5em 0 0.5em 0; font-size: 5rem; } -@media (max-width: 500px) { +@media (max-width: 1440px) { + h2 { + font-size: 4rem; + } +} +@media (max-width: 600px) { h2 { font-size: 2rem; } @@ -471,7 +476,7 @@ h3 { h4 { margin: 1.5em 0 0.5em 0; font-size: 3rem; - font-weight: 500; + font-weight: 600; } h5 { From e95929ca4014c8016a47a83a4e751827c8e8665c Mon Sep 17 00:00:00 2001 From: Zhusupbekova Alina Date: Wed, 3 Jun 2020 18:07:59 +0900 Subject: [PATCH 26/31] tech stack page title, text --- src/components/ProjectCard.tsx | 66 ++++++++--- src/content/img/elastic-search.png | Bin 0 -> 7361 bytes src/content/techstack.yaml | 2 +- src/styles/colors.ts | 1 + src/templates/tech.tsx | 183 ++++++++++++++--------------- 5 files changed, 137 insertions(+), 115 deletions(-) create mode 100644 src/content/img/elastic-search.png diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx index 280a85d..d47f5a2 100644 --- a/src/components/ProjectCard.tsx +++ b/src/components/ProjectCard.tsx @@ -16,8 +16,9 @@ const ProjectCardStyles = css` flex-direction: column; overflow: hidden; margin: 0 20px 40px; - min-height: 300px; - background: #fff center center; + height: 222px; + width: 242px; + background: #f8f8f8; background-size: cover; border-radius: 5px; box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px; @@ -28,6 +29,10 @@ const ProjectCardStyles = css` transition: all 0.4s ease; transform: translate3D(0, -1px, 0) scale(1.02); } + + .slick-track { + margin: 0 !important; + } `; const ProjectCardImageLink = css` @@ -39,7 +44,7 @@ const ProjectCardImageLink = css` const ProjectCardImage = styled.div` width: auto; - height: 200px; + height: 125px; background: ${colors.lightgrey} no-repeat center center; background-size: cover; `; @@ -55,7 +60,7 @@ const ProjectCardContentLink = css` position: relative; flex-grow: 1; display: block; - padding: 25px 25px 0; + padding: 12px; color: ${colors.darkgrey}; :hover { @@ -63,8 +68,11 @@ const ProjectCardContentLink = css` } `; -const ProjectCardTitle = styled.h2` - margin-top: 0; +const ProjectCardTitle = styled.p` + font-weight: bold; + font-size: 20px; + line-height: 20px; + margin-bottom: 5px; `; const ProjectCardExcerpt = styled.section` @@ -80,9 +88,9 @@ const ProjectCardMeta = styled.footer` const TechList = styled.ul` display: flex; - flex-wrap: wrap-reverse; - margin: 0; - padding: 0; + position: absolute; + top: 105px; + right: 10px; list-style: none; `; @@ -132,8 +140,8 @@ const StaticAvatar = css` display: block; overflow: hidden; margin: 0 0px; - width: 34px; - height: 34px; + width: 25px; + height: 25px; border: #fff 2px solid; border-radius: 100%; `; @@ -177,8 +185,7 @@ export interface ProjectCardProps { const ProjectCard: React.FunctionComponent = ({ post }) => { const { meta } = post.frontmatter; - console.log(post); - console.log(meta); + console.log('postname', post.frontmatter.meta.techstack); return (
    = ({ post }) => { )} + + {meta.techstack.map((tech, idx) => { + // if (idx < 3) { + return ( + + {tech.name} + + {tech.id} + + + ); + // } + // if (idx === 3) { + // return ( + //
    + // {tech.id} + //
    + // ); + // } + })} +
    = ({ post }) => {
    {post.frontmatter.title}
    - + {/*

    {post.excerpt}

    -
    +
    */} - + {/* {meta && meta.techstack && (
    Tech Stack
    @@ -242,7 +274,7 @@ const ProjectCard: React.FunctionComponent = ({ post }) => {
    )} -
    +
    */}
    ); diff --git a/src/content/img/elastic-search.png b/src/content/img/elastic-search.png new file mode 100644 index 0000000000000000000000000000000000000000..0722210321c5b9519fba122911f780e913cfe19d GIT binary patch literal 7361 zcmV;y96sZTP)Oa=}l0I^e56p)b|jTt^yWRii#9VPy`!_bcLXRA}Cd)7o|w=C6N*m zdI^Mt^xWEN?t*1MU2?m(J2N}wo4?JRF4JU|;C5uv|JR_)I0vMkfiCMR zU{22YT4#i0ED3m5hU8rn@Cpa?LC~N&0g(x&=&~VS7E40KwQi1;VJRo5SC3X=OA}A=#^mqWI zz;=*Ahd>HwOC|Jz1`QgD76m7Uj2P&zO@Je38mll!W9QI>n(u!@YpJ`k-Tp;chg{J39lJcaYx_8N;%m^D9c5g9LM# z4X3;Rp*W4Gn)i96Ndx zvu4eNPDedblJN91&!W{s51}Bi9~@vxhWWq?`6mSi(M#41BaGph&>4%$TcLyg`UIGL z>p=>9821u;_Uy*&S+lI?BSwz=#}LEL9oy04(MOS#l!W3TAy~I=J(}EqKQ#Qc5E~nd zIkRV5&l@*sQea}RRVA2gqRHx?bQCUwgay;BqEsn3&rBfo5bibpspD`2PDJV5WYd*XcAt;a>n1G3fL@K*Q;92P8__?B}K~qz?pqszdUs zELLB78krdx$TC@^CNHBGyu7^JJ{T;LxI}qnA}h<1m%(U&x0km?vClUsjZ8}#%;!df z0Y)z)4D{C#zw^w$fB$|(VRSY&1AC9^T__jdX_m~$NY8+Yyfpl*k?PTCH0Jr7$z(!i zRwn(mJjeCIZIE9}j!1*@Nn-WF@U3$Uh>nPDvpzk?UmZ(eh!GN;_PN>nfD zY3agd!|!GEa=wC?^S8Edc3tRMYKAM2L|bH0-RkvvOTI?OeMH?##Tr6Khr951npv`F zaQ*u08ewSLzi%J8=B`0c9V(1G3k@4KLf^i9(4}iP>ZFBR<;nT%-@gy5fB6Lm_aDHS zGp7+BA1_>-A!PBdQKKdv>HG)=J@*`)hdN9rB{>;OmoCBT)vIy*_;K90eqD5);NW1C z4KIs&b?Z?&o$+v|P6!PxA)YZ2*=^ap8RN!|MOs>#xW=7x{Md0QQ6eWV?x;Z>mJ9g|S7XR=Ae*gVTpC^wSH{&I$WQiJC-aW?Vpvsqe_kLQ6zjfQ@c`oCq zQKMA%pNfvQx$kEDEvaS8mJ)Sphxy1y?b@}aW5-X}EpKdWob+Jx<`T_-PSfD;$z>&_ zrl*VNUVQ0gi3VDpc~i%c&c(!7^ZRD*T-Eo>SFEsGuJp_->BET=B^ro%<`FSrf|O;J zpEXI7CQp|9{r&TNjs~Z+Y`MMsO;Y6i`4YK^ojxBP9xkn1waQ_?TDE+-M8uJ2-Ex2E z+qbWjboZ{^{?N1Mnl_E@OP2cgA7InRT2O!BvMZmD{`0iB?yNuZ!S8zg#!c&U z%U7&aeLr_zq||@F0H^7c3Ja4qZrWt?4%xIT;q}*E6#)|Ngvr|_wGNe*L;0_#cakLe);lcq^G9~@sh4Zp+g77HO^O3$dEkaD8+1{hQKv&`ft7YCcgY) ziYjde&+c4*@^yaSXUG#G-}ckerFi@8w;`F$Hub`i4Y!e8FMPdq>((~;fBWsX7&>^c zs%}F|lt3s+VYkS|%2FAF+pqUiPf;8Giq>t~+N4vfR&CsjziBP2MPdmR?~qDmxs{y` zzYlwLDp#qBciw#$&hY1-e`3V&*Qt#2ZN3W+FDFzKIn3}h-P^H4dtAA4MRgy)54SJp zE2De&M@88jwbk_L({S*>0qgTDDRBK{kcuUPCC$El`r^>xLskiqA>^PtcM=gD6(uUe zorfVU3Eo%F@D7kJA9qb8S|(;;a@1Wk-FO3EpG$$e!DC^<`|qnrp?&)f*ni+4h_%IW zkiAS#L{s{CtbL3 zp}6<8*M}?WKnI#>#dZ1EyKg_j%a(KL-Bzz!ts({P#Q*E{6gF?!LTMhuUb1P-nmrqx zNxfmRlHXG@oA5P>xiTp*$t|FAo;iC?)XSN3=Wu}9U@ECLO`A5wGtWLN>Q9L{x^Lw0 z;Z{;$b?V#izN0kGiu&Nc)2Gi6X){uZTwi+WB~lNPY~G{heKpawOIOsXTNfXH@(B); zdJ}U#R+Q!RnKSr&$`q9vGkexdyXh$L9g)_&dGoAgd#ZPDydM!Ej>mfRu#y7T!H~f( zs7RqqnKGC^>h@I4LPDMrI=&@ts z9az1RarNpIp+c*`V#DsednKxLsadmTZa>Pu@{xoeFBSSQF1aL4I+^5F6(a7!MTr{9 zDpoaW+*nE=^~atHKn-ENuNH~kpT2FbY5*egIv}n;nbM7ajNf&hZI+xFQA!`4UzT`5D?(9CB7gyL;YtT8Ej?LtyiB^gE5r1 zy4@|pgbqHwIm_jZ20em;b5x}mk`T6T-D;BuKg-5oUtjf7dsZ`+EXkSeYS*cQC!T!5 zW+vtHLC+1c&Xg?KtX=!7T|Wou-NIOE&tlKll&TD?fNY%13v6`#>F1w?(NE&AG6|~m zxtSI(UM$j+L4%qknEPzX!ROvSK2#sh#}yH-kS=l?HaR&qTq>o8ii0_f8~>&)w`kc4j%+;*>esj4%X;4F=xDeDmL`*6 zrZm}pfNUFpjI1nm-Q7>tXeDv1A@4?u<_}`&k|jtc%lW+ki>$I3&*7iZU;r)CyIW-1KnDai71PyE5*gbW->$i)32h1@-w>fr3ToLQecNc(ne?Yf^B zDLiNuh$n+qK{Gy1E--eD9yxLpXV0Dy1})hr#537lCj-1Hxt87_BVPpBMr3{deJGO*Tl4f%+ufp|l_E;1YMxMcxVxZeW z15jsnZ~B)~Om1Jp!@(=~KRoOw>Bae_4}%mUXcVQ>J{OB8BG7TVP(~JmGfIDb$w)ntk7WXS`El zkWqmK!Nf_EKpp_Bra{H~L9jbhp6M=Lyof>Ms@lD0Z=PYd1qJ66tS}yO-nVYWqaZMn zZQxO|FLdwT9VbqnK;+zcVgM#4S|k7_foapeLVNP_cYm~pxK^fY8C4qWnj1ghZkEm)`;s2qBGk_MS4QHf?#C5|3F>e_OT zTwtQCN1hG#w;w)ySP+E_wgoLAL#v!VOBzZEC2iZa1GzVa z$3&PO6>St>K;m--HWDh0fgFexf7AW>4CxhYTJl@wH z5)y8!&UrnCPH*QoSLxF3-Mis#@C4noSu^W7N87R#c&{L$DN2_q<2FM}ZkWjE$f42h z0+T}BVE0HMkCHg5WNBV#vWhyjBW~d9EY_Yo>ss80B^))!0?Zzc8wv}w48Hck2Ol_X zi}UBtBR2NDQvzePNSSx>T*g4<_ng;({RaxQBNH$DYSN^!^_=%^7)}0jUNB|@%J1lr zBi7Jj7Ty2YwUdl*j^k6<{iyU7v4kW`Y#ev;!V80~-*H^Z%P+r7#N^ns!x4r@j~rGR zfR%N^U~iE#Hwg&nmLnP zs>hIDurYKbNh!)sJ!8gnbb9zdm`}4k*X1uX`%V7nBmCz-9q~}Bmbjd4EM+~qU*EoH z(x@@UjD8E-wr#~#5~Gu7fZrzaICx+``t*6$y4Hcg0Y=Ip`|4}2sY1zrS-l#qA8L)r zd2@w&$mzwNj}b1&4<|&RRm+y>*rB6}JlNLbr?5G#Te}t$Cr%_+{#EjFBnYAyH+GCD zE6?VhK!=VUh3!cO+Zi6FI(+kuQNq2wWBc#;?%Vlz>7^G@w@w{=5E0=K36~+{zZx}b zz*D$eu9omj6c#>23e)c|R`~dZTzHWxnRVj%^CQJMH~Kv4P?2O9WM41qwDQ`If$UCV z72zZIqAiKDeDX;YKK=Al;ihBtmfM0|>B?t0nvd5AD8U=lM$Z41T(mvOcxzD! zjvhTC$d~ixfF!xz<+K8GMYxtOT?RcK>nWB+Gx+{@#*fD&A~Plokj z+yOSePMbarT{?Fbq`=^Or+ogoIC9rxZo+pbL<_OoCP;{9?uCwCBB^{K3NKm2rs@F( ztZWsEewFeUP3H=XUf!5BXEr|l>~oYTkrNfi4Pc1|GpibdMb0whwz5-Hr{F*x_QNZq z=2-u~dGn@~6q+@A0Lxdbuy$yBDfO`DY?pPzfgC`0M~QCah6! zyn#7$z7{S_XDH}2!mi~_o443aKX*NPV$8}AzbnD@_%^v_Sod=$Ouhk#?(->3Uas31 z0;um-4>Y1zML#@V-WLG|56MglaIg$pyf zkSkXg+jAal-kemj{A-G*o2jT<(S6ca6Gec=J1|5z2OPm)W|o;}G;*)h)@ zpm<}F9ou(^2uR-GL=JXhDTVXrw7PcdhBj^5*p2+-7?AJD2>s*Y#bmU-%x{cAh-*?OXj9ia$+IhVXqabzfC@qWlugh2d zxu2KUsThbT{^R(b{6N`0qAYpThb!&mtcS55>tKQ_SFns=oec6cmiIB!LvgQeq7n{>`uw1JB51{R1)U z#9^eH3-3jcczJ7b2;72f8ON7IIwpq!r7Pj-uyFVriuhNrG-&vjz($oA_}h9cJR5~V zfwx<)P=PHz@D!@}_~FxPb?{ipGMbv9L4%v28o4~c#x#BqLB_(x3P@~?_aG@SV$xIb z)Tx6QcRm^!Qc?cGwgwIVeAtZM>cPbk(X=HBZ0_S7V**{@6}lkEA{Ap&+!>5H7xkAm zoNCbUcZ1z&eQ50l=v1x}Tn4+kiukABi;-WuZ|U-yI-x;>8)26i3_3mLw0;;B0$iB+ z*|!=NChQAE1q0>zMYXzU6c`K*8Z@{M4h;d}#-a{g5s*h1s>Hh$lO<}tfw1GFwy@GY@5XwZ;9xI_#LUg@iq6}iL4$@u z5QBJ_j@wz8SaSU`BClS+k>o^V@&c>^k_7Mg6z=1P|CTC)L1inUj`;N+&6c1+Ls6qp z#Gr(k#QrlWDcF>79h+~*q|O_ = props => { console.log(props); const tech = props.data.techstackYaml; - const { edges, totalCount } = props.data.allMdx; return ( @@ -142,64 +112,83 @@ const Tech: React.FunctionComponent = props => { /> )} + - {/*
    -
    */} - - + {tech.name} - {tech.name} {tech.desc && {t[tech.desc]()}} - -
    - {totalCount > 1 && `${totalCount} posts`} - {totalCount === 1 && `1 post`} - {totalCount === 0 && `No posts`} -
    - {tech.website && ( -
    - - - -
    - )} -
    -
    - {/*
    -
    */} -
    -
    -
    - {edges.map(({ node }) => { - if ( - node.frontmatter.meta.techstack && - node.frontmatter.meta.techstack.map(t => t.id).includes(tech.id) - ) { - return ; - } - return null; - })} -
    -
    -
    -