@@ -445,105 +467,101 @@ PostHeader.propTypes = {
const PostBody = ({ children }) => (
div > *': {
- maxWidth: [`50rem`, `80ch`],
- marginTop: `2.5rem`,
- marginBottom: 0,
- // we reset inline-galleries later
- marginRight: `auto`,
- marginLeft: `auto`,
- },
- '& h2, & h3, & h4, & h5, & h6': {
- marginTop: `2rem`,
- maxWidth: [`50.3rem`, `51.4ch`],
- },
- '& h3': { fontSize: `1.7rem` },
- '& p:first-child': {
- marginTop: `3rem`,
- },
- '& p + p': {
- marginTop: `1.5rem`,
- },
- '& ul, & ol': {
- listStylePosition: `inside`,
- },
- '& .inline-gallery': {
- maxWidth: `100%`,
- display: `flex`,
- justifyContent: `center`,
- [media.lessThan(`small`)]: {
- flexDirection: `column`,
- alignItems: `center`,
- '& > *': {
- marginTop: `1rem`,
- },
- },
- '& > *': {
- width: 600,
- maxWidth: `80%`,
- margin: `0 .5rem`,
- },
- // '& > *:first-child, & > *:last-child': {
- // marginRight: `auto`,
- // marginLeft: `auto`,
- // },
- },
- '& .inline-gallery + .inline-gallery': {
- marginTop: `1rem`,
- },
- '& figure': {
- position: `relative`,
- '& > figcaption': {
- display: `flex`,
- background: gradients.primary,
- position: `absolute`,
- top: 0,
- right: 0,
- bottom: 0,
- left: 0,
- color: colors.darkWhite,
- padding: `.5rem`,
- justifyContent: `center`,
- alignItems: `center`,
- textAlign: `center`,
- fontFamily: fontFamilies.accent,
- fontSize: `1.4rem`,
- letterSpacing: `.1rem`,
- overflow: `hidden`,
- transition: `all .35s`,
- opacity: 0,
- userSelect: `none`,
- },
- '&:hover > figcaption': {
- opacity: 1,
- },
- },
- // '& .video-wrapper': {
- // position: `relative`,
- // overflow: `hidden`,
- // paddingTop: `29.25%`,
- // width: `98%`,
- // maxWidth: `700px`,
- // margin: `0 auto 3rem`,
- // '& > iframe': {
- // position: `absolute`,
- // top: `0`,
- // left: `0`,
- // width: `100%`,
- // height: `100%`,
- // border: `0`,
- // },
- // },
- '& iframe': { border: 0 },
- 'li p': { margin: `0 !important`, display: `inline` },
- 'a.anchor': {
- border: `none`,
- ':hover': { backgroundColor: `transparent`, color: colors.link },
- },
- }}
+ css={css`
+ word-break: break-word;
+ word-wrap: break-word;
+ & > div > * {
+ max-width: 50rem;
+ max-width: 80ch;
+ margin-top: 2.5rem;
+ margin-bottom: 0;
+ margin-right: auto;
+ margin-left: auto;
+ }
+ & h2,
+ & h3,
+ & h4,
+ & h5,
+ & h6 {
+ margin-top: 2rem;
+ max-width: 50.3rem;
+ max-width: 51.4ch;
+ }
+ & h3 {
+ font-size: 1.7rem;
+ }
+ & p:first-of-type {
+ margin-top: 3rem;
+ }
+ & p + p {
+ margin-top: 1.5rem;
+ }
+ & ul,
+ & ol {
+ list-style-position: inside;
+ }
+ & .inline-gallery {
+ max-width: 100%;
+ display: flex;
+ justify-content: center;
+ ${media.lessThan(`small`)} {
+ flex-direction: column;
+ align-items: center;
+ & > * {
+ margin-top: 1rem;
+ }
+ }
+ & > * {
+ width: 600px;
+ max-width: 80%;
+ margin: 0 0.5rem;
+ }
+ }
+ & .inline-gallery + .inline-gallery {
+ margin-top: 1rem;
+ }
+ & figure {
+ position: relative;
+ & > figcaption {
+ display: flex;
+ background: ${gradients.primary};
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ color: ${colors.darkWhite};
+ padding: 0.5rem;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ font-family: ${fontFamilies.accent};
+ font-size: 1.4rem;
+ letter-spacing: 0.1rem;
+ overflow: hidden;
+ transition: all 0.35s;
+ opacity: 0;
+ user-select: none;
+ }
+ &:hover > figcaption {
+ opacity: 1;
+ }
+ }
+ & iframe {
+ border: 0;
+ }
+ li p {
+ margin: 0 !important;
+ display: inline;
+ }
+ a.anchor {
+ border: none;
+ :hover {
+ background-color: transparent;
+ color: ${colors.link};
+ }
+ }
+ `}
>
{children}
diff --git a/src/templates/ContactPage.js b/src/templates/ContactPage.js
index c23005b..bf62c6c 100644
--- a/src/templates/ContactPage.js
+++ b/src/templates/ContactPage.js
@@ -1,7 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
-import styled from 'react-emotion'
+import styled from '@emotion/styled'
+import { css } from '@emotion/core'
import MainLayout from '@/components/MainLayout'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRssSquare } from '@fortawesome/free-solid-svg-icons/faRssSquare'
@@ -44,82 +45,82 @@ const ContactPage = props => {
einverstanden ([LINK]Datenschutzerklärung und Widerrufshinweise[/LINK])
*/}
div': {
- width: `40%`,
- },
- },
- [media.greaterThan(`medium`)]: {
- width: `57%`,
- margin: `3rem 2rem 0 6rem`,
- },
- }}
+ css={css`
+ overflow: hidden;
+ padding: 0.2rem;
+ display: flex;
+ justify-content: space-between;
+ ${media.lessThan(`xsmall`)} {
+ flex-direction: column;
+ }
+ ${media.greaterThan(`xsmall`)} {
+ & > div {
+ width: 40%;
+ }
+ }
+ ${media.greaterThan(`medium`)} {
+ width: 57%;
+ margin: 3rem 2rem 0 6rem;
+ }
+ `}
>
div': {
- // position: `relative`,
- // zIndex: 3,
- marginBottom: `1.5rem`,
- '& > a': {
- color: colors.purpleDark,
- },
- },
- }}
+ css={css`
+ display: flex;
+ justify-content: space-between;
+ ${media.lessThan(`small`)} {
+ margin-bottom: 2rem;
+ }
+ & > div {
+ margin-bottom: 1.5rem;
+ & > a {
+ color: ${colors.purpleDark};
+ }
+ }
+ `}
>
{props.data.Accounts.frontmatter.accounts
.filter(x => x.meta !== `true`)
.map(x => (
{
))}
{
(
>
{({ total }) => (
(
{
return (
{
>
![]()
{
))}
{
bankInfo={props.data.SupportWidget.frontmatter.bankInfo}
bankDetails={props.data.SupportWidget.frontmatter.bankDetails}
lang={props.pageContext.lang}
- css={{ margin: `0 0 3rem` }}
+ css={css`
+ margin: 0 0 3rem;
+ `}
/>
)
diff --git a/src/templates/HomePage.js b/src/templates/HomePage.js
index 3351ea6..23868b0 100644
--- a/src/templates/HomePage.js
+++ b/src/templates/HomePage.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'
import Helmet from 'react-helmet'
-import styled from 'react-emotion'
+import styled from '@emotion/styled'
import slugify from 'slugify'
import { Box, colors, fullPageWidth, maxWidthContent, media } from '@/theme'
import MainLayout from '@/components/MainLayout'
@@ -46,7 +46,7 @@ const IntroCopy = styled.p`
// & > div {
// box-shadow: 1px 1px 2px 1px ${colors.gray7};
// }
-// & > div:nth-child(2) {
+// & > div:nth-of-type(2) {
// margin: 0 1rem;
// }
// & .gatsby-image-wrapper {
@@ -58,7 +58,7 @@ const IntroCopy = styled.p`
// width: 280px;
// /* transition: width 0.3s ease-in-out; */
// }
-// & > .gatsby-image-wrapper:not(:nth-child(2)) {
+// & > .gatsby-image-wrapper:not(:nth-of-type(2)) {
// width: 200px;
// }
// /* &:hover .gatsby-image-wrapper {
diff --git a/src/templates/PaypalSuccessPage.js b/src/templates/PaypalSuccessPage.js
index d3f1784..808f9f4 100644
--- a/src/templates/PaypalSuccessPage.js
+++ b/src/templates/PaypalSuccessPage.js
@@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
+import { css } from '@emotion/core'
import Img from 'gatsby-image'
import Helmet from 'react-helmet'
import MainLayout from '@/components/MainLayout'
@@ -19,15 +20,17 @@ const PaypalSuccessPage = props => {
centered
title={page.frontmatter.intro.title}
paragraphs={page.frontmatter.intro.text}
- css={{ marginBottom: `2rem` }}
+ css={css`
+ margin-bottom: 2rem;
+ `}
/>
![]()
diff --git a/src/templates/SupportPage.js b/src/templates/SupportPage.js
index 708d0de..498d39d 100644
--- a/src/templates/SupportPage.js
+++ b/src/templates/SupportPage.js
@@ -2,11 +2,11 @@ import React from 'react'
import PropTypes from 'prop-types'
import { graphql, Link } from 'gatsby'
import Img from 'gatsby-image'
-import styled from 'react-emotion'
+import styled from '@emotion/styled'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faNewspaper } from '@fortawesome/free-solid-svg-icons/faNewspaper'
import { faRssSquare } from '@fortawesome/free-solid-svg-icons/faRssSquare'
-import { css } from 'react-emotion'
+import { css } from '@emotion/core'
import MainLayout from '@/components/MainLayout'
import { SupportWidget } from '@/components/Shared'
import CheckMark from '@/assets/check.png'
@@ -35,7 +35,7 @@ const Contributor = styled.div`
flex-shrink: 0;
max-width: 100%;
${media.lessThan(`small`)} {
- :nth-child(1n + 5) {
+ :nth-of-type(1n + 5) {
display: none;
}
}
@@ -62,112 +62,136 @@ const SupportPage = props => {
page: { frontmatter },
contributors,
} = props.data
- const initialStyle = css(visible.maxMd, {
- fontFamily: fontFamilies.accent,
- fontSize: `2.9rem`,
- lineHeight: 1,
- float: `left`,
- marginRight: `1rem`,
- })
+
+ const initialStyle = css`
+ ${visible.maxMd};
+ font-family: ${fontFamilies.accent};
+ font-size: 2.9rem;
+ line-height: 1;
+ float: left;
+ margin-right: 1rem;
+ `
+
const [neighbor, support] = [
frontmatter.intro.neighbor,
frontmatter.intro.support,
- ].map((x, i) => `
${i + 1}.${x}`)
+ ].map((x, i) => (
+ <>
+
{i + 1}.
+
+
+ ))
+
return (
h2': { fontSize: `2rem` },
- '& > div, & > button': { fontSize: `.85rem` },
- },
- }}
+ css={css`
+ ${media.lessThan(`medium`)} {
+ & > h2 {
+ font-size: 2rem;
+ }
+ & > div,
+ & > button {
+ font-size: 0.85rem;
+ }
+ }
+ `}
/>
{[`arrow_left`, `arrow_right`].map(x => (
![]()
))}
div': {
- width: `50%`,
- },
- },
- }}
+ css={css`
+ display: flex;
+ ${media.lessThan(`medium`)} {
+ flex-direction: column;
+ }
+ ${media.greaterThan(`medium`)} {
+ justify-content: space-between;
+ & > div {
+ width: 50%;
+ }
+ }
+ `}
>
@@ -176,70 +200,71 @@ const SupportPage = props => {
{
![]()
}
div': {
- position: `relative`,
- zIndex: 3,
- margin: `2.5rem 0`,
- '& > a': {
- color: colors.black,
- [media.lessThan(`medium`)]: {
- fontSize: `.7rem`,
- },
- },
- },
- }}
+ css={css`
+ background: ${colors.lightBlue};
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 5rem;
+ & > div {
+ position: relative;
+ z-index: 3;
+ margin: 2.5rem 0;
+ & > a {
+ color: ${colors.black};
+ ${media.lessThan(`medium`)} {
+ font-size: 0.7rem;
+ }
+ }
+ }
+ `}
>
{props.data.Accounts.frontmatter.accounts
.filter(x => x.meta !== `true`)
.map(x => (
{
))}
{
{
h2': {
- marginBottom: `.7rem`,
- [media.lessThan(`medium`)]: {
- fontSize: `2rem`,
- },
- },
- '& > div': {
- fontSize: `.9rem`,
- [media.greaterThan(`medium`)]: {
- fontSize: `1rem`,
- },
- },
- }}
+ css={css`
+ & > h2 {
+ margin-bottom: 0.7rem;
+ ${media.lessThan(`medium`)} {
+ font-size: 2rem;
+ }
+ }
+ & > div {
+ font-size: 0.9rem;
+ ${media.greaterThan(`medium`)} {
+ font-size: 1rem;
+ }
+ }
+ `}
>
{frontmatter.getIdea.subtitle}
div': {
- position: `relative`,
- textAlign: `center`,
- color: colors.darkWhite,
- fontSize: `.98rem`,
- display: `flex`,
- alignItems: `center`,
- [media.greaterThan(`small`)]: {
- width: `19%`,
- },
- '& > div': {
- transition: `transform .5s`,
- width: `100%`,
- },
- '&:hover > div': {
- transform: `scale(1.06)`,
- },
- },
- }}
+ css={css`
+ margin: 3rem 0 3rem;
+ display: flex;
+ ${media.lessThan(`small`)} {
+ flex-direction: column;
+ align-items: center;
+ & div + div {
+ margin-top: 1rem;
+ }
+ }
+ ${media.greaterThan(`small`)} {
+ justify-content: space-between;
+ }
+ & > div {
+ position: relative;
+ text-align: center;
+ color: ${colors.darkWhite};
+ font-size: 0.98rem;
+ display: flex;
+ align-items: center;
+ ${media.greaterThan(`small`)} {
+ width: 19%;
+ }
+ & > div {
+ transition: transform 0.5s;
+ width: 100%;
+ }
+ &:hover > div {
+ transform: scale(1.06);
+ }
+ }
+ `}
>
{frontmatter.getIdea.insights.map((x, i) => (
-
+
@@ -397,82 +430,86 @@ const SupportPage = props => {
div': {
- [media.greaterThan(`small`)]: {
- width: `47%`,
- '&:first-child': {
- paddingRight: `3rem`,
- position: `relative`,
- '&:after': {
- content: `""`,
- height: `100%`,
- width: `1px`,
- position: `absolute`,
- display: `block`,
- top: `0`,
- right: `0`,
- background: `linear-gradient(to bottom, ${colors.gray4}, ${
- colors.gray8
- }, ${colors.gray4}) no-repeat`,
- },
- },
- '&:last-child': {
- paddingLeft: `3rem`,
- },
- },
- },
- }}
+ css={css`
+ ${media.greaterThan(`small`)} {
+ display: flex;
+ justify-content: center;
+ }
+ & > div {
+ ${media.greaterThan(`small`)} {
+ width: 47%;
+ &:first-of-type {
+ padding-right: 3rem;
+ position: relative;
+ &:after {
+ content: '';
+ height: 100%;
+ width: 1px;
+ position: absolute;
+ display: block;
+ top: 0;
+ right: 0;
+ background: linear-gradient(
+ to bottom,
+ ${colors.gray4},
+ ${colors.gray8},
+ ${colors.gray4}
+ )
+ no-repeat;
+ }
+ }
+ &:last-child {
+ padding-left: 3rem;
+ }
+ }
+ }
+ `}
>
{[`left`, `right`].map(x => (
-
+
{frontmatter.checklists[x].title}
div': {
- position: `relative`,
- fontSize: `.9rem`,
- },
- '& > div:not(:last-child)': {
- marginBottom: `1.3rem`,
- },
- '& > div:before': {
- content: `url(${CheckMark})`,
- position: `absolute`,
- left: `-3rem`,
- top: `0.4rem`,
- },
- [media.lessThan(`small`)]: {
- '& > div:last-child': {
- marginBottom: `1.5rem`,
- },
- },
- }}
+ css={css`
+ margin-left: 3rem;
+ display: flex;
+ flex-direction: column;
+ align-items: space-between;
+ & > div {
+ position: relative;
+ font-size: 0.9rem;
+ }
+ & > div:not(:last-child) {
+ margin-bottom: 1.3rem;
+ }
+ & > div:before {
+ content: url(${CheckMark});
+ position: absolute;
+ left: -3rem;
+ top: 0.4rem;
+ }
+ ${media.lessThan(`small`)} {
+ & > div:last-child {
+ margin-bottom: 1.5rem;
+ }
+ }
+ `}
>
{frontmatter.checklists[x].items.map((x, i) => (
{x}
@@ -487,15 +524,15 @@ const SupportPage = props => {
centered
title={frontmatter.outro.title}
paragraphs={frontmatter.outro.text}
- css={{
- margin: `5rem auto 0`,
- [media.lessThan(`medium`)]: {
- '& div': {
- fontSize: `.9rem`,
- textAlign: `center`,
- },
- },
- }}
+ css={css`
+ margin: 5rem auto 0;
+ ${media.lessThan(`medium`)} {
+ & div {
+ font-size: 0.9rem;
+ text-align: center;
+ }
+ }
+ `}
/>
{
bankInfo={props.data.SupportWidget.frontmatter.bankInfo}
bankDetails={props.data.SupportWidget.frontmatter.bankDetails}
lang={props.pageContext.lang}
- css={{ margin: `3rem 0 5rem` }}
+ css={css`
+ margin: 3rem 0 5rem;
+ `}
artworkStyles={{
width: `350px`,
}}
diff --git a/src/theme.js b/src/theme.js
index 2fb8a2f..3617332 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,6 +1,6 @@
-/* global window */
import React from 'react'
-import styled from 'react-emotion'
+import styled from '@emotion/styled'
+import { css } from '@emotion/core'
import propStyles from 'prop-styles'
import preval from 'babel-plugin-preval/macro'
@@ -101,12 +101,12 @@ export const focusOutlineNone = {
// hide svg definitions from https://stackoverflow.com/a/24820654/3484824
export const InstagramGradient = props => (