dan/abc-project-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: better images

Browse Source
This commit is contained in:
Dan Head
2021-01-27 23:37:17 +00:00
parent 3c760548ea
commit 1dbfc9c1f3
8 changed files with 65 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/about.js
View File

@@ -50,7 +50,7 @@ export default function Index({ data }) {
export const query = graphql`
query {
headerImage: file(relativePath: { eq: "bathroom.png" }) {
headerImage: file(relativePath: { eq: "bathroom3.png" }) {
childImageSharp {
fluid(maxWidth: 1920, quality: 100) {
...GatsbyImageSharpFluid_withWebp

4
src/pages/contact.js
View File

@@ -53,7 +53,7 @@ export default function Index({ data }) {
<Layout location="/contact">
<Header
image={data.headerImage.childImageSharp.fluid}
position="bottom right"
position="middle right"
>
<h1>Get in touch</h1>
</Header>
@@ -163,7 +163,7 @@ export default function Index({ data }) {
export const query = graphql`
query {
headerImage: file(relativePath: { eq: "bathroom.png" }) {
headerImage: file(relativePath: { eq: "bathroom4.png" }) {
childImageSharp {
fluid(maxWidth: 1920, quality: 100) {
...GatsbyImageSharpFluid_withWebp

64
src/pages/services/index.js
View File

@@ -1,7 +1,7 @@
import React from "react";
import { graphql } from "gatsby";
import Layout from "../../layout";
import { Header } from "../../components";
import { Card, Grid, Header, Heading, Section } from "../../components";
export default function Index({ data }) {
return (
@@ -9,18 +9,78 @@ export default function Index({ data }) {
<Header image={data.headerImage.childImageSharp.fluid}>
<h1>Services</h1>
</Header>
<Section>
<Grid columns={[1, 2]}>
<Card
to="/services/bathrooms"
image={data.bathroomImage.childImageSharp.fluid}
heading={<Heading el="h3">Bathrooms</Heading>}
>
Fully accredited bathroom refurbishment service
</Card>
<Card
to="/services/tiling"
image={data.tilingImage.childImageSharp.fluid}
heading={<Heading el="h3">Tiling</Heading>}
>
Our tiling is primo!
</Card>
<Card
to="/services/electrics"
image={data.electricsImage.childImageSharp.fluid}
heading={<Heading el="h3">Electrics</Heading>}
>
Bring some light to your next project
</Card>
<Card
to="/services/carpentry"
image={data.carpentryImage.childImageSharp.fluid}
heading={<Heading el="h3">Carpentry</Heading>}
>
Our woodworking is sharp!
</Card>
</Grid>
</Section>
</Layout>
);
}
export const query = graphql`
query {
headerImage: file(relativePath: { eq: "bathroom2.png" }) {
headerImage: file(relativePath: { eq: "floor_tiles.png" }) {
childImageSharp {
fluid(maxWidth: 1920, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
bathroomImage: file(relativePath: { eq: "service_bathroom.png" }) {
childImageSharp {
fluid(maxWidth: 480, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
tilingImage: file(relativePath: { eq: "service_tiling.png" }) {
childImageSharp {
fluid(maxWidth: 480, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
electricsImage: file(relativePath: { eq: "service_electrics.png" }) {
childImageSharp {
fluid(maxWidth: 480, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
carpentryImage: file(relativePath: { eq: "service_carpentry.png" }) {
childImageSharp {
fluid(maxWidth: 480, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`;