-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.5b120eaa.css.map
1 lines (1 loc) · 32.3 KB
/
index.5b120eaa.css.map
1
{"mappings":"AEAA,0DAQA,yBAMA,mBAIA,mBClBA,qEAMA,uBAIA,qBEVA,8DAMA,oHAOE,2EAQE,yLAiBA,2HAcJ,iCCpDA,2FAOE,yDAUE,yBAKF,mIAYA,sBAIA,+BCtCF,4DAKE,yBALF,+FAaE,0BAbF,yCAkBE,0BAlBF,oGAyBE,0BAzBF,+BA6BE,kDAIE,yBAJF,sDAWA,iFAME,yBANF,+BAUE,0BAVF,iCAcE,0BAdF,+BAkBE,mDAMF,yDAIE,yBAJF,oCAQE,0BARF,oCAaA,gHAQE,yBARF,sCAYE,0BAZF,2EAoBE,8GAOE,yIASA,yBAhBF,4FAsBI,6DAKF,0BA3BF,+FAkCE,2FAME,yBANF,wDASI,oFAMJ,0FAME,yBANF,+CAQI,qFAMJ,0FAME,yBANF,iDAQI,sFAMJ,2FAME,yBANF,gDAQI,0FAUV,+CAIE,yBAJF,mDAUE,0BAVF,uCAeE,0BAfF,uBAmBE,wBAGE,yBAHF,6BAQA,yBAGE,yBAHF,sCC3NF,wCAIE,iJAYA,yBAhBF,kFAsBI,kCAMF,0BACE,oCAMF,0BAnCF,gCAuCE,0BAvCF,uCA2CE,iCAIA,kEAKE,0CAMA,yBADF,6DAQA,uFAME,yBANF,uFAaE,0BAbF,oDAkBE,qIAOE,yBAPF,2CAWE,0BAXF,2CAeE,+CAGE,yBAHF,gDAOE,0BAPF,gDAYA,gDAGE,yBAHF,+CAOE,0BAPF,iDAYA,+CAGE,yBAHF,gDAOE,0BAPF,+CAaE,gDAIA,kDAIA,iDAIA,iDAIA,iDAIA,mDC3JR,qBAGE,yBAHF,gQAcE,0BAdF,mCAkBE,0BAlBF,0CAsBE,kCAIA,4CAIA,oCAIA,kCAIA,gCAIA,yEAKE,2EAQA,mFAKE,0BALF,wGAUI,sDAON,+BAGE,0BAHF,kCAOE,yCAIA,yDAOE,+CC1FN,2HASE,qHAWA,yBApBF,sLAgCE,0BAhCF,mCAoCE,0BApCF,mCAyCI,yBADF,yCAMA,qCAIA,2CAIA,mCAIA,iCAIA,4CAKA,wDAKA,0FAOE,yBAPF,qCAYA,iCAGE,yBAHF,+BAQA,kEAKE,yBALF,qHAcE,0BAdF,sCAkBE,0BAlBF,sCAsBE,0BAtBF,sCA0BE,kJASE,yBATF,gECtHJ,uGAOE,gFAOA,oGAOE","sources":["index.5b120eaa.css","src/scss/style.scss","src/scss/config/_reset.scss","src/scss/config/_fonts.scss","src/scss/config/_variables.scss","src/scss/components/_body.scss","src/scss/components/_link.scss","src/scss/components/_header.scss","src/scss/components/_about.scss","src/scss/components/_work.scss","src/scss/components/_contact.scss","src/scss/components/_footer.scss"],"sourcesContent":["*, :after, :before {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nul, li {\n margin: 0;\n padding: 0;\n}\n\nul {\n list-style: none;\n}\n\nimg {\n max-width: 100%;\n}\n\nbody {\n color: #143251;\n font-family: Futura, Hind, sans-serif;\n font-size: 16px;\n}\n\nstrong {\n font-weight: bold;\n}\n\nem {\n font-style: italic;\n}\n\nhtml {\n scroll-behavior: smooth;\n max-width: 100vw;\n overflow-x: hidden;\n}\n\n.body {\n background: linear-gradient(to bottom right, #fafafa, #f2f2f2);\n max-width: 100vw;\n font-weight: 300;\n overflow-x: hidden;\n}\n\n.body .frame {\n z-index: -1;\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.body .frame:before {\n content: \"\";\n z-index: -2;\n border-style: solid;\n border-image: linear-gradient(to bottom right, #143251, #43e4c6) 1 / 5vmin / 1;\n width: 100%;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.body .frame:after {\n content: \"\";\n z-index: -4;\n border: 2.5vmin dashed #43e4c6;\n width: 100%;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.section-title {\n margin: 0 0 1.5rem;\n}\n\na {\n color: #143251;\n z-index: 1;\n text-decoration: none;\n transition: all .1s linear;\n position: relative;\n}\n\na:hover, a:focus, a:active, a:visited, a:hover {\n color: #143251;\n}\n\na:hover:before {\n opacity: 1;\n}\n\na:before, a:after {\n content: \"\";\n z-index: -4;\n background-color: #b2f4e8;\n width: 100%;\n transition: all .4s;\n position: absolute;\n bottom: -1px;\n left: 0;\n}\n\na:after {\n height: .25rem;\n}\n\na:before {\n opacity: 0;\n height: 110%;\n}\n\n.header {\n flex-direction: column;\n min-height: 100vh;\n display: flex;\n}\n\n@media (min-width: 768px) {\n .header {\n flex-flow: wrap;\n align-content: flex-start;\n min-height: 50vh;\n padding: 0 10vmin;\n display: flex;\n }\n}\n\n@media (min-width: 1024px) {\n .header {\n min-height: 100vh;\n padding: 10vmin;\n }\n}\n\n@media (min-width: 1280px) {\n .header {\n grid-template-areas: \"hello . . pictures\"\n \"navigation . . .\";\n padding: 10vmin 15vmin;\n display: grid;\n }\n}\n\n@media (min-width: 1920px) {\n .header {\n padding: 10vmin 20vmin;\n }\n}\n\n.header__hello {\n grid-area: hello;\n margin: 10vh auto 0;\n}\n\n@media (min-width: 768px) {\n .header__hello {\n width: 50%;\n height: auto;\n margin: 10vh 0 0;\n }\n}\n\n.header__title {\n grid-area: title;\n font-size: 1.4rem;\n font-weight: normal;\n line-height: 140%;\n}\n\n@media (min-width: 768px) {\n .header__title {\n font-size: 2rem;\n }\n}\n\n@media (min-width: 1024px) {\n .header__title {\n font-size: 2.5rem;\n }\n}\n\n@media (min-width: 1280px) {\n .header__title {\n font-size: 3rem;\n }\n}\n\n.header__title__name {\n font-weight: bold;\n display: block;\n}\n\n.header__subtitle {\n text-align: left;\n margin: .5rem auto 2rem;\n}\n\n@media (min-width: 768px) {\n .header__subtitle {\n font-size: 1.1rem;\n }\n}\n\n@media (min-width: 1024px) {\n .header__subtitle {\n font-size: 1.2rem;\n }\n}\n\n.header__pictures {\n grid-area: pictures;\n width: 200px;\n height: 200px;\n margin: 5vmin auto auto;\n position: relative;\n left: 10%;\n}\n\n@media (min-width: 768px) {\n .header__pictures {\n margin: 10vh auto 0;\n }\n}\n\n@media (min-width: 1280px) {\n .header__pictures {\n width: 250px;\n height: 250px;\n margin: 10vh 0 0;\n left: 0;\n right: 0;\n }\n}\n\n.header__pictures__item {\n width: 100px;\n height: 100px;\n position: absolute;\n top: calc(50% - 50px);\n left: calc(50% - 50px);\n}\n\n.header__pictures__item img {\n object-fit: cover;\n object-position: center;\n border: 4px dashed #143251;\n width: 100%;\n height: 100%;\n transition: all 80ms;\n}\n\n@media (min-width: 768px) {\n .header__pictures__item {\n width: 150px;\n height: 150px;\n top: calc(50% - 75px);\n left: calc(50% - 75px);\n }\n\n .header__pictures__item img:hover {\n border: 8px dashed #143251;\n }\n}\n\n@media (min-width: 1280px) {\n .header__pictures__item {\n width: 200px;\n height: 200px;\n top: calc(50% - 100px);\n left: calc(50% - 100px);\n }\n}\n\n.header__pictures__item:first-of-type {\n z-index: 10;\n top: 50%;\n left: -10%;\n transform: rotate(10deg);\n}\n\n@media (min-width: 768px) {\n .header__pictures__item:first-of-type {\n top: 80%;\n left: -40%;\n }\n\n .header__pictures__item:first-of-type img:hover {\n transform: scale(1.4)translate(10%);\n }\n}\n\n.header__pictures__item:nth-of-type(2) {\n z-index: 9;\n top: 20%;\n left: 20%;\n transform: rotate(-6deg);\n}\n\n@media (min-width: 768px) {\n .header__pictures__item:nth-of-type(2) {\n top: 40%;\n }\n\n .header__pictures__item:nth-of-type(2) img:hover {\n transform: scale(1.4)translate(15%);\n }\n}\n\n.header__pictures__item:nth-of-type(3) {\n z-index: 8;\n top: 5%;\n left: -15%;\n transform: rotate(-2deg);\n}\n\n@media (min-width: 768px) {\n .header__pictures__item:nth-of-type(3) {\n left: -45%;\n }\n\n .header__pictures__item:nth-of-type(3) img:hover {\n transform: scale(1.4)translate(-15%);\n }\n}\n\n.header__pictures__item:nth-of-type(4) {\n z-index: 7;\n top: -10%;\n left: 30%;\n transform: rotate(10deg);\n}\n\n@media (min-width: 768px) {\n .header__pictures__item:nth-of-type(4) {\n left: 20%;\n }\n\n .header__pictures__item:nth-of-type(4) img:hover {\n transform: scale(1.4)translate(15%, -15%);\n }\n}\n\n.nav {\n grid-area: navigation;\n margin: 0 auto 10vmin;\n}\n\n@media (min-width: 768px) {\n .nav {\n width: 50%;\n margin: 0 auto 0 0;\n font-size: 1.3rem;\n }\n}\n\n@media (min-width: 1024px) {\n .nav {\n margin-top: 20vh;\n font-size: 1.4rem;\n }\n}\n\n@media (min-width: 1280px) {\n .nav {\n font-size: 1.5rem;\n }\n}\n\n.nav__list {\n display: flex;\n}\n\n@media (min-width: 768px) {\n .nav__list {\n flex-flow: column;\n }\n}\n\n.nav__item {\n margin: 0 1rem;\n}\n\n@media (min-width: 768px) {\n .nav__item {\n margin: .5rem auto .5rem 0;\n }\n}\n\n.about {\n padding: 10vmin;\n position: relative;\n}\n\n.about:before {\n content: \"\";\n z-index: -5;\n background-color: #eff6f6;\n width: 120%;\n height: 110%;\n position: absolute;\n top: -10%;\n left: -10%;\n transform: rotate(-3deg);\n}\n\n@media (min-width: 768px) {\n .about {\n flex-flow: wrap;\n align-items: flex-start;\n padding: 10vmin 10vmin 0;\n display: flex;\n }\n\n .about:before {\n height: 100%;\n top: 5%;\n }\n}\n\n@media (min-width: 1024px) {\n .about:before {\n height: 110%;\n top: -10%;\n }\n}\n\n@media (min-width: 1280px) {\n .about {\n padding: 10vmin 15vmin 0;\n }\n}\n\n@media (min-width: 1920px) {\n .about {\n padding: 10vmin 15vmin 0 20vmin;\n }\n}\n\n.about .section-title {\n width: 100%;\n}\n\n.about__text {\n margin-bottom: 1.4rem;\n font-weight: 300;\n line-height: 1.4;\n}\n\n.about__text:last-of-type {\n margin-bottom: 0;\n}\n\n@media (min-width: 768px) {\n .about__main {\n width: 50%;\n max-width: 550px;\n display: inline-block;\n }\n}\n\n.about__passions {\n margin: 10vh auto;\n position: relative;\n left: 3.5vw;\n transform: rotate(-5deg);\n}\n\n@media (min-width: 768px) {\n .about__passions {\n max-width: 550px;\n margin: 0 auto auto;\n top: -2rem;\n transform: rotate(-6deg);\n }\n}\n\n@media (min-width: 1024px) {\n .about__passions {\n top: -5rem;\n transform: rotate(-7deg);\n }\n}\n\n.about__passions__text {\n margin: 1rem auto;\n font-family: Covered By Your Grace, monospace;\n font-size: 1.5rem;\n line-height: 1;\n position: relative;\n}\n\n@media (min-width: 768px) {\n .about__passions__text {\n margin: 1.3rem auto;\n }\n}\n\n@media (min-width: 1024px) {\n .about__passions__text {\n margin: 1.5rem auto;\n }\n}\n\n.about__passions__text--small {\n font-size: 1.4rem;\n}\n\n@media (min-width: 768px) {\n .about__passions__text--small {\n font-size: 1.6rem;\n }\n}\n\n@media (min-width: 1024px) {\n .about__passions__text--small {\n font-size: 1.8rem;\n }\n}\n\n.about__passions__text--medium {\n font-size: 1.8rem;\n}\n\n@media (min-width: 768px) {\n .about__passions__text--medium {\n font-size: 2rem;\n }\n}\n\n@media (min-width: 1024px) {\n .about__passions__text--medium {\n font-size: 2.3rem;\n }\n}\n\n.about__passions__text--large {\n font-size: 2.2rem;\n}\n\n@media (min-width: 768px) {\n .about__passions__text--large {\n font-size: 2.2rem;\n }\n}\n\n@media (min-width: 1024px) {\n .about__passions__text--large {\n font-size: 2.8rem;\n }\n\n .about__passions__text:first-of-type {\n left: -2rem;\n }\n\n .about__passions__text:nth-of-type(2) {\n left: -.5rem;\n }\n\n .about__passions__text:nth-of-type(3) {\n left: .5rem;\n }\n\n .about__passions__text:nth-of-type(4) {\n left: -1rem;\n }\n\n .about__passions__text:nth-of-type(5) {\n left: .5rem;\n }\n\n .about__passions__text:nth-of-type(6) {\n left: -.5rem;\n }\n}\n\n.work {\n padding: 10vmin;\n}\n\n@media (min-width: 768px) {\n .work {\n grid-column-gap: 1rem;\n grid-template-columns: repeat(4, 1fr);\n grid-template-areas: \"title title title title\"\n \"experience experience awards awards\"\n \"experience experience talks talks\"\n \"experience experience info info\";\n padding: 10vmin 10vmin 5vmin;\n display: grid;\n }\n}\n\n@media (min-width: 1280px) {\n .work {\n padding: 10vmin 15vmin 5vmin;\n }\n}\n\n@media (min-width: 1920px) {\n .work {\n padding: 10vmin 15vmin 5vmin 20vmin;\n }\n}\n\n.work .grid-title {\n grid-area: title;\n}\n\n.work .grid-experience {\n grid-area: experience;\n}\n\n.work .grid-awards {\n grid-area: awards;\n}\n\n.work .grid-talks {\n grid-area: talks;\n}\n\n.work .grid-info {\n grid-area: info;\n}\n\n.work__section {\n border: 4px dashed #143251;\n margin-bottom: 1rem;\n padding: 1rem;\n}\n\n.work__section__title {\n text-align: center;\n margin-bottom: 1rem;\n font-weight: 300;\n}\n\n.work__list--align-evenly {\n flex-flow: wrap;\n justify-content: space-evenly;\n display: flex;\n}\n\n@media (min-width: 1024px) {\n .work__list--align-evenly {\n grid-template-rows: 1fr 1fr;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n display: grid;\n }\n\n .work__list--align-evenly .work__item {\n margin: .5rem 0;\n }\n}\n\n.work__item {\n margin-bottom: 1rem;\n}\n\n@media (min-width: 1024px) {\n .work__item {\n margin-bottom: 1.5rem;\n }\n}\n\n.work__item:last-of-type {\n margin-bottom: 0;\n}\n\n.work__item__title, .work__item__text {\n margin-bottom: .1rem;\n}\n\n.work__item__text:last-of-type {\n margin-bottom: 0;\n}\n\n.contact {\n text-align: center;\n flex-flow: wrap;\n align-items: center;\n min-height: 50vh;\n padding: 10vmin;\n display: flex;\n position: relative;\n}\n\n.contact:before {\n content: \"\";\n z-index: -3;\n background-color: #eff6f6;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n@media (min-width: 768px) {\n .contact {\n text-align: left;\n grid-template-columns: repeat(2, 1fr);\n grid-template-areas: \"title img\"\n \"subtitle img\"\n \"list img\"\n \"list img\";\n min-height: auto;\n padding: 0 5vmin 0 10vmin;\n display: grid;\n }\n}\n\n@media (min-width: 1280px) {\n .contact {\n padding: 0 5vmin 0 15vmin;\n }\n}\n\n@media (min-width: 1920px) {\n .contact {\n padding: 0 5vmin 0 20vmin;\n }\n}\n\n@media (min-width: 768px) {\n .contact .section-title {\n margin-top: 2rem;\n }\n}\n\n.contact .grid-title {\n grid-area: title;\n}\n\n.contact .grid-subtitle {\n grid-area: subtitle;\n}\n\n.contact .grid-list {\n grid-area: list;\n}\n\n.contact .grid-img {\n grid-area: img;\n}\n\n.contact .section-title {\n width: 100%;\n margin: 0;\n}\n\n.contact .section-reach-out {\n width: 100%;\n font-size: .85rem;\n}\n\n.contact__list {\n flex-flow: column;\n align-items: flex-start;\n width: 80%;\n margin: auto;\n display: flex;\n}\n\n@media (min-width: 768px) {\n .contact__list {\n margin: 0 auto auto 0;\n }\n}\n\n.contact__item {\n margin: .5rem auto;\n}\n\n@media (min-width: 768px) {\n .contact__item {\n margin: .5rem 0;\n }\n}\n\n.contact__img-container {\n text-align: center;\n z-index: -3;\n display: none;\n}\n\n@media (min-width: 768px) {\n .contact__img-container {\n background-color: #f8f8fa;\n width: 45vw;\n height: 400px;\n display: block;\n position: relative;\n right: -2px;\n }\n}\n\n@media (min-width: 1024px) {\n .contact__img-container {\n width: 46.3vw;\n }\n}\n\n@media (min-width: 1280px) {\n .contact__img-container {\n width: 47.1vw;\n }\n}\n\n@media (min-width: 1920px) {\n .contact__img-container {\n width: 46.8vw;\n }\n}\n\n.contact__img-container img {\n object-fit: cover;\n object-position: center;\n z-index: 1;\n border: 4px dashed #143251;\n width: 120px;\n height: 120px;\n margin-left: auto;\n}\n\n@media (min-width: 768px) {\n .contact__img-container img {\n border: none;\n width: 100%;\n height: 100%;\n }\n}\n\n.footer {\n z-index: 100;\n color: #fafafa;\n background: linear-gradient(to right, #288b8f, #3fd9bf);\n padding: 1rem 5vmin;\n}\n\n.footer__credits {\n color: #fafafa;\n text-align: right;\n font-size: .8rem;\n font-weight: 700;\n}\n\n.footer__quote {\n text-align: center;\n max-width: 530px;\n margin: 1rem auto;\n font-size: .9rem;\n font-style: italic;\n}\n\n.footer__quote a {\n color: #fafafa;\n}\n\n/*# sourceMappingURL=index.5b120eaa.css.map */\n","@import 'config/reset';\n@import 'config/variables';\n@import 'config/fonts';\n\n@import 'components/body';\n@import 'components/link';\n\n@import 'components/header';\n@import 'components/about';\n@import 'components/work';\n@import 'components/contact';\n@import 'components/footer';\n","*,\n*:after,\n*:before {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nul,\nli {\n padding: 0;\n margin: 0;\n}\n\nul {\n list-style: none;\n}\n\nimg {\n max-width: 100%;\n}\n","body {\n font-size: 16px;\n font-family: 'Futura', 'Hind', sans-serif;\n color: $color-main;\n}\n\nstrong {\n font-weight: bold;\n}\n\nem {\n font-style: italic;\n}\n","$black: #1b1b1b;\n$gray: #555555;\n$white: #fafafa;\n\n$off-black: #0b0b0b;\n$off-white: #F4F0E0;\n\n$yellow-main: #fcba03;\n$yellow-alt: #cfd443;\n$yellow-light: #f4eacf;\n\n$purple-main: #511450;\n$purple-alt: #7543E4;\n$purple-light: #F2EFF6;\n$purple-footer-gradient-start: #60288f;\n$purple-footer-gradient-end: #723fd9;\n\n$green-main: adjust-hue($purple-main, 230deg);\n$green-alt: adjust-hue($purple-alt, 230deg);\n$green-light: adjust-hue($purple-light, 230deg);\n$green-footer-gradient-start: adjust-hue($purple-footer-gradient-start, 230deg);\n$green-footer-gradient-end: adjust-hue($purple-footer-gradient-end, 230deg);\n\n$teal-main: adjust-hue($purple-main, 270deg);\n$teal-alt: adjust-hue($purple-alt, 270deg);\n$teal-light: adjust-hue($purple-light, 270deg);\n$teal-footer-gradient-start: adjust-hue($purple-footer-gradient-start, 270deg);\n$teal-footer-gradient-end: adjust-hue($purple-footer-gradient-end, 270deg);\n\n$blue-main: adjust-hue($purple-main, 290deg);\n$blue-alt: adjust-hue($purple-alt, 290deg);\n$blue-light: adjust-hue($purple-light, 290deg);\n$blue-footer-gradient-start: adjust-hue($purple-footer-gradient-start, 290deg);\n$blue-footer-gradient-end: adjust-hue($purple-footer-gradient-end, 290deg);\n\n$pink-main: adjust-hue($purple-main, 70deg);\n$pink-alt: adjust-hue($purple-alt, 80deg);\n$pink-light: adjust-hue($purple-light, 80deg);\n$pink-footer-gradient-start: adjust-hue($purple-footer-gradient-start, 80deg);\n$pink-footer-gradient-end: adjust-hue($purple-footer-gradient-end, 80deg);\n\n$color-main: $teal-main;\n$color-alt: $teal-alt;\n$color-light: $teal-light;\n$color-footer-gradient-start: $teal-footer-gradient-start;\n$color-footer-gradient-end: $teal-footer-gradient-end;\n$gradient: linear-gradient(to bottom right, $color-main, $color-alt);\n$footer-gradient: linear-gradient(to right, $color-footer-gradient-start, $color-footer-gradient-end);\n\n$tablet-portrait-width: 768px;\n$tablet-landscape-width: 1024px;\n$laptop-width: 1280px;\n$fullhd-width: 1920px;\n\n$frame-border-width: 5vmin;\n$padding-small: $frame-border-width * 2;\n$padding-medium: $frame-border-width * 3;\n$padding-large: $frame-border-width * 4;\n","html {\n scroll-behavior: smooth;\n max-width: 100vw;\n overflow-x: hidden;\n}\n\n.body {\n background: linear-gradient(to bottom right, $white, darken($white, 3%));\n max-width: 100vw;\n overflow-x: hidden;\n font-weight: 300;\n\n // Hack to fix iOS safari & firefox bottom position bug\n .frame {\n position: fixed;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: -1;\n \n &:before {\n content: '';\n width: 100%;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n z-index: -2;\n border-style: solid;\n border-image-outset: 1;\n border-image-repeat: stretch;\n border-image-slice: 1;\n border-image-source: linear-gradient(to bottom right, #{$color-main}, #{$color-alt});\n border-image-width: $frame-border-width;\n }\n\n //border-image fallback\n &:after {\n content: '';\n width: 100%;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n z-index: -4;\n border: calc($frame-border-width / 2) dashed $color-alt;\n }\n }\n \n}\n\n.section-title {\n margin: 0 0 1.5rem 0;\n}\n","a {\n color: $color-main;\n text-decoration: none;\n position: relative;\n transition: all .1s linear;\n z-index: 1;\n\n &:hover,\n &:focus,\n &:active,\n &:visited {\n color: $color-main;\n }\n\n &:hover {\n color: $color-main;\n\n &:before {\n opacity: 1;\n }\n }\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: -1px;\n width: 100%;\n background-color: lighten($color-alt, 25%);\n transition: all .4s ease;\n z-index: -4;\n }\n\n &:after {\n height: .25rem;\n }\n\n &:before {\n opacity: 0;\n height: 110%;\n }\n}\n",".header {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n\n @media (min-width: $tablet-portrait-width) {\n padding: 0 $padding-small;\n min-height: 50vh;\n display: flex;\n flex-flow: row wrap;\n align-content: flex-start;\n }\n\n @media (min-width: $tablet-landscape-width) {\n min-height: 100vh;\n padding: $padding-small;\n }\n\n @media (min-width: $laptop-width) {\n display: grid;\n padding: $padding-small $padding-medium;\n grid-template-areas: \"hello . . pictures\"\n \"navigation . . .\";\n }\n\n @media (min-width: $fullhd-width) {\n padding: $padding-small $padding-large;\n }\n\n &__hello {\n grid-area: hello;\n margin: 10vh auto 0 auto;\n\n @media (min-width: $tablet-portrait-width) {\n margin: 10vh 0 0 0;\n height: auto;\n width: 50%;\n }\n }\n\n &__title {\n font-size: 1.4rem;\n line-height: 140%;\n font-weight: normal;\n grid-area: title;\n\n @media (min-width: $tablet-portrait-width) {\n font-size: 2rem;\n }\n\n @media (min-width: $tablet-landscape-width) {\n font-size: 2.5rem;\n }\n\n @media (min-width: $laptop-width) {\n font-size: 3rem;\n }\n\n &__name {\n display: block;\n font-weight: bold;\n }\n }\n\n &__subtitle {\n margin: .5rem auto 2rem auto;\n text-align: left;\n\n @media (min-width: $tablet-portrait-width) {\n font-size: 1.1rem;\n }\n\n @media (min-width: $tablet-landscape-width) {\n font-size: 1.2rem;\n }\n }\n\n &__pictures {\n grid-area: pictures;\n width: 200px;\n height: 200px;\n margin: 5vmin auto auto auto;\n position: relative;\n left: 10%;\n\n @media (min-width: $tablet-portrait-width) {\n margin: 10vh auto 0 auto;\n }\n\n @media (min-width: $laptop-width) {\n width: 250px;\n height: 250px;\n margin: 10vh 0 0 0;\n left: 0;\n right: 0;\n }\n\n &__item {\n width: 100px;\n height: 100px;\n position: absolute;\n top: calc(50% - 50px);\n left: calc(50% - 50px);\n\n img {\n object-fit: cover;\n object-position: center;\n width: 100%;\n height: 100%;\n transition: all .08s ease;\n border: 4px dashed $color-main;\n }\n\n @media (min-width: $tablet-portrait-width) {\n width: 150px;\n height: 150px;\n top: calc(50% - 75px);\n left: calc(50% - 75px);\n\n img:hover {\n border: 8px dashed $color-main;\n }\n }\n\n @media (min-width: $laptop-width) {\n width: 200px;\n height: 200px;\n top: calc(50% - 100px);\n left: calc(50% - 100px);\n }\n\n &:nth-of-type(1) {\n transform: rotate(10deg);\n top: 50%;\n left: -10%;\n z-index: 10;\n\n @media (min-width: $tablet-portrait-width) {\n top: 80%;\n left: -40%;\n img:hover {\n transform: scale(1.4) translate(10%);\n }\n }\n }\n\n &:nth-of-type(2) {\n transform: rotate(-6deg);\n top: 20%;\n left: 20%;\n z-index: 9;\n\n @media (min-width: $tablet-portrait-width) {\n top: 40%;\n img:hover {\n transform: scale(1.4) translate(15%);\n }\n }\n }\n\n &:nth-of-type(3) {\n transform: rotate(-2deg);\n top: 5%;\n left: -15%;\n z-index: 8;\n\n @media (min-width: $tablet-portrait-width) {\n left: -45%;\n img:hover {\n transform: scale(1.4) translate(-15%);\n }\n }\n }\n\n &:nth-of-type(4) {\n transform: rotate(10deg);\n top: -10%;\n left: 30%;\n z-index: 7;\n\n @media (min-width: $tablet-portrait-width) {\n left: 20%;\n img:hover {\n transform: scale(1.4) translate(15%, -15%);\n }\n }\n }\n\n }\n }\n}\n\n.nav {\n grid-area: navigation;\n margin: 0 auto $padding-small auto;\n\n @media (min-width: $tablet-portrait-width) {\n margin: 0 auto 0 0;\n width: 50%;\n font-size: 1.3rem;\n }\n\n @media (min-width: $tablet-landscape-width) {\n font-size: 1.4rem;\n margin-top: 20vh;\n }\n\n @media (min-width: $laptop-width) {\n font-size: 1.5rem;\n }\n\n &__list {\n display: flex;\n\n @media (min-width: $tablet-portrait-width) {\n flex-flow: column;\n }\n }\n\n &__item {\n margin: 0 1rem;\n\n @media (min-width: $tablet-portrait-width) {\n margin: .5rem auto .5rem 0;\n }\n }\n}",".about {\n padding: $padding-small;\n position: relative;\n\n &:before {\n position: absolute;\n top: -10%;\n left: -10%;\n width: 120%;\n height: 110%;\n content: '';\n background-color: $color-light;\n z-index: -5;\n transform: rotate(-3deg);\n }\n\n @media (min-width: $tablet-portrait-width) {\n padding: $padding-small $padding-small 0 $padding-small;\n display: flex;\n flex-flow: row wrap;\n align-items: flex-start;\n\n &:before {\n top: 5%;\n height: 100%;\n }\n }\n\n @media (min-width: $tablet-landscape-width) {\n &:before {\n top: -10%;\n height: 110%;\n }\n }\n\n @media (min-width: $laptop-width) {\n padding: $padding-small $padding-medium 0 $padding-medium;\n }\n\n @media (min-width: $fullhd-width) {\n padding: $padding-small $padding-medium 0 $padding-large;\n }\n\n .section-title {\n width: 100%;\n }\n\n &__text {\n line-height: 1.4;\n margin-bottom: 1.4rem;\n font-weight: 300;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n\n &__main {\n @media (min-width: $tablet-portrait-width) {\n width: 50%;\n max-width: 550px;\n display: inline-block;\n }\n }\n\n &__passions {\n margin: 10vh auto;\n position: relative;\n left: 3.5vw;\n transform: rotate(-5deg);\n\n @media (min-width: $tablet-portrait-width) {\n top: -2rem;\n margin: 0 auto auto auto;\n max-width: 550px;\n transform: rotate(-6deg);\n }\n\n @media (min-width: $tablet-landscape-width) {\n top: -5rem;\n transform: rotate(-7deg);\n }\n\n &__text {\n font-family: 'Covered By Your Grace', monospace;\n font-size: 1.5rem;\n line-height: 1;\n margin: 1rem auto;\n position: relative;\n\n @media (min-width: $tablet-portrait-width) {\n margin: 1.3rem auto;\n }\n\n @media (min-width: $tablet-landscape-width) {\n margin: 1.5rem auto;\n }\n\n &--small {\n font-size: 1.4rem;\n\n @media (min-width: $tablet-portrait-width) {\n font-size: 1.6rem;\n }\n\n @media (min-width: $tablet-landscape-width) {\n font-size: 1.8rem;\n }\n }\n\n &--medium {\n font-size: 1.8rem;\n\n @media (min-width: $tablet-portrait-width) {\n font-size: 2rem;\n }\n\n @media (min-width: $tablet-landscape-width) {\n font-size: 2.3rem;\n }\n }\n\n &--large {\n font-size: 2.2rem;\n\n @media (min-width: $tablet-portrait-width) {\n font-size: 2.2rem;\n }\n\n @media (min-width: $tablet-landscape-width) {\n font-size: 2.8rem;\n }\n }\n\n @media (min-width: $tablet-landscape-width) {\n &:nth-of-type(1) {\n left: -2rem;\n }\n\n &:nth-of-type(2) {\n left: -.5rem;\n }\n\n &:nth-of-type(3) {\n left: .5rem;\n }\n\n &:nth-of-type(4) {\n left: -1rem;\n }\n\n &:nth-of-type(5) {\n left: .5rem;\n }\n\n &:nth-of-type(6) {\n left: -.5rem;\n }\n }\n }\n }\n}\n",".work {\n padding: $padding-small;\n\n @media (min-width: $tablet-portrait-width) {\n padding: $padding-small $padding-small $frame-border-width $padding-small;\n display: grid;\n grid-template-areas: \"title title title title\"\n \"experience experience awards awards\"\n \"experience experience talks talks\"\n \"experience experience info info\";\n grid-template-columns: repeat(4, 1fr);\n grid-column-gap: 1rem;\n }\n\n @media (min-width: $laptop-width) {\n padding: $padding-small $padding-medium $frame-border-width $padding-medium;\n }\n\n @media (min-width: $fullhd-width) {\n padding: $padding-small $padding-medium $frame-border-width $padding-large;\n }\n\n .grid-title {\n grid-area: title;\n }\n\n .grid-experience {\n grid-area: experience;\n }\n\n .grid-awards {\n grid-area: awards;\n }\n\n .grid-talks {\n grid-area: talks;\n }\n\n .grid-info {\n grid-area: info;\n }\n\n &__section {\n border: 4px dashed $color-main;\n padding: 1rem;\n margin-bottom: 1rem;\n\n &__title {\n font-weight: 300;\n margin-bottom: 1rem;\n text-align: center;\n }\n }\n\n &__list {\n &--align-evenly {\n display: flex;\n flex-flow: row wrap;\n justify-content: space-evenly;\n\n @media (min-width: $tablet-landscape-width) {\n display: grid;\n grid-template-rows: 1fr 1fr;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n\n .work__item {\n margin: .5rem 0;\n }\n }\n }\n }\n\n &__item {\n margin-bottom: 1rem;\n\n @media (min-width: $tablet-landscape-width) {\n margin-bottom: 1.5rem;\n }\n\n &:last-of-type {\n margin-bottom: 0;\n }\n\n &__title {\n margin-bottom: .1rem;\n }\n\n &__text {\n margin-bottom: .1rem;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n }\n}\n",".contact {\n padding: $padding-small;\n text-align: center;\n display: flex;\n flex-flow: row wrap;\n align-items: center;\n min-height: 50vh;\n position: relative;\n\n &:before {\n position: absolute;\n top: 0;\n left: 0;\n content: '';\n width: 100%;\n height: 100%;\n background-color: $color-light;\n z-index: -3;\n }\n\n @media (min-width: $tablet-portrait-width) {\n padding: 0 $frame-border-width 0 $padding-small;\n min-height: auto;\n display: grid;\n grid-template-areas: \"title img\"\n \"subtitle img\"\n \"list img\"\n \"list img\";\n grid-template-columns: repeat(2, 1fr);\n text-align: left;\n }\n\n @media (min-width: $laptop-width) {\n padding: 0 $frame-border-width 0 $padding-medium;\n }\n\n @media (min-width: $fullhd-width) {\n padding: 0 $frame-border-width 0 $padding-large;\n }\n\n .section-title {\n @media (min-width: $tablet-portrait-width) {\n margin-top: 2rem;\n }\n }\n\n .grid-title {\n grid-area: title;\n }\n\n .grid-subtitle {\n grid-area: subtitle;\n }\n\n .grid-list {\n grid-area: list;\n }\n\n .grid-img {\n grid-area: img;\n }\n\n .section-title {\n width: 100%;\n margin: 0;\n }\n\n .section-reach-out {\n font-size: 0.85rem;\n width: 100%;\n }\n\n &__list {\n display: flex;\n flex-flow: column;\n align-items: flex-start;\n width: 80%;\n margin: auto;\n\n @media (min-width: $tablet-portrait-width) {\n margin: 0 auto auto 0;\n }\n }\n\n &__item {\n margin: .5rem auto;\n\n @media (min-width: $tablet-portrait-width) {\n margin: .5rem 0;\n }\n }\n\n &__img-container {\n text-align: center;\n z-index: -3;\n display: none;\n\n @media (min-width: $tablet-portrait-width) {\n display: block;\n background-color: #F8F8FA;\n position: relative;\n right: -2px;\n height: 400px;\n width: 45vw;\n }\n\n @media (min-width: $tablet-landscape-width) {\n width: 46.3vw;\n }\n\n @media (min-width: $laptop-width) {\n width: 47.1vw;\n }\n\n @media (min-width: $fullhd-width) {\n width: 46.8vw;\n }\n\n img {\n border: 4px dashed $color-main;\n width: 120px;\n height: 120px;\n object-fit: cover;\n object-position: center;\n margin-left: auto;\n z-index: 1;\n\n @media (min-width: $tablet-portrait-width) {\n width: 100%;\n height: 100%;\n border: none;\n }\n }\n }\n}\n",".footer {\n background-color: $color-alt;\n background: $footer-gradient;\n padding: 1rem 5vmin;\n z-index: 100;\n color: #fafafa;\n\n &__credits {\n font-weight: 700;\n font-size: .8rem;\n color: #fafafa;\n text-align: right;\n }\n\n &__quote {\n margin: 1rem auto;\n text-align: center;\n font-size: .9rem;\n max-width: 530px;\n font-style: italic;\n\n a {\n color: #fafafa;\n }\n }\n}\n"],"names":[],"version":3,"file":"index.5b120eaa.css.map"}