{"version":3,"sources":["webpack://tribal-cabane/./src/components/gallery/foldableGallery.js","webpack://tribal-cabane/./src/components/pages/villageWrapper.js","webpack://tribal-cabane/./src/pages/village.js"],"names":["styled","p","isOpen","Container","attrs","as","theme","colors","white","down","VillageWrapper","village","fontSizes","xl","up","VillageBackgroundImage","BackgroundImage","VillageHeaderWrapper","VillageContentWrapper","data","useStaticQuery","backgroundSources","backgroundMobile","fluid","backgroundTablet","media","sizes","backgroundLaptop","backgroundDesktop","SEO","title","description","className","strapiVillage","titre","sous_titre","Markdown","markup","images","gallery"],"mappings":"uRAQ+BA,wBAAH,+EAAGA,CAAH,iIAItB,SAAAC,GAAC,OAAKA,EAAEC,OAAH,wPAgBUF,oBAAH,qEAAGA,CAAH,mCAEZ,SAAAC,GAAC,OAAIA,EAAEC,QAAF,kDAKkBF,QAAOG,KAAWC,MAAM,CACjDC,GAAI,OADkB,wFAAGL,CAAH,kKAGM,SAAAC,GAAC,OAAIA,EAAEK,MAAMC,OAAOC,SACtC,SAAAP,GAAC,OAAIA,EAAEK,MAAMC,OAAOC,SAK5BC,UAAK,O,SCvCLC,EAAiBV,qBAAH,0EAAGA,CAAH,uMACF,SAAAC,GAAC,OAAIA,EAAEK,MAAMC,OAAOI,WACzB,SAAAV,GAAC,OAAKA,EAAEK,MAAMC,OAAOC,SAEb,SAAAP,GAAC,OAAIA,EAAEK,MAAMM,UAAU,UAKvB,SAAAX,GAAC,OAAIA,EAAEK,MAAMM,UAAUC,MAEtCC,QAAG,OAKHL,UAAK,OAQLM,GAAyBf,QAAOgB,KAAV,6FAAGhB,CAAH,4DAKtBiB,GAAuBjB,QAAOG,KAAV,2FAAGH,CAAH,wKAIT,SAAAC,GAAC,OAAIA,EAAEK,MAAMC,OAAOC,SAW/BU,GAAwBlB,QAAOG,KAAV,4FAAGH,CAAH,qGAKrBS,UAAK,OCoDX,EAxFgB,WAEZ,IAAMU,GAAOC,oBAAe,cA2CxBC,EAAoB,CACxBF,EAAKG,iBAAiBC,MADE,iBAGnBJ,EAAKK,iBAAiBD,MAHH,CAItBE,MAAO,6CACPC,MAAO,sCALe,iBAQnBP,EAAKQ,iBAAiBJ,MARH,CAStBE,MAAO,6CACPC,MAAO,qCAVe,iBAanBP,EAAKS,kBAAkBL,MAbJ,CActBE,MAAO,qBACPC,MAAO,sCAIT,OACI,gBAAC,IAAD,KACI,gBAAChB,EAAD,KACI,gBAACmB,EAAA,EAAD,CAAKC,MAAM,UAAUC,YAAY,sCACjC,gBAAC,IAAD,MACA,sBAAIC,UAAU,wBAAd,2BACA,gBAACjB,EAAD,CAAwBQ,MAAOF,GAC7B,gBAAC,IAAD,OAEF,gBAACJ,EAAD,KACM,sBAAIe,UAAU,yBAAyBb,EAAKc,cAAcC,OAC1D,0BAAKf,EAAKc,cAAcE,aAE9B,gBAACjB,EAAD,KACI,gBAAC,EAAAkB,SAAD,CAAUC,OAAQlB,EAAKc,cAAcF,eAGzC,gBAAC,IAAD,CAAeO,OAAQnB,EAAKc,cAAcM,WAE9C,gBAAC,IAAD","file":"component---src-pages-village-js-c3510ce40ffd06900316.js","sourcesContent":["import React, {useState} from 'react'\r\nimport styled from 'styled-components'\r\nimport ImageGallery from './imageGallery'\r\nimport Container from '../utils/container';\r\nimport {FaArrowUp} from 'react-icons/fa'\r\nimport {down} from 'styled-breakpoints'\r\n\r\n\r\nconst FoldableGalleryWrapper = styled.section`\r\n    transition: 1s ease-in-out;\r\n    .react-photo-gallery--gallery, .imageGallery--image{transition: all 1s linear;}\r\n    \r\n    ${p => !p.isOpen ? \r\n    `.react-photo-gallery--gallery{\r\n        filter: brightness(.6);\r\n        pointer-events: none;\r\n        max-height: 250px;\r\n    }` \r\n    : `\r\n    .imageGallery--image:hover{\r\n        border: 2px solid white;\r\n        filter: saturate(1.2);\r\n    }\r\n  `}\r\n   \r\n    overflow: hidden;\r\n`\r\n\r\nconst GalleryArrow = styled.div`\r\n    transition: 1s ease-in-out;\r\n    ${p => p.isOpen && `\r\n        transform: rotate(-180deg);\r\n    `}\r\n`\r\n\r\nconst FoldableGalleryTitle = styled(Container).attrs({\r\n    as: 'h1'\r\n})`\r\n    border-bottom: 3px solid ${ p => p.theme.colors.white};\r\n    color: ${ p => p.theme.colors.white};\r\n    margin-bottom: 10px;\r\n    margin-top: 10px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    ${down('md')}{\r\n        margin-left: 15px;\r\n        margin-right: 15px;\r\n    }\r\n`\r\n\r\nconst FoldableGallery = ({images, title}) => {\r\n    const [isOpen, setOpen] = useState(false);\r\n    return(\r\n       <>          \r\n        <FoldableGalleryTitle onClick={() => setOpen(!isOpen)}>\r\n            {title}\r\n            <GalleryArrow isOpen={isOpen} >\r\n                <FaArrowUp />\r\n            </GalleryArrow>>    \r\n        </FoldableGalleryTitle>\r\n        <FoldableGalleryWrapper isOpen={isOpen} onClick={() => setOpen(true)}>\r\n            <ImageGallery images={images} />\r\n        </FoldableGalleryWrapper>\r\n        </>\r\n    )\r\n}\r\nexport default FoldableGallery;","import styled from 'styled-components'\r\nimport BackgroundImage from 'gatsby-background-image'\r\nimport Container from '../utils/container'\r\nimport {up, down} from 'styled-breakpoints'\r\n\r\nconst VillageWrapper = styled.main`\r\n    background: ${p => p.theme.colors.village};\r\n    color: ${p =>  p.theme.colors.white};\r\n    h1{\r\n        font-size: ${p => p.theme.fontSizes[\"2xl\"]}\r\n    }\r\n    .village-mobile-title{\r\n        margin: 10px 0;\r\n        text-align: center;\r\n        font-size: ${p => p.theme.fontSizes.xl}\r\n    }\r\n    ${up(\"md\")}{\r\n        .village-mobile-title{\r\n            display:none;\r\n        }\r\n    }\r\n    ${down(\"md\")}{\r\n        .village-desktop-title{\r\n            display: none;\r\n        }\r\n    }\r\n\r\n`\r\n\r\nconst VillageBackgroundImage = styled(BackgroundImage)`\r\n    min-height: 80vh;\r\n    box-shadow: 0px 9px 20px 0px #0000006e;\r\n`\r\n\r\nconst VillageHeaderWrapper = styled(Container)`\r\n    margin-top: 20px;\r\n    h1 {\r\n        text-align: center;\r\n        color: ${p => p.theme.colors.white};\r\n        font-size: 3.2rem;\r\n        text-shadow: -1px -1px 19px #000;\r\n        line-height: 150%;\r\n        margin: 0; \r\n    }\r\n    h2{\r\n        text-align: center;\r\n        font-size: 1.4rem;\r\n    }\r\n`\r\nconst VillageContentWrapper = styled(Container)`\r\n    padding-top: 70px;\r\n    padding-bottom: 100px;\r\n    font-size: 25px;\r\n\r\n    ${down('md')}{\r\n        padding-left: 25px;\r\n        padding-right: 25px;\r\n    }\r\n`\r\n\r\n\r\n\r\nexport {\r\n    VillageWrapper, \r\n    VillageBackgroundImage, \r\n    VillageHeaderWrapper,\r\n    VillageContentWrapper\r\n}","import React from 'react'\r\nimport Footer from '../components/footer/footer'\r\nimport { useStaticQuery, graphql } from \"gatsby\"\r\nimport {Markdown} from 'react-showdown'\r\nimport BackButton from '../components/utils/backButton'\r\nimport MobileNavbar from '../components/navbar/mobileNavbar'\r\nimport SEO from '../components/utils/SEO'\r\nimport DefaultLayout from '../components/layouts/defaultLayout'\r\nimport FoldableGallery from '../components/gallery/foldableGallery'\r\nimport ImageGallery from '../components/gallery/imageGallery'\r\n\r\nimport {\r\n  VillageWrapper, \r\n  VillageBackgroundImage, \r\n  VillageHeaderWrapper,\r\n  VillageContentWrapper,\r\n} from '../components/pages/villageWrapper'\r\n\r\nconst Village = () => {\r\n\r\n    const data = useStaticQuery(graphql`\r\n    query VillageLayout {\r\n          backgroundDesktop : imageSharp(fluid: {originalName: {eq: \"village-original.jpg\"}}) {\r\n            fluid(quality:90, srcSetBreakpoints:[1920, 2560]) {\r\n              ...GatsbyImageSharpFluid_withWebp_tracedSVG\r\n            }\r\n          }\r\n          backgroundLaptop : imageSharp(fluid: {originalName: {eq: \"village-1024.jpg\"}}){\r\n            fluid(quality:90, maxWidth:1440, srcSetBreakpoints:[1440]) {\r\n              ...GatsbyImageSharpFluid_withWebp_tracedSVG\r\n            }\r\n          }\r\n          backgroundTablet : imageSharp(fluid: {originalName: {eq: \"village-1024.jpg\"}}){\r\n            fluid (quality:90, maxWidth:1024, srcSetBreakpoints:[1024]){\r\n              ...GatsbyImageSharpFluid_withWebp_tracedSVG\r\n            }\r\n          }\r\n          backgroundMobile : imageSharp(fluid: {originalName: {eq: \"village-mobile.jpg\"}}){\r\n            fluid (maxWidth:768, srcSetBreakpoints:[768]){\r\n              ...GatsbyImageSharpFluid_withWebp_tracedSVG\r\n            }\r\n          }\r\n          strapiVillage {\r\n            titre\r\n            sous_titre\r\n            description\r\n            gallery {\r\n              localFile {\r\n                childImageSharp {\r\n                fluid {\r\n                    ...GatsbyImageSharpFluid_withWebp_tracedSVG\r\n                    presentationWidth\r\n                    presentationHeight\r\n                  }\r\n                }\r\n              }\r\n            }\r\n          }\r\n        \r\n    }\r\n  `)\r\n \r\n  \r\n  const backgroundSources = [\r\n    data.backgroundMobile.fluid,\r\n    {\r\n      ...data.backgroundTablet.fluid,\r\n      media: \"(min-width: 769px) and (max-width: 1024px)\",\r\n      sizes: \"(max-width: 1024px) 1024px, 100vw\"\r\n    },\r\n    {\r\n      ...data.backgroundLaptop.fluid,\r\n      media: \"(min-width:1025px) and (max-width: 1440px)\",\r\n      sizes: \"(max-width:1440px) 1440px, 100vw\"\r\n    },\r\n    {\r\n      ...data.backgroundDesktop.fluid,\r\n      media: \"(min-width:1441px)\",\r\n      sizes: \"(min-width:1441px) 100vw, 1441px\"\r\n    }\r\n  ]\r\n\r\n    return (\r\n        <DefaultLayout>\r\n            <VillageWrapper>\r\n                <SEO title=\"Village\" description=\"Le village des Branchés à Emosson\" />\r\n                <MobileNavbar />\r\n                <h1 className=\"village-mobile-title\">Le village des branchés</h1>\r\n                <VillageBackgroundImage fluid={backgroundSources}>\r\n                  <BackButton />   \r\n                </VillageBackgroundImage>  \r\n                <VillageHeaderWrapper>\r\n                      <h1 className=\"village-desktop-title\">{data.strapiVillage.titre}</h1>\r\n                      <h2>{data.strapiVillage.sous_titre}</h2>\r\n                  </VillageHeaderWrapper> \r\n                <VillageContentWrapper>\r\n                    <Markdown markup={data.strapiVillage.description} />\r\n                </VillageContentWrapper>\r\n                \r\n                <ImageGallery  images={data.strapiVillage.gallery} />      \r\n            </VillageWrapper>\r\n            <Footer />\r\n        </DefaultLayout>      \r\n    )\r\n}\r\n\r\nexport default Village"],"sourceRoot":""}