-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.min.css
1 lines (1 loc) · 4.05 KB
/
style.min.css
1
.share__panel .share__btn,.share__panel .share__menu a{transition:.25s ease-in-out}:root{--clr-1:#48556a;--clr-2:#67788f;--clr-3:#ecf2f8;--clr-4:#ffffff;--a:#48556a;--b:#6d7f97;--c:#9eafc2;--d:#ecf2f8}*,::after,::before{box-sizing:border-box;list-style:none;margin:0;padding:0;text-decoration:none}body{background:var(--clr-3);color:var(--clr-2);font-family:Manrope,sans-serif;font-size:.8125rem}.d--none{display:none!important}.d--block{display:block!important}.d--flex{display:flex!important}.container{margin:0 auto;width:90%}.main{align-items:center;display:flex;justify-content:center;min-height:100vh;padding:4rem 0}.avatar,.secondary-content{align-items:center;display:flex}.card{background:var(--clr-4);border-radius:1rem;box-shadow:0 16px 32px 0 #a3afc1;max-width:340px}.share__btn:hover,.share__panel,.share__panel .share__btn:hover{background:var(--clr-1)}.card__header img{border-radius:1rem 1rem 0 0;object-fit:cover;width:100%;height:100%}.primary-content{padding:2rem}.primary-content h1{color:var(--clr-1);font-size:clamp(1rem, 2.625vw, 1.325rem);line-height:1.5;max-width:32ch}.primary-content p{font-weight:500;line-height:1.5;margin-top:1rem;max-width:50ch}.secondary-content{border-radius:0 0 1rem 1rem;justify-content:space-between;position:relative;padding:0 2rem 1rem}.avatar{gap:1rem}.avatar__img{border-radius:50%;height:3rem;width:3rem}.avatar__date,.avatar__name{display:block}.attribution a,.avatar__name{color:var(--clr-1);font-weight:700}.avatar__date{color:var(--clr-2);margin-top:.25rem}.share__btn{cursor:pointer;display:inline-block;border:1px solid transparent;border-radius:50%;width:1.875rem;height:1.875rem}.share__btn:focus-within{outline:2px solid var(--clr-1)}.share__btn[aria-expanded=true]{background:var(--clr-2)}.share__btn:hover path,.share__btn[aria-expanded=true] path{fill:var(--clr-4)}.share__panel .share__btn path,.share__panel .share__menu a:hover path{fill:var(--clr-3)}.share__panel{align-items:center;display:flex;justify-content:space-between;position:absolute;left:0;bottom:0;right:0;border-radius:0 0 1rem 1rem;padding:1.5rem 2rem}.share__panel.close{animation:.4s ease-in-out forwards closeSharePanel}.share__panel.open{animation:.4s ease-in-out forwards openSharePanel}.share__panel .share__heading{color:var(--clr-3);font-size:.8125rem;font-weight:500;letter-spacing:.25rem;text-transform:uppercase}.share__panel .share__menu{display:flex;gap:clamp(.5rem,3vw + .5rem,1rem)}.share__panel .share__menu a:focus-within{outline:2px solid var(--clr-3);outline-offset:2px}.share__panel .share__btn{background:var(--clr-2)}.share__panel .share__btn:focus-within,.share__panel .share__btn:hover{outline:2px solid var(--clr-3)}@keyframes closeSharePanel{0%{transform:scale(1) translateY(0)}100%{transform:scale(0) translateY(4rem)}}@keyframes openSharePanel{0%{transform:scale(0) translateY(-4rem)}100%{transform:scale(1) translateY(0)}}@media (min-width:62rem){.card{display:flex;max-width:50rem}.card__header{width:40%}.card__header img{border-radius:1rem 0 0 1rem}.card__body{width:60%!important}.primary-content{padding:clamp(2rem,5vw,3rem);padding-bottom:2rem}.secondary-content{padding:clamp(1rem,3vw,2rem) clamp(2rem,5vw,3rem);padding-top:0}.share__panel{border-radius:.75rem;box-shadow:0 4px 8px 0 #a3afc1;left:calc(100% - 25% - 3rem - 1rem);justify-content:center;gap:1rem;bottom:6rem;padding:1rem;width:50%}.share__panel.open{animation:.4s ease-in-out forwards openSharePanel}.share__panel.close{animation:.4s ease-in-out forwards closeSharePanel}.share__panel .share__btn{display:none}.share__panel::after{background:var(--clr-1);content:"";position:absolute;left:50%;top:100%;width:1rem;height:1rem;transform:translate(-50%,-.5rem) rotate(45deg)}@keyframes closeSharePanel{0%{bottom:6rem;opacity:1}100%{bottom:7.5rem;opacity:0}}@keyframes openSharePanel{0%{bottom:7.5rem;opacity:0}100%{bottom:6rem;opacity:1}}}.attribution{color:var(--clr-1);padding:1rem 0;text-align:center}.attribution a:hover{text-decoration:underline}@media (prefers-reduced-motion:reduce){.share__panel.close,.share__panel.open{animation:none}.share__panel .share__btn,.share__panel .share__menu a{transition:none}}