Skip to content

Commit f3c0e53

Browse files
ltclmbdevjoelhooks
ltclmbdev
authored and
joelhooks
committed
tailwindcss implementation (#10)
* wip * wip * wip * add colors * wip * clean up Header * fix tailwind config export
1 parent add91aa commit f3c0e53

11 files changed

+315
-73
lines changed

‎.eslintrc.js

+3
Original file line numberDiff line numberDiff line change
@@ -94,4 +94,7 @@ module.exports = {
9494
],
9595
'jsx-a11y/href-no-hash': 'off',
9696
},
97+
globals: {
98+
tw: true,
99+
},
97100
}

‎gatsby-config.js

+5-6
Original file line numberDiff line numberDiff line change
@@ -109,16 +109,15 @@ module.exports = {
109109
`,
110110
feeds: [
111111
{
112-
serialize: ({ query: { site, allMdx } }) => {
113-
return allMdx.edges.map(edge => {
114-
return Object.assign({}, edge.node.frontmatter, {
112+
serialize: ({ query: { site, allMdx } }) =>
113+
allMdx.edges.map(edge =>
114+
Object.assign({}, edge.node.frontmatter, {
115115
description: edge.node.excerpt,
116116
date: edge.node.fields.date,
117117
url: `${site.siteMetadata.siteUrl}/${edge.node.fields.slug}`,
118118
guid: `${site.siteMetadata.siteUrl}/${edge.node.fields.slug}`,
119-
})
120-
})
121-
},
119+
}),
120+
),
122121
query: `
123122
{
124123
allMdx(

‎gatsby-node.js

+1
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ exports.onCreateWebpackConfig = ({ actions }) => {
8484
resolve: {
8585
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
8686
alias: {
87+
'react-dom': '@hot-loader/react-dom',
8788
$components: path.resolve(__dirname, 'src/components'),
8889
},
8990
},

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@callstack/react-theme-provider": "^2.0.1",
1212
"@emotion/core": "^10.0.5",
1313
"@emotion/styled": "^10.0.5",
14+
"@hot-loader/react-dom": "^16.8.6",
1415
"@mdx-js/mdx": "^0.17.5",
1516
"@mdx-js/tag": "^0.17.5",
1617
"add": "^2.0.6",
@@ -35,6 +36,7 @@
3536
"gatsby-plugin-offline": "^2.0.23",
3637
"gatsby-plugin-react-helmet": "^3.0.6",
3738
"gatsby-plugin-sharp": "^2.0.20",
39+
"gatsby-plugin-tailwindcss": "^1.0.3",
3840
"gatsby-plugin-typography": "^2.2.7",
3941
"gatsby-remark-copy-linked-files": "^2.0.9",
4042
"gatsby-remark-images": "^3.0.3",
@@ -65,6 +67,8 @@
6567
"react-typography": "^0.16.18",
6668
"remark-highlight.js": "^5.1.0",
6769
"serve": "^10.1.1",
70+
"tailwind.macro": "^1.0.0-alpha.10",
71+
"tailwindcss": "^1.0.3",
6872
"typography": "^0.16.18",
6973
"typography-theme-wordpress-2016": "^0.16.18",
7074
"yarn": "^1.15.2",

‎src/components/Hand.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const Hand = ({}) => {
3737
<ellipse
3838
cx="49.059"
3939
cy="168.748"
40-
fill={theme.colors.bg}
40+
fill={theme.colors.bodyBg}
4141
stroke={theme.colors.text}
4242
strokeWidth="1.765"
4343
rx="48.176"
@@ -53,7 +53,7 @@ const Hand = ({}) => {
5353
ry="4.413"
5454
/>
5555
<path
56-
fill={theme.colors.bg}
56+
fill={theme.colors.bodyBg}
5757
stroke={theme.colors.text}
5858
strokeLinecap="round"
5959
strokeLinejoin="round"
@@ -68,7 +68,7 @@ const Hand = ({}) => {
6868
ry="1"
6969
/>
7070
<path
71-
fill={theme.colors.bg}
71+
fill={theme.colors.bodyBg}
7272
stroke={theme.colors.text}
7373
strokeLinecap="round"
7474
strokeLinejoin="round"
@@ -241,7 +241,7 @@ const Hand = ({}) => {
241241
transform="rotate(-8 37.589 148.2)"
242242
/>
243243
<path
244-
stroke={theme.colors.bg}
244+
stroke={theme.colors.bodyBg}
245245
strokeWidth=".588"
246246
mask="url(#joels-hand-rotated-b)"
247247
/>
@@ -262,8 +262,8 @@ const Hand = ({}) => {
262262
<g transform="rotate(-38 169.513 12.182)">
263263
<g strokeLinejoin="round">
264264
<use
265-
fill={theme.colors.bg}
266-
stroke={theme.colors.bg}
265+
fill={theme.colors.bodyBg}
266+
stroke={theme.colors.bodyBg}
267267
strokeWidth="2.118"
268268
xlinkHref="#joels-hand-rotated-c"
269269
/>
@@ -349,7 +349,7 @@ const Hand = ({}) => {
349349
<ellipse
350350
cx="10.588"
351351
cy="5.322"
352-
fill={theme.colors.bg}
352+
fill={theme.colors.bodyBg}
353353
rx="4.412"
354354
ry="4.413"
355355
/>
@@ -367,7 +367,7 @@ const Hand = ({}) => {
367367
</g>
368368
<g strokeLinecap="round" transform="rotate(-16 511.603 -136.898)">
369369
<g
370-
stroke={theme.colors.bg}
370+
stroke={theme.colors.bodyBg}
371371
strokeWidth="1.059"
372372
transform="rotate(30 5.795 22.948)"
373373
>
@@ -382,7 +382,7 @@ const Hand = ({}) => {
382382
</g>
383383
<g strokeLinejoin="round">
384384
<use
385-
stroke={theme.colors.bg}
385+
stroke={theme.colors.bodyBg}
386386
strokeWidth="2.118"
387387
xlinkHref="#joels-hand-rotated-d"
388388
/>
@@ -458,8 +458,8 @@ const Hand = ({}) => {
458458
transform="rotate(-101 85.99 22.853)"
459459
>
460460
<use
461-
fill={theme.colors.bg}
462-
stroke={theme.colors.bg}
461+
fill={theme.colors.bodyBg}
462+
stroke={theme.colors.bodyBg}
463463
strokeWidth="2.118"
464464
xlinkHref="#joels-hand-rotated-g"
465465
/>
@@ -471,7 +471,7 @@ const Hand = ({}) => {
471471
<ellipse
472472
cx="12.353"
473473
cy="6.209"
474-
fill={theme.colors.bg}
474+
fill={theme.colors.bodyBg}
475475
stroke={theme.colors.text}
476476
strokeWidth="1.059"
477477
rx="6.176"

‎src/components/Header.js

+20-37
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react'
22
import { Link } from 'gatsby'
3+
import tw from 'tailwind.macro'
34
import { css } from '@emotion/core'
45
import { useTheme } from './Theming'
5-
import { bpMinSM, bpMinMD, bpMinLG, bpMinXL } from 'lib/breakpoints'
6+
import { bpMinMD, bpMinLG, bpMinXL } from 'lib/breakpoints'
67
import Search from './Search'
78
import Container from './Container'
89
import Logo from './Logo'
@@ -12,29 +13,15 @@ const Header = ({ siteTitle }) => {
1213
const theme = useTheme()
1314
return (
1415
<header
15-
css={css({
16-
width: '100%',
17-
flexShrink: 0,
18-
background: 'none',
19-
padding: '20px 0',
20-
background: theme.colors.bg,
21-
[bpMinMD]: {
22-
padding: '30px 0',
16+
css={css(
17+
{
18+
background: theme.colors.bodyBg,
2319
},
24-
[bpMinLG]: {
25-
padding: '50px 0',
26-
},
27-
})}
20+
tw`w-full flex-shrink-0 py-5 md:py-8 lg:py-12`,
21+
)}
2822
>
2923
<Container noVerticalPadding>
30-
<nav
31-
css={css`
32-
width: '100%';
33-
display: flex;
34-
justify-content: space-between;
35-
align-items: center;
36-
`}
37-
>
24+
<nav css={css(tw`w-full flex justify-between items-center`)}>
3825
<Link
3926
to="/"
4027
aria-label="go to homepage"
@@ -67,23 +54,19 @@ const Header = ({ siteTitle }) => {
6754
})}
6855
/>
6956
<span
70-
css={css({
71-
display: 'none',
72-
margin: '65px 0 0 15px',
73-
fontSize: '14px',
74-
color: theme.colors.text,
75-
[bpMinSM]: {
76-
display: 'block',
77-
},
78-
[bpMinMD]: {
79-
margin: '60px 0 0 20px',
80-
fontSize: '16px',
57+
css={css(
58+
{
59+
margin: '65px 0 0 15px',
60+
color: theme.colors.text,
61+
[bpMinMD]: {
62+
margin: '60px 0 0 20px',
63+
},
64+
[bpMinLG]: {
65+
margin: '60px 0 0 20px',
66+
},
8167
},
82-
[bpMinLG]: {
83-
margin: '60px 0 0 20px',
84-
fontSize: '18px',
85-
},
86-
})}
68+
tw`hidden sm:block text-sm md:text-base lg:text-lg`,
69+
)}
8770
>
8871
{siteTitle}
8972
</span>

‎src/components/Layout.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const Layout = ({ site, frontmatter = {}, children, noFooter }) => {
5454
styles={css`
5555
body {
5656
color: ${theme.colors.text};
57-
background-color: ${theme.colors.bg};
57+
background-color: ${theme.colors.bodyBg};
5858
}
5959
::selection {
6060
color: ${theme.colors.white};
@@ -73,7 +73,7 @@ const Layout = ({ site, frontmatter = {}, children, noFooter }) => {
7373
border-left: 5px solid ${theme.colors.primary};
7474
}
7575
caption {
76-
color: ${theme.colors.bg};
76+
color: ${theme.colors.bodyBg};
7777
}
7878
7979
${bpMaxSM} {

‎src/components/Logo.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const Logo = ({ props }) => {
8383
<ellipse
8484
cx="24.051"
8585
cy="80.696"
86-
fill={theme.colors.bg}
86+
fill={theme.colors.bodyBg}
8787
stroke={theme.colors.text}
8888
strokeWidth="1.266"
8989
rx="15.19"
@@ -96,7 +96,7 @@ const Logo = ({ props }) => {
9696
xlinkHref="#joelhooks-com-a"
9797
/>
9898
<use
99-
stroke={theme.colors.bg}
99+
stroke={theme.colors.bodyBg}
100100
strokeWidth="1.899"
101101
xlinkHref="#joelhooks-com-a"
102102
/>
@@ -108,7 +108,7 @@ const Logo = ({ props }) => {
108108
xlinkHref="#joelhooks-com-b"
109109
/>
110110
<use
111-
stroke={theme.colors.bg}
111+
stroke={theme.colors.bodyBg}
112112
strokeWidth="1.899"
113113
xlinkHref="#joelhooks-com-b"
114114
/>
@@ -139,7 +139,7 @@ const Logo = ({ props }) => {
139139
transform="translate(32.55 54.593)"
140140
>
141141
<path
142-
fill={theme.colors.bg}
142+
fill={theme.colors.bodyBg}
143143
d="M2.39191189,10.5655431 C2.39191189,10.5655431 7.6375425,-5.67577566 22.3245109,2.1147756 C22.3245109,2.1147756 20.8392982,9.84769402 15.7202114,12.0180187 C10.8808629,14.0697436 2.39191189,10.5655431 2.39191189,10.5655431 Z"
144144
/>
145145
<path d="M22.3245109,2.37419056 C12.9661468,7.44657888 5.52464318,10.6121663 0,11.8709528" />
@@ -152,7 +152,7 @@ const Logo = ({ props }) => {
152152
transform="scale(-1 1) rotate(-5 505.06 296.862)"
153153
>
154154
<path
155-
fill={theme.colors.bg}
155+
fill={theme.colors.bodyBg}
156156
d="M2.39191189,10.5655431 C2.39191189,10.5655431 7.6375425,-5.67577566 22.3245109,2.1147756 C22.3245109,2.1147756 20.8392982,9.84769402 15.7202114,12.0180187 C10.8808629,14.0697436 2.39191189,10.5655431 2.39191189,10.5655431 Z"
157157
/>
158158
<path d="M22.3245109,2.37419056 C12.9661468,7.44657888 5.52464318,10.6121663 0,11.8709528" />
@@ -161,7 +161,7 @@ const Logo = ({ props }) => {
161161
</g>
162162
</g>
163163
<g
164-
fill={theme.colors.bg}
164+
fill={theme.colors.bodyBg}
165165
stroke={theme.colors.text}
166166
transform="translate(4.43 80.696)"
167167
>
@@ -194,7 +194,7 @@ const Logo = ({ props }) => {
194194
<g transform="translate(79 48)">
195195
<circle cx="30" cy="30" r="30" fill="currentColor" />
196196
<path
197-
fill={theme.colors.bg}
197+
fill={theme.colors.bodyBg}
198198
d="M24 18L24 21.4121313 24 24.9925321 24 28.0135927 24 31.6687799C24 33.7441036 23.6719121 35.5919519 23.0141515 37.2107667 22.3563908 38.8280234 21.476735 40.2489658 20.3767689 41.4735937 19.226084 42.7621018 17.9232424 43.8652017 16.4698291 44.7813356 15.0148307 45.7005856 13.5661723 46.4391017 12.1254387 47L10 40.2629882C10.4422054 39.979423 10.8939205 39.6693709 11.3551455 39.337506 11.8179554 39.0040832 12.250651 38.6098963 12.6564021 38.1487133 13.3268425 37.4024069 13.8229367 36.6031268 14.1446847 35.749315 14.4664327 34.8970612 14.6280992 33.9341858 14.6280992 32.8653629 14.6280992 32.1673561 14.6312691 31.427282 14.6391939 30.6420244 14.6439488 29.8583248 14.6471188 28.6929028 14.6471188 27.1519905 14.6471188 25.9335948 14.6439488 24.7011766 14.6391939 23.4531779 14.6312691 22.2036211 14.6280992 21.250094 14.6280992 20.5925966L24 18zM45.9808685 37.1840625L36.7642727 39.7392406 36.7642727 37.1353475 36.7642727 30.1675369C36.5586092 30.2241091 36.3417856 30.2838242 36.1106134 30.3482537 35.8794412 30.4126831 35.6626177 30.4723982 35.4569541 30.5289704 35.2656392 30.5823998 35.05041 30.6421149 34.8128606 30.7081158 34.5753113 30.7741167 34.3744306 30.8306889 34.2070301 30.876261L34.2070301 35.8499012C34.2070301 38.2007908 34.2134072 39.7329548 34.2261616 40.4432504L25.0095657 43C24.9968114 42.2001318 24.9968114 40.8801135 25.0095657 39.0399453 25.0223201 37.199777 25.0286972 34.2988797 25.0286972 30.3372535L25.0286972 22.6528616C25.0286972 20.6398337 25.0223201 19.0275257 25.0095657 17.8143661L34.2261616 15.2591879C34.2261616 16.6750646 34.222973 18.1066559 34.2165958 19.5492472 34.2102186 20.99341 34.2070301 22.5130025 34.2070301 24.1033102 34.3744306 24.0577381 34.5657455 24.0043088 34.7841634 23.9445937 35.0025812 23.8833071 35.2194048 23.823592 35.4378227 23.7623055 35.6945035 23.6915902 35.9320528 23.6255893 36.1488764 23.5643027 36.3672943 23.5045876 36.5729578 23.4480154 36.7642727 23.3945861 36.777027 21.9991382 36.7802156 20.5345466 36.7738384 18.9992396 36.7674613 17.4670756 36.7642727 15.9836265 36.7642727 14.5551782L45.9808685 12C45.9936228 14.5284635 46 16.9092107 46 19.1406701L46 24.4820297 46 31.5362701C46 34.4827394 45.9936228 36.3653368 45.9808685 37.1840625"
199199
/>
200200
</g>

‎src/components/Theming.js

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
import { createTheming } from '@callstack/react-theme-provider'
2-
import { darken, lighten, rgba } from 'polished'
32

43
const colors = {
54
black: '#131415',
65
white: '#fff',
7-
pink: 'DEEPPINK',
6+
pink: '#ff1493',
87
gray: '#dedede',
98
}
109

11-
const colorConsts = {}
12-
1310
const themes = {
1411
default: {
1512
themeName: 'default',
1613
colors: {
1714
primary: colors.pink,
1815
text: colors.black,
19-
bg: colors.white,
16+
bodyBg: colors.white,
2017
...colors,
2118
},
2219
},
@@ -25,7 +22,7 @@ const themes = {
2522
colors: {
2623
primary: colors.pink,
2724
text: colors.white,
28-
bg: colors.black,
25+
bodyBg: colors.black,
2926
...colors,
3027
},
3128
},

‎tailwind.config.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
theme: {
3+
screens: {
4+
sm: '545px',
5+
md: '768px',
6+
lg: '992px',
7+
xl: '1200px',
8+
xxl: '1920px',
9+
},
10+
colors: {
11+
black: '#131415',
12+
white: '#fff',
13+
pink: '#ff1493',
14+
gray: '#dedede',
15+
},
16+
extend: {},
17+
},
18+
variants: {},
19+
plugins: [],
20+
}

0 commit comments

Comments
 (0)