@@ -2,12 +2,14 @@ import React from "react"
22import { useStaticQuery , graphql } from "gatsby"
33import { GatsbyImage } from "gatsby-plugin-image"
44import styled from 'styled-components'
5+ import Container from "./container"
56
67const Flex = styled . div `
78 display: flex;
89 flex-direction: row;
910 justify-content: space-around;
1011 flex-wrap: wrap;
12+ margin-top: 10px;
1113`
1214
1315const Collaboration = ( { style } ) => {
@@ -44,83 +46,138 @@ const Collaboration = ({ style }) => {
4446 gatsbyImageData(width: 99, height: 99, quality: 80, layout: CONSTRAINED)
4547 }
4648 }
49+ als: file(relativePath: {eq: "institutes/als.png"}) {
50+ childImageSharp {
51+ gatsbyImageData(width: 120, height: 99, quality: 80, layout: CONSTRAINED)
52+ }
53+ }
54+ dls: file(relativePath: {eq: "institutes/diamond.jpg"}) {
55+ childImageSharp {
56+ gatsbyImageData(width: 99, height: 99, quality: 80, layout: CONSTRAINED)
57+ }
58+ }
59+ cea: file(relativePath: {eq: "institutes/CEA-IRFU.jpg"}) {
60+ childImageSharp {
61+ gatsbyImageData(width: 99, height: 99, quality: 80, layout: CONSTRAINED)
62+ }
63+ }
4764}` )
4865
4966 return (
50- < Flex style = { style } >
51- < a
52- href = "https://europeanspallationsource.se/"
53- target = "_blank"
54- rel = "noopener noreferrer"
55- aria-label = "Link to ESS Website"
56- >
57- < GatsbyImage
58- image = { images . ess . childImageSharp . gatsbyImageData }
59- style = { { minWidth : 99 } }
60- alt = "ESS Logo"
61- />
62- </ a >
63- < a
64- href = "http://www.bnl.gov/world/"
65- target = "_blank"
66- rel = "noopener noreferrer"
67- aria-label = "Link to BNL Website"
68- >
69- < GatsbyImage
70- image = { images . brok . childImageSharp . gatsbyImageData }
71- style = { { minWidth : 99 } }
72- alt = "BNL Logo"
73- />
74- </ a >
75- < a
76- href = "http://www.desy.de/"
77- target = "_blank"
78- rel = "noopener noreferrer"
79- aria-label = "Link to DESY Website"
80- >
81- < GatsbyImage
82- image = { images . desy . childImageSharp . gatsbyImageData }
83- style = { { minWidth : 99 } }
84- alt = "DESY Logo"
85- />
86- </ a >
87- < a
88- href = "http://www.frib.msu.edu/"
89- target = "_blank"
90- rel = "noopener noreferrer"
91- aria-label = "Link to FRIB Website"
92- >
93- < GatsbyImage
94- image = { images . frib . childImageSharp . gatsbyImageData }
95- style = { { minWidth : 99 } }
96- alt = "FRIB Logo"
97- />
98- </ a >
99- < a
100- href = "http://www.iter.org/"
101- target = "_blank"
102- rel = "noopener noreferrer"
103- aria-label = "Link to ITER Website"
104- >
105- < GatsbyImage
106- image = { images . iter . childImageSharp . gatsbyImageData }
107- style = { { minWidth : 99 } }
108- alt = "ITER Logo"
109- />
110- </ a >
111- < a
112- href = "https://neutrons.ornl.gov/sns"
113- target = "_blank"
114- rel = "noopener noreferrer"
115- aria-label = "Link to SNS Website"
116- >
117- < GatsbyImage
118- image = { images . sns . childImageSharp . gatsbyImageData }
119- style = { { minWidth : 99 } }
120- alt = "SNS Logo"
121- />
122- </ a >
123- </ Flex >
67+ < Container >
68+ < Flex style = { style } >
69+ < a
70+ href = "https://europeanspallationsource.se/"
71+ target = "_blank"
72+ rel = "noopener noreferrer"
73+ aria-label = "Link to ESS Website"
74+ >
75+ < GatsbyImage
76+ image = { images . ess . childImageSharp . gatsbyImageData }
77+ style = { { minWidth : 99 } }
78+ alt = "ESS Logo"
79+ />
80+ </ a >
81+ < a
82+ href = "http://www.bnl.gov/world/"
83+ target = "_blank"
84+ rel = "noopener noreferrer"
85+ aria-label = "Link to BNL Website"
86+ >
87+ < GatsbyImage
88+ image = { images . brok . childImageSharp . gatsbyImageData }
89+ style = { { minWidth : 99 } }
90+ alt = "BNL Logo"
91+ />
92+ </ a >
93+ < a
94+ href = "http://www.desy.de/"
95+ target = "_blank"
96+ rel = "noopener noreferrer"
97+ aria-label = "Link to DESY Website"
98+ >
99+ < GatsbyImage
100+ image = { images . desy . childImageSharp . gatsbyImageData }
101+ style = { { minWidth : 99 } }
102+ alt = "DESY Logo"
103+ />
104+ </ a >
105+ < a
106+ href = "http://www.frib.msu.edu/"
107+ target = "_blank"
108+ rel = "noopener noreferrer"
109+ aria-label = "Link to FRIB Website"
110+ >
111+ < GatsbyImage
112+ image = { images . frib . childImageSharp . gatsbyImageData }
113+ style = { { minWidth : 99 } }
114+ alt = "FRIB Logo"
115+ />
116+ </ a >
117+ < a
118+ href = "http://www.iter.org/"
119+ target = "_blank"
120+ rel = "noopener noreferrer"
121+ aria-label = "Link to ITER Website"
122+ >
123+ < GatsbyImage
124+ image = { images . iter . childImageSharp . gatsbyImageData }
125+ style = { { minWidth : 99 } }
126+ alt = "ITER Logo"
127+ />
128+ </ a >
129+ </ Flex >
130+ < Flex style = { style } >
131+ < a
132+ href = "https://neutrons.ornl.gov/sns"
133+ target = "_blank"
134+ rel = "noopener noreferrer"
135+ aria-label = "Link to SNS Website"
136+ >
137+ < GatsbyImage
138+ image = { images . sns . childImageSharp . gatsbyImageData }
139+ style = { { minWidth : 99 } }
140+ alt = "SNS Logo"
141+ />
142+ </ a >
143+ < a
144+ href = "https://als.lbl.gov/"
145+ target = "_blank"
146+ rel = "noopener noreferrer"
147+ aria-label = "Link to SNS Website"
148+ >
149+ < GatsbyImage
150+ image = { images . als . childImageSharp . gatsbyImageData }
151+ style = { { minWidth : 99 } }
152+ alt = "ALS Logo"
153+ />
154+ </ a >
155+ < a
156+ href = "https://www.diamondlightsource.ac.uk"
157+ target = "_blank"
158+ rel = "noopener noreferrer"
159+ aria-label = "Link to SNS Website"
160+ >
161+ < GatsbyImage
162+ image = { images . dls . childImageSharp . gatsbyImageData }
163+ style = { { minWidth : 99 } }
164+ alt = "DLS Logo"
165+ />
166+ </ a >
167+ < a
168+ href = "https://www.cea.fr/english/"
169+ target = "_blank"
170+ rel = "noopener noreferrer"
171+ aria-label = "Link to SNS Website"
172+ >
173+ < GatsbyImage
174+ image = { images . cea . childImageSharp . gatsbyImageData }
175+ style = { { minWidth : 99 } }
176+ alt = "CEA Logo"
177+ />
178+ </ a >
179+ </ Flex >
180+ </ Container >
124181 ) ;
125182}
126183
0 commit comments