diff --git a/css/laptop and mobile.png b/css/laptop and mobile.png
new file mode 100644
index 0000000..cacd19b
Binary files /dev/null and b/css/laptop and mobile.png differ
diff --git a/css/main.css b/css/main.css
index 2f15b7c..ff06e36 100644
--- a/css/main.css
+++ b/css/main.css
@@ -182,6 +182,147 @@ span.ripple {
cursor: pointer;
}
+.copy-row {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ gap: 0.5rem;
+ width: auto;
+}
+.copy-row h4 {
+ margin-bottom: 0 !important;
+ font-weight: 400;
+}
+.copy-row .icon {
+ cursor: pointer;
+ padding: 0.4rem;
+ height: 1.8rem;
+ width: 1.8rem;
+}
+.copy-row .copy {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+button {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-transform: capitalize;
+ padding: 0.6rem 1.2rem;
+ font-weight: 600;
+ cursor: pointer;
+ border-radius: 0.3rem;
+ color: var(--accent-color);
+ transition: transform 0.3s;
+ border: none;
+ background: rgba(var(--text-color), 0.1);
+ -webkit-tap-highlight-color: transparent;
+ font-family: "Poppins", sans-serif;
+}
+button:focus {
+ outline: thin solid rgba(var(--text-color-light), 0.4);
+}
+button:disabled {
+ cursor: default;
+ background: rgba(var(--text-color), 0.4);
+}
+
+.primary-btn {
+ padding: 0.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%;
+}
+
+.sign-in-box {
+ width: 100%;
+ margin: 0 -2rem;
+ z-index: 1;
+ justify-self: center;
+ padding: 1.5rem;
+ border-radius: 0.5rem;
+ background: rgba(var(--foreground-color), 1);
+}
+.sign-in-box sm-input {
+ text-align: left;
+}
+.sign-in-box sm-panel {
+ width: 100%;
+}
+.sign-in-box sm-tab-header {
+ margin: 0;
+ background: none;
+ align-self: flex-start;
+}
+.sign-in-box sm-tab-header::part(tab-header) {
+ padding-bottom: 0.4rem;
+ gap: 1.5rem;
+}
+.sign-in-box sm-tab::part(tab) {
+ padding: 0.4rem 0;
+}
+.sign-in-box sm-tab-panels {
+ margin-top: 3rem;
+}
+.sign-in-box form {
+ width: 100%;
+}
+.sign-in-box h2 {
+ margin-bottom: 0.5rem;
+}
+.sign-in-box h3 {
+ font-weight: 500;
+}
+.sign-in-box h4 {
+ font-weight: 500;
+ margin-bottom: 1.5rem;
+}
+.sign-in-box h5 {
+ opacity: 0.8;
+ font-weight: 500;
+}
+.sign-in-box .copy-row h4 {
+ max-width: 34ch;
+}
+.sign-in-box .copy-row:not(:last-of-type) {
+ margin-bottom: 1rem;
+}
+.sign-in-box button {
+ width: auto;
+ margin-top: 1rem;
+ padding: 0.6rem 1.6rem;
+}
+.sign-in-box p {
+ margin-bottom: 0.5rem;
+ max-width: 35ch;
+ margin-top: 0.5rem;
+ margin-bottom: 1.5rem;
+}
+.sign-in-box #credentials_section {
+ border-top: 1px rgba(var(--text-color), 0.2) solid;
+ margin-top: 1rem;
+ padding-top: 1.5rem;
+ animation: slide-down 0.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;
@@ -200,6 +341,9 @@ span.ripple {
padding: 1rem 0;
margin-bottom: 1.5rem;
}
+#homepage_header img {
+ height: 2.5rem;
+}
#homepage_header h3 {
font-family: "Playfair display", serif;
font-size: 1.2rem;
@@ -269,7 +413,7 @@ span.ripple {
}
#trending_articles_container, #latest_articles_container {
- gap: 2rem;
+ gap: 3rem 2rem;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
margin-bottom: 4rem;
}
@@ -279,9 +423,12 @@ span.ripple {
overflow: hidden;
display: grid;
gap: 0 1rem;
+ text-decoration: none;
cursor: pointer;
align-self: flex-start;
-webkit-tap-highlight-color: transparent;
+ text-decoration: none;
+ color: inherit;
}
.article-card .article-details {
margin-bottom: 0.3rem;
@@ -296,9 +443,37 @@ span.ripple {
.article-card h5:last-of-type {
margin-top: 0.5em;
}
+.article-card.placeholder {
+ background: rgba(var(--text-color), 0.1);
+ animation: pulsate 1s alternate infinite;
+ height: 14em;
+ border-radius: 0.5em;
+}
+.article-card.placeholder:nth-of-type(2) {
+ animation-delay: 0.1s;
+}
+.article-card.placeholder:nth-of-type(3) {
+ animation-delay: 0.2s;
+}
+.article-card.placeholder:nth-of-type(4) {
+ animation-delay: 0.3s;
+}
+.article-card.placeholder:nth-of-type(5) {
+ animation-delay: 0.4s;
+}
+.article-card.placeholder:nth-of-type(6) {
+ animation-delay: 0.5s;
+}
+@keyframes pulsate {
+ from {
+ opacity: 0.4;
+ }
+ to {
+ opacity: 1;
+ }
+}
#greetings_section {
- text-transform: capitalize;
margin-bottom: 3rem;
}
#greetings_section sm-input {
@@ -312,7 +487,14 @@ span.ripple {
}
#greeting_illustration svg {
- width: 5rem;
+ width: 4rem;
+}
+
+#greetings {
+ text-transform: lowercase;
+}
+#greetings::first-letter {
+ text-transform: capitalize;
}
.article {
@@ -411,13 +593,37 @@ span.ripple {
.article-para, .article-preview {
color: rgba(var(--text-color), 0.9);
+ 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) no-repeat center 6rem;
+ background-size: 60%;
+ }
+ #sign_in .left {
+ border-radius: 0.5rem 0.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) no-repeat center;
+ border-radius: 0.5rem 0 0 0.5rem;
+ }
+ #sign_in .sign-in-box {
+ padding-top: 2rem;
+ }
+
.article {
grid-template-columns: 1fr min(65ch, 100%) 1fr;
}
@@ -432,6 +638,7 @@ span.ripple {
.article-para, .article-preview {
font-size: 1.15em;
+ white-space: line;
}
#right_drawer_container {
diff --git a/css/main.min.css b/css/main.min.css
index 2b44573..dc23a85 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-a,strong{font-weight:500}.hide,span.ripple{pointer-events:none}#homepage>*,#settings_page>*,.article>*{grid-column:2}.article-card .article-preview,p{line-height:1.5}#greetings_section,.capitalize{text-transform:capitalize}.article-heading,.article-preview{-webkit-line-clamp:2;-webkit-box-orient:vertical}*{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{text-decoration:none;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}.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)}.interact{position:relative;overflow:hidden;cursor:pointer}#homepage,#settings_page{display:grid;grid-template-columns:1.5rem 1fr 1.5rem}#homepage main,#settings_page main{gap:2rem;display:grid}#homepage_header{position:relative;gap:1.5rem;padding:1rem 0;margin-bottom:1.5rem}#homepage_header h3{font-family:"Playfair display",serif;font-size:1.2rem}.article-heading,.para-heading{font-family:Lora,serif}#user_icon,.close{cursor:pointer;background:rgba(var(--text-color),.06);height:2.6rem;width:2.6rem;padding:.7rem;border-radius:50%}#right_drawer,.header{top:0;background:rgba(var(--foreground-color),1)}#right_drawer{position:fixed;overflow-y:auto;width:100%;right: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;z-index:1;padding:1rem 0;margin-bottom:1.5rem}#trending header h4{padding:0 .6rem;color:var(--error-color);border-left:solid .2em var(--error-color)}#latest_articles_container,#trending_articles_container{gap: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;-webkit-tap-highlight-color:transparent}.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}#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:5rem}.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;margin-bottom:.8rem;font-weight:700;display:-webkit-box;overflow:hidden}.article-preview{display:-webkit-box;overflow:hidden;font-size:1.1em}.para-heading{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}@media screen and (min-width:800px){.hide-on-desktop{display:none}.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}#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}}
\ No newline at end of file
+.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}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 3b8507b..15e6576 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -171,6 +171,152 @@ span.ripple{
overflow: hidden;
cursor: pointer;
}
+.copy-row {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ gap: 0.5rem;
+ width: auto;
+ h4 {
+ margin-bottom: 0 !important;
+ font-weight: 400;
+ }
+
+ .icon {
+ cursor: pointer;
+ padding: 0.4rem;
+ height: 1.8rem;
+ width: 1.8rem;
+ }
+
+ .copy {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+button {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-transform: capitalize;
+ padding: 0.6rem 1.2rem;
+ font-weight: 600;
+ cursor: pointer;
+ border-radius: 0.3rem;
+ color: var(--accent-color);
+ transition: transform 0.3s;
+ border: none;
+ background: rgba(var(--text-color), 0.1);
+ -webkit-tap-highlight-color: transparent;
+ font-family: 'Poppins', sans-serif;
+ &:focus {
+ outline: thin solid rgba(var(--text-color-light), .4);
+ }
+
+ &:disabled {
+ cursor: default;
+ background: rgba(var(--text-color), 0.4);
+ }
+}
+.primary-btn {
+ padding: 0.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{
+ .left{
+ background-size: 60%;
+ }
+ }
+}
+.sign-in-box{
+ width: 100%;
+ margin: 0 -2rem;
+ z-index: 1;
+ justify-self: center;
+ padding: 1.5rem;
+ border-radius: 0.5rem;
+ background: rgba(var(--foreground-color), 1);
+ sm-input{
+ text-align: left;
+ }
+ sm-panel{
+ width: 100%;
+ }
+ sm-tab-header{
+ margin: 0;
+ background: none;
+ align-self: flex-start;
+ &::part(tab-header){
+ padding-bottom: 0.4rem;
+ gap: 1.5rem;
+ }
+ }
+ sm-tab::part(tab){
+ padding: 0.4rem 0;
+ }
+ sm-tab-panels{
+ margin-top: 3rem;
+ }
+ form{
+ width: 100%;
+ }
+ h2{
+ margin-bottom: 0.5rem;
+ }
+ h3{
+ font-weight: 500;
+ }
+ h4 {
+ font-weight: 500;
+ margin-bottom: 1.5rem;
+ }
+ h5{
+ opacity: 0.8;
+ font-weight: 500;
+ }
+ .copy-row{
+ h4{
+ max-width: 34ch;
+ }
+ }
+ .copy-row:not(:last-of-type){
+ margin-bottom: 1rem;
+ }
+ button {
+ width: auto;
+ margin-top: 1rem;
+ padding: 0.6rem 1.6rem;
+ }
+ p {
+ margin-bottom: 0.5rem;
+ max-width: 35ch;
+ margin-top: 0.5rem;
+ margin-bottom: 1.5rem;
+ }
+ #credentials_section{
+ border-top: 1px rgba(var(--text-color), 0.2) solid;
+ margin-top: 1rem;
+ padding-top: 1.5rem;
+ animation: slide-down 0.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;
@@ -187,6 +333,9 @@ span.ripple{
gap: 1.5rem;
padding: 1rem 0;
margin-bottom: 1.5rem;
+ img{
+ height: 2.5rem;
+ }
h3{
font-family: 'Playfair display', serif;
font-size: 1.2rem;
@@ -253,7 +402,7 @@ span.ripple{
}
}
#trending_articles_container, #latest_articles_container{
- gap: 2rem;
+ gap: 3rem 2rem;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
margin-bottom: 4rem;
}
@@ -262,9 +411,12 @@ span.ripple{
overflow: hidden;
display: grid;
gap: 0 1rem;
+ text-decoration: none;
cursor: pointer;
align-self: flex-start;
-webkit-tap-highlight-color: transparent;
+ text-decoration: none;
+ color: inherit;
.article-details{
margin-bottom: 0.3rem;
}
@@ -278,9 +430,37 @@ span.ripple{
h5:last-of-type{
margin-top: 0.5em;
}
+ &.placeholder{
+ background: rgba(var(--text-color), 0.1);
+ animation: pulsate 1s alternate infinite;
+ height: 14em;
+ border-radius: 0.5em;
+ &:nth-of-type(2){
+ animation-delay: 0.1s;
+ }
+ &:nth-of-type(3){
+ animation-delay: 0.2s;
+ }
+ &:nth-of-type(4){
+ animation-delay: 0.3s;
+ }
+ &:nth-of-type(5){
+ animation-delay: 0.4s;
+ }
+ &:nth-of-type(6){
+ animation-delay: 0.5s;
+ }
+ }
+}
+@keyframes pulsate{
+ from{
+ opacity: 0.4;
+ }
+ to{
+ opacity: 1;
+ }
}
#greetings_section{
- text-transform: capitalize;
margin-bottom: 3rem;
sm-input{
margin-top: 1rem;
@@ -293,7 +473,13 @@ span.ripple{
}
}
#greeting_illustration svg{
- width: 5rem;
+ width: 4rem;
+}
+#greetings{
+ text-transform: lowercase;
+ &::first-letter{
+ text-transform: capitalize;
+ }
}
.article{
display: grid;
@@ -381,14 +567,37 @@ span.ripple{
}
.article-para, .article-preview{
color: rgba(var(--text-color), 0.9);
+ font-weight: 400;
}
#settings_page{
+}
+@media all and (max-width: 800px){
+ #sign_in{
+ grid-template-rows: 1fr 1fr;
+ max-height: 90vh;
+ background: url(sign-in-back.svg) no-repeat center 6rem;
+ background-size: 60%;
+ .left{
+ border-radius: 0.5rem 0.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);
+ .left{
+ background: url(sign-in-back.svg) no-repeat center;
+ border-radius: 0.5rem 0 0 0.5rem;
+ }
+ .sign-in-box{
+ padding-top: 2rem;
+ }
+ }
.article{
grid-template-columns: 1fr min(65ch, 100%) 1fr;
}
@@ -400,6 +609,7 @@ span.ripple{
}
.article-para, .article-preview{
font-size: 1.15em;
+ white-space: line;
}
#right_drawer_container{
position: relative;
diff --git a/css/news-paper-background.svg b/css/news-paper-background.svg
new file mode 100644
index 0000000..4192109
--- /dev/null
+++ b/css/news-paper-background.svg
@@ -0,0 +1 @@
+news-paper-background
+
+
+
+
+
+
+
+
+
diff --git a/index.html b/index.html
index 80ddc98..bb999b0 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
News
+ RanchiMall Times
@@ -148,19 +179,7 @@
The government's chief economic advisor allocated the declination to "exogenous factors" owing to the Covid-19 pandemic and the emergence of lockdown. Thereafter, stunted economic growth of countries around the globe. The rigid lockdown in India resulted in a huge loss among various sectors and detained economic activities.
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+