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

more improvements to layers component

parent 66c4ed9e
...@@ -39,11 +39,11 @@ const Layers = ({ location }) => { ...@@ -39,11 +39,11 @@ const Layers = ({ location }) => {
<div className="columns-2"> <div className="columns-2">
<div className="column" <div className="column"
onClick={e => { handleClick(e, "0") }} onClick={e => { handleClick(e, "0") }}
//onKeyDown={e => { handleClick(e, "0") }} onKeyDown={e => { if(e.keyCode === 27) handleClick(e, "0") }}
tabIndex="0" tabIndex="0"
role="button" role="button"
aria-label="reset view"> aria-label="reset view">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 570 794.17"><g style={{ transform: "translateY(120px)" }}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 794.17"><g style={{ transform: "translateY(120px)" }}>
<g id="foundation-layer-idle" <g id="foundation-layer-idle"
className={`clickable ${mainLayer === 1 ? 'inactive' : 'idle'} ${mainLayer >= 2 ? "down" : ""}`} className={`clickable ${mainLayer === 1 ? 'inactive' : 'idle'} ${mainLayer >= 2 ? "down" : ""}`}
...@@ -223,7 +223,7 @@ const Layers = ({ location }) => { ...@@ -223,7 +223,7 @@ const Layers = ({ location }) => {
<text transform="translate(413.2 129.26)">Service</text> <text transform="translate(413.2 129.26)">Service</text>
</g> </g>
<g> <g>
<text class="strong" transform="translate(413.2 99.93)"> <text className="strong" transform="translate(413.2 99.93)">
<tspan x="0" y="0">Tech stack:</tspan> <tspan x="0" y="0">Tech stack:</tspan>
<tspan x="0" y="18">context layers</tspan> <tspan x="0" y="18">context layers</tspan>
</text> </text>
...@@ -318,7 +318,7 @@ const Layers = ({ location }) => { ...@@ -318,7 +318,7 @@ const Layers = ({ location }) => {
<text transform="translate(346.01 122.81)">Application layer</text> <text transform="translate(346.01 122.81)">Application layer</text>
</g> </g>
<g> <g>
<text class="strong" transform="translate(346.01 80.03)"> <text className="strong" transform="translate(346.01 80.03)">
<tspan x="0" y="0">Tech stack:</tspan> <tspan x="0" y="0">Tech stack:</tspan>
<tspan x="0" y="18">tech layers</tspan> <tspan x="0" y="18">tech layers</tspan>
</text> </text>
......
...@@ -101,61 +101,67 @@ const IndexPage = ({ data, location }) => { ...@@ -101,61 +101,67 @@ const IndexPage = ({ data, location }) => {
<SEO title="Home" /> <SEO title="Home" />
<section id="front-introduction"> <section id="front-introduction">
<div className="row columns-2 s-column-reverse"> <div className="row">
<div className="column v-center" dangerouslySetInnerHTML={{__html: data.strapiHome.introduction }} /> <div className="columns-2 s-column-reverse">
<div className="column v-center"> <div className="column v-center" dangerouslySetInnerHTML={{__html: data.strapiHome.introduction }} />
{/* <div ref={el => toaster = el}> */} <div className="column v-center">
<Toaster id="toaster" /> {/* <div ref={el => toaster = el}> */}
{/* </div> */} <Toaster id="toaster" />
{/* </div> */}
</div>
</div> </div>
</div> </div>
</section> </section>
<section id="front-layer-explanation" style={{background: "#F8F8F8"}} ref={el => phoneTrigger = el}> <section id="front-layer-explanation" style={{background: "#F8F8F8"}} ref={el => phoneTrigger = el}>
<div className="row columns-2"> <div className="row">
{ !isSmallScreen && <div className="columns-2">
<div className="column" ref={el => phone = el}> { !isSmallScreen &&
<Phone id="phone" className="visual-part" /> <div className="column" ref={el => phone = el}>
</div> <Phone id="phone" className="visual-part" />
}
<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>
<div className="text-part v-center"> }
{ isSmallScreen && <PhoneS3 /> } <div className="column">
<div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_3 }} /> <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>
</div> </div>
</div> </div>
</section> </section>
<section id="front-stacks" ref={el => stackTrigger = el}> <section id="front-stacks" ref={el => stackTrigger = el}>
<div className="row columns-2"> <div className="row">
<div className="column"> <div className="columns-2">
<div className="text-part v-center"> <div className="column">
<div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_4 }}></div> <div className="text-part v-center">
</div> <div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_4 }}></div>
<div className="text-part v-center"> </div>
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_1 }} /> <div className="text-part v-center">
</div> <div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_1 }} />
<div className="text-part v-center"> </div>
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_2 }} /> <div className="text-part v-center">
</div> <div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_2 }} />
<div className="text-part v-center"> </div>
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_3 }} /> <div className="text-part v-center">
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_3 }} />
</div>
</div> </div>
{ !isSmallScreen &&
<div className="column" ref={el => stack = el}>
<Stack id="stack" className="visual-part" />
</div>
}
</div> </div>
{ !isSmallScreen &&
<div className="column" ref={el => stack = el}>
<Stack id="stack" className="visual-part" />
</div>
}
</div> </div>
</section> </section>
......
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
} }
text { text {
font-size: 18px;
pointer-events: auto; pointer-events: auto;
&.strong { &.strong {
......
...@@ -57,7 +57,11 @@ section { ...@@ -57,7 +57,11 @@ section {
.row { .row {
margin: 0 auto; margin: 0 auto;
max-width: 1320px; max-width: 1320px;
padding: 2rem; padding: 1rem;
@media (min-width: 680px) {
padding: 2rem;
}
} }
.columns-1, .columns-2 { .columns-1, .columns-2 {
...@@ -66,7 +70,7 @@ section { ...@@ -66,7 +70,7 @@ section {
margin: 0 -1rem; margin: 0 -1rem;
.column { .column {
padding: 0 1rem; margin: 0 1rem;
max-width: 94vw; max-width: 94vw;
} }
} }
......
Supports Markdown
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