Merge pull request #139 from OceanParcels/adding-bmbfwarmworld-logo

Adding the BMBF logo for the WarmWorld project that funds v4 dev

Author: erikvansebille

public/funders-logos/BMBFlogo.png

@@ -3,11 +3,10 @@ import {
   Container,
   Image,
   Text,
-  UnorderedList,
-  ListItem,
   Link,
-  SimpleGrid,
-  Flex,
+  Grid,
+  GridItem,
+  Tooltip,
 } from '@chakra-ui/react'
 import React from 'react'
 import { Funders as data } from '@/data/funders'
@@ -29,27 +28,30 @@ export const Funders = () => {
             organisations:
           </Text>
 
-          <SimpleGrid
-            columns={{ base: 1, sm: 2, md: 2, lg: 4 }}
+          <Grid
+            templateColumns={`repeat(${funders.length}, minmax(auto, max-content))`}
+            gap={6}
             my={4}
-            spacing={'space-between'}
-            align={'center'}
-            justify={'center'}
+            justifyContent='center'
           >
-            {funders.map((funders, index) => (
-              <Flex
-                as={Link}
-                href={funders.url}
-                key={index}
-                w={64}
-                align={'center'}
-                justify={'center'}
-                rounded={'full'}
-              >
-                <Image maxH={20} src={funders.logo} alt={funders.name} />
-              </Flex>
+            {funders.map((funder, index) => (
+              <Tooltip key={index} label={funder.name}>
+                <GridItem
+                  as={Link}
+                  href={funder.url}
+                  display='flex'
+                  alignItems='center'
+                  justifyContent='center'
+                  borderRight={
+                    index < funders.length - 1 ? '1px solid #ccc' : 'none'
+                  }
+                  pr={4}
+                >
+                  <Image maxH={20} src={funder.logo} alt={funder.name} />
+                </GridItem>
+              </Tooltip>
             ))}
-          </SimpleGrid>
+          </Grid>
         </Box>
       </Container>
     </Box>

src/components/funders.js

@@ -14,6 +14,11 @@ export const Funders = [
     logo: '/funders-logos/EPSRlogo.png',
     url: 'https://www.ukri.org/councils/epsrc/',
   },
+  {
+    name: 'BMBF via the Warmworld project',
+    logo: '/funders-logos/BMBFlogo.png',
+    url: 'https://www.warmworld.de',
+  },
   {
     name: 'Utrecht University',
     logo: '/funders-logos/UUlogo.png',