the layers component....

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

@@ -26,6 +26,11 @@
     "order": {
       "type": "string",
       "regex": "^[0-9-_.~]*$"
+    },
+    "slug": {
+      "type": "string",
+      "regex": "^[a-z0-9-_.~]*$",
+      "required": true
     }
   }
 }

frontend/src/pages/index.js

@@ -21,7 +21,7 @@ import Layers from "../components/layers.js"
 
 gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);
 
-const IndexPage = ({ data }) => {
+const IndexPage = ({ data, location }) => {
   const isSmallScreen = useMediaQuery({ query: '(max-device-width: 480px)' })
 
   //let toaster = useRef(null)
@@ -165,7 +165,7 @@ const IndexPage = ({ data }) => {
         </div>
       </section>
 
-      <Layers id="stack" />
+      <Layers id="stack" location={location} />
     </Layout>
   )
 }

frontend/src/pages/layers.js

@@ -5,12 +5,11 @@ import SEO from "../components/seo"
 
 import Layers from "../components/layers.js"
 
-const LayersPage = () => {
-
+const LayersPage = (props) => {
   return (
     <Layout id="front-page">
       <SEO title="Home" />
-      <Layers id="stack" />
+      <Layers id="stack" location={props.location} />
     </Layout>
   )
 }

frontend/src/styles/_layers.scss

@@ -5,8 +5,10 @@
   }
 
   svg {
+    display: block;
     width: 100%;
-    max-width: 320px;
+    max-width: 420px;
+    margin: 0 auto;
     //pointer-events: none;
   }
 
@@ -20,31 +22,36 @@
     stroke-linejoin: round;
     stroke-width: 0.75px;
 
+    &.stroked { stroke: #000; fill: none; }
     &.dotted { stroke: #000; stroke-dasharray: 12; }
   }
 
+  text {
+    pointer-events: auto;
+  }
+
   .clickable {
     cursor: pointer;
   }
 
   .inactive {
     opacity: 0;
-      
-    path, polygon {
+
+    path, polygon, text {
       pointer-events: none;
     }
   }
 
   .idle {
-    opacity: 0.3;
+    opacity: 0.6;
 
     &:hover {
-      opacity: 0.6;
+      opacity: 0.8;
     }
   }
 
   .active .idle {
-    opacity: 0.6;
+    opacity: 0.7;
 
     &:hover {
       opacity: 0.9;
@@ -98,3 +105,19 @@
 .r-u { fill: #d6262c; stroke: #d6272b; }
 .r-r { fill: #cc2429; stroke: #cc2429; }
 .r-l { fill: #b11d21; stroke: #b11d21; }
+
+
+#context-layers-active.active {
+  > g:nth-child(1) { transform: translateY(60px); }
+  > g:nth-child(2) { transform: translateY(20px); }
+  > g:nth-child(3) { transform: translateY(-20px); }
+  > g:nth-child(4) { transform: translateY(-60px); }
+}
+
+#tech-layers-active.active {
+  > g:nth-child(1) { transform: translateY(60px); }
+  > g:nth-child(2) { transform: translateY(30px); }
+  > g:nth-child(3) { transform: translateY(0px); }
+  > g:nth-child(4) { transform: translateY(-30px); }
+  > g:nth-child(5) { transform: translateY(-60px); }
+}
\ No newline at end of file

frontend/src/styles/_layout.scss

@@ -55,49 +55,46 @@ section {
 }
 
 .row {
-  display: flex;
-  flex-direction: row;
   margin: 0 auto;
   max-width: 1120px;
-  //align-items: flex-start;
-
-  &.columns-1 .column {
-    width: 100%;
-  }
 
-  &.columns-2 .column {
-    width: 50%;
-  }
 
-  // &.columns-3 .column {
-  //   width: 40%;
+}
 
-  //   &:last-child {
-  //     width: 20%
-  //   }
-  // }
+.columns-1, .columns-2 {
+  display: flex;
+  flex-direction: row;
 
   .column {
     padding: 0 1rem;
     max-width: 94vw;
   }
+}
 
-  @media (max-width: 480px) {
+.columns-1 .column {
+  width: 100%;
+}
+
+.columns-2 .column {
+  width: 50%;
+}
+
+@media (max-width: 480px) {
+  .columns-1, .columns-2 { 
     flex-direction: column;
     align-items: center;
+  }
 
-    &.s-column-reverse {
-      flex-direction: column-reverse;
-    }
+  .s-column-reverse {
+    flex-direction: column-reverse;
+  }
 
-    &.columns-2 .column {
-      width: 100%;
-      margin-bottom: 2rem;
-    }
+  .columns-2 .column {
+    width: 100%;
+    margin-bottom: 2rem;
   }
 }
 
-
 .item {
   margin-bottom: 2rem;
 }

frontend/src/styles/_typography.scss

@@ -21,6 +21,15 @@ h2 {
 
 h3 {
   margin: 0;
+  font-size: 1rem;
+}
+
+p {
+  margin: 0 0 1rem 0;
+}
+
+ul {
+  margin-top: 0;
 }
 
 a.back {