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
411aeaad
Commit
411aeaad
authored
Aug 18, 2020
by
alain
🐙
Browse files
the layers component....
parent
dd8c4e5f
Changes
7
Expand all
Hide whitespace changes
Inline
Side-by-side
backend/api/layer/models/layer.settings.json
View file @
411aeaad
...
...
@@ -26,6 +26,11 @@
"order"
:
{
"type"
:
"string"
,
"regex"
:
"^[0-9-_.~]*$"
},
"slug"
:
{
"type"
:
"string"
,
"regex"
:
"^[a-z0-9-_.~]*$"
,
"required"
:
true
}
}
}
frontend/src/components/layers.js
View file @
411aeaad
This diff is collapsed.
Click to expand it.
frontend/src/pages/index.js
View file @
411aeaad
...
...
@@ -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
View file @
411aeaad
...
...
@@ -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
View file @
411aeaad
...
...
@@ -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
View file @
411aeaad
...
...
@@ -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
View file @
411aeaad
...
...
@@ -21,6 +21,15 @@ h2 {
h3
{
margin
:
0
;
font-size
:
1rem
;
}
p
{
margin
:
0
0
1rem
0
;
}
ul
{
margin-top
:
0
;
}
a
.back
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment