Commit e83eea23 authored by alain's avatar alain 🐙
Browse files

front page layout, responsiveness, etc

parent 94aa0dd1
......@@ -14,6 +14,14 @@
},
"body": {
"type": "richtext"
},
"parent": {
"model": "layer",
"via": "children"
},
"children": {
"collection": "layer",
"via": "parent"
}
}
}
......@@ -18,7 +18,7 @@ module.exports = {
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /images/
include: /inline/
}
}
},
......
......@@ -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": {
......
......@@ -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" />
......
<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
<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
<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
This diff is collapsed.
This diff is collapsed.
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>
)
......
......@@ -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: 1rem;
margin: 0.75rem 0.5rem 0.5rem;
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;
......
......@@ -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
......@@ -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;
}
}
}
}
......@@ -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:
resolved "https://registry.yarnpkg.com/shallow-compare/-/shallow-compare-1.2.2.tgz#fa4794627bf455a47c4f56881d8a6132d581ffdb"
integrity sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg==
 
shallow-equal@^1.1.0: