cc/template/css/main.min.css

*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Inter",sans-serif}:root{font-size:clamp(1rem, 1.2vmax, 1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:var(--foreground-color)}body,body *{--accent-color: rgb(0, 156, 78);--text-color: 36, 36, 36;--background-color: 248, 248, 248;--foreground-color: rgb(255, 255, 255);--danger-color: rgb(255, 75, 75);--like-color: #e91e63;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: rgb(14, 230, 122);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(24, 24, 24);--danger-color: rgb(255, 106, 106)}body[data-theme=dark] sm-popup::part(popup){background-color:var(--foreground-color)}p{font-size:.9rem;max-width:70ch;color:rgba(var(--text-color), 0.8)}p *{font-family:inherit}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);-ms-flex-negative:0;flex-shrink:0}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:.9rem;font-weight:500}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:active,.button:active,sm-button:not([disabled]):active,.interact:active{-webkit-transform:scale(0.9);transform:scale(0.9)}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem}#sign_in,#sign_up{-webkit-box-align:center;-ms-flex-align:center;align-items:center}#sign_in sm-form,#sign_up sm-form{margin:2rem 0;--gap: 1rem}#sign_in header,#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}.card{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.04)}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}#main_header{display:grid;gap:1rem;position:sticky;top:0;padding:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto auto;background-color:var(--foreground-color);z-index:1}.logo{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:500}.main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}article{position:relative;padding-bottom:3rem;gap:1rem}article::after{justify-self:center;position:absolute;bottom:0;content:"";width:4rem;height:.3rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.5)}article p{font-family:"noto serif",serif;line-height:1.8;font-size:1rem}.page-layout{display:grid;grid-template-columns:1rem minmax(0, 1fr) 1rem}.page-layout>*{grid-column:2/3}.hero-section{display:grid;grid-template-columns:minmax(0, 1fr);margin-bottom:1.5rem;padding-top:1.5rem}img{-o-object-fit:cover;object-fit:cover;width:100%;height:40vh}time{font-size:.8rem}h1{font-size:1.4rem;margin-bottom:1rem}h3:not(:first-of-type){margin-top:2rem}.full-bleed{grid-column:1/-1}.quote-template{position:relative;padding:1rem;margin:1rem 0;border-radius:.2rem;border:solid thin rgba(var(--text-color), 0.3);-webkit-box-shadow:.3rem .5rem 0 .1rem rgba(var(--text-color), 0.8);box-shadow:.3rem .5rem 0 .1rem rgba(var(--text-color), 0.8);overflow:hidden;justify-self:center;padding-left:1.3rem}.quote-template figcaption{margin-top:.5rem;color:rgba(var(--text-color), 0.8);font-size:.8rem;margin-left:auto}.upvote{display:grid;grid-template-columns:auto 1fr;position:relative;padding:.8rem;border-radius:2rem;background-color:var(--foreground-color);-webkit-box-shadow:0 .5rem 1rem rgba(0,0,0,.1);box-shadow:0 .5rem 1rem rgba(0,0,0,.1);border:solid rgba(var(--text-color), 0.2) thin}.upvote>*{pointer-events:none}.upvote:active{-webkit-transform:none;transform:none}.upvote:active .icon{-webkit-transform:scale(0.7);transform:scale(0.7)}.upvote.liked{background-color:var(--like-color);color:#fff}.upvote.liked .icon{fill:#fff}.expanding-heart,.ring{grid-area:1/1}.ring{border:.1rem solid var(--like-color);border-radius:50%;height:.5rem;width:.5rem;justify-self:center}.upvote .icon{grid-area:1/1;fill:var(--like-color);height:1.5rem;width:1.5rem;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s, -webkit-transform .2s}.temp-count,#like_count{grid-area:1/2}.temp-count:not(:empty),#like_count:not(:empty){margin-left:.4rem}footer{padding:3rem 1.5rem;justify-items:center}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.popup__header{padding:1rem 1.5rem 0 1rem}.page-layout{grid-template-columns:1fr 60ch 1fr}h1{font-size:2rem}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}}.hide-completely{display:none}