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

more frontend changes

parent 594b249b
...@@ -9,10 +9,13 @@ const Alternatives = ({ alternatives }) => { ...@@ -9,10 +9,13 @@ const Alternatives = ({ alternatives }) => {
{ alternatives.map(alternative => ( { alternatives.map(alternative => (
<div key={alternative.id} className="alternative"> <div key={alternative.id} className="alternative">
<div className="logo"> <div className="logo">
{ alternative.logo && <Img fluid={ alternative.logo.childImageSharp.fluid } fadeIn={false} /> } { alternative.logo && <a href={alternative.link} target="_blank" rel="noopener noreferrer">
<Img fluid={ alternative.logo.childImageSharp.fluid } fadeIn={false} imgStyle={{ objectFit: "contain" }} />
</a> }
</div> </div>
<div className="text"> <div className="text">
<h2>{ alternative.title }</h2> <h2>{ alternative.title }</h2>
<a href={ alternative.link } target="_blank" rel="noopener noreferrer" className="url">{ alternative.link }</a>
<div dangerouslySetInnerHTML={{__html:alternative.description }} /> <div dangerouslySetInnerHTML={{__html:alternative.description }} />
{ (alternative.domains || []).length > 0 && { (alternative.domains || []).length > 0 &&
<p className="meta"> <p className="meta">
......
...@@ -37,14 +37,18 @@ const Layers = ({ location }) => { ...@@ -37,14 +37,18 @@ const Layers = ({ location }) => {
<section id="layers"> <section id="layers">
<div className="row"> <div className="row">
<div className="columns-2"> <div className="columns-2">
<div className="column" onClick={e => { handleClick(e, "0") }}> <div className="column"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 637.96 794.17"><g style={{ transform: "translateY(120px)" }}> style={{ border: "none" }}
onClick={e => { handleClick(e, "0") }}
onKeyDown={e => { handleClick(e, "0") }}
tabIndex="0"
role="button"
aria-label="reset view">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 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" : ""}`}
onClick={e => handleClick(e, "1")} onClick={e => handleClick(e, "1")} role="button" aria-label="Learn more about the Foundation Layer">
role="button"
aria-label="Learn more about the Foundation Layer">
<polygon className="t-u" points="330.14 347.51 166.01 442.89 0.81 347.51 164.94 252.13 330.14 347.51" /> <polygon className="t-u" points="330.14 347.51 166.01 442.89 0.81 347.51 164.94 252.13 330.14 347.51" />
<polygon className="t-r" points="330.14 347.51 329.98 406.21 165.85 501.59 166.01 442.89 330.14 347.51" /> <polygon className="t-r" points="330.14 347.51 329.98 406.21 165.85 501.59 166.01 442.89 330.14 347.51" />
<polygon className="t-l" points="166.01 442.89 165.85 501.59 0.65 406.21 0.81 347.51 166.01 442.89" /> <polygon className="t-l" points="166.01 442.89 165.85 501.59 0.65 406.21 0.81 347.51 166.01 442.89" />
...@@ -54,7 +58,7 @@ const Layers = ({ location }) => { ...@@ -54,7 +58,7 @@ const Layers = ({ location }) => {
<g id="design-layer-idle" <g id="design-layer-idle"
className={`clickable ${mainLayer === 2 ? 'inactive' : 'idle'} ${mainLayer >= 1 && mainLayer < 2 ? "up" : ""} ${mainLayer >= 3 ? "down" : ""}`} className={`clickable ${mainLayer === 2 ? 'inactive' : 'idle'} ${mainLayer >= 1 && mainLayer < 2 ? "up" : ""} ${mainLayer >= 3 ? "down" : ""}`}
onClick={e => handleClick(e, "2")}> onClick={e => handleClick(e, "2")} role="button" aria-label="Learn more about the Design Layer">
<polygon className="t-u" points="330.23 241.01 166.1 336.39 0.89 241.01 165.02 145.63 330.23 241.01" /> <polygon className="t-u" points="330.23 241.01 166.1 336.39 0.89 241.01 165.02 145.63 330.23 241.01" />
<polygon className="t-r" points="330.23 241.01 330.06 299.7 165.93 395.09 166.1 336.39 330.23 241.01" /> <polygon className="t-r" points="330.23 241.01 330.06 299.7 165.93 395.09 166.1 336.39 330.23 241.01" />
<polygon className="t-l" points="166.1 336.39 165.93 395.09 0.73 299.71 0.89 241.01 166.1 336.39" /> <polygon className="t-l" points="166.1 336.39 165.93 395.09 0.73 299.71 0.89 241.01 166.1 336.39" />
...@@ -90,7 +94,7 @@ const Layers = ({ location }) => { ...@@ -90,7 +94,7 @@ const Layers = ({ location }) => {
<g id="tech-layer-idle" <g id="tech-layer-idle"
className={`${mainLayer < 3 ? 'idle' : ''} ${mainLayer === 3 ? 'inactive' : ''} ${current !== "0" && mainLayer >= 1 && mainLayer < 3 ? "up" : ""}`} className={`${mainLayer < 3 ? 'idle' : ''} ${mainLayer === 3 ? 'inactive' : ''} ${current !== "0" && mainLayer >= 1 && mainLayer < 3 ? "up" : ""}`}
onClick={e => handleClick(e, "3")}> onClick={e => handleClick(e, "3")} role="button" aria-label="Learn more about the Tech Layer">
<polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" /> <polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" />
<polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" /> <polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" />
<polygon className="t-l" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9" /> <polygon className="t-l" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9" />
...@@ -101,7 +105,7 @@ const Layers = ({ location }) => { ...@@ -101,7 +105,7 @@ const Layers = ({ location }) => {
<g id="foundation-layer-active" <g id="foundation-layer-active"
className={`${mainLayer >= 1 && mainLayer < 2 ? 'active' : 'inactive'}`}> className={`${mainLayer >= 1 && mainLayer < 2 ? 'active' : 'inactive'}`}>
<g className={`${current !== "1.1" ? 'idle' : ''}`} <g className={`${current !== "1.1" ? 'idle' : ''}`}
onClick={e => handleClick(e, "1.1")}> onClick={e => handleClick(e, "1.1")} role="button" aria-label="Learn more about the Starting Points and assumptions Layer">
<polygon className="r-u" points="239.62 295.21 165.76 338.13 91.42 295.21 165.28 252.29 239.62 295.21" /> <polygon className="r-u" points="239.62 295.21 165.76 338.13 91.42 295.21 165.28 252.29 239.62 295.21" />
<polygon className="r-r" points="239.62 295.21 239.45 353.9 165.59 396.82 165.76 338.13 239.62 295.21" /> <polygon className="r-r" points="239.62 295.21 239.45 353.9 165.59 396.82 165.76 338.13 239.62 295.21" />
<polygon className="r-l" points="165.76 338.13 165.59 396.82 91.25 353.9 91.42 295.21 165.76 338.13" /> <polygon className="r-l" points="165.76 338.13 165.59 396.82 91.25 353.9 91.42 295.21 165.76 338.13" />
...@@ -112,7 +116,7 @@ const Layers = ({ location }) => { ...@@ -112,7 +116,7 @@ const Layers = ({ location }) => {
</text> </text>
</g> </g>
<g className={`${current !== "1.2" ? 'idle' : ''}`} <g className={`${current !== "1.2" ? 'idle' : ''}`}
onClick={e => handleClick(e, "1.2")}> onClick={e => handleClick(e, "1.2")} role="button" aria-label="Learn more about the Fundamental rights and values Layer">
<polygon className="y-u" points="329.61 347.21 255.76 390.13 181.42 347.21 255.28 304.29 329.61 347.21" /> <polygon className="y-u" points="329.61 347.21 255.76 390.13 181.42 347.21 255.28 304.29 329.61 347.21" />
<polygon className="y-r" points="329.61 347.21 329.45 405.9 255.59 448.82 255.76 390.13 329.61 347.21" /> <polygon className="y-r" points="329.61 347.21 329.45 405.9 255.59 448.82 255.76 390.13 329.61 347.21" />
<polygon className="y-l" points="255.76 390.13 255.59 448.82 181.26 405.9 181.42 347.21 255.76 390.13" /> <polygon className="y-l" points="255.76 390.13 255.59 448.82 181.26 405.9 181.42 347.21 255.76 390.13" />
...@@ -123,7 +127,7 @@ const Layers = ({ location }) => { ...@@ -123,7 +127,7 @@ const Layers = ({ location }) => {
</text> </text>
</g> </g>
<g className={`${current !== "1.4" ? 'idle' : ''}`} <g className={`${current !== "1.4" ? 'idle' : ''}`}
onClick={e => handleClick(e, "1.4")}> onClick={e => handleClick(e, "1.4")} role="button" aria-label="Learn more about the Socio-economic considerations Layer">
<polygon className="t-u" points="149.61 347.21 75.76 390.13 1.42 347.21 75.28 304.29 149.61 347.21" /> <polygon className="t-u" points="149.61 347.21 75.76 390.13 1.42 347.21 75.28 304.29 149.61 347.21" />
<polygon className="t-r" points="149.61 347.21 149.45 405.9 75.59 448.82 75.76 390.13 149.61 347.21" /> <polygon className="t-r" points="149.61 347.21 149.45 405.9 75.59 448.82 75.76 390.13 149.61 347.21" />
<polygon className="t-l" points="75.76 390.13 75.59 448.82 1.26 405.9 1.42 347.21 75.76 390.13" /> <polygon className="t-l" points="75.76 390.13 75.59 448.82 1.26 405.9 1.42 347.21 75.76 390.13" />
...@@ -134,7 +138,7 @@ const Layers = ({ location }) => { ...@@ -134,7 +138,7 @@ const Layers = ({ location }) => {
</text> </text>
</g> </g>
<g className={`${current !== "1.3" ? 'idle' : ''}`} <g className={`${current !== "1.3" ? 'idle' : ''}`}
onClick={e => handleClick(e, "1.3")}> onClick={e => handleClick(e, "1.3")} role="button" aria-label="Learn more about the Governance and oversight Layer">
<polygon className="p-u" points="239.61 400.21 165.76 443.13 91.42 400.21 165.28 357.29 239.61 400.21" /> <polygon className="p-u" points="239.61 400.21 165.76 443.13 91.42 400.21 165.28 357.29 239.61 400.21" />
<polygon className="p-r" points="239.61 400.21 239.45 458.9 165.59 501.82 165.76 443.13 239.61 400.21" /> <polygon className="p-r" points="239.61 400.21 239.45 458.9 165.59 501.82 165.76 443.13 239.61 400.21" />
<polygon className="p-l" points="165.76 443.13 165.59 501.82 91.26 458.9 91.42 400.21 165.76 443.13" /> <polygon className="p-l" points="165.76 443.13 165.59 501.82 91.26 458.9 91.42 400.21 165.76 443.13" />
...@@ -150,7 +154,7 @@ const Layers = ({ location }) => { ...@@ -150,7 +154,7 @@ const Layers = ({ location }) => {
className={`${mainLayer < 3 ? 'inactive' : ''}`}> className={`${mainLayer < 3 ? 'inactive' : ''}`}>
<g id="contexts-layers-idle" <g id="contexts-layers-idle"
className={`clickable ${current === "3" ? 'idle' : 'inactive'}`} className={`clickable ${current === "3" ? 'idle' : 'inactive'}`}
onClick={e => handleClick(e, "3.1")}> onClick={e => handleClick(e, "3.1")} role="button" aria-label="Learn more about the Contexts Layers">
<polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" /> <polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" />
<polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" /> <polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" />
<polygon className="t-l" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9" /> <polygon className="t-l" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9" />
...@@ -159,7 +163,7 @@ const Layers = ({ location }) => { ...@@ -159,7 +163,7 @@ const Layers = ({ location }) => {
</g> </g>
<g id="tech-layers-idle" <g id="tech-layers-idle"
className={`clickable ${current === "3" ? 'idle' : 'inactive'}`} className={`clickable ${current === "3" ? 'idle' : 'inactive'}`}
onClick={e => handleClick(e, "3.2")}> onClick={e => handleClick(e, "3.2")} role="button" aria-label="Learn more about the Tech Layers">
<polygon className="t-u dotted" points="273.68 129.63 165.63 192.42 56.87 129.63 164.92 66.83 273.68 129.63" /> <polygon className="t-u dotted" points="273.68 129.63 165.63 192.42 56.87 129.63 164.92 66.83 273.68 129.63" />
<polygon className="t-r dotted" points="273.68 129.63 273.66 190.68 165.61 253.47 165.63 192.42 273.68 129.63" /> <polygon className="t-r dotted" points="273.68 129.63 273.66 190.68 165.61 253.47 165.63 192.42 273.68 129.63" />
<polygon className="t-l dotted" points="165.63 192.42 165.61 253.47 56.85 190.68 56.87 129.63 165.63 192.42" /> <polygon className="t-l dotted" points="165.63 192.42 165.61 253.47 56.85 190.68 56.87 129.63 165.63 192.42" />
...@@ -171,7 +175,7 @@ const Layers = ({ location }) => { ...@@ -171,7 +175,7 @@ const Layers = ({ location }) => {
<g id="context-layers-active" <g id="context-layers-active"
className={`${current.includes("3.1") ? 'active' : 'inactive'}`}> className={`${current.includes("3.1") ? 'active' : 'inactive'}`}>
<g className={`${current !== "3.1.4" ? 'idle' : ''}`} <g className={`${current !== "3.1.4" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.1.4")}> onClick={e => handleClick(e, "3.1.4")} role="button" aria-label="Learn more about the Data and algorithms Layer">
<polygon className="r-l" points="278.13 174.6 278.09 189.27 164.61 123.76 164.66 109.08 278.13 174.6" /> <polygon className="r-l" points="278.13 174.6 278.09 189.27 164.61 123.76 164.66 109.08 278.13 174.6" />
<polygon className="r-r" points="164.66 109.08 164.61 123.76 51.88 189.27 51.92 174.6 164.66 109.08" /> <polygon className="r-r" points="164.66 109.08 164.61 123.76 51.88 189.27 51.92 174.6 164.66 109.08" />
<path className="r-u" d="M546.72,377.16,712.1,472.65,547.79,568.14,382.4,472.65Zm.91,161,112.73-65.52L546.89,407.14,434.15,472.65l113.48,65.52" transform="translate(-382.24 -298.05)" /> <path className="r-u" d="M546.72,377.16,712.1,472.65,547.79,568.14,382.4,472.65Zm.91,161,112.73-65.52L546.89,407.14,434.15,472.65l113.48,65.52" transform="translate(-382.24 -298.05)" />
...@@ -181,7 +185,7 @@ const Layers = ({ location }) => { ...@@ -181,7 +185,7 @@ const Layers = ({ location }) => {
<text transform="translate(406.89 173.76)">Data and algorithms</text> <text transform="translate(406.89 173.76)">Data and algorithms</text>
</g> </g>
<g className={`${current !== "3.1.3" ? 'idle' : ''}`} <g className={`${current !== "3.1.3" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.1.3")}> onClick={e => handleClick(e, "3.1.3")} role="button" aria-label="Learn more about the Protocols and standards Layer">
<polygon className="p-l" points="278.13 159.59 278.09 174.27 164.61 108.75 164.66 94.08 278.13 159.59" /> <polygon className="p-l" points="278.13 159.59 278.09 174.27 164.61 108.75 164.66 94.08 278.13 159.59" />
<polygon className="p-r" points="164.66 94.08 164.61 108.75 51.87 174.27 51.91 159.6 164.66 94.08" /> <polygon className="p-r" points="164.66 94.08 164.61 108.75 51.87 174.27 51.91 159.6 164.66 94.08" />
<path className="p-u" d="M546.72,362.16,712.1,457.65,547.79,553.14,382.4,457.65Zm.9,161,112.74-65.52L546.89,392.13,434.15,457.65l113.47,65.52" transform="translate(-382.24 -298.05)" /> <path className="p-u" d="M546.72,362.16,712.1,457.65,547.79,553.14,382.4,457.65Zm.9,161,112.74-65.52L546.89,392.13,434.15,457.65l113.47,65.52" transform="translate(-382.24 -298.05)" />
...@@ -191,7 +195,7 @@ const Layers = ({ location }) => { ...@@ -191,7 +195,7 @@ const Layers = ({ location }) => {
<text transform="translate(406.89 159)">Protocols and standards</text> <text transform="translate(406.89 159)">Protocols and standards</text>
</g> </g>
<g className={`${current !== "3.1.2" ? 'idle' : ''}`} <g className={`${current !== "3.1.2" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.1.2")}> onClick={e => handleClick(e, "3.1.2")} role="button" aria-label="Learn more about the Security Layer">
<polygon className="t-l" points="278.13 144.59 278.09 159.26 164.61 93.75 164.66 79.08 278.13 144.59" /> <polygon className="t-l" points="278.13 144.59 278.09 159.26 164.61 93.75 164.66 79.08 278.13 144.59" />
<polygon className="t-r" points="164.66 79.08 164.61 93.75 51.87 159.27 51.91 144.6 164.66 79.08" /> <polygon className="t-r" points="164.66 79.08 164.61 93.75 51.87 159.27 51.91 144.6 164.66 79.08" />
<path className="t-u" d="M546.72,347.16,712.1,442.64,547.79,538.13,382.4,442.65Zm.9,161,112.74-65.52L546.89,377.13,434.15,442.65l113.47,65.51" transform="translate(-382.24 -298.05)" /> <path className="t-u" d="M546.72,347.16,712.1,442.64,547.79,538.13,382.4,442.65Zm.9,161,112.74-65.52L546.89,377.13,434.15,442.65l113.47,65.51" transform="translate(-382.24 -298.05)" />
...@@ -201,7 +205,7 @@ const Layers = ({ location }) => { ...@@ -201,7 +205,7 @@ const Layers = ({ location }) => {
<text transform="translate(406.89 145.15)">Security</text> <text transform="translate(406.89 145.15)">Security</text>
</g> </g>
<g className={`${current !== "3.1.1" ? 'idle' : ''}`} <g className={`${current !== "3.1.1" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.1.1")}> onClick={e => handleClick(e, "3.1.1")} role="button" aria-label="Learn more about the Service Layer">
<polygon className="y-u" points="278.13 129.6 278.09 144.27 164.61 78.76 164.66 64.08 278.13 129.6" /> <polygon className="y-u" points="278.13 129.6 278.09 144.27 164.61 78.76 164.66 64.08 278.13 129.6" />
<polygon className="y-u" points="164.66 64.08 164.61 78.76 51.88 144.27 51.92 129.6 164.66 64.08" /> <polygon className="y-u" points="164.66 64.08 164.61 78.76 51.88 144.27 51.92 129.6 164.66 64.08" />
<path className="y-u" d="M546.72,332.16,712.1,427.65,547.79,523.14,382.4,427.65Zm.91,161,112.73-65.52L546.89,362.14,434.15,427.65l113.48,65.52" transform="translate(-382.24 -298.05)" /> <path className="y-u" d="M546.72,332.16,712.1,427.65,547.79,523.14,382.4,427.65Zm.91,161,112.73-65.52L546.89,362.14,434.15,427.65l113.48,65.52" transform="translate(-382.24 -298.05)" />
...@@ -215,7 +219,7 @@ const Layers = ({ location }) => { ...@@ -215,7 +219,7 @@ const Layers = ({ location }) => {
<g id="tech-layers-active" <g id="tech-layers-active"
className={`${current.includes("3.2") ? 'active' : 'inactive'}`}> className={`${current.includes("3.2") ? 'active' : 'inactive'}`}>
<g className={`${current !== "3.2.5" ? 'idle' : ''}`} <g className={`${current !== "3.2.5" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.5")}> onClick={e => handleClick(e, "3.2.5")} role="button" aria-label="Learn more about the Infrastructure Layer">
<polygon className="r-u" points="273.24 184.44 165.18 247.24 56.42 184.44 164.47 121.65 273.24 184.44" /> <polygon className="r-u" points="273.24 184.44 165.18 247.24 56.42 184.44 164.47 121.65 273.24 184.44" />
<polygon className="r-r" points="273.24 184.44 273.21 192.49 165.16 255.29 165.18 247.24 273.24 184.44" /> <polygon className="r-r" points="273.24 184.44 273.21 192.49 165.16 255.29 165.18 247.24 273.24 184.44" />
<polygon className="r-l" points="165.18 247.24 165.16 255.29 56.4 192.49 56.42 184.44 165.18 247.24" /> <polygon className="r-l" points="165.18 247.24 165.16 255.29 56.4 192.49 56.42 184.44 165.18 247.24" />
...@@ -223,7 +227,7 @@ const Layers = ({ location }) => { ...@@ -223,7 +227,7 @@ const Layers = ({ location }) => {
<text transform="translate(346.01 180.92)">Infrastructure</text> <text transform="translate(346.01 180.92)">Infrastructure</text>
</g> </g>
<g className={`${current !== "3.2.4" ? 'idle' : ''}`} <g className={`${current !== "3.2.4" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.4")}> onClick={e => handleClick(e, "3.2.4")} role="button" aria-label="Learn more about the Equipment Layer">
<polygon className="p-u" points="273.24 169.69 165.18 232.49 56.42 169.69 164.47 106.9 273.24 169.69" /> <polygon className="p-u" points="273.24 169.69 165.18 232.49 56.42 169.69 164.47 106.9 273.24 169.69" />
<polygon className="p-r" points="273.24 169.69 273.21 177.74 165.16 240.54 165.18 232.49 273.24 169.69" /> <polygon className="p-r" points="273.24 169.69 273.21 177.74 165.16 240.54 165.18 232.49 273.24 169.69" />
<polygon className="p-l" points="165.18 232.49 165.16 240.54 56.4 177.75 56.42 169.69 165.18 232.49" /> <polygon className="p-l" points="165.18 232.49 165.16 240.54 56.4 177.75 56.42 169.69 165.18 232.49" />
...@@ -231,7 +235,7 @@ const Layers = ({ location }) => { ...@@ -231,7 +235,7 @@ const Layers = ({ location }) => {
<text transform="translate(346.01 167.17)">Equipment</text> <text transform="translate(346.01 167.17)">Equipment</text>
</g> </g>
<g className={`${current !== "3.2.3" ? 'idle' : ''}`} <g className={`${current !== "3.2.3" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.3")}> onClick={e => handleClick(e, "3.2.3")} role="button" aria-label="Learn more about the Firmware and drivers Layer">
<polygon className="t-u" points="273.24 154.94 165.18 217.74 56.42 154.95 164.47 92.15 273.24 154.94" /> <polygon className="t-u" points="273.24 154.94 165.18 217.74 56.42 154.95 164.47 92.15 273.24 154.94" />
<polygon className="t-r" points="273.24 154.94 273.21 163 165.16 225.79 165.18 217.74 273.24 154.94" /> <polygon className="t-r" points="273.24 154.94 273.21 163 165.16 225.79 165.18 217.74 273.24 154.94" />
<polygon className="t-l" points="165.18 217.74 165.16 225.79 56.4 163 56.42 154.95 165.18 217.74" /> <polygon className="t-l" points="165.18 217.74 165.16 225.79 56.4 163 56.42 154.95 165.18 217.74" />
...@@ -239,7 +243,7 @@ const Layers = ({ location }) => { ...@@ -239,7 +243,7 @@ const Layers = ({ location }) => {
<text transform="translate(346.01 152.41)">Firmware and drivers</text> <text transform="translate(346.01 152.41)">Firmware and drivers</text>
</g> </g>
<g className={`${current !== "3.2.2" ? 'idle' : ''}`} <g className={`${current !== "3.2.2" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.2")}> onClick={e => handleClick(e, "3.2.2")} role="button" aria-label="Learn more about the Operating system Layer">
<polygon className="y-u" points="273.24 140.19 165.18 202.98 56.42 140.19 164.47 77.4 273.24 140.19" /> <polygon className="y-u" points="273.24 140.19 165.18 202.98 56.42 140.19 164.47 77.4 273.24 140.19" />
<polygon className="y-r" points="273.24 140.19 273.21 148.24 165.16 211.03 165.18 202.98 273.24 140.19" /> <polygon className="y-r" points="273.24 140.19 273.21 148.24 165.16 211.03 165.18 202.98 273.24 140.19" />
<polygon className="y-l" points="165.18 202.98 165.16 211.03 56.4 148.24 56.42 140.19 165.18 202.98" /> <polygon className="y-l" points="165.18 202.98 165.16 211.03 56.4 148.24 56.42 140.19 165.18 202.98" />
...@@ -247,7 +251,7 @@ const Layers = ({ location }) => { ...@@ -247,7 +251,7 @@ const Layers = ({ location }) => {
<text transform="translate(346.01 138.56)">Operating system</text> <text transform="translate(346.01 138.56)">Operating system</text>
</g> </g>
<g className={`${current !== "3.2.1" ? 'idle' : ''}`} <g className={`${current !== "3.2.1" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.1")}> onClick={e => handleClick(e, "3.2.1")} role="button" aria-label="Learn more about the Application Layer">
<polygon className="w-u" points="92.83 128.67 74.69 139.21 56.45 128.67 74.58 118.13 92.83 128.67" /> <polygon className="w-u" points="92.83 128.67 74.69 139.21 56.45 128.67 74.58 118.13 92.83 128.67" />
<polygon className="w-r" points="92.83 128.67 92.81 131.82 74.67 142.36 74.69 139.21 92.83 128.67" /> <polygon className="w-r" points="92.83 128.67 92.81 131.82 74.67 142.36 74.69 139.21 92.83 128.67" />
<polygon className="w-l" points="74.69 139.21 74.67 142.36 56.42 131.82 56.45 128.67 74.69 139.21" /> <polygon className="w-l" points="74.69 139.21 74.67 142.36 56.42 131.82 56.45 128.67 74.69 139.21" />
......
...@@ -26,7 +26,7 @@ function SEO({ description, lang, meta, title }) { ...@@ -26,7 +26,7 @@ function SEO({ description, lang, meta, title }) {
lang, lang,
}} }}
title={title} title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`} titleTemplate={`${site.siteMetadata.title} | %s`}
meta={[ meta={[
{ {
name: `description`, name: `description`,
......
frontend/src/images/icon.png

81.5 KB | W: | H:

frontend/src/images/icon.png

88.6 KB | W: | H:

frontend/src/images/icon.png
frontend/src/images/icon.png
frontend/src/images/icon.png
frontend/src/images/icon.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -29,7 +29,7 @@ const AboutPage = ({ data }) => ( ...@@ -29,7 +29,7 @@ const AboutPage = ({ data }) => (
return ( return (
<a key={item.id} className="colofon-item" href={item.link} target="_blank" rel="noopener noreferrer"> <a key={item.id} className="colofon-item" href={item.link} target="_blank" rel="noopener noreferrer">
<div className="logo"> <div className="logo">
{ item.logo && <Img fluid={ item.logo.childImageSharp.fluid } fadeIn={false} /> } { item.logo && <Img fluid={ item.logo.childImageSharp.fluid } fadeIn={false} imgStyle={{ objectFit: "contain" }} /> }
</div> </div>
{/* <h3>{ item.title }</h3> */} {/* <h3>{ item.title }</h3> */}
</a> </a>
...@@ -61,7 +61,7 @@ export const pageQuery = graphql` ...@@ -61,7 +61,7 @@ export const pageQuery = graphql`
link link
logo { logo {
childImageSharp { childImageSharp {
fluid(maxWidth: 200, maxHeight: 100, fit: INSIDE, background: "rgba(0,0,0,0)" ) { fluid(maxWidth: 200) {
...GatsbyImageSharpFluid_noBase64 ...GatsbyImageSharpFluid_noBase64
} }
} }
......
...@@ -26,10 +26,12 @@ export const pageQuery = graphql` ...@@ -26,10 +26,12 @@ export const pageQuery = graphql`
id id
title title
description description
link
logo { logo {
childImageSharp { childImageSharp {
fluid(maxWidth: 200, maxHeight: 100, fit: INSIDE, background: "rgba(0,0,0,0)" ) { fluid(maxWidth: 200) {
...GatsbyImageSharpFluid_noBase64 ...GatsbyImageSharpFluid_noBase64
aspectRatio
} }
} }
} }
......
...@@ -20,7 +20,7 @@ const DomainsPage = ({ data }) => { ...@@ -20,7 +20,7 @@ const DomainsPage = ({ data }) => {
return ( return (
<Link to={`/domains/${domain.slug}`} key={domain.id} className="domain"> <Link to={`/domains/${domain.slug}`} key={domain.id} className="domain">
{ domain.image && <div className="image"><Img fluid={ domain.image.childImageSharp.fluid } fadeIn={false} /></div> } { domain.image && <div className="image"><Img fluid={ domain.image.childImageSharp.fluid } fadeIn={false} imgStyle={{ objectFit: "contain" }} /></div> }
<div className="text"> <div className="text">
<h2>{ domain.title }</h2> <h2>{ domain.title }</h2>
<div className="content" dangerouslySetInnerHTML={{ __html: excerpt }} /> <div className="content" dangerouslySetInnerHTML={{ __html: excerpt }} />
......
...@@ -159,11 +159,10 @@ const IndexPage = ({ data, location }) => { ...@@ -159,11 +159,10 @@ const IndexPage = ({ data, location }) => {
</div> </div>
</section> </section>
<section id="next-actions"> <section id="next-actions" style={{ minHeight: "auto" }}>
<div className="row"> <div className="row">
<h2>Explore the layers of the stack</h2> <h2>Explore the layers of the stack</h2>
<Link className="button" to="/layers/">Start exploring</Link> <Link className="button" to="/layers/">Start exploring</Link>
</div> </div>
</section> </section>
</Layout> </Layout>
......
...@@ -8,7 +8,7 @@ import Layers from "../components/layers.js" ...@@ -8,7 +8,7 @@ import Layers from "../components/layers.js"
const LayersPage = (props) => { const LayersPage = (props) => {
return ( return (
<Layout id="front-page"> <Layout id="front-page">
<SEO title="Home" /> <SEO title="Layers" />
<Layers id="stack" location={props.location} /> <Layers id="stack" location={props.location} />
</Layout> </Layout>
) )
......
...@@ -16,10 +16,11 @@ const UseCasesPage = ({ data }) => { ...@@ -16,10 +16,11 @@ const UseCasesPage = ({ data }) => {
const excerpt = node.excerpt ? node.excerpt : clip(node.description, 150, { html: true }) const excerpt = node.excerpt ? node.excerpt : clip(node.description, 150, { html: true })
return ( return (
<Link key={node.id} className="item" to={`/use-cases/${node.slug}`}> <div key={node.id} className="item">
<h2>{ node.title }</h2> <h2><Link to={`/use-cases/${node.slug}`}>{ node.title }</Link></h2>
<div dangerouslySetInnerHTML={{ __html: excerpt }} /> <div dangerouslySetInnerHTML={{ __html: excerpt }} />
</Link> <Link className="button" to={`/use-cases/${node.slug}`}>Read more...</Link>
</div>
) )
}) } }) }
</div> </div>
......
...@@ -16,15 +16,24 @@ ...@@ -16,15 +16,24 @@
.logo { .logo {
width: 200px; width: 200px;
flex-shrink: 0; flex-shrink: 0;
padding: 2px; padding: 2px 0;
} }
.text { .text {
padding-left: 1rem; padding-left: 1rem;
}
h2 {
margin-bottom: 0;
}
.url {
display: block;
margin-bottom: 2rem;
} }
.meta { .meta {
margin-bottom: 0;
font-size: 0.8em; font-size: 0.8em;
font-weight: 700; font-weight: 700;
} }
......
...@@ -12,7 +12,11 @@ ...@@ -12,7 +12,11 @@
} }
.image { .image {
width: 260px; width: 180px;
}
.content {
margin-bottom: 0rem;
} }
.text { .text {
......
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
} }
.nav-item-subtitle { .nav-item-subtitle {
font-size: 1rem; font-size: 0.9rem;
line-height: 1rem; line-height: 1rem;
max-width: 280px; max-width: 280px;
overflow: hidden; overflow: hidden;
...@@ -211,7 +211,7 @@ ...@@ -211,7 +211,7 @@
} }
li { li {
padding: 1rem 1.5rem 0; padding: 1rem 1.25rem 0;
transition: all 100ms ease; transition: all 100ms ease;
.scrolled & { .scrolled & {
......
#layers { #layers {
@media (min-width: 481px) { @media (min-width: 681px) {
.column:last-child { .column:last-child {
padding-top: 5rem; padding-top: 5rem;
} }
......
...@@ -40,7 +40,7 @@ main { ...@@ -40,7 +40,7 @@ main {
margin: 3rem auto; margin: 3rem auto;
padding-top: 5rem; padding-top: 5rem;
@media (max-width: 480px) { @media (max-width: 680px) {
padding-top: 3rem; padding-top: 3rem;
} }
} }
...@@ -50,7 +50,7 @@ footer { ...@@ -50,7 +50,7 @@ footer {
} }
section { section {
min-height: 80vh; min-height: 70vh;
margin-bottom: 4rem; margin-bottom: 4rem;
} }
...@@ -79,7 +79,7 @@ section { ...@@ -79,7 +79,7 @@ section {
width: 50%; width: 50%;
} }