Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
Menu
Open sidebar
code
Public Stack Site
Commits
e83eea23
Commit
e83eea23
authored
Aug 13, 2020
by
alain
🐙
Browse files
front page layout, responsiveness, etc
parent
94aa0dd1
Changes
16
Expand all
Hide whitespace changes
Inline
Side-by-side
backend/api/layer/models/layer.settings.json
View file @
e83eea23
...
...
@@ -14,6 +14,14 @@
},
"body"
:
{
"type"
:
"richtext"
},
"parent"
:
{
"model"
:
"layer"
,
"via"
:
"children"
},
"children"
:
{
"collection"
:
"layer"
,
"via"
:
"parent"
}
}
}
frontend/gatsby-config.js
View file @
e83eea23
...
...
@@ -18,7 +18,7 @@ module.exports = {
resolve
:
'
gatsby-plugin-react-svg
'
,
options
:
{
rule
:
{
include
:
/i
mages
/
include
:
/i
nline
/
}
}
},
...
...
frontend/package.json
View file @
e83eea23
...
...
@@ -23,6 +23,7 @@
"react"
:
"^16.12.0"
,
"react-dom"
:
"^16.12.0"
,
"react-helmet"
:
"^6.1.0"
,
"react-responsive"
:
"^8.1.0"
,
"react-showdown"
:
"^2.1.0"
},
"devDependencies"
:
{
...
...
frontend/src/components/layout.js
View file @
e83eea23
...
...
@@ -6,7 +6,10 @@ import "../styles/styles.scss"
import
Header
from
"
./header
"
import
Footer
from
"
./footer
"
import
Blob
from
"
../images/blob.svg
"
//import blob from "../images/blob.svg"
import
Blob
from
"
../images/inline/blob.svg
"
const
Layout
=
({
children
,
id
})
=>
{
const
data
=
useStaticQuery
(
graphql
`
...
...
@@ -19,6 +22,7 @@ const Layout = ({ children, id }) => {
}
`
)
//style={{ backgroundImage: `url("${blob}")` }}
return
(
<
div
id
=
{
id
}
className
=
"
page
"
>
<
Blob
id
=
"
blob
"
/>
...
...
frontend/src/images/inline/blob.svg
0 → 100644
View file @
e83eea23
<svg
id=
"Layer_1"
data-name=
"Layer 1"
xmlns=
"http://www.w3.org/2000/svg"
viewBox=
"0 0 658 675"
><path
d=
"M533.78,113.85c26.45,15.27,43.34,53.61,28.07,80.06S540,197.6,513.54,182.33,460.12,170.44,475.39,144,507.33,98.57,533.78,113.85Z"
fill=
"none"
stroke=
"#faa431"
stroke-miterlimit=
"10"
/><path
d=
"M537.51,89.31c43,24.83,70.49,87.19,45.66,130.2s-35.55,6-78.57-18.83-86.88-19.33-62-62.35S494.5,64.47,537.51,89.31Z"
fill=
"none"
stroke=
"#faa431"
stroke-miterlimit=
"10"
/><path
d=
"M544.88,54.12c63.58,36.71,102.36,132,63.39,199.53s-53.58,10.67-117.16-26-129.63-26.47-90.67-94S481.3,17.42,544.88,54.12Z"
fill=
"none"
stroke=
"#faa431"
stroke-miterlimit=
"10"
/><path
d=
"M551.83,13.84c89.47,51.66,144,185.82,89.22,280.79s-75.41,15-164.89-36.64-182.43-37.26-127.6-132.23S462.35-37.82,551.83,13.84Z"
fill=
"none"
stroke=
"#faa431"
stroke-miterlimit=
"10"
opacity=
"0.8"
/><path
d=
"M560.82-38.29c123,71,198,255.41,122.64,386S579.8,368.31,456.82,297.3,206.06,246.09,281.43,115.55,437.83-109.3,560.82-38.29Z"
fill=
"none"
stroke=
"#faa431"
stroke-miterlimit=
"10"
opacity=
"0.6"
/><path
d=
"M582.64-93.56C752.92,4.75,856.78,260.07,752.43,440.8s-143.51,28.58-313.78-69.73S91.47,300.17,195.82,119.44,412.36-191.87,582.64-93.56Z"
fill=
"none"
stroke=
"#faa431"
stroke-miterlimit=
"10"
opacity=
"0.4"
/><path
d=
"M649.52-235c261.3,150.86,420.67,542.64,260.55,820s-220.22,43.86-481.51-107S-104.19,369.15,55.94,91.81,388.23-385.9,649.52-235Z"
fill=
"none"
stroke=
"#faa431"
stroke-miterlimit=
"10"
opacity=
"0.2"
/></svg>
\ No newline at end of file
frontend/src/images/inline/phone-s-1.svg
0 → 100644
View file @
e83eea23
<svg
xmlns=
"http://www.w3.org/2000/svg"
viewBox=
"0 0 506.1 313.2"
><defs/><path
fill=
"#faa431"
d=
"M506 94.8v19.4c0 2-1.4 4.1-4 5.7L174 310.8a21.6 21.6 0 01-19.5 0L4.2 224c-2.7-1.6-4-3.6-4-5.7V199c0-2 1.4-4.1 4-5.7l328-190.9a21.6 21.6 0 0119.5 0l150.2 86.8c2.8 1.6 4.1 3.6 4.1 5.7z"
/><path
fill=
"#cb822a"
d=
"M501.8 100.8l-6.7 3.9-321.2 187a21.6 21.6 0 01-19.5 0l-143.7-83-6.6-3.8c-2.7-1.5-4-3.6-4-5.7l-.1 19v.3c0 2 1.4 4 4 5.7l150.3 86.7a21.6 21.6 0 0019.6 0l327.9-191c2.7-1.5 4-3.5 4-5.6V95.1c0 2-1.3 4.1-4 5.7z"
/><path
fill=
"#231f20"
d=
"M498.3 89.6c3 1.7 3.3 9 .3 10.7L173.4 290a23.7 23.7 0 01-20-1.1l-144-83.5c-6.6-3.8-3-10.1 0-11.9L335 2.6a12 12 0 0110.9 0z"
/><path
fill=
"#c8c8c8"
d=
"M403.1 41.3l18.2 10.5-4 2.4L399 43.7zm14.1 12l2.8-1.5-16.8-9.7-2.7 1.6 16.7 9.6M113.9 222c5.3 3 5.4 8 0 11.2s-14 3-19.3 0-5.3-8.1 0-11.2 14-3.1 19.3 0zM96 232.3c4.5 2.7 11.9 2.7 16.4 0s4.5-6.9 0-9.5-12-2.6-16.5 0-4.5 7 .1 9.5"
/><g><path
fill=
"#4f3d98"
d=
"M476.2 96.6c2.8 1.6 3.2 8.5.3 10L223 255.3c-3.2 1.7-11.8 3-18.9-1-4.4-2.5-129-74.8-135.1-78.2s-2.8-9.6 0-11.2L323 15a11.3 11.3 0 0110.2 0z"
/></g><g><path
fill=
"#7dcecd"
d=
"M112.5 151.2l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M140.2 167.2l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M140.2 167.2v4.1l-27.6 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M183.3 110.1l-27.5 16-.1 4.1 27.8 16 27.5-16 .1-4.1-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M211.1 126.1l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M211.1 126.1l-.1 4.1-27.5 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M217.3 89.9L189.7 106v4l27.7 16 27.6-16v-4l-27.7-16.1z"
/><path
fill=
"#90d4d3"
d=
"M245 106l-27.6 16-27.7-16 27.6-16.1L245 106z"
/><path
fill=
"#40c0bf"
d=
"M245 106v4l-27.6 16v-4l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M251.4 69.9l-27.6 16V90l27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M279.1 85.9l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M279.1 85.9V90l-27.5 16v-4.1l27.5-16z"
/><path
fill=
"#7dcecd"
d=
"M285.3 49.9l-27.5 16V70l27.7 16 27.6-16v-4.1l-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M313.1 65.9l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M313.1 65.9V70l-27.6 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M319.7 30l-27.6 16v4.1l27.8 16 27.5-16V46l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M347.4 46l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M347.4 46v4.1l-27.5 16V62l27.5-16z"
/><path
fill=
"#7dcecd"
d=
"M353.3 49.3l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M381 65.3l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M381 65.3v4.1l-27.6 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M386.9 68.9l-27.5 16V89l27.7 16 27.6-16v-4.1l-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M414.7 84.9l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M414.7 84.9V89l-27.6 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M420.5 88.2l-27.6 16v4.1l27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M448.2 104.2l-27.5 16.1-27.8-16.1 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M448.2 104.2v4.1l-27.5 16v-4l27.5-16.1z"
/><path
fill=
"#7dcecd"
d=
"M318.9 69.2l-27.6 16v4.1l27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M346.6 85.2l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M346.6 85.2v4.1l-27.5 16v-4.1l27.5-16z"
/><path
fill=
"#7dcecd"
d=
"M352.7 88.8l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M380.4 104.8l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M380.4 104.8v4.1l-27.6 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M386.1 108.1l-27.5 16v4.1l27.7 16 27.6-16v-4.1l-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M413.9 124.1l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M413.9 124.1v4.1l-27.6 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M318.5 108.8l-27.5 16v4.1l27.7 16 27.6-16v-4.1l-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M346.3 124.8l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M346.3 124.8v4.1l-27.6 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M352.1 128.1l-27.5 16-.1 4.1 27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M379.8 144.1l-27.5 16.1-27.7-16.1 27.5-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M379.8 144.1v4.1l-27.5 16v-4l27.5-16.1z"
/><path
fill=
"#7dcecd"
d=
"M250.9 109.3l-27.6 16v4l27.8 16 27.5-16v-4l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M278.6 125.3l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M278.6 125.3v4l-27.5 16v-4l27.5-16z"
/><path
fill=
"#7dcecd"
d=
"M284.6 128.9l-27.6 16v4l27.7 16.1 27.6-16.1v-4l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M312.3 144.9l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M312.3 144.9v4L284.7 165l.1-4.1 27.5-16z"
/><path
fill=
"#7dcecd"
d=
"M318.1 148.2l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M345.8 164.2l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M345.8 164.2v4.1l-27.6 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M216.8 129.3l-27.6 16v4.1l27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M244.5 145.3l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M244.5 145.3v4.1l-27.5 16v-4.1l27.5-16z"
/><path
fill=
"#7dcecd"
d=
"M250.5 148.9l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M278.2 164.9l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M278.2 164.9v4.1l-27.6 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M284 168.2l-27.5 16-.1 4.1 27.8 16 27.5-16 .1-4.1-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M311.8 184.2l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M311.8 184.2l-.1 4.1-27.5 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M213.3 209.4l-27.5 16v4.1l27.7 16 27.6-16v-4.1l-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M241.1 225.4l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M241.1 225.4v4.1l-27.6 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M179.8 190.1l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M207.5 206.1l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M207.5 206.1v4.1l-27.6 16v-4.1l27.6-16z"
/><path
fill=
"#7dcecd"
d=
"M146.1 170.5l-27.5 16-.1 4.1 27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M173.8 186.5l-27.5 16-27.7-16 27.5-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M173.8 186.5v4.1l-27.5 16v-4.1l27.5-16z"
/><path
fill=
"#ee745e"
d=
"M284.9 89.2l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#f0866e"
d=
"M312.6 105.2l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#e83c36"
d=
"M312.6 105.2v4.1l-27.6 16v-4.1l27.6-16z"
/></g></svg>
\ No newline at end of file
frontend/src/images/inline/phone-s-2.svg
0 → 100644
View file @
e83eea23
<svg
xmlns=
"http://www.w3.org/2000/svg"
data-name=
"Layer 1"
viewBox=
"0 0 521.1 1002.9"
><defs/><defs><clipPath
id=
"a"
transform=
"translate(-295 -6.9)"
><path
fill=
"none"
d=
"M410.7 436.6v.8c0-1.7-1.2-3.5-3.5-4.8-4.5-2.6-12-2.6-16.5 0-2.2 1.3-3.3 3-3.3 4.7v-.8c0-1.7 1-3.4 3.3-4.7 4.6-2.7 12-2.7 16.5 0 2.3 1.3 3.5 3 3.5 4.8z"
/></clipPath><clipPath
id=
"b"
transform=
"translate(-295 -6.9)"
><path
fill=
"none"
d=
"M412.7 436.6v.8c0 2-1.4 4-4 5.6-5.3 3-14 3-19.3 0-2.7-1.6-4-3.6-4-5.7v-.8c0 2 1.3 4.1 4 5.6 5.3 3.1 14 3.1 19.3 0 2.6-1.5 4-3.5 4-5.5z"
/></clipPath></defs><path
fill=
"#e82b30"
d=
"M21.4 890.6l335-194.1L517 787.8l-1.2 15.1L180 993.5l-157.8-86-.8-16.9z"
/><path
fill=
"#e82b30"
d=
"M521 784.6v.2c0 2-1.3 4-4 5.6l-6.6 4-143.7-83a21.6 21.6 0 00-19.6 0L26 898.4l-6.6-3.8c-2.7-1.6-4-3.7-4-5.7v-.2c0-2 1.3-4.1 4-5.7l327.9-190.9a21.6 21.6 0 0119.5 0L517 779c2.7 1.6 4 3.6 4 5.7z"
/><path
fill=
"#b2232d"
d=
"M517 790.4l-6.6 4-321.3 187a21.6 21.6 0 01-19.6 0L26 898.3l-6.6-3.8c-2.7-1.6-4-3.7-4-5.7l-.1 19v.2c0 2 1.3 4.1 4 5.7l150.3 86.8a21.6 21.6 0 0019.5 0l328-191c2.7-1.5 4-3.5 4-5.5v-19.3c0 2-1.3 4-4 5.6z"
/><g
style=
"isolation:isolate"
><path
fill=
"#56c4c3"
d=
"M503.2 539c-53.8-27.7-101.7-63-156-90-84.6 82.2-255.1 116-337 195.8.2.5 1 1.3 0 0v28.5c58.7 31.3 112.8 69.2 172.2 99.4 96.3-88.3 226.9-107 337-195.8v-28.5c-7.7-4.2-11-6.4-16.2-9.4z"
/><path
fill=
"#9bd7d7"
d=
"M492.2 570.3c-91.4 71.5-223.2 93-309.7 174l-.1 28.4c38-35.8 86.4-61.5 135.6-82.3 75-32.2 141.8-62 201.4-113.5v-28.5a505.4 505.4 0 01-27.2 21.9z"
/><path
fill=
"#88d1d1"
d=
"M143.2 723c-44.3-26.2-87.6-53.6-133-78.2v28.5c58.7 31.3 112.8 69.2 172.2 99.4v-28.5a722.8 722.8 0 01-39.2-21.2z"
/></g><path
fill=
"#faa431"
d=
"M505.9 415v19.5c0 2-1.4 4-4 5.6l-328 191a21.6 21.6 0 01-19.6 0L4.1 544.2c-2.8-1.6-4.1-3.7-4.1-5.7V519c0-2 1.4-4 4-5.6l328-190.9a21.6 21.6 0 0119.5 0l150.3 86.7c2.7 1.6 4 3.7 4 5.8z"
/><path
fill=
"#231f20"
d=
"M498 292.1c3 1.8 3.4 9 .4 10.8L173.3 492.4a23.7 23.7 0 01-20.1-1.1l-144-83.4c-6.5-3.7-3-10.2 0-12l325.6-190.8a12 12 0 0111 0z"
data-name=
"Path 1405"
/><g
style=
"isolation:isolate"
><g
clip-path=
"url(#a)"
style=
"isolation:isolate"
><path
fill=
"#bfbfbf"
d=
"M115.7 429.7v.8a5.3 5.3 0 00-2.5-4.2v-.8a5.3 5.3 0 012.5 4.2"
/><path
fill=
"#c2c2c2"
d=
"M113.2 425.5v.8l-.6-.4v-.8l.6.4"
/><path
fill=
"#c5c5c5"
d=
"M112.6 425v.9l-.3-.2-.3-.2v-.8l.3.2.3.2"
/><path
fill=
"#c7c7c7"
d=
"M112 424.7v.8l-.6-.2v-.9l.6.3"
/><path
fill=
"#cacaca"
d=
"M111.4 424.4v.9l-.5-.3v-.8l.5.2"
/><path
fill=
"#cdcdcd"
d=
"M111 424.2v.8l-.5-.2v-.8l.4.2"
/><path
fill=
"#cfcfcf"
d=
"M110.4 424v.8l-.4-.1v-.9l.4.2"
/><path
fill=
"#d2d2d2"
d=
"M110 423.9v.8l-.5-.2v-.8l.5.2"
/><path
fill=
"#d5d5d5"
d=
"M109.5 423.7v.8l-.5-.1v-.8l.5.1"
/><path
fill=
"#d7d7d7"
d=
"M109 423.6v.8l-.4-.1v-.9l.5.2"
/><path
fill=
"#dadada"
d=
"M108.6 423.4v.9l-.5-.1v-.9l.5.1"
/><path
fill=
"#ddd"
d=
"M108.1 423.4v.7h-.4v-.9l.4.1"
/><path
fill=
"#dfdfdf"
d=
"M107.7 423.3v.8h-.5v-.9l.5.1"
/><path
fill=
"#e2e2e2"
d=
"M107.2 423.2v.8h-.5v-.9h.5"
/><path
fill=
"#e4e4e4"
d=
"M106.7 423.1v.8h-.5v-.8h.5"
/><path
fill=
"#e7e7e7"
d=
"M106.2 423v.9h-.4v-.9h.4"
/><path
fill=
"#eaeaea"
d=
"M105.8 423v.8h-.5v-.8h.5"
/><path
fill=
"#ececec"
d=
"M105.3 423v.8h-.5v-.9h.5"
/><path
fill=
"#efefef"
d=
"M104.8 423v.8h-.5v-.9h.5"
/><path
fill=
"#f2f2f2"
d=
"M104.3 423v.7h-.5v-.8h.5"
/><path
fill=
"#f4f4f4"
d=
"M103.8 423v.7h-.5v-.8h.5"
/><path
fill=
"#f7f7f7"
d=
"M103.3 423v.8h-.6v-.9h.5"
/><path
fill=
"#fafafa"
d=
"M102.7 423v.8h-.7v-.8h.7"
/><path
fill=
"#fcfcfc"
d=
"M102 423v.8l-1 .2v-.9l1-.1"
/><path
fill=
"#fff"
d=
"M101 423.1v.8a18 18 0 00-2.5.6v-.8a17.5 17.5 0 012.6-.6"
/><path
fill=
"#fcfcfc"
d=
"M98.5 423.7v.9l-1.2.4v-.8a12.1 12.1 0 011.2-.5"
/><path
fill=
"#fafafa"
d=
"M97.2 424.2v.8l-.8.4v-.8l.8-.4"
/><path
fill=
"#f7f7f7"
d=
"M96.4 424.6v.8l-.6.3v-.8l.6-.3"
/><path
fill=
"#f4f4f4"
d=
"M95.8 425v.7l-.5.4v-.9l.5-.3"
/><path
fill=
"#f2f2f2"
d=
"M95.3 425.2v.9l-.5.2v-.8l.5-.3"
/><path
fill=
"#efefef"
d=
"M94.9 425.5v.8l-.4.3v-.8l.4-.3"
/><path
fill=
"#ececec"
d=
"M94.5 425.8v.8l-.3.3v-.8l.3-.3"
/><path
fill=
"#eaeaea"
d=
"M94.2 426.1v.8l-.3.3v-.8l.3-.3"
/><path
fill=
"#e7e7e7"
d=
"M94 426.4v.8l-.3.2v-.8l.2-.3"
/><path
fill=
"#e4e4e4"
d=
"M93.7 426.6v.8l-.3.3v-.8l.2-.3"
/><path
fill=
"#e2e2e2"
d=
"M93.4 426.9v.8l-.1.3v-.9s0-.2.2-.2"
/><path
fill=
"#dfdfdf"
d=
"M93.3 427.1v.8l-.2.3v-.8c0-.1 0-.2.2-.3"
/><path
fill=
"#ddd"
d=
"M93 427.4v1.1-.8-.3"
/><path
fill=
"#dadada"
d=
"M93 427.7v.8l-.2.3v-.8a2.4 2.4 0 01.1-.3"
/><path
fill=
"#d7d7d7"
d=
"M92.8 428v.8l-.1.3v-.8-.3"
/><path
fill=
"#d5d5d5"
d=
"M92.7 428.3v.8l-.1.3v-.8a1.7 1.7 0 010-.3"
/><path
fill=
"#d2d2d2"
d=
"M92.6 428.6v1.1-.8-.3"
/><path
fill=
"#cfcfcf"
d=
"M92.5 428.9v1.1-.8-.3"
/><path
fill=
"#cdcdcd"
d=
"M92.5 429.2v1.1-.8-.3"
/><path
fill=
"#cacaca"
d=
"M92.4 429.5"
/></g><g
clip-path=
"url(#b)"
style=
"isolation:isolate"
><path
fill=
"#cacaca"
d=
"M117.7 429.7"
/><path
fill=
"#cdcdcd"
d=
"M117.7 429.8V431 429.8"
/><path
fill=
"#cfcfcf"
d=
"M117.7 430.2V431.4 430.2"
/><path
fill=
"#d2d2d2"
d=
"M117.6 430.6V431.8v-.8a2.8 2.8 0 000-.4"
/><path
fill=
"#d5d5d5"
d=
"M117.6 431v.8l-.1.3v-.8-.3"
/><path
fill=
"#d7d7d7"
d=
"M117.4 431.3v1.1-.8-.3"
/><path
fill=
"#dadada"
d=
"M117.3 431.6v.9l-.1.3v-.8l.1-.4"
/><path
fill=
"#ddd"
d=
"M117.2 432v.8l-.2.3v-.8a3.6 3.6 0 00.2-.3"
/><path
fill=
"#dfdfdf"
d=
"M117 432.3v.8l-.2.3v-.8l.2-.3"
/><path
fill=
"#e2e2e2"
d=
"M116.8 432.6v.8l-.3.3v-.8l.3-.3"
/><path
fill=
"#e4e4e4"
d=
"M116.6 433v.7l-.3.4v-.9l.3-.3"
/><path
fill=
"#e7e7e7"
d=
"M116.3 433.2v.9l-.3.3v-.8l.3-.4"
/><path
fill=
"#eaeaea"
d=
"M116 433.6v.8l-.3.3v-.8l.3-.3"
/><path
fill=
"#ececec"
d=
"M115.7 433.9v.8l-.4.3v-.8l.4-.3"
/><path
fill=
"#efefef"
d=
"M115.3 434.2v.8a4.8 4.8 0 01-.4.3v-.8l.4-.3"
/><path
fill=
"#f2f2f2"
d=
"M114.9 434.5v.8l-.5.4v-.8l.5-.4"
/><path
fill=
"#f4f4f4"
d=
"M114.4 434.9v.8l-.6.4v-.9l.6-.3"
/><path
fill=
"#f7f7f7"
d=
"M113.8 435.2v.9c-.3 0-.5.2-.7.3v-.8l.7-.4"
/><path
fill=
"#fafafa"
d=
"M113 435.6v.9a10.6 10.6 0 01-1 .4v-.8l1-.4"
/><path
fill=
"#fcfcfc"
d=
"M112 436.1v.8a13.7 13.7 0 01-1.4.6v-.9l1.5-.5"
/><path
fill=
"#fff"
d=
"M110.7 436.6v.8a19.8 19.8 0 01-3 .7v-.8a21 21 0 003-.7"
/><path
fill=
"#fcfcfc"
d=
"M107.6 437.3v.8l-1 .2v-.9l1-.1"
/><path
fill=
"#fafafa"
d=
"M106.5 437.4v.9h-.8v-.8h.8"
/><path
fill=
"#f7f7f7"
d=
"M105.8 437.5v.8h-.7v-.8h.7"
/><path
fill=
"#f4f4f4"
d=
"M105 437.6v.8h-.5v-.8h.6"
/><path
fill=
"#f2f2f2"
d=
"M104.4 437.6v.8h-.6v-.8h.6"
/><path
fill=
"#efefef"
d=
"M103.9 437.6v.8h-.6v-.8h.6"
/><path
fill=
"#ececec"
d=
"M103.3 437.6v.8h-.6v-.8h.6"
/><path
fill=
"#eaeaea"
d=
"M102.7 437.5v.9l-.6-.1v-.8h.6"
/><path
fill=
"#e7e7e7"
d=
"M102.1 437.5v.8h-.5v-.9h.5"
/><path
fill=
"#e4e4e4"
d=
"M101.6 437.4v.9l-.6-.1v-.8h.6"
/><path
fill=
"#e2e2e2"
d=
"M101 437.4v.8l-.6-.1v-.8h.6"
/><path
fill=
"#dfdfdf"
d=
"M100.4 437.3v.8h-.5v-.9l.5.1"
/><path
fill=
"#ddd"
d=
"M99.9 437.2v.8l-.6-.1v-.8l.6.1"
/><path
fill=
"#dadada"
d=
"M99.3 437.1v.8h-.5v-1l.6.2"
/><path
fill=
"#d7d7d7"
d=
"M98.8 437v.8l-.5-.2v-.8l.5.1"
/><path
fill=
"#d5d5d5"
d=
"M98.3 436.8v.8l-.6-.1v-.9l.6.2"
/><path
fill=
"#d2d2d2"
d=
"M97.7 436.6v.9l-.5-.2v-.8l.5.1"
/><path
fill=
"#cfcfcf"
d=
"M97.2 436.5v.8l-.6-.2v-.8l.6.2"
/><path
fill=
"#cdcdcd"
d=
"M96.6 436.3v.8l-.5-.2v-.8l.5.2"
/><path
fill=
"#cacaca"
d=
"M96 436v.9l-.5-.3v-.8l.6.3"
/><path
fill=
"#c7c7c7"
d=
"M95.5 435.8v.8l-.7-.3v-.8l.7.3"
/><path
fill=
"#c5c5c5"
d=
"M94.8 435.5v.8l-.3-.2-.3-.2v-.8l.3.2.3.2"
/><path
fill=
"#c2c2c2"
d=
"M94.2 435.1v.8a9.3 9.3 0 01-.8-.5v-.8l.8.5"
/><path
fill=
"#bfbfbf"
d=
"M93.3 434.5v.9a6.2 6.2 0 01-2.9-5v-.8a6.2 6.2 0 003 5"
/></g><path
fill=
"#c8c8c8"
d=
"M113.7 424.1c5.4 3.1 5.4 8.1 0 11.2s-14 3-19.2 0-5.4-8.2-.1-11.2 14-3.1 19.3 0zM96 434.4c4.5 2.7 12 2.7 16.4 0s4.6-6.9 0-9.5-12-2.6-16.4 0-4.5 7 0 9.5"
/></g><g
style=
"isolation:isolate"
><path
fill=
"#fcfcfc"
d=
"M403 244.6v.8l-2.7 1.6v-.8l2.7-1.6z"
/><path
fill=
"#cbcbcb"
d=
"M419.8 254.3v.8l-16.8-9.7v-.8l16.8 9.7z"
/><path
fill=
"#c8c8c8"
d=
"M403 243.8l18.2 10.5-4.1 2.4-18.2-10.6zm14 12l2.8-1.5-16.8-9.7-2.7 1.5L417 256"
/><path
fill=
"#fcfcfc"
d=
"M421.2 254.3v.8l-4.1 2.4v-.8l4.1-2.4z"
/><path
fill=
"#cbcbcb"
d=
"M417.1 256.7v.8L398.9 247v-.8l18.2 10.5z"
/></g><g><path
fill=
"#4f3d98"
d=
"M476 178.4c2.8 1.6 3.2 8.4.4 10L222.8 337c-3.2 1.6-11.8 3-18.9-1L68.9 257.7c-6.1-3.5-2.8-9.5 0-11.2l254-149.7a11.3 11.3 0 0110.2 0z"
data-name=
"Path 1405"
/></g><g><path
fill=
"#ee745e"
d=
"M284.7 59.2l-27.6 16v4.1l27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#f0866e"
d=
"M312.4 75.2l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#e83c36"
d=
"M312.4 75.2v4.1l-27.5 16v-4.1l27.5-16z"
/><path
fill=
"#7dcecd"
d=
"M112.3 121.2l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M140 137.2l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M140 137.2v4.1l-27.6 16 .1-4.1 27.5-16z"
/><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M183.1 80.1l-27.5 16v4.1l27.7 16 27.5-16 .1-4.1-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M210.9 96.1l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M210.9 96.1l-.1 4.1-27.5 16v-4.1l27.6-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M217.1 60l-27.6 16v4l27.7 16 27.6-16v-4l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M244.8 76l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M244.8 76v4l-27.6 16 .1-4 27.5-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M251.2 39.9l-27.5 16V60l27.7 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M278.9 55.9l-27.5 16-27.7-16 27.5-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M278.9 55.9V60l-27.5 16v-4.1l27.5-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M285.1 19.9l-27.5 16V40l27.7 16 27.6-16v-4.1l-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M312.9 35.9l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M312.9 35.9V40l-27.6 16v-4.1l27.6-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M319.5 0L292 16v4.1l27.7 16 27.6-16V16L319.5 0z"
/><path
fill=
"#90d4d3"
d=
"M347.3 16l-27.6 16L292 16l27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M347.3 16v4.1l-27.6 16V32l27.6-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M353.1 19.3l-27.6 16v4.1l27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M380.8 35.3l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M380.8 35.3v4.1l-27.5 16v-4.1l27.5-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M386.8 38.9l-27.6 16V59l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M414.5 54.9l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M414.5 54.9V59l-27.6 16v-4.1l27.6-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M420.3 58.2l-27.5 16v4.1l27.7 16 27.5-16 .1-4.1-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M448.1 74.2l-27.6 16.1-27.7-16.1 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M448.1 74.2l-.1 4.1-27.5 16v-4l27.6-16.1z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M318.7 39.2l-27.6 16v4.1l27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M346.4 55.2l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M346.4 55.2v4.1l-27.5 16v-4.1l27.5-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M352.5 58.8l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M380.2 74.8l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M380.2 74.8v4.1l-27.6 16v-4.1l27.6-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M385.9 78.1l-27.5 16v4.1l27.7 16 27.6-16v-4.1l-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M413.7 94.1l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M413.7 94.1v4.1l-27.6 16v-4.1l27.6-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M318.4 78.8l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M346.1 94.8l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M346.1 94.8v4.1l-27.6 16v-4.1l27.6-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M351.9 98.1l-27.5 16.1v4l27.7 16 27.5-16v-4l-27.7-16.1z"
/><path
fill=
"#90d4d3"
d=
"M379.6 114.2l-27.5 16-27.7-16 27.5-16.1 27.7 16.1z"
/><path
fill=
"#40c0bf"
d=
"M379.6 114.2v4l-27.5 16v-4l27.5-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M250.7 79.3l-27.5 16v4l27.7 16.1 27.5-16.1.1-4-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M278.5 95.3l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M278.5 95.3l-.1 4-27.5 16.1v-4.1l27.6-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M284.4 98.9l-27.6 16v4.1l27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M312.1 114.9l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M312.1 114.9v4.1l-27.5 16v-4.1l27.5-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M317.9 118.2l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M345.6 134.2l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M345.6 134.2v4.1l-27.6 16 .1-4.1 27.5-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M216.6 99.3l-27.5 16-.1 4.1 27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M244.3 115.3l-27.5 16-27.7-16 27.5-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M244.3 115.3v4.1l-27.5 16v-4.1l27.5-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M250.3 118.9l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M278 134.9l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M278 134.9v4.1l-27.6 16v-4.1l27.6-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M283.8 138.2l-27.5 16v4.1l27.7 16 27.6-16v-4.1l-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M311.6 154.2l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M311.6 154.2v4.1l-27.6 16v-4.1l27.6-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M213.2 179.4l-27.6 16v4.1l27.7 16 27.6-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M240.9 195.4l-27.6 16-27.7-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M240.9 195.4v4.1l-27.6 16v-4.1l27.6-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M179.6 160.1l-27.6 16v4.1l27.8 16 27.5-16v-4.1l-27.7-16z"
/><path
fill=
"#90d4d3"
d=
"M207.3 176.1l-27.5 16-27.8-16 27.6-16 27.7 16z"
/><path
fill=
"#40c0bf"
d=
"M207.3 176.1v4.1l-27.5 16v-4.1l27.5-16z"
/></g><g
data-name=
"app"
><path
fill=
"#7dcecd"
d=
"M145.9 140.5l-27.5 16v4.1l27.7 16 27.6-16v-4.1l-27.8-16z"
/><path
fill=
"#90d4d3"
d=
"M173.7 156.5l-27.6 16-27.7-16 27.5-16 27.8 16z"
/><path
fill=
"#40c0bf"
d=
"M173.7 156.5v4.1l-27.6 16v-4.1l27.6-16z"
/></g></g></svg>
\ No newline at end of file
frontend/src/images/inline/phone-s-3.svg
0 → 100644
View file @
e83eea23
This diff is collapsed.
Click to expand it.
frontend/src/images/phone.svg
→
frontend/src/images/
inline/
phone.svg
View file @
e83eea23
File moved
frontend/src/images/inline/stack.svg
0 → 100644
View file @
e83eea23
This diff is collapsed.
Click to expand it.
frontend/src/images/toaster.svg
→
frontend/src/images/
inline/
toaster.svg
View file @
e83eea23
File moved
frontend/src/pages/index.js
View file @
e83eea23
import
React
,
{
useRef
,
useEffect
}
from
"
react
"
import
{
graphql
}
from
"
gatsby
"
import
{
graphql
,
Link
}
from
"
gatsby
"
import
gsap
,
{
Power1
}
from
'
gsap
'
;
import
{
MotionPathPlugin
}
from
"
gsap/MotionPathPlugin
"
;
import
{
ScrollTrigger
}
from
"
gsap/ScrollTrigger
"
;
import
{
useMediaQuery
}
from
'
react-responsive
'
import
Layout
from
"
../components/layout
"
import
SEO
from
"
../components/seo
"
import
Toaster
from
"
../images/toaster.svg
"
import
Phone
from
"
../images/phone.svg
"
import
Toaster
from
"
../images/inline/toaster.svg
"
import
Phone
from
"
../images/inline/phone.svg
"
import
PhoneS1
from
"
../images/inline/phone-s-1.svg
"
import
PhoneS2
from
"
../images/inline/phone-s-2.svg
"
import
PhoneS3
from
"
../images/inline/phone-s-3.svg
"
import
Stack
from
"
../images/inline/stack.svg
"
gsap
.
registerPlugin
(
MotionPathPlugin
,
ScrollTrigger
);
const
IndexPage
=
({
data
})
=>
{
const
isSmallScreen
=
useMediaQuery
({
query
:
'
(max-device-width: 480px)
'
})
//let toaster = useRef(null)
let
phone
=
useRef
(
null
)
let
phoneTrigger
=
useRef
(
null
)
let
stack
=
useRef
(
null
)
let
stackTrigger
=
useRef
(
null
)
useEffect
(()
=>
{
// TOASTER ANIMATION
...
...
@@ -33,86 +42,129 @@ const IndexPage = ({ data }) => {
// })
// PHONE ANIMATION
const
phoneTimeline
=
gsap
.
timeline
({
scrollTrigger
:
{
trigger
:
phoneTrigger
,
start
:
"
-66px top
"
,
end
:
"
bottom 87%
"
,
toggleActions
:
"
play pause reverse reset
"
,
scrub
:
0.25
,
pin
:
phone
,
},
ease
:
Power1
.
easeInOut
});
const
keyframes
=
[
0.8
,
2
]
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#buttons
"
),
{
y
:
-
300
},
keyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#screen
"
),
{
y
:
-
200
},
keyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#front
"
),
{
y
:
-
100
},
keyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#capital
"
),
{
y
:
150
},
keyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#society
"
),
{
y
:
400
},
keyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#digits-bg
"
),
{
opacity
:
1
},
keyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#capital-bg
"
),
{
opacity
:
1
},
keyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#society-bg
"
),
{
opacity
:
1
},
keyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#digits-content
"
),
{
opacity
:
1
},
keyframes
[
1
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#capital-content
"
),
{
opacity
:
1
},
keyframes
[
1
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#society-content
"
),
{
opacity
:
1
},
keyframes
[
1
])
if
(
!
isSmallScreen
)
{
const
phoneTimeline
=
gsap
.
timeline
({
scrollTrigger
:
{
trigger
:
phoneTrigger
,
start
:
"
-66px top
"
,
end
:
"
bottom 87%
"
,
toggleActions
:
"
play pause reverse reset
"
,
scrub
:
0.25
,
pin
:
phone
,
},
ease
:
Power1
.
easeInOut
})
const
phoneKeyframes
=
[
0.8
,
2
]
// move layers vertically
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#buttons
"
),
{
y
:
-
300
},
phoneKeyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#screen
"
),
{
y
:
-
200
},
phoneKeyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#front
"
),
{
y
:
-
100
},
phoneKeyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#capital
"
),
{
y
:
150
},
phoneKeyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#society
"
),
{
y
:
400
},
phoneKeyframes
[
0
])
// unhide hidden layers
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#digits-bg
"
),
{
opacity
:
1
},
phoneKeyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#capital-bg
"
),
{
opacity
:
1
},
phoneKeyframes
[
0
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#society-bg
"
),
{
opacity
:
1
},
phoneKeyframes
[
0
])
// reveal content of hidden layers
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#digits-content
"
),
{
opacity
:
1
},
phoneKeyframes
[
1
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#capital-content
"
),
{
opacity
:
1
},
phoneKeyframes
[
1
])
phoneTimeline
.
to
(
phone
.
querySelectorAll
(
"
#society-content
"
),
{
opacity
:
1
},
phoneKeyframes
[
1
])
// STACK ANIMATION
const
stackTimeline
=
gsap
.
timeline
({
scrollTrigger
:
{
trigger
:
stackTrigger
,
start
:
"
-66px top
"
,
end
:
"
bottom 83%
"
,
toggleActions
:
"
play pause reverse reset
"
,
scrub
:
0.25
,
pin
:
stack
,
},
ease
:
Power1
.
easeInOut
})
const
stackKeyframes
=
[
0.5
,
1.5
,
2.5
]
stackTimeline
.
to
(
stack
.
querySelectorAll
(
"
#empty-stack
"
),
{
opacity
:
0
},
stackKeyframes
[
0
])
stackTimeline
.
to
(
stack
.
querySelectorAll
(
"
#private-stack
"
),
{
opacity
:
1
},
stackKeyframes
[
0
])
//stackTimeline.to(stack.querySelectorAll("#private-stack"), { opacity: 1 }, 2)
stackTimeline
.
to
(
stack
.
querySelectorAll
(
"
#private-stack
"
),
{
opacity
:
0
},
stackKeyframes
[
1
])
stackTimeline
.
to
(
stack
.
querySelectorAll
(
"
#state-stack
"
),
{
opacity
:
1
},
stackKeyframes
[
1
])
stackTimeline
.
to
(
stack
.
querySelectorAll
(
"
#state-stack
"
),
{
opacity
:
0
},
stackKeyframes
[
2
])
stackTimeline
.
to
(
stack
.
querySelectorAll
(
"
#public-stack
"
),
{
opacity
:
1
},
stackKeyframes
[
2
])
}
})
return
(
<
Layout
>
<
Layout
id
=
"
front-page
"
>
<
SEO
title
=
"
Home
"
/>
<
section
id
=
"
front-introduction
"
>
<
div
className
=
"
row columns-2
"
>
<
div
className
=
"
row columns-2
s-column-reverse
"
>
<
div
className
=
"
column v-center
"
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
introduction
}}
/
>
<
div
className
=
"
column v-center
"
>
{
/* <div ref={el => toaster = el}> */
}
<
Toaster
/>
<
Toaster
id
=
"
toaster
"
/>
{
/* </div> */
}
<
/div
>
<
/div
>
<
/section
>
<
section
id
=
"
front-layer-explanation
"
style
=
{{
background
:
"
#F8F8F8
"
}}
>
<
section
id
=
"
front-layer-explanation
"
style
=
{{
background
:
"
#F8F8F8
"
}}
ref
=
{
el
=>
phoneTrigger
=
el
}
>
<
div
className
=
"
row columns-2
"
>
{
!
isSmallScreen
&&
<
div
className
=
"
column
"
ref
=
{
el
=>
phone
=
el
}
>
<
Phone
/>
<
Phone
id
=
"
phone
"
className
=
"
visual-part
"
/>
<
/div
>
<
div
className
=
"
column
"
ref
=
{
el
=>
phoneTrigger
=
el
}
>
<
div
className
=
"
phone-part v-center
"
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
layer_explanation_1
}}
><
/div
>
<
div
className
=
"
phone-part v-center
"
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
layer_explanation_2
}}
><
/div
>
<
div
className
=
"
phone-part v-center
"
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
layer_explanation_3
}}
><
/div
>
}
<
div
className
=
"
column
"
>
<
div
className
=
"
text-part v-center
"
>
{
isSmallScreen
&&
<
PhoneS1
/>
}
<
div
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
layer_explanation_1
}}
/
>
<
/div
>
<
div
className
=
"
text-part v-center
"
>
{
isSmallScreen
&&
<
PhoneS2
/>
}
<
div
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
layer_explanation_2
}}
/
>
<
/div
>
<
div
className
=
"
text-part v-center
"
>
{
isSmallScreen
&&
<
PhoneS3
/>
}
<
div
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
layer_explanation_3
}}
/
>
<
/div
>
<
/div
>
<
/div
>
<
/section
>
<
section
id
=
"
front-introduction-2
"
>
<
div
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
layer_explanation_4
}}
><
/div
>
<
/section
>
<
section
id
=
"
front-stacks
"
>
<
section
id
=
"
front-stacks
"
ref
=
{
el
=>
stackTrigger
=
el
}
>
<
div
className
=
"
row columns-2
"
>
<
div
className
=
"
columns
"
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
three_stacks_1
}}
><
/div
>
<
/div
>
<
/section
>
<
section
>
<
div
className
=
"
row columns-2
"
>
<
div
className
=
"
columns
"
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
three_stacks_2
}}
><
/div
>
<
div
className
=
"
column
"
>
<
div
className
=
"
text-part v-center
"
>
<
div
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
layer_explanation_4
}}
><
/div
>
<
/div
>
<
div
className
=
"
text-part v-center
"
>
<
div
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
three_stacks_1
}}
/
>
<
/div
>
<
div
className
=
"
text-part v-center
"
>
<
div
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
three_stacks_2
}}
/
>
<
/div
>
<
div
className
=
"
text-part v-center
"
>
<
div
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
three_stacks_3
}}
/
>
<
/div
>
<
/div
>
{
!
isSmallScreen
&&
<
div
className
=
"
column
"
ref
=
{
el
=>
stack
=
el
}
>
<
Stack
id
=
"
stack
"
className
=
"
visual-part
"
/>
<
/div
>
}
<
/div
>
<
/section
>
<
section
>
<
div
className
=
"
row columns-2
"
>
<
div
className
=
"
columns
"
dangerouslySetInnerHTML
=
{{
__html
:
data
.
strapiHome
.
three_stacks_3
}}
><
/div
>
<
/div
>
<
section
style
=
{{
textAlign
:
"
center
"
}}
>
<
Link
to
=
"
/
"
>
Explore
the
layer
of
the
stack
&
raquo
;
<
/Link
>
<
/section
>
<
/Layout
>
)
...
...
frontend/src/styles/_header.scss
View file @
e83eea23
...
...
@@ -46,6 +46,10 @@
white-space
:
nowrap
;
transition
:
all
100ms
ease
;
@media
(
max-width
:
480px
)
{
font-size
:
36px
;
}
a
:hover
{
text-decoration
:
underline
;
}
...
...
@@ -135,20 +139,16 @@
overflow
:
hidden
;
transition
:
max-width
200ms
ease
;
.scrolled
&
{
max-width
:
1px
;
max-height
:
1px
;
overflow
:
hidden
;
}
}
}
// NARROW SCREEN
@media
only
screen
and
(
max-width
:
1200px
)
{
@media
only
screen
and
(
max-width
:
1200px
)
{
#nav-container
{
flex-direction
:
column
;
align-items
:
flex-end
;
margin
:
1
rem
;
margin
:
0
.75rem
0
.5rem
0
.5
rem
;
input
:checked
~
#nav
{
transform
:
translateX
(
-100%
);
...
...
@@ -162,7 +162,8 @@
top
:
0
;
margin
:
-2
.5rem
;
padding
:
3
.5rem
2
.5rem
2
.5rem
;
background
:
#eee
;
background
:
#fff
;
box-shadow
:
0
0
0
.5rem
0
rgba
(
0
,
0
,
0
,
0
.2
);
-webkit-font-smoothing
:
antialiased
;
/* to stop flickering of text in safari */
transform-origin
:
0%
0%
;
...
...
@@ -196,6 +197,14 @@
display
:
flex
;
justify-content
:
flex-end
;
a
.nav-item-subtitle
{
.scrolled
&
{
max-width
:
1px
;
max-height
:
1px
;
overflow
:
hidden
;
}
}
ul
{
display
:
flex
;
padding
:
0
;
...
...
frontend/src/styles/_layout.scss
View file @
e83eea23
...
...
@@ -2,6 +2,7 @@ body {
padding
:
0
;
overflow-y
:
overlay
;
overflow-x
:
hidden
;
width
:
100%
;
&
::-webkit-scrollbar
{
width
:
0
.5rem
;
}
&
::-webkit-scrollbar-track
{
background-color
:
rgba
(
0
,
0
,
0
,
0
.025
);
}
...
...
@@ -14,6 +15,8 @@ body {
display
:
flex
;
flex-direction
:
column
;
min-height
:
100vh
;
max-width
:
100vw
;
overflow-x
:
hidden
;
}
#blob
{
...
...
@@ -23,7 +26,7 @@ body {
min-width
:
768px
;
top
:
0
;
right
:
0
;
transform
:
translate
(
35%
,
-25%
);
//
transform: translate(35%, -25%);
path
{
stroke-width
:
0
.8
;
...
...
@@ -33,9 +36,13 @@ body {
main
{
flex
:
1
0
auto
;
width
:
100%
;
max-width
:
1200px
;
margin
:
3rem
auto
;
padding-top
:
5rem
;
@media
(
max-width
:
480px
)
{
padding-top
:
3rem
;
}
}
footer
{
...
...
@@ -49,7 +56,9 @@ section {
.row
{
display
:
flex
;
margin
:
0
-1rem
;
flex-direction
:
row
;
margin
:
0
auto
;
max-width
:
1120px
;
//align-items: flex-start;
&
.columns-1
.column
{
...
...
@@ -62,6 +71,21 @@ section {
.column
{
padding
:
0
1rem
;
max-width
:
94vw
;
}
@media
(
max-width
:
480px
)
{
flex-direction
:
column
;
align-items
:
center
;
&
.s-column-reverse
{
flex-direction
:
column-reverse
;
}
&
.columns-2
.column
{
width
:
100%
;
margin-bottom
:
2rem
;
}
}
}
...
...
@@ -94,4 +118,16 @@ section {
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
}
.s-disable
{
@media
(
max-width
:
480px
)
{
display
:
none
;
}
}
.l-disable
{
@media
(
min-width
:
481px
)
{
display
:
none
;
}
}
\ No newline at end of file
frontend/src/styles/_page-index.scss
View file @
e83eea23
...
...
@@ -6,6 +6,7 @@
h1
{
font-size
:
5rem
;
line-height
:
1em
;
}
h2
{
font-size
:
1
.75rem
;
...
...
@@ -13,14 +14,62 @@
line-height
:
1
.25em
;
font-style
:
italic
;
}
}
#toaster
{
max-width
:
70vw
;
margin
:
0
auto
;
}
@media
(
max-width
:
480px
)
{
.column
{
text-align
:
center
;
}
#phone
{
max-height
:
80vh
;
h1
{
font-size
:
2
.5rem
;
}
h2
{
font-size
:
1
.25rem
;
}
}
}
.phone-part
{
min-height
:
90vh
;
#front-page
{
section
{
overflow
:
hidden
;
}
@media
(
min-width
:
481px
)
{
p
{
font-size
:
1
.25rem
;
}
}
#phone
{
max-height
:
70vh
;
}
#stack
{
max-height
:
50vh
;
}
.text-part
{
min-height
:
80vh
;
@media
(
max-width
:
480px
)
{
svg
{
margin
:
1rem
auto
;
max-width
:
60vw
;
}
}
}
}
frontend/yarn.lock
View file @
e83eea23
...
...
@@ -4461,6 +4461,11 @@ css-loader@^1.0.1:
postcss-value-parser "^3.3.0"
source-list-map "^2.0.0"
css-mediaquery@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=
css-select-base-adapter@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
...
...
@@ -7879,6 +7884,11 @@ human-signals@^1.1.1:
resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
hyphenate-style-name@^1.0.0:
version "1.0.4"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
...
...
@@ -9411,6 +9421,13 @@ markdown-table@^2.0.0:
dependencies:
repeat-string "^1.0.0"
matchmediaquery@^0.3.0:
version "0.3.1"
resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.1.tgz#8247edc47e499ebb7c58f62a9ff9ccf5b815c6d7"
integrity sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==
dependencies:
css-mediaquery "^0.1.2"
math-random@^1.0.1:
version "1.0.4"
resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
...
...
@@ -11890,6 +11907,16 @@ react-remove-scroll@^2.3.0:
use-callback-ref "^1.2.3"
use-sidecar "^1.0.1"
react-responsive@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-8.1.0.tgz#afcc2293c46a37b1e7926ff7fef66bcb147e7cba"
integrity sha512-U8Nv2/ZWACIw/fAE9XNPbc2Xo33X5q1bcCASc2SufvJ9ifB+o/rokfogfznSVcvS22hN1rafGi0uZD6GiVFEHw==
dependencies:
hyphenate-style-name "^1.0.0"
matchmediaquery "^0.3.0"
prop-types "^15.6.1"
shallow-equal "^1.1.0"
react-showdown@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-showdown/-/react-showdown-2.1.0.tgz#cddf070a7ed53b425fc7adfb44abac6fd835cee9"
...
...
@@ -12773,6 +12800,11 @@ shallow-compare@^1.2.2: