Commit 411aeaad authored by alain's avatar alain 🐙
Browse files

the layers component....

parent dd8c4e5f
......@@ -26,6 +26,11 @@
"order": {
"type": "string",
"regex": "^[0-9-_.~]*$"
},
"slug": {
"type": "string",
"regex": "^[a-z0-9-_.~]*$",
"required": true
}
}
}
This diff is collapsed.
......@@ -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>
)
}
......
......@@ -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>
)
}
......
......@@ -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
......@@ -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;
}
......
......@@ -21,6 +21,15 @@ h2 {
h3 {
margin: 0;
font-size: 1rem;
}
p {
margin: 0 0 1rem 0;
}
ul {
margin-top: 0;
}
a.back {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment