@blameitonyourisp/blurrid/dist/web/404.898d5046.css.map

Generate and render blurred placeholders for lazy loaded images.

{"mappings":"A,gHCSA,wBAKA,uCAIA,0DAKA,0CAIA,6CAIA,gCC9BA,ioCEDA,uRAgBA,2DAGA,gDAKA,sCAKA,+LAWA,qFAKA,qFAKA,4BAIA,wGAQA,6CAKA,qGAOA,yBACI,sFAOA,0FAOA,2FAOA,wDAKA,sCC5FJ,wGAMA,oCAIA,6BAIA,qGAOA,+FAQA,gFAMA,gEAKA,6FAOA,uOAWA,uCAKA,yBACI,0CAKA","sources":["404.898d5046.css","src/web/styles/base/reset.css","src/web/styles/base/colors.css","src/web/styles/base/fonts.css","src/web/styles/components/card.css","src/web/styles/style.css"],"sourcesContent":["@import \"https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap\";\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n*, :before, :after {\n  box-sizing: border-box;\n}\n\nimg, picture, video, canvas, svg {\n  max-width: 100%;\n  display: block;\n}\n\ninput, button, textarea, select {\n  font: inherit;\n}\n\np, h1, h2, h3, h4, h5, h6 {\n  overflow-wrap: break-word;\n}\n\n#root, #__next {\n  isolation: isolate;\n}\n\n:root {\n  --clr-primary-100: #f0e2db;\n  --clr-primary-200: #e6ddcb;\n  --clr-primary-300: #dbdbbd;\n  --clr-primary-400: #b9c69f;\n  --clr-primary-500: #796;\n  --clr-primary-600: #415841;\n  --clr-primary-700: #2e3831;\n  --clr-primary-800: #242927;\n  --clr-primary-900: #191a1a;\n  --clr-accent-100: #c5c1f0;\n  --clr-accent-200: #b9b0e8;\n  --clr-accent-300: #af9fdf;\n  --clr-accent-400: #977ece;\n  --clr-accent-500: #6e4db3;\n  --clr-accent-600: #4f3a78;\n  --clr-accent-700: #3d2d52;\n  --clr-accent-800: #332640;\n  --clr-accent-900: #281f2e;\n  --clr-neutral-100: #fff;\n  --clr-neutral-150: #f0f0f0;\n  --clr-neutral-200: #e0e0e0;\n  --clr-neutral-250: #cfcfcf;\n  --clr-neutral-300: #bfbfbf;\n  --clr-neutral-350: #b0b0b0;\n  --clr-neutral-400: #a1a1a1;\n  --clr-neutral-450: #8f8f8f;\n  --clr-neutral-500: gray;\n  --clr-neutral-550: #707070;\n  --clr-neutral-600: #616161;\n  --clr-neutral-650: #4f4f4f;\n  --clr-neutral-700: #404040;\n  --clr-neutral-750: #303030;\n  --clr-neutral-800: #212121;\n  --clr-neutral-850: #0f0f0f;\n  --clr-neutral-900: #000;\n  --clr-error-400: #ed5e6a;\n  --clr-error-500: #dd3c49;\n  --clr-error-600: #b82e39;\n  --clr-warn-400: #f7f7a1;\n  --clr-warn-500: #ecec79;\n  --clr-warn-600: #dbdb57;\n  --clr-success-400: #cffcd2;\n  --clr-success-500: #a3f5aa;\n  --clr-success-600: #7de886;\n}\n\n:root {\n  --ff-primary: \"Courier Prime\", monospace;\n}\n\n.card-action {\n  background-color: var(--clr-accent-500);\n  color: var(--clr-primary-200);\n  float: right;\n  border: none;\n  border-radius: 15px;\n  flex-direction: row;\n  justify-content: center;\n  align-self: center;\n  align-items: center;\n  width: 100%;\n  height: 3.5rem;\n  font-size: 1.25em;\n  text-decoration: none;\n  display: flex;\n}\n\n.card-action:hover {\n  background-color: var(--clr-neutral-800);\n}\n\n.card-action img {\n  height: 1.5em;\n  margin-right: 1rem;\n}\n\n.card-container {\n  width: 90%;\n  margin: auto;\n}\n\n.card-left, .card-right {\n  background-color: var(--clr-primary-300);\n  color: var(--clr-neutral-900);\n  flex-direction: column;\n  height: min-content;\n  margin-top: 2rem;\n  padding: 1rem;\n  display: flex;\n  overflow: hidden;\n}\n\n.card-left {\n  border-right: 10px solid var(--clr-accent-500);\n  border-radius: 50px 0 0 50px;\n}\n\n.card-right {\n  border-left: 10px solid var(--clr-accent-500);\n  border-radius: 0 50px 50px 0;\n}\n\n.card-image {\n  grid-area: image;\n}\n\n.card-image img {\n  object-fit: cover;\n  object-position: center;\n  width: min(100%, 20rem);\n  margin: auto;\n  display: block;\n}\n\n.card-details {\n  grid-area: details;\n  padding: 1rem;\n}\n\n.card-title:after {\n  border-bottom: 1px solid var(--clr-neutral-900);\n  content: \"\";\n  width: 100%;\n  display: block;\n}\n\n@media (min-width: 860px) {\n  .card-container {\n    flex-direction: column;\n    justify-content: center;\n    height: 75vh;\n    display: flex;\n  }\n\n  .card-left {\n    grid-template-columns: 25% 75%;\n    grid-template-areas: \"image details\";\n    display: grid;\n  }\n\n  .card-right {\n    grid-template-columns: 75% 25%;\n    grid-template-areas: \"details image\";\n    display: grid;\n  }\n\n  .card-column {\n    grid-template-columns: 50% 50%;\n    display: grid;\n  }\n\n  .card-container {\n    width: max(50%, 50rem);\n  }\n}\n\nbody {\n  background-color: var(--clr-neutral-200);\n  color: var(--clr-neutral-800);\n  font-family: var(--ff-primary);\n}\n\n.page-item {\n  margin: auto;\n  padding: 3rem;\n}\n\n.page-item p {\n  max-width: 120ch;\n}\n\n.item-title:after {\n  border-bottom: 1px solid var(--clr-neutral-900);\n  content: \"\";\n  width: 100%;\n  display: block;\n}\n\n.gallery-container {\n  flex-flow: wrap;\n  justify-content: space-evenly;\n  align-items: center;\n  display: flex;\n}\n\n.gallery-item {\n  flex-direction: column;\n  align-items: center;\n  margin: 1rem;\n  display: flex;\n}\n\n.gallery-item img {\n  object-fit: contain;\n  width: 70vw;\n  max-height: 50vh;\n}\n\n.gallery-item figcaption {\n  text-align: center;\n  text-wrap: balance;\n  margin-top: .5em;\n  font-size: .75em;\n}\n\n.note {\n  background-color: var(--clr-primary-300);\n  border: 1px solid var(--clr-primary-500);\n  border-left: .5em solid var(--clr-primary-700);\n  border-radius: 5px;\n  flex-direction: row;\n  align-items: center;\n  margin: 1rem auto;\n  padding: 1rem;\n  display: flex;\n}\n\n.note svg {\n  width: 3rem;\n  margin-right: 1rem;\n}\n\n@media (min-width: 860px) {\n  .page-item, .gallery {\n    width: min(70vw, 70rem);\n  }\n\n  .gallery-item img {\n    width: min(25vw, 30rem);\n    max-height: 40vh;\n  }\n}\n\n/*# sourceMappingURL=404.898d5046.css.map */\n","/* \nCSS reset inspired by https://www.joshwcomeau.com/css/custom-css-reset/, please\nalso see some of the resources below for future extensions to the reset:\n    - https://elad2412.github.io/the-new-css-reset/\n    - https://andy-bell.co.uk/a-modern-css-reset/\n    - https://meyerweb.com/eric/tools/css/reset/\n    - https://piccalil.li/blog/a-more-modern-css-reset/\n*/\n\nbody {\n    margin: 0;\n    padding: 0;\n}\n\n*, *::before, *::after {\n    box-sizing: border-box;\n}\n\nimg, picture, video, canvas, svg {\n    display: block;\n    max-width: 100%;\n}\n\ninput, button, textarea, select {\n    font: inherit;\n}\n\np, h1, h2, h3, h4, h5, h6 {\n    overflow-wrap: break-word;\n}\n\n#root, #__next {\n    isolation: isolate;\n}","/* https://realtimecolors.com/?colors=212121-e0e0e0-779966-b9c69f-6f4db3 */\n:root {\n    /* https://coolors.co/f0e2db-e6ddcb-dbdbbd-b9c69f-779966-415841-2e3831-242927-191a1a */\n    --clr-primary-100: hsl(20, 41%, 90%); /* #f0e2db */\n    --clr-primary-200: hsl(40, 35%, 85%); /* #e6ddcb */\n    --clr-primary-300: hsl(60, 29%, 80%); /* #dbdbbd */\n    --clr-primary-400: hsl(80, 25%, 70%); /* #b9c69f */\n    --clr-primary-500: hsl(100, 20%, 50%); /* #779966 */\n    --clr-primary-600: hsl(120, 15%, 30%); /* #415841 */\n    --clr-primary-700: hsl(138, 10%, 20%); /* #2e3831 */\n    --clr-primary-800: hsl(156, 6%, 15%); /* #242927 */\n    --clr-primary-900: hsl(180, 2%, 10%); /* #191a1a */\n\n    /* https://coolors.co/c6c2f0-b9b0e8-af9fdf-977ece-6f4db3-4f3a78-3d2d52-332640-281f2e */\n    --clr-accent-100: hsl(245, 61%, 85%); /* #c6c2f0 */\n    --clr-accent-200: hsl(250, 55%, 80%); /* #b9b0e8 */\n    --clr-accent-300: hsl(255, 50%, 75%); /* #af9fdf */\n    --clr-accent-400: hsl(259, 45%, 65%); /* #977ece */\n    --clr-accent-500: hsl(260, 40%, 50%); /* #6f4db3 */\n    --clr-accent-600: hsl(260, 35%, 35%); /* #4f3a78 */\n    --clr-accent-700: hsl(266, 29%, 25%); /* #3d2d52 */\n    --clr-accent-800: hsl(270, 25%, 20%); /* #332640 */\n    --clr-accent-900: hsl(276, 19%, 15%); /* #281f2e */\n\n    /* https://coolors.co/ffffff-e0e0e0-bfbfbf-a1a1a1-808080-616161-404040-212121-000000 */\n    --clr-neutral-100: hsl(0, 0%, 100%); /* #ffffff */\n    --clr-neutral-150: hsl(0, 0%, 94%); /* #f0f0f0 */\n    --clr-neutral-200: hsl(0, 0%, 88%); /* #e0e0e0 */\n    --clr-neutral-250: hsl(0, 0%, 81%); /* #cfcfcf */\n    --clr-neutral-300: hsl(0, 0%, 75%); /* #bfbfbf */\n    --clr-neutral-350: hsl(0, 0%, 69%); /* #b0b0b0 */\n    --clr-neutral-400: hsl(0, 0%, 63%); /* #a1a1a1 */\n    --clr-neutral-450: hsl(0, 0%, 56%); /* #8f8f8f */\n    --clr-neutral-500: hsl(0, 0%, 50%); /* #808080 */\n    --clr-neutral-550: hsl(0, 0%, 44%); /* #707070 */\n    --clr-neutral-600: hsl(0, 0%, 38%); /* #616161 */\n    --clr-neutral-650: hsl(0, 0%, 31%); /* #4f4f4f */\n    --clr-neutral-700: hsl(0, 0%, 25%); /* #404040 */\n    --clr-neutral-750: hsl(0, 0%, 19%); /* #303030 */\n    --clr-neutral-800: hsl(0, 0%, 13%); /* #212121 */\n    --clr-neutral-850: hsl(0, 0%, 6%); /* #0f0f0f */\n    --clr-neutral-900: hsl(0, 0%, 0%); /* #000000 */\n\n    /* https://coolors.co/ed5e6a-dd3c49-b82e39 */\n    --clr-error-400: hsl(355, 80%, 65%); /* #ed5e6a */\n    --clr-error-500: hsl(355, 70%, 55%); /* #dd3c49 */\n    --clr-error-600: hsl(355, 60%, 45%); /* #b82e39 */\n\n    /* https://coolors.co/dbdb57-ecec79-f7f7a1 */\n    --clr-warn-400: hsl(60, 84%, 80%); /* #f7f7a1 */\n    --clr-warn-500: hsl(60, 75%, 70%); /* #ecec79 */\n    --clr-warn-600: hsl(60, 65%, 60%); /* #dbdb57 */\n\n    /* https://coolors.co/cffcd2-a3f5aa-7de886 */\n    --clr-success-400: hsl(124, 88%, 90%); /* #cffcd2 */\n    --clr-success-500: hsl(125, 80%, 80%); /* #a3f5aa */\n    --clr-success-600: hsl(125, 70%, 70%); /* #7de886 */\n}","@import url(\"https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap\");\n\n:root {\n    --ff-primary: \"Courier Prime\", monospace;\n}",".card-action {\n    align-self: center;\n    align-items: center;\n    background-color: var(--clr-accent-500);\n    border: none;\n    border-radius: 15px;\n    color: var(--clr-primary-200);\n    display: flex;\n    flex-direction: row;\n    float: right;\n    font-size: 1.25em;\n    height: 3.5rem;\n    justify-content: center;\n    text-decoration: none;\n    width: 100%;\n}\n.card-action:hover {\n    background-color: var(--clr-neutral-800);\n}\n.card-action img {\n    height: 1.5em;\n    margin-right: 1rem;\n}\n\n.card-container {\n    margin: auto;\n    width: 90%;\n}\n\n.card-left, .card-right {\n    background-color: var(--clr-primary-300);\n    color: var(--clr-neutral-900);\n    display: flex;\n    flex-direction: column;\n    height: min-content;\n    margin-top: 2rem;\n    overflow: hidden;\n    padding: 1rem;\n}\n\n.card-left {\n    border-radius: 50px 0px 0px 50px;\n    border-right: 10px solid var(--clr-accent-500);\n}\n\n.card-right {\n    border-radius: 0px 50px 50px 0px;\n    border-left: 10px solid var(--clr-accent-500);\n}\n\n.card-image {\n    grid-area: image;\n}\n\n.card-image img {\n    display: block;\n    margin: auto;\n    object-fit: cover;\n    object-position: center;\n    width: min(100%, 20rem);    \n}\n\n.card-details {\n    grid-area: details;\n    padding: 1rem;\n}\n\n.card-title::after {\n    border-bottom: 1px solid var(--clr-neutral-900);\n    content: \"\";\n    display: block;\n    width:100%; \n}\n\n@media (min-width: 860px) {\n    .card-container {\n        display: flex;\n        flex-direction: column;\n        height: 75vh;\n        justify-content: center;\n    }\n\n    .card-left {\n        display: grid;\n        grid-template-areas:\n        \"image details\";\n        grid-template-columns: 25% 75%;\n    }\n\n    .card-right {\n        display: grid;\n        grid-template-areas:\n        \"details image\";\n        grid-template-columns: 75% 25%;\n    }\n\n    .card-column {\n        display: grid;\n        grid-template-columns: 50% 50%;\n    }\n\n    .card-container {\n        width: max(50%, 50rem);\n    }  \n}\n","/* Base CSS reset, font and color variable declarations etc.. */\n@import url(\"./base/reset.css\");\n@import url(\"./base/colors.css\");\n@import url(\"./base/fonts.css\");\n\n/* Reusable component styling imports. */\n@import url(\"./components/card.css\");\n\n/* Global styles. */\nbody {\n    background-color: var(--clr-neutral-200);\n    color: var(--clr-neutral-800);\n    font-family: var(--ff-primary);\n}\n\n.page-item {\n    margin: auto;\n    padding: 3rem;\n}\n.page-item p {\n    max-width: 120ch;\n}\n\n.item-title::after {\n    border-bottom: 1px solid var(--clr-neutral-900);\n    content: \"\";\n    display: block;\n    width:100%; \n}\n\n.gallery-container {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: space-evenly;\n}\n\n.gallery-item {\n    margin: 1rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n.gallery-item img {\n    max-height: 50vh;\n    object-fit: contain;\n    width: 70vw;\n}\n.gallery-item figcaption {\n    font-size: 0.75em;\n    margin-top: 0.5em;\n    text-align: center;\n    text-wrap: balance;\n}\n\n.note {\n    align-items: center;\n    background-color: var(--clr-primary-300);\n    border: 1px solid var(--clr-primary-500);\n    border-left: 0.5em solid var(--clr-primary-700);\n    border-radius: 5px;\n    display: flex;\n    flex-direction: row;\n    margin: 1rem auto 1rem auto;\n    padding: 1rem;\n}\n.note svg {\n    width: 3rem;\n    margin-right: 1rem;\n}\n\n@media (min-width: 860px) {\n    .page-item,\n    .gallery {\n        width: min(70vw, 70rem);\n    }\n\n    .gallery-item img {\n        max-height: 40vh;\n        width: min(25vw, 30rem);\n    }\n}"],"names":[],"version":3,"file":"404.898d5046.css.map"}