Merge pull request #37 from CivicDataLab/dev

Dev
CivicDataLab · May 14, 2021 · de0336c · de0336c
2 parents d215954 + fd716c9
commit de0336c
Show file tree

Hide file tree

Showing 24 changed files with 283 additions and 195 deletions.
diff --git a/content/projects/justicehub/index.md b/content/projects/justicehub/index.md
@@ -3,10 +3,29 @@ name: Justice Hub
 image: ./image.jpg
 summary: An open source platform for data related to the Indian legal and justice system.
 context: Open data will enable everyone to see and solve justice problems using data. Justice Hub empowers communities for data-driven justice by making legal and justice data open, accessible and actionable. By becoming a shared and open resource for discovering and publishing well documented datasets and other information resources, JusticeHub aims to enhance the access to data related to law and justice in the country.
-solution: 
+solution:
 url: https://justicehub.in
 twitter: https://twitter.com/JusticeHubIndia
-linkedin: 
+linkedin:
 github: https://github.com/justicehub-in
 sector: Law & Justice
+events:
+  - {
+      url: 'https://medium.com/civicdatalab/the-state-of-data-in-the-judicial-sector-9a178a143e',
+      title: 'The State of Data in the Judicial Sector',
+      project: 'Blog',
+      type: 'Blog'
+    }
+  - {
+      url: 'https://dataforjustice.substack.com',
+      title: 'DataforJustice - Newsletter',
+      project: 'News Letter',
+      type: 'NewsLetter'
+    }
+  - {
+      url: 'https://www.thequint.com/voices/opinion/legal-datasets-information-technology-access-to-data',
+      title: 'Cost of Not Sharing Legal Datasets? Truth Is, We Don’t Know Yet',
+      project: 'Blog',
+      type: 'Blog'
+    }
 ---
diff --git a/src/components/BlogCard.js b/src/components/BlogCard.js
@@ -7,7 +7,7 @@ const StyledLink = styled.a`
 `;
 
 const Card = styled.div`
-  height: 360px;
+  height: 300px;
   box-shadow: 7px 3px 4px rgba(0, 0, 0, 0.29);
 
   img {

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -6,10 +6,10 @@ import Image from 'gatsby-image';
 
 const FooterContainer = styled.div`
   display: grid;
+  font-size: 16px;
   background-color: #000000;
   color: white;
   padding: 40px 22px;
-  // margin-top: 60px;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
     'address address'
@@ -19,24 +19,29 @@ const FooterContainer = styled.div`
   @media (min-width: 768px) {
     padding-bottom: 0px;
     grid-template-columns: auto 1fr 1fr 3fr;
-    grid-gap: 20px;
+    grid-gap: 30px;
     grid-template-areas:
       'address navigate header empty'
       'bottom bottom bottom bottom';
   }
 
-  @media (min-width: 1268px) {
+  @media (min-width: 1280px) {
     grid-template-columns: 2.5fr 1fr 1fr 3fr;
     padding-left: 52px;
     padding-right: 52px;
   }
+
+  @media (min-width: 1440px) {
+    font-size: 18px;
+  }
 `;
 
 const AddressContainer = styled.div`
   grid-area: address;
-  font-size: 18px;
   max-width: 600px;
   width: 100%;
+
+
   p {
     line-height: 22px;
   }
@@ -81,7 +86,6 @@ const NavLinksContainer = styled.ul`
     a {
       color: white;
       text-decoration: none;
-      font-size: 18px;
     }
   }
 `;

diff --git a/src/components/ImageItem.js b/src/components/ImageItem.js
@@ -8,6 +8,7 @@ const ImageItemContainer = styled(Link)`
   flex-direction: column;
   min-height: 100px;
   text-decoration: none;
+  position: relative;
 
   div {
     width: 100%;
@@ -33,9 +34,25 @@ const ImageItemContainer = styled(Link)`
   }
 `;
 
-const ImageItem = ({ url, image, text }) => {
+const SectorLabel = styled.p`
+  padding: 4px 10px;
+  color: black !important;
+  background-color: #fa7fe7;
+  position: absolute;
+  z-index: 500;
+  top: 120px;
+  right: 0;
+  font-weight: 500;
+
+  @media(min-width: 1280px) {
+    top: 60%;
+  }
+`;
+
+const ImageItem = ({ url, image, text, sector }) => {
   return (
     <ImageItemContainer to={url || '/'}>
+      {sector ? <SectorLabel>{sector}</SectorLabel> : null}
       {image ? <Image fluid={image} /> : <div />} <p>{text}</p>
     </ImageItemContainer>
   );

diff --git a/src/components/MemberImageBox.js b/src/components/MemberImageBox.js
@@ -25,47 +25,52 @@ const ImageBox = styled(Link)`
     display: flex;
     flex-direction: column;
     align-items: center;
+    color: #ffffff;
     background: #000000;
     opacity: 0.76;
   }
 
   .member-name {
-    font-size: 20px;
+    font-size: 16px;
     font-family: Montserrat;
-    color: #ffffff;
   }
+
   .member-desg {
     font-style: italic;
-    font-size: 15px;
+    font-size: 12px;
     font-family: Montserrat;
-    color: #ffffff;
     text-align: center;
   }
 
   @media (min-width: 1280px) {
-    width: 280px;
-    height: 400px;
+    width: 220px;
+    height: 360px;
+
+    .member-name {
+      font-size: 20px;
+    }
+    .member-desg {
+      font-size: 14px;
+    }
   }
 
-  @media (min-width: 1600px) {
+  @media (min-width: 1440px) {
+    width: 280px;
+    height: 400px;
     .member-details {
       padding: 21px 0 28px;
     }
   }
 `;
 
 const MemberImageBox = ({ link, name, role, image }) => {
-  const [displayInfo, setDisplayInfo] = React.useState(false);
-
   return (
-    <ImageBox to={link} onMouseOver={() => setDisplayInfo(true)} onMouseLeave={() => setDisplayInfo(false)}>
+    <ImageBox to={link}>
       <Image fluid={image} />
-      {displayInfo ? (
-        <span className="member-details">
-          <span className="member-name">{name.split(' ')[0]}</span>
-          <span className="member-desg">{role}</span>
-        </span>
-      ) : null}
+      <span className="member-details">
+        <span className="member-name">{name.split(' ')[0]}</span>
+        <span className="member-desg">{role}</span>
+      </span>
     </ImageBox>
   );
 };

diff --git a/src/components/MiniTeamSection.js b/src/components/MiniTeamSection.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import Image from 'gatsby-image';
 
 const MiniTeam = styled.div`
+  padding: 0 30px;
   h3 {
     font-family: Bungee;
     font-size: 32px;
@@ -14,6 +15,7 @@ const MiniTeam = styled.div`
   }
 
   @media (min-width: 1024px) {
+    padding: 0;
     margin-bottom: 50px;
     h3 {
       font-size: 44px;
@@ -25,17 +27,27 @@ const MiniTeam = styled.div`
 
 const TeamGrid = styled.div`
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(2, 140px);
+  grid-gap: 20px;
 
-  @media (min-width: 1024px) {
-    grid-template-columns: repeat(4, 200px);
-    column-gap: 90px;
+  @media (min-width: 1280px) {
+    grid-template-columns: repeat(3, 180px);
+    column-gap: 60px;
     row-gap: 60px;
   }
+
+  @media (min-width: 1440px) {
+    grid-template-columns: repeat(4, 180px);
+  }
 `;
 
 const MemberContainer = styled(Link)`
   text-decoration: none;
+
+  .gatsby-image-wrapper {
+    height: 200px;
+  }
+
   p {
     font-size: 16px;
     font-weight: 500;
@@ -44,11 +56,18 @@ const MemberContainer = styled(Link)`
     color: black;
   }
 
-  @media (min-width: 1440px) {
+  @media (min-width: 1280px) {
     p {
       font-size: 18px;
     }
 
+    .gatsby-image-wrapper {
+      height: 240px;
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 1440px) {
     .gatsby-image-wrapper {
       height: 300px;
       width: 100%;

diff --git a/src/components/OurPartners.js b/src/components/OurPartners.js
@@ -3,30 +3,20 @@ import HeroText from '../styles/HeroText';
 import OurPartnersStyle from '../styles/OurPartners';
 import Image from 'gatsby-image';
 import ScrollContainer from 'react-indiana-drag-scroll';
-// import HorizontalScroller from './HorizontalScroller';
 
 const OurPartners = ({ partners }) => {
   return (
     <OurPartnersStyle>
-      <div className={'partners-section-wraper'}>
-        <div className={'content'}>
-          <HeroText className={'section-heading'}>Our Partners</HeroText>
-        </div>
-        {/* <HorizontalScroller className="partners-container">
-          {partners.map((partner) => (
-            <a key={partner.id} href={`https://${partner.name}`} target="_blank" rel="noreferrer noopener">
-              <Image fixed={partner.childImageSharp.fixed} />
-            </a>
-          ))}
-        </HorizontalScroller> */}
-        <ScrollContainer className="partners-container" vertical={false}>
-          {partners.map((partner) => (
-            <a key={partner.id} href={`https://${partner.name}`} target="_blank" rel="noreferrer noopener">
-              <Image fixed={partner.childImageSharp.fixed} />
-            </a>
-          ))}
-        </ScrollContainer>
+      <div className={'content'}>
+        <HeroText className={'section-heading'}>Our Partners</HeroText>
       </div>
+      <ScrollContainer className="partners-container" vertical={false}>
+        {partners.map((partner) => (
+          <a key={partner.id} href={`https://${partner.name}`} target="_blank" rel="noreferrer noopener">
+            <Image fixed={partner.childImageSharp.fixed} />
+          </a>
+        ))}
+      </ScrollContainer>
     </OurPartnersStyle>
   );
 };

diff --git a/src/components/SectorCard.js b/src/components/SectorCard.js
@@ -9,6 +9,7 @@ const Card = styled.div`
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);
   height: 100%;
   transition-duration: 0.5s;
+  border-radius: 12px;
 
   &:after {
     content: '';
@@ -18,7 +19,7 @@ const Card = styled.div`
     width: 0;
     height: 4px;
     background-color: ${(props) => (props.color ? props.color : 'black')};
-    transition: width .3s ease-in-out;
+    transition: width 0.3s ease-in-out;
   }
 
   &:hover {
@@ -31,6 +32,8 @@ const Card = styled.div`
 
   .gatsby-image-wrapper {
     height: 180px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
   }
 
   @media (min-width: 1200px) {
@@ -65,9 +68,9 @@ const CardContent = styled.div`
 
   p {
     text-align: left;
-    line-height: 20px;
+    line-height: 1.4em;
     color: #585050;
-    min-height: 200px;
+    min-height: 260px;
   }
 
   @media (min-width: 1200px) {
@@ -76,7 +79,7 @@ const CardContent = styled.div`
   }
 
   @media (min-width: 1440px) {
-    height: 500px;
+    height: 520px;
     h4 {
       font-size: 32px;
       line-height: 56px;
@@ -90,7 +93,7 @@ const CardContent = styled.div`
   }
 
   @media (min-width: 1600px) {
-    height: 450px;
+    height: 400px;
   }
 `;
 

diff --git a/src/images/cdl_logo.png b/src/images/cdl_logo.png