Merge pull request #1181 from ethereum/what-is-ethereum

New "What is Ethereum" page

Author: samajammin

src/components/ActionCard.js

@@ -0,0 +1,65 @@
+import React from "react"
+import styled from "styled-components"
+import Img from "gatsby-image"
+
+import Link from "./Link"
+
+const Content = styled.div`
+  padding: 1.5rem;
+`
+
+const Description = styled.p`
+  opacity: 0.8;
+`
+
+const ImageWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background: ${(props) => props.theme.colors.cardGradient};
+  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
+  min-height: 260px;
+`
+
+const Image = styled(Img)`
+  width: 100%;
+  max-width: 372px;
+  max-height: 257px;
+  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
+    max-width: 311px;
+  }
+`
+
+const Card = styled(Link)`
+  flex: 1 1 372px;
+  color: ${(props) => props.theme.colors.text};
+  box-shadow: 0px 14px 66px rgba(0, 0, 0, 0.07),
+    0px 10px 17px rgba(0, 0, 0, 0.03), 0px 4px 7px rgba(0, 0, 0, 0.05);
+  margin: 1rem;
+
+  &:hover {
+    border-radius: 4px;
+    box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.15);
+    background: ${(props) => props.theme.colors.tableBackgroundHover};
+    transition: transform 0.1s;
+    transform: scale(1.02);
+  }
+`
+
+const ActionCard = ({ to, image, title, description, children, className }) => {
+  return (
+    <Card to={to} className={className}>
+      <ImageWrapper>
+        <Image fixed={image} alt={`${title} image`} />
+      </ImageWrapper>
+      <Content>
+        <h3>{title}</h3>
+        <Description>{description}</Description>
+        {children}
+      </Content>
+    </Card>
+  )
+}
+
+export default ActionCard

src/components/Callout.js

@@ -0,0 +1,71 @@
+import React from "react"
+import styled from "styled-components"
+import Img from "gatsby-image"
+
+const StyledCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(
+    49.21deg,
+    rgba(127, 127, 213, 0.2) 19.87%,
+    rgba(134, 168, 231, 0.2) 58.46%,
+    rgba(145, 234, 228, 0.2) 97.05%
+  );
+  padding: 1.5rem;
+  margin: 1rem;
+  margin-top: 8rem;
+  border-radius: 4px;
+  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
+    margin-bottom: 4rem;
+  }
+`
+
+const Description = styled.p`
+  font-size: 20px;
+  line-height: 140%;
+  color: ${(props) => props.theme.colors.text200};
+`
+
+const Image = styled(Img)`
+  align-self: center;
+  width: 100%;
+  height: 100%;
+  max-width: ${(props) => props.maxImageWidth};
+  margin-top: -10rem;
+`
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  margin-top: 2.5rem;
+`
+
+const Callout = ({
+  image,
+  maxImageWidth,
+  title,
+  description,
+  children,
+  className,
+}) => {
+  return (
+    <StyledCard className={className}>
+      <Image
+        fluid={image}
+        alt={`${title} image`}
+        maxImageWidth={maxImageWidth}
+      />
+      <Content>
+        <div>
+          <h3>{title}</h3>
+          <Description>{description}</Description>
+        </div>
+        {children}
+      </Content>
+    </StyledCard>
+  )
+}
+
+export default Callout

src/components/Card.js

@@ -0,0 +1,35 @@
+import React from "react"
+import styled from "styled-components"
+import { Twemoji } from "react-emoji-render"
+
+const StyledCard = styled.div`
+  background: ${(props) => props.theme.colors.searchBackground};
+  border-radius: 4px;
+  border: 1px solid ${(props) => props.theme.colors.lightBorder};
+  padding: 1.5rem;
+`
+
+const Emoji = styled(Twemoji)`
+  & > img {
+    width: 3em !important;
+    height: 3em !important;
+    margin-bottom: 1em !important;
+  }
+`
+
+const Description = styled.p`
+  opacity: 0.8;
+`
+
+const Card = ({ emoji, title, description, children, className }) => {
+  return (
+    <StyledCard className={className}>
+      <Emoji svg text={emoji} />
+      <h3>{title}</h3>
+      <Description>{description}</Description>
+      {children}
+    </StyledCard>
+  )
+}
+
+export default Card

src/components/Footer.js

@@ -16,11 +16,7 @@ const StyledFooter = styled.footer`
   flex-wrap: wrap;
   padding-top: 3rem;
   padding-bottom: 4rem;
-  max-width: ${(props) => props.theme.breakpoints.xl};
-  padding: 1rem 0;
-  @media (max-width: ${(props) => props.theme.breakpoints.xl}) {
-    padding: 1rem 2rem;
-  }
+  padding: 1rem 2rem;
 `
 
 const FooterTop = styled.div`

src/components/Layout.js

@@ -18,7 +18,8 @@ const ContentContainer = styled.div`
   flex-flow: column;
 
   @media (min-width: ${(props) => props.theme.breakpoints.l}) {
-    max-width: ${(props) => props.theme.breakpoints.xl};
+    /* xl breakpoint (1440px) + 72px (2rem padding on each side) */
+    max-width: 1504px;
   }
 `
 

src/components/SharedStyledComponents.js

@@ -2,10 +2,11 @@ import styled from "styled-components"
 import { Mixins } from "./Theme"
 
 export const PageContainer = styled.div`
-  width: 85vw;
-  max-width: ${(props) => props.theme.breakpoints.xl};
+  width: 100%;
   margin: 0 auto;
   padding-top: 6rem;
+  padding-right: 2rem;
+  padding-left: 2rem;
   @media (min-width: ${(props) => props.theme.breakpoints.l}) {
     padding-top: 10rem;
   }

src/components/Sidebar.js

@@ -7,10 +7,10 @@ const customIdRegEx = /^.+(\s*\{#([A-Za-z0-9\-_]+?)\}\s*)$/
 const Aside = styled.aside`
   position: sticky;
   top: 72px;
-  padding: 1rem;
+  padding: 1rem 0 1rem 1rem;
   bottom: 0;
   right: 0;
-  width: 18.5rem;
+  max-width: 25%;
   height: calc(100vh - 80px);
   overflow-y: auto;
   transition: all 0.2s ease-in-out;

src/components/Theme.js

@@ -43,6 +43,9 @@ const lightColors = {
   homeDivider: "#a4a4f3",
   displayDark: "none",
   displayLight: "block",
+  grayBackground: "#fcfcfc",
+  cardGradient:
+    "radial-gradient(46.28% 66.31% at 66.95% 58.35%, #e6e6f7 0%, #e7edfa 50%, #e9fbfa 100%)",
 }
 
 const darkColors = {
@@ -76,6 +79,9 @@ const darkColors = {
   homeDivider: "#ffc7a7",
   displayDark: "block",
   displayLight: "none",
+  grayBackground: "#272627",
+  cardGradient:
+    "linear-gradient(49.21deg, rgba(127, 127, 213, 0.2) 19.87%, rgba(134, 168, 231, 0.2) 58.46%, rgba(145, 234, 228, 0.2) 97.05% )",
 }
 
 const lightThemeColors = Object.assign({}, baseColors, lightColors)