1 line
8.7 KiB
CSS
1 line
8.7 KiB
CSS
.article-card,a{text-decoration:none}a,strong{font-weight:500}#greetings::first-letter,.capitalize,button{text-transform:capitalize}.hide,span.ripple{pointer-events:none}.article-card,button{-webkit-tap-highlight-color:transparent}#homepage>*,#settings_page>*,.article>*{grid-column:2}.article-card .article-preview,p{line-height:1.5}.article-heading,.article-preview{-webkit-line-clamp:2;overflow:hidden}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}:root{font-size:clamp(16px,1.2vmax,40px)}body{--accent-color:#2e66ce;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f4f4f4;--error-color:#E53935;background:rgba(var(--foreground-color),1);color:rgba(var(--text-color),1);background-size:cover}body[data-theme=dark]{--accent-color:#7eabff;--text-color:220,220,220;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#222;--hue:255;--saturation:39%;--lightness:70%}a{color:var(--accent-color)}.dark-text{color:#111}.article-para,.article-preview,p{color:rgba(var(--text-color),.9)}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.1rem}h5{font-size:.85rem}p{font-size:1rem;max-width:60ch}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1rem}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}.flex{display:flex}.copy-row,.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1rem}.align-center{align-items:center}.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0}.hide-completely{display:none!important}.breakable{word-break:break-all}.separator{padding:.1rem}.no-transformations{transform:none!important}.icon{width:1.2rem;height:1.2rem;stroke:rgba(var(--text-color),1);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;fill:none;overflow:visible}span.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2)}#homepage_header,.interact,button{position:relative}.article-card.placeholder,button{background:rgba(var(--text-color),.1)}.interact{overflow:hidden;cursor:pointer}.copy-row{grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0!important;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.sign-in-box,.sign-in-box form,.sign-in-box sm-panel{width:100%}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;font-family:Poppins,sans-serif}.sign-in-box h3,.sign-in-box h4,.sign-in-box h5{font-weight:500}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}.primary-btn{padding:.6rem 1.2rem!important;background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#sign_in_popup::part(popup-body){padding:0}#sign_in_popup #sign_in .left{background-size:60%}#right_drawer,.header,.sign-in-box{background:rgba(var(--foreground-color),1)}.sign-in-box{margin:0 -2rem;z-index:1;justify-self:center;padding:1.5rem;border-radius:.5rem}.sign-in-box sm-input{text-align:left}.sign-in-box sm-tab-header{margin:0;background:0 0;align-self:flex-start}.sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}.sign-in-box sm-tab::part(tab){padding:.4rem 0}.sign-in-box sm-tab-panels{margin-top:3rem}.sign-in-box h2{margin-bottom:.5rem}.sign-in-box h4{margin-bottom:1.5rem}.sign-in-box h5{opacity:.8}.sign-in-box .copy-row h4{max-width:34ch}.sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}#homepage_header,.header,.sign-in-box p{margin-bottom:1.5rem}.sign-in-box button{width:auto;margin-top:1rem;padding:.6rem 1.6rem}.sign-in-box p{max-width:35ch;margin-top:.5rem}.sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#homepage,#settings_page{display:grid;grid-template-columns:1.5rem 1fr 1.5rem}#homepage main,#settings_page main{gap:2rem;display:grid}#homepage_header{gap:1.5rem;padding:1rem 0}#homepage_header img{height:2.5rem}#homepage_header h3{font-family:"Playfair display",serif;font-size:1.2rem}#user_icon,.close{cursor:pointer;background:rgba(var(--text-color),.06);height:2.6rem;width:2.6rem;padding:.7rem;border-radius:50%}#right_drawer{position:fixed;overflow-y:auto;width:100%;right:0;top:0;bottom:0;padding:1.5rem;z-index:10;transition:transform .3s,opacity .3s;transform:translate(100%,0)}#right_drawer section{display:grid;gap:.3rem;grid-template-columns:1fr auto}#right_drawer section:first-of-type{margin-top:1.5rem}#right_drawer section:not(:last-of-type){margin-bottom:1.5rem}#right_drawer section sm-switch{grid-column:2/3;grid-row:1/3}#right_drawer section h4,#right_drawer section p{grid-column:1/2}.close{height:2rem;width:2rem;padding:.6rem}.header{position:sticky;top:0;z-index:1;padding:1rem 0}#trending header h4{padding:0 .6rem;color:var(--error-color);border-left:solid .2em var(--error-color)}#latest_articles_container,#trending_articles_container{gap:3rem 2rem;grid-template-columns:repeat(auto-fill,minmax(30ch,1fr));margin-bottom:4rem}.article-card{position:relative;overflow:hidden;display:grid;gap:0 1rem;cursor:pointer;align-self:flex-start;color:inherit}.article-card .article-details{margin-bottom:.3rem}.article-card .article-heading{font-size:1.3em;margin-bottom:.4em}.article-card h5:last-of-type{margin-top:.5em}.article-card.placeholder{animation:pulsate 1s alternate infinite;height:14em;border-radius:.5em}.article-card.placeholder:nth-of-type(2){animation-delay:.1s}.article-card.placeholder:nth-of-type(3){animation-delay:.2s}.article-card.placeholder:nth-of-type(4){animation-delay:.3s}.article-card.placeholder:nth-of-type(5){animation-delay:.4s}.article-card.placeholder:nth-of-type(6){animation-delay:.5s}@keyframes pulsate{from{opacity:.4}to{opacity:1}}#greetings_section{margin-bottom:3rem}#greetings_section sm-input{margin-top:1rem;width:min(100%,24rem)}#greetings_section sm-input .icon{stroke:rgba(var(--text-color),.6);height:1rem;width:1rem}#greeting_illustration svg{width:4rem}#greetings{text-transform:lowercase}.article{display:grid;grid-template-columns:1.5rem 1fr 1.5rem}.full-bleed{width:100%;grid-column:1/4}.article-details{font-weight:400;opacity:.9;margin-bottom:.3rem}.article-heading{font-size:1.5em;font-family:Lora,serif;margin-bottom:.8rem;font-weight:700;display:-webkit-box;-webkit-box-orient:vertical}.article-preview{display:-webkit-box;-webkit-box-orient:vertical;font-size:1.1em}.para-heading{font-family:Lora,serif;margin-bottom:.5em;font-weight:600;font-size:1.3em;margin-top:1rem}.article-para{line-height:1.8;font-size:1.1em}.article-para:not(:first-of-type){margin-top:1.5rem}.para-heading+.article-para{margin-top:0}.article-para+.para-heading{margin-top:2rem}.article-image{object-position:top;object-fit:cover;border-radius:1rem;height:16rem;width:100%;margin-bottom:2rem;box-shadow:0 .4rem 1rem rgba(var(--text-color),.2)}#latest_articles h4{width:100%;display:flex;position:relative;align-items:center;white-space:nowrap}#latest_articles h4::after{content:"";height:.2rem;background:rgba(var(--text-color),.9);width:min(4rem,100%);margin-left:1rem}#article_page{padding-bottom:10rem}#article_page .article-heading{-webkit-line-clamp:3}.article-para,.article-preview{font-weight:400}@media all and (max-width:800px){#sign_in{grid-template-rows:1fr 1fr;max-height:90vh;background:url(sign-in-back.svg) center 6rem no-repeat;background-size:60%}#sign_in .left{border-radius:.5rem .5rem 0 0}}@media screen and (min-width:800px){.hide-on-desktop{display:none}#sign_in{grid-template-columns:28rem 24rem;height:max(28rem,60vh)}#sign_in .left{background:url(sign-in-back.svg) center no-repeat;border-radius:.5rem 0 0 .5rem}#sign_in .sign-in-box{padding-top:2rem}.article{grid-template-columns:1fr min(65ch,100%) 1fr}.article-heading{font-size:1.5em}.para-heading{font-size:1.3em}.article-para,.article-preview{font-size:1.15em;white-space:line}#right_drawer_container{position:relative}#right_drawer{position:absolute;top:calc(100% + .5rem);width:24rem;max-height:80vh;bottom:auto;border-radius:.5rem;box-shadow:0 .5rem 1rem #00016;border:rgba(var(--text-color),.1) solid;transform:translate(0,-1.5rem)}}@media screen and (min-width:1280px){#homepage,#settings_page{grid-template-columns:1fr 80vw 1fr}#homepage main,#settings_page main{gap:4rem}} |