front page layout, responsiveness, etc

backend/api/layer/models/layer.settings.json

@@ -14,6 +14,14 @@
     },
     "body": {
       "type": "richtext"
+    },
+    "parent": {
+      "model": "layer",
+      "via": "children"
+    },
+    "children": {
+      "collection": "layer",
+      "via": "parent"
     }
   }
 }

frontend/gatsby-config.js

@@ -18,7 +18,7 @@ module.exports = {
       resolve: 'gatsby-plugin-react-svg',
       options: {
         rule: {
-          include: /images/
+          include: /inline/
         }
       }
     },

frontend/package.json

@@ -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

@@ -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

+<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

+<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

+<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/pages/index.js

 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

@@ -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;

frontend/src/styles/_layout.scss

@@ -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

@@ -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

@@ -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: