Commit 594b249b authored by alain's avatar alain 🐙
Browse files

various things

parent c8d17bdc
......@@ -11,11 +11,6 @@
"repeatable": true,
"component": "content.column"
},
"headers": {
"type": "component",
"repeatable": true,
"component": "content.header"
},
"title": {
"type": "string"
}
......
import React, { useRef, useEffect, useState } from "react"
import PropTypes from "prop-types"
import { Link, StaticQuery, graphql } from "gatsby"
import gsap, { Power1 } from 'gsap';
//import { ScrollTrigger } from "gsap/ScrollTrigger";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);
const Header = () => {
......@@ -83,12 +86,4 @@ const Header = () => {
)
}
Header.propTypes = {
siteTitle: PropTypes.string,
}
Header.defaultProps = {
siteTitle: ``,
}
export default Header
import React from "react"
import { graphql } from "gatsby"
import Img from 'gatsby-image'
import Layout from "../components/layout"
import SEO from "../components/seo"
......@@ -7,19 +8,35 @@ import SEO from "../components/seo"
const AboutPage = ({ data }) => (
<Layout>
<SEO title="About" />
<h1 className="page-title">{ data.strapiAbout.title }</h1>
<section>
<div className="row">
<h1 className="page-title">{ data.strapiAbout.title }</h1>
</div>
{ data.strapiAbout.rows.map(row =>
<div key={row.id} className={ `row columns-${row.columns.length}` }>
<div key={row.id} className="row"><div className={ `columns-${row.columns.length}` }>
{ row.columns.map(column => <div key={column.id} className="column">
<div dangerouslySetInnerHTML={{ __html: column.content}} />
</div>) }
</div>
</div></div>
) }
</section>
<section>
<h2>Colofon</h2>
<p>...</p>
<section id="colofon">
<div className="row">
<h2>Colofon</h2>
<div id="colofon-items">
{ data.strapiAbout.colofon.map(item => {
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} /> }
</div>
{/* <h3>{ item.title }</h3> */}
</a>
)
}) }
</div>
</div>
</section>
</Layout>
)
......@@ -38,6 +55,18 @@ export const pageQuery = graphql`
content
}
}
colofon {
id
title
link
logo {
childImageSharp {
fluid(maxWidth: 200, maxHeight: 100, fit: INSIDE, background: "rgba(0,0,0,0)" ) {
...GatsbyImageSharpFluid_noBase64
}
}
}
}
}
}
`
import React, { useRef, useEffect } from "react"
import { graphql } from "gatsby"
import { graphql, Link } from "gatsby"
import gsap, { Power1 } from 'gsap';
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useMediaQuery } from 'react-responsive'
import Layout from "../components/layout"
......@@ -15,11 +12,8 @@ import PhoneS1 from "../images/inline/phone-s-1.svg"
import PhoneS2 from "../images/inline/phone-s-2.svg"
import PhoneS3 from "../images/inline/phone-s-3.svg"
import Stack from "../images/inline/stack.svg"
//import Layers from "../images/inline/layers.svg"
//import Layers from "../components/layers.js"
gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);
const IndexPage = ({ data, location }) => {
const isSmallScreen = useMediaQuery({ query: '(max-device-width: 480px)' })
......@@ -165,7 +159,13 @@ const IndexPage = ({ data, location }) => {
</div>
</section>
{/* <Layers id="stack" location={location} /> */}
<section id="next-actions">
<div className="row">
<h2>Explore the layers of the stack</h2>
<Link className="button" to="/layers/">Start exploring</Link>
</div>
</section>
</Layout>
)
}
......
......@@ -63,6 +63,7 @@ section {
.columns-1, .columns-2 {
display: flex;
flex-direction: row;
margin: 0 -1rem;
.column {
padding: 0 1rem;
......
#colofon-items {
display: flex;
justify-content: center;
.colofon-item {
text-align: center;
text-decoration: none;
margin: 2rem;
.logo {
width: 200px;
margin-bottom: 1rem;
}
}
}
\ No newline at end of file
......@@ -36,24 +36,19 @@
}
#front-page {
section {
overflow: hidden;
}
@media (min-width: 481px) {
h3 {
font-size: 1.25rem;
}
p {
font-size: 1.25rem;
}
}
#phone {
......@@ -64,7 +59,6 @@
max-height: 50vh;
}
.text-part {
min-height: 80vh;
......@@ -74,9 +68,10 @@
max-width: 60vw;
}
}
}
#next-actions {
text-align: center;
}
}
......@@ -59,6 +59,20 @@ a.back {
}
}
a.button {
display: inline-block;
padding: 0.4rem 0.8rem;
background-color: #2FB6BC;
color: #FFF;
text-decoration: none;
border-radius: 3px;
&:hover {
background-color: darken(#2FB6BC, 5%)
}
}
.page-introduction {
max-width: 720px;
font-size: 1.2em;
......
......@@ -5,6 +5,7 @@
@import "footer";
@import "page-index";
@import "page-about";
@import "layers";
@import "domains";
@import "alternatives";
......
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