{"version":3,"sources":["webpack:///./src/pages/projects/everyday-justice.js","webpack:///./src/components/masthead.js","webpack:///./src/components/collapsibleBox.js"],"names":["ProjectsEverydayJustice","data","location","parentTitle","pageTitle","title","image","hero","childImageSharp","fluid","src","backgroundImage","styling","width","height","frameBorder","allow","allowFullScreen","css","isShaded","collapsibleByDefault","to","pageQuery","fullConfig","resolveConfig","tailwindConfig","Masthead","theme","colors","maroon","translucent","default","className","Title","Content","CollapsibleBox","unstyled","children","useState","isExpanded","toggleExpansion","onClick","String","fromCharCode"],"mappings":"4FACA,2K,iIAkHeA,UAvGiB,SAAC,GAAwB,IAAtBC,EAAqB,EAArBA,KAAMC,EAAe,EAAfA,SAIvC,OACE,YAAC,IAAD,CAAQA,SAAUA,EAAUC,YAJV,WAIoCC,UAHtC,oBAId,YAAC,IAAD,CAAKC,MAJS,mBAISC,MAAOL,EAAKM,KAAKC,gBAAgBC,MAAMC,MAC9D,YAAC,IAAD,CACEP,YAPc,WAQdC,UAPY,mBAQZO,gBAAiBV,EAAKM,KAAKC,gBAAgBC,MAC3CG,QAAS,CACL,mFADK,2CAKX,YAAC,IAAD,KACE,kCACA,YAAC,IAAD,mDACA,iQAMA,YAAC,IAAD,KACE,sBACEC,MAAM,MACNC,OAAO,MACPJ,IAAI,kDACJK,YAAY,IACZC,MAAM,2FACNC,iBAAe,EACfC,IAAG,IAEL,sBACEL,MAAM,MACNC,OAAO,MACPJ,IAAI,kDACJK,YAAY,IACZC,MAAM,2FACNC,iBAAe,EACfC,IAAG,IAEL,sBACEL,MAAM,MACNC,OAAO,MACPJ,IAAI,kDACJK,YAAY,IACZC,MAAM,2FACNC,iBAAe,EACfC,IAAG,MAIT,YAAC,IAAD,CAASC,UAAQ,GACf,YAAC,IAAD,CAAgBC,sBAAoB,GAClC,2CACA,kvBAeF,YAAC,IAAD,CAAgBA,sBAAoB,GAClC,+BACA,sBACE,sFAGA,gEAEF,2CACA,sBACE,kJAIA,iIAON,YAAC,IAAD,KACE,qCACA,sFACA,YAAC,IAAD,CAAQC,GAAG,aAAX,mBAQD,IAAMC,EAAS,c,8JC9GhBC,EAAaC,IAAcC,KAuClBC,IArCE,SAAC,GAA0D,IAAxDvB,EAAuD,EAAvDA,YAAaC,EAA0C,EAA1CA,UAAWO,EAA+B,EAA/BA,gBAAiBC,EAAc,EAAdA,QAC3D,OACE,8BACE,YAAC,IAAD,CACEH,MAAO,CAAC,mBACac,EAAWI,MAAMC,OAAOC,OAAOC,YAD7C,KAC6DP,EAAWI,MAAMC,OAAOC,OAAOE,QAD5F,IAELpB,GAEFO,IAAG,YAAE,CAAG,gFAA2BN,KAEnC,mBAAKoB,UAAU,aACb,uBACE,YAAC,IAAD,CACEd,IAAG,YAAE,CACD,gGADC,yCAILc,UAAU,eAET7B,GAEH,kBACE6B,UAAU,cACVd,IAAG,YAAE,CACD,qEADC,0CAKJd,S,sFChCT6B,EAAK,uGAMLC,EAAU,8D,wGA0CDC,IAxCQ,SAAC,GAAkD,IAAhDf,EAA+C,EAA/CA,qBAAsBgB,EAAyB,EAAzBA,SAAUC,EAAe,EAAfA,SAAe,EACjCC,oBAAS,GAAxCC,EADgE,KACpDC,EADoD,KAGvE,OACE,mBACEtB,IAAG,YAAE,CACD,iSACFkB,GAAc,iFAGhB,YAACH,EAAD,CACEf,IAAG,EACHuB,QAAS,kBAAMD,GAAiBD,KAE/BF,EAAS,GACV,oBACEnB,IAAG,YAAE,CACD,6DACDE,GAA0B,kDAG5BmB,EACGG,OAAOC,aAAa,QACpBD,OAAOC,aAAa,UAG5B,YAACT,EAAD,CACEF,UAAS,uCACPO,EAAU,6BADH,MAEJnB,GAAD,iBACJF,IAAG,GAIFmB,EAAS","file":"component---src-pages-projects-everyday-justice-js-970f3478c1e01fa33bf7.js","sourcesContent":["import { graphql } from 'gatsby';\nimport React from 'react';\nimport tw from 'tailwind.macro';\nimport Button from '../../components/button';\nimport CollapsibleBox from '../../components/collapsibleBox';\nimport Grid from '../../components/grid';\nimport Layout from '../../components/layout';\nimport LeadText from '../../components/leadText';\nimport Masthead from '../../components/masthead';\nimport Section from '../../components/section';\nimport SEO from '../../components/seo';\n\nconst ProjectsEverydayJustice = ({ data, location }) => {\n  const parentTitle = 'Projects';\n  const pageTitle = 'Everyday Justice';\n\n  return (\n    <Layout location={location} parentTitle={parentTitle} pageTitle={pageTitle}>\n      <SEO title={pageTitle} image={data.hero.childImageSharp.fluid.src} />\n      <Masthead\n        parentTitle={parentTitle}\n        pageTitle={pageTitle}\n        backgroundImage={data.hero.childImageSharp.fluid}\n        styling={[\n          tw`bg-maroon bg-right bg-repeat-x`,\n          `min-height:40vh; background-size:50%;`,\n        ]}\n      />\n      <Section>\n        <h2>Overview</h2>\n        <LeadText>Empowering you to make informed decisions.</LeadText>\n        <p>\n          We are dedicated to providing education to our community on questions\n          pertaining to: (i) Maintenance and (ii) Gender Based Violence. We are\n          your education resource, offering free workshops, to empower you to\n          make informed decisions.\n        </p>\n        <Grid>\n          <iframe\n            width=\"560\"\n            height=\"315\"\n            src=\"https://www.youtube.com/embed/biX1zIKGsVg?rel=0\"\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            css={tw`max-w-full`}\n          />\n          <iframe\n            width=\"560\"\n            height=\"315\"\n            src=\"https://www.youtube.com/embed/lXkgTCb-RR8?rel=0\"\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            css={tw`max-w-full`}\n          />\n          <iframe\n            width=\"560\"\n            height=\"315\"\n            src=\"https://www.youtube.com/embed/VcQ7-0mIDj8?rel=0\"\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            css={tw`max-w-full`}\n          />\n        </Grid>\n      </Section>\n      <Section isShaded>\n        <CollapsibleBox collapsibleByDefault>\n          <h2>Overall objective</h2>\n          <p>\n            Our Everyday Justice project is a community education program,\n            designed to promote learning and social development work with\n            individuals and groups in their communities using a range of formal\n            and informal methods. A common defining feature of our programme is\n            that programmes and activities are developed in dialogue with\n            communities and participants. The purpose of community learning and\n            development is to develop the capacity of individuals and groups of\n            all ages through their actions, the capacity of communities, to\n            improve their quality of life. Central to this is the ability of\n            individuals and a community to participate in democratic processes\n            so as to ensure the attainment of social justice in their everyday\n            lives.\n          </p>\n        </CollapsibleBox>\n        <CollapsibleBox collapsibleByDefault>\n          <h2>Goals</h2>\n          <ul>\n            <li>\n              Law and justice change agents collaborating with communities\n            </li>\n            <li>Engaged student and community tuition</li>\n          </ul>\n          <h2>Expected outcomes</h2>\n          <ul>\n            <li>\n              Community participation in democratic processes so as to ensure\n              the attainment of social justice in their everyday lives\n            </li>\n            <li>\n              An understanding of constitutional rights pertaining to\n              maintenance issues and gender based violence\n            </li>\n          </ul>\n        </CollapsibleBox>\n      </Section>\n      <Section>\n        <h2>Get started</h2>\n        <p>Contact us for further information and to arrange a workshop.</p>\n        <Button to=\"/contact/\">Contact us &rarr;</Button>\n      </Section>\n    </Layout>\n  );\n};\n\nexport default ProjectsEverydayJustice;\n\nexport const pageQuery = graphql`\n  query {\n    hero: file(relativePath: { eq: \"projects-mplan-hero.png\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid_withWebp\n        }\n      }\n    }\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`;\n","import BackgroundImage from 'gatsby-background-image';\nimport React from 'react';\nimport tw from 'tailwind.macro';\nimport resolveConfig from 'tailwindcss/resolveConfig';\nimport tailwindConfig from '../../tailwind.config.js';\nimport LeadText from './leadText';\n\nconst fullConfig = resolveConfig(tailwindConfig);\n\nconst Masthead = ({ parentTitle, pageTitle, backgroundImage, styling }) => {\n  return (\n    <>\n      <BackgroundImage\n        fluid={[\n          `linear-gradient(${fullConfig.theme.colors.maroon.translucent}, ${fullConfig.theme.colors.maroon.default})`,\n          backgroundImage,\n        ]}\n        css={[tw`flex items-center py-10`, styling]}\n      >\n        <div className=\"container\">\n          <div>\n            <LeadText\n              css={[\n                tw`my-0 uppercase tracking-wide text-white`,\n                `text-shadow:0 0 10px rgba(0,0,0,0.5)`,\n              ]}\n              className=\"text-shadow\"\n            >\n              {parentTitle}\n            </LeadText>\n            <h1\n              className=\"text-shadow\"\n              css={[\n                tw`my-0 text-white tracking-wider`,\n                `text-shadow:0 0 10px rgba(0,0,0,0.5)`,\n              ]}\n            >\n              {pageTitle}\n            </h1>\n          </div>\n        </div>\n      </BackgroundImage>\n    </>\n  );\n};\n\nexport default Masthead;\n","import { css } from \"@emotion/core\"\nimport styled from \"@emotion/styled\"\nimport React, { useState } from \"react\"\nimport tw from \"tailwind.macro\"\n\nconst Title = styled.div`\n  h2,\n  h3 {\n    margin: 0.75rem 0 !important;\n  }\n`\nconst Content = tw.div``\n\nconst CollapsibleBox = ({ collapsibleByDefault, unstyled, children }) => {\n  const [isExpanded, toggleExpansion] = useState(false)\n\n  return (\n    <div\n      css={[\n        tw`mb-5 p-5 sm:px-10 sm:py-5 shadow-md bg-white rounded`,\n        unstyled && tw`md:p-0 md:shadow-none rounded-none`,\n      ]}\n    >\n      <Title\n        css={tw`flex items-center`}\n        onClick={() => toggleExpansion(!isExpanded)}\n      >\n        {children[0]}\n        <span\n          css={[\n            tw`ml-auto pl-3 text-2xl text-stone`,\n            !collapsibleByDefault && tw`md:hidden`,\n          ]}\n        >\n          {isExpanded\n            ? String.fromCharCode(\"8593\")\n            : String.fromCharCode(\"8595\")}\n        </span>\n      </Title>\n      <Content\n        className={`transition-max-height duration-300 ${\n          isExpanded ? `max-h-2x-screen` : `max-h-0`\n        } ${!collapsibleByDefault && `md:max-h-full`}`}\n        css={css`\n          ${tw`overflow-hidden`}\n        `}\n      >\n        {children[1]}\n      </Content>\n    </div>\n  )\n}\n\nexport default CollapsibleBox\n"],"sourceRoot":""}