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

more frontend changes

parent 594b249b
......@@ -9,10 +9,13 @@ const Alternatives = ({ alternatives }) => {
{ alternatives.map(alternative => (
<div key={alternative.id} className="alternative">
<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 className="text">
<h2>{ alternative.title }</h2>
<a href={ alternative.link } target="_blank" rel="noopener noreferrer" className="url">{ alternative.link }</a>
<div dangerouslySetInnerHTML={{__html:alternative.description }} />
{ (alternative.domains || []).length > 0 &&
<p className="meta">
......
......@@ -37,14 +37,18 @@ const Layers = ({ location }) => {
<section id="layers">
<div className="row">
<div className="columns-2">
<div className="column" onClick={e => { handleClick(e, "0") }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 637.96 794.17"><g style={{ transform: "translateY(120px)" }}>
<div className="column"
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"
className={`clickable ${mainLayer === 1 ? 'inactive' : 'idle'} ${mainLayer >= 2 ? "down" : ""}`}
onClick={e => handleClick(e, "1")}
role="button"
aria-label="Learn more about the Foundation Layer">
onClick={e => handleClick(e, "1")} 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-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" />
......@@ -54,7 +58,7 @@ const Layers = ({ location }) => {
<g id="design-layer-idle"
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-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" />
......@@ -90,7 +94,7 @@ const Layers = ({ location }) => {
<g id="tech-layer-idle"
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-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" />
......@@ -101,7 +105,7 @@ const Layers = ({ location }) => {
<g id="foundation-layer-active"
className={`${mainLayer >= 1 && mainLayer < 2 ? 'active' : 'inactive'}`}>
<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-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" />
......@@ -112,7 +116,7 @@ const Layers = ({ location }) => {
</text>
</g>
<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-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" />
......@@ -123,7 +127,7 @@ const Layers = ({ location }) => {
</text>
</g>
<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-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" />
......@@ -134,7 +138,7 @@ const Layers = ({ location }) => {
</text>
</g>
<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-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" />
......@@ -150,7 +154,7 @@ const Layers = ({ location }) => {
className={`${mainLayer < 3 ? 'inactive' : ''}`}>
<g id="contexts-layers-idle"
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-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" />
......@@ -159,7 +163,7 @@ const Layers = ({ location }) => {
</g>
<g id="tech-layers-idle"
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-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" />
......@@ -171,7 +175,7 @@ const Layers = ({ location }) => {
<g id="context-layers-active"
className={`${current.includes("3.1") ? 'active' : 'inactive'}`}>
<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-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)" />
......@@ -181,7 +185,7 @@ const Layers = ({ location }) => {
<text transform="translate(406.89 173.76)">Data and algorithms</text>
</g>
<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-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)" />
......@@ -191,7 +195,7 @@ const Layers = ({ location }) => {
<text transform="translate(406.89 159)">Protocols and standards</text>
</g>
<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-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)" />
......@@ -201,7 +205,7 @@ const Layers = ({ location }) => {
<text transform="translate(406.89 145.15)">Security</text>
</g>
<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="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)" />
......@@ -215,7 +219,7 @@ const Layers = ({ location }) => {
<g id="tech-layers-active"
className={`${current.includes("3.2") ? 'active' : 'inactive'}`}>
<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-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" />
......@@ -223,7 +227,7 @@ const Layers = ({ location }) => {
<text transform="translate(346.01 180.92)">Infrastructure</text>
</g>
<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-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" />
......@@ -231,7 +235,7 @@ const Layers = ({ location }) => {
<text transform="translate(346.01 167.17)">Equipment</text>
</g>
<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-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" />
......@@ -239,7 +243,7 @@ const Layers = ({ location }) => {
<text transform="translate(346.01 152.41)">Firmware and drivers</text>
</g>
<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-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" />
......@@ -247,7 +251,7 @@ const Layers = ({ location }) => {
<text transform="translate(346.01 138.56)">Operating system</text>
</g>
<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-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" />
......
......@@ -26,7 +26,7 @@ function SEO({ description, lang, meta, title }) {
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
titleTemplate={`${site.siteMetadata.title} | %s`}
meta={[
{
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 }) => (
return (
<a key={item.id} className="colofon-item" href={item.link} target="_blank" rel="noopener noreferrer">
<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>
{/* <h3>{ item.title }</h3> */}
</a>
......@@ -61,7 +61,7 @@ export const pageQuery = graphql`
link
logo {
childImageSharp {
fluid(maxWidth: 200, maxHeight: 100, fit: INSIDE, background: "rgba(0,0,0,0)" ) {
fluid(maxWidth: 200) {
...GatsbyImageSharpFluid_noBase64
}
}
......
......@@ -26,10 +26,12 @@ export const pageQuery = graphql`
id
title
description
link
logo {
childImageSharp {
fluid(maxWidth: 200, maxHeight: 100, fit: INSIDE, background: "rgba(0,0,0,0)" ) {
fluid(maxWidth: 200) {
...GatsbyImageSharpFluid_noBase64
aspectRatio
}
}
}
......
......@@ -20,7 +20,7 @@ const DomainsPage = ({ data }) => {
return (
<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">
<h2>{ domain.title }</h2>
<div className="content" dangerouslySetInnerHTML={{ __html: excerpt }} />
......
......@@ -159,11 +159,10 @@ const IndexPage = ({ data, location }) => {
</div>
</section>
<section id="next-actions">
<section id="next-actions" style={{ minHeight: "auto" }}>
<div className="row">
<h2>Explore the layers of the stack</h2>
<Link className="button" to="/layers/">Start exploring</Link>
</div>
</section>
</Layout>
......
......@@ -8,7 +8,7 @@ import Layers from "../components/layers.js"
const LayersPage = (props) => {
return (
<Layout id="front-page">
<SEO title="Home" />
<SEO title="Layers" />
<Layers id="stack" location={props.location} />
</Layout>
)
......
......@@ -16,10 +16,11 @@ const UseCasesPage = ({ data }) => {
const excerpt = node.excerpt ? node.excerpt : clip(node.description, 150, { html: true })
return (
<Link key={node.id} className="item" to={`/use-cases/${node.slug}`}>
<h2>{ node.title }</h2>
<div key={node.id} className="item">
<h2><Link to={`/use-cases/${node.slug}`}>{ node.title }</Link></h2>
<div dangerouslySetInnerHTML={{ __html: excerpt }} />
</Link>
<Link className="button" to={`/use-cases/${node.slug}`}>Read more...</Link>
</div>
)
}) }
</div>
......
......@@ -16,15 +16,24 @@
.logo {
width: 200px;
flex-shrink: 0;
padding: 2px;
padding: 2px 0;
}
.text {
padding-left: 1rem;
}
h2 {
margin-bottom: 0;
}
.url {
display: block;
margin-bottom: 2rem;
}
.meta {
margin-bottom: 0;
font-size: 0.8em;
font-weight: 700;
}
......
......@@ -12,7 +12,11 @@
}
.image {
width: 260px;
width: 180px;
}
.content {
margin-bottom: 0rem;
}
.text {
......
......@@ -133,7 +133,7 @@
}
.nav-item-subtitle {
font-size: 1rem;
font-size: 0.9rem;
line-height: 1rem;
max-width: 280px;
overflow: hidden;
......@@ -211,7 +211,7 @@
}
li {
padding: 1rem 1.5rem 0;
padding: 1rem 1.25rem 0;
transition: all 100ms ease;
.scrolled & {
......
#layers {
@media (min-width: 481px) {
@media (min-width: 681px) {
.column:last-child {
padding-top: 5rem;
}
......
......@@ -40,7 +40,7 @@ main {
margin: 3rem auto;
padding-top: 5rem;
@media (max-width: 480px) {
@media (max-width: 680px) {
padding-top: 3rem;
}
}
......@@ -50,7 +50,7 @@ footer {
}
section {
min-height: 80vh;
min-height: 70vh;
margin-bottom: 4rem;
}
......@@ -79,7 +79,7 @@ section {
width: 50%;
}
@media (max-width: 480px) {
@media (max-width: 680px) {
.columns-1, .columns-2 {
flex-direction: column;
align-items: center;
......@@ -105,7 +105,7 @@ section {
margin: 0 -1rem;
.item {
width: 340px;
width: calc(50% - 2rem);
margin: 0 1rem 2rem;
}
......@@ -127,13 +127,13 @@ section {
}
.s-disable {
@media (max-width: 480px) {
@media (max-width: 680px) {
display: none;
}
}
.l-disable {
@media (min-width: 481px) {
@media (min-width: 681px) {
display: none;
}
}
\ No newline at end of file
#colofon-items {
display: flex;
justify-content: center;
align-items: center;
.colofon-item {
text-align: center;
......
......@@ -564,3 +564,7 @@
clip: rect(0, 0, 0, 0);
position: absolute;
}
[role="button"]:focus {
outline: none;
}
\ No newline at end of file
......@@ -9,6 +9,16 @@ body {
font-family: maax, sans-serif;
}
h1, h2, h3 {
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
h1 {
font-size: 2rem;
margin: 0 0 3rem 0;
......@@ -61,11 +71,12 @@ a.back {
a.button {
display: inline-block;
padding: 0.4rem 0.8rem;
padding: 0.4rem 0.8rem 0.3rem;
background-color: #2FB6BC;
color: #FFF;
text-decoration: none;
border-radius: 3px;
line-height: 1.25rem;
&:hover {
background-color: darken(#2FB6BC, 5%)
......
......@@ -42,6 +42,7 @@ export const query = graphql`
id
title
description
link
logo {
childImageSharp {
fluid(maxWidth: 200, maxHeight: 100, fit: INSIDE, background: "rgba(0,0,0,0)" ) {
......
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