Skip to content

Commit d182461

Browse files
good3ngood3n
committed
Update for theme toggle
1 parent 0416036 commit d182461

14 files changed

Lines changed: 265 additions & 169 deletions

File tree

‎gatsby-browser.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,7 @@
55
*/
66

77
// You can delete this file if you're not using it
8+
9+
import React from 'react'
10+
import { Provider } from './src/context/globalContext'
11+
export const wrapRootElement = ({ element }) => <Provider>{element}</Provider>

‎src/assets/styles/global.js‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,22 @@ import { createGlobalStyle } from 'styled-components'
22

33
const GlobalStyle = createGlobalStyle`
44
:root {
5-
--color__background: #202225;
5+
--color__background: ${({ theme: { theme } }) => theme === `dark` ? `#202225` : `#fff`};
6+
--color__text: ${({ theme: { theme } }) => theme === `dark` ? `#fff` : `#202225`};
7+
--color__border: ${({ theme: { theme } }) => theme === `dark` ? `rgba(255, 255, 255, 0.15)` : `var(--color__text)`};
68
--color__green: #4fd8c3;
79
--color__purple: #5e7ce7;
10+
--color__gray: #ECF2FC;
811
912
/* font sizes */
1013
--font-size__h0: 7.451rem;
11-
--font-size__h1: 3.815rem;
12-
--font-size__h2: 3.052rem;
13-
--font-size__h3: 2.441rem;
14-
--font-size__h4: 1.953rem;
15-
--font-size__h5: 1.563rem;
14+
--font-size__h1: 2.488rem;
15+
--font-size__h2: 2.074rem;
16+
--font-size__h3: 1.728rem;
17+
--font-size__h4: 1.44rem;
18+
--font-size__h5: 1.2rem;
1619
--font-size__base: 1rem;
17-
--font-size__small: 0.8rem;
20+
--font-size__small: 0.833rem;
1821
}
1922
2023
::-moz-selection {
@@ -45,7 +48,7 @@ const GlobalStyle = createGlobalStyle`
4548
font-family: 'Apercu-Mono-Pro';
4649
font-size: var(--font-size__base);
4750
background-color: var(--color__background);
48-
color: #fff;
51+
color: var(--color__text);
4952
line-height: 1.75;
5053
-webkit-font-smoothing: antialiased;
5154
-moz-osx-font-smoothing: grayscale;
@@ -104,7 +107,7 @@ const GlobalStyle = createGlobalStyle`
104107
line-height: 1;
105108
color: #fff;
106109
background-color: var(--color__purple);
107-
border: 2px solid var(--color__purple);
110+
border: 2px solid var(--color__border);
108111
font-weight: 700;
109112
display: inline-flex;
110113
align-items: center;
@@ -128,10 +131,12 @@ const GlobalStyle = createGlobalStyle`
128131
transition: all .3s ease-in-out;
129132
}
130133
131-
&:hover {
132-
&::before {
133-
width: 200%;
134-
left: -5%;
134+
@media (min-width: 992px) {
135+
&:hover {
136+
&::before {
137+
width: 200%;
138+
left: -5%;
139+
}
135140
}
136141
}
137142

‎src/assets/styles/pages/Index.styles.js‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ export const StyledHome = styled.div`
1616
transform: rotate(13deg);
1717
1818
@media (max-width: 991px) {
19-
width: 50px;
20-
right: -45px;
19+
max-width: 9vw;
20+
top: 3%;
21+
right: -13%;
2122
}
2223
}
2324
@@ -26,9 +27,11 @@ export const StyledHome = styled.div`
2627
color: var(--color__green);
2728
margin-top: 0;
2829
letter-spacing: -0.1em;
30+
-webkit-text-stroke: 2px ${({ theme: { theme } }) => theme === `dark` ? `transparent` : `var(--color__text)`};
2931
3032
@media (max-width: 991px) {
31-
font-size: var(--font-size__h1);
33+
font-size: 13.5vw;
34+
-webkit-text-stroke: 1.5px ${({ theme: { theme } }) => theme === `dark` ? `transparent` : `var(--color__text)`};
3235
}
3336
3437
span {
@@ -44,34 +47,14 @@ export const StyledHome = styled.div`
4447
4548
p {
4649
margin: 0 0 3rem;
47-
font-size: var(--font-size__h5);
50+
font-size: var(--font-size__h4);
4851
4952
@media (max-width: 991px) {
5053
font-size: var(--font-size__base);
5154
}
5255
}
5356
5457
a {
55-
/* background-color: var(--color__purple); */
56-
/* color: #fff; */
57-
/* padding: 1rem 50px; */
58-
/* border-radius: 80px; */
59-
/* text-decoration: none; */
60-
/* font-weight: bold; */
61-
/* transition: background-color 0.2s ease 0.1s; */
62-
/* display: inline-flex; */
63-
/* align-items: center; */
64-
/* justify-content: center; */
65-
66-
/* @media (max-width: 991px) {
67-
padding: var(--font-size__h5) 30px;
68-
width: auto;
69-
}
70-
71-
&:hover {
72-
background-color: var(--color__green);
73-
} */
74-
7558
img {
7659
width: 32px;
7760
margin-right: 15px;

‎src/components/DataList/DataList.styles.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ export const StyledDataList = styled.div`
88
h2 {
99
margin: 0;
1010
padding-bottom: 1rem;
11-
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
12-
font-size: var(--font-size__h5);
11+
border-bottom: 2px solid var(--color__border);
12+
font-size: var(--font-size__h4);
1313
}
1414
1515
h3 {
1616
border-bottom: 3px dashed;
1717
display: inline-block;
18-
font-size: var(--font-size__base);
19-
border-color: var(--color__purple);
18+
font-size: var(--font-size__h5);
19+
border-color: ${({ theme: { theme } }) => theme === `dark` ? `var(--color__purple)` : `var(--color__green)`};
2020
padding-bottom: 5px;
2121
margin: 2rem 0 1rem;
2222

‎src/components/Footer/Footer.styles.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const StyledFooter = styled.footer`
1919
display: flex;
2020
align-items: center;
2121
margin-left: auto;
22-
color: #fff;
22+
color: var(--color__text);
2323
text-decoration: none;
2424
2525
@media (max-width: 991px) {

‎src/components/Header/Header.component.js‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
11
import React, { useState } from 'react'
22
import { Link } from 'gatsby'
3+
import { ThemeToggle } from '../ThemeToggle'
34
import { Nav } from '../Nav'
45
import { StyledHeader } from './Header.styles'
56

67
const Header = () => {
78
const [navOpen, setNavOpen] = useState(false)
89
return (
9-
<StyledHeader className={navOpen && `is-active`}>
10-
<Link to="/">
11-
<svg
12-
fill="none"
13-
viewBox="0 0 325 135"
14-
xmlns="http://www.w3.org/2000/svg"
15-
>
16-
<path
17-
d="M70.301 85.424c0-27.267 17.48-49.577 46.484-49.577 20.168 0 33.998 8.772 41.873 26.505l-20.36 8.58c-4.802-11.25-11.525-14.873-21.513-14.873-13.638 0-22.666 10.869-22.666 29.365s9.028 29.364 22.666 29.364c9.988 0 16.711-3.623 21.513-14.873l20.36 8.581C150.783 126.229 136.953 135 116.785 135c-29.004 0-46.484-22.309-46.484-49.576Z"
18-
fill="#4FD8C3"
19-
/>
20-
<path
21-
d="M167.302 135V0h23.818v54.343a35.8 35.8 0 0 1 13.131-12.475 36.117 36.117 0 0 1 17.602-4.495c18.632 0 30.156 9.915 30.156 28.983V135h-23.818V74.746c0-11.632-4.609-17.161-14.406-17.161-11.524 0-22.665 12.012-22.665 36.8V135h-23.818Z"
22-
fill="#5E7CE7"
23-
/>
24-
<path
25-
d="M54.55 129.089 0 90.572v-11.06l54.55-38.516h1.153v22.5l-32.27 21.546 32.27 21.547v22.5h-1.152Zm215.323 0h-1.345v-22.5l32.462-21.547-32.462-21.546v-22.5h1.345l54.551 38.517v11.06l-54.551 38.516Z"
26-
fill="#fff"
27-
/>
28-
</svg>
29-
</Link>
30-
<Nav navOpen={navOpen} setNavOpen={setNavOpen} />
31-
</StyledHeader>
10+
<>
11+
<StyledHeader className={navOpen && `is-active`}>
12+
<Link to="/">
13+
<svg
14+
fill="none"
15+
viewBox="0 0 325 135"
16+
xmlns="http://www.w3.org/2000/svg"
17+
>
18+
<path
19+
d="M70.301 85.424c0-27.267 17.48-49.577 46.484-49.577 20.168 0 33.998 8.772 41.873 26.505l-20.36 8.58c-4.802-11.25-11.525-14.873-21.513-14.873-13.638 0-22.666 10.869-22.666 29.365s9.028 29.364 22.666 29.364c9.988 0 16.711-3.623 21.513-14.873l20.36 8.581C150.783 126.229 136.953 135 116.785 135c-29.004 0-46.484-22.309-46.484-49.576Z"
20+
fill="#4FD8C3"
21+
/>
22+
<path
23+
d="M167.302 135V0h23.818v54.343a35.8 35.8 0 0 1 13.131-12.475 36.117 36.117 0 0 1 17.602-4.495c18.632 0 30.156 9.915 30.156 28.983V135h-23.818V74.746c0-11.632-4.609-17.161-14.406-17.161-11.524 0-22.665 12.012-22.665 36.8V135h-23.818Z"
24+
fill="#5E7CE7"
25+
/>
26+
<path
27+
d="M54.55 129.089 0 90.572v-11.06l54.55-38.516h1.153v22.5l-32.27 21.546 32.27 21.547v22.5h-1.152Zm215.323 0h-1.345v-22.5l32.462-21.547-32.462-21.546v-22.5h1.345l54.551 38.517v11.06l-54.551 38.516Z"
28+
fill="#fff"
29+
/>
30+
</svg>
31+
</Link>
32+
<Nav navOpen={navOpen} setNavOpen={setNavOpen} />
33+
<ThemeToggle />
34+
</StyledHeader>
35+
</>
3236
)
3337
}
3438

‎src/components/Header/Header.styles.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,22 @@ import styled from 'styled-components'
33
export const StyledHeader = styled.header`
44
display: grid;
55
grid-template-columns: 80px 1fr;
6-
margin: 3rem auto 5rem;
6+
margin: 3rem auto 4rem;
77
align-items: end;
88
position: relative;
99
z-index: 999;
1010
1111
@media (max-width: 991px) {
1212
grid-template-columns: 60px 1fr;
13-
margin: 2rem auto 3rem;
13+
margin: 2rem auto 4rem;
1414
}
1515
1616
> a:first-of-type {
17-
border: 2px solid rgba(255, 255, 255, 0.15);
17+
border: 2px solid var(--color__border);
1818
border-radius: 10px 10px 0 10px;
1919
height: 80px;
2020
display: flex;
21+
background-color: ${({ theme: { theme } }) => theme === `dark` ? `transparent` : `var(--color__gray)`};
2122
2223
@media (max-width: 991px) {
2324
height: 60px;
@@ -28,6 +29,8 @@ export const StyledHeader = styled.header`
2829
margin: 0 -11px;
2930
position: relative;
3031
top: -3px;
32+
stroke: ${({ theme: { theme } }) => theme === `dark` ? `transparent` : `var(--color__text)`};
33+
stroke-width: 5px;
3134
3235
@media (max-width: 991px) {
3336
top: 0;
@@ -40,8 +43,15 @@ export const StyledHeader = styled.header`
4043
@media (max-width: 991px) {
4144
&.is-active {
4245
> a:first-of-type {
43-
svg path {
44-
fill: var(--color__background);
46+
background: none;
47+
border-color: rgba(255, 255, 255, 0.15);
48+
49+
svg {
50+
stroke: none;
51+
52+
path {
53+
fill: #202225;
54+
}
4555
}
4656
}
4757
}

0 commit comments

Comments
 (0)