latest changes

This commit is contained in:
sairaj mote 2020-11-23 01:51:12 +05:30
parent 315ad0319d
commit 11aed49a6f
7 changed files with 10181 additions and 48 deletions

BIN
css/laptop and mobile.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View File

@ -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 {

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -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;

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 109 KiB

47
css/sign-in-back.svg Normal file
View File

@ -0,0 +1,47 @@
<svg width="991" height="623" viewBox="0 0 991 623" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M902.36 622.86H46.8199C34.5245 622.86 22.7326 617.976 14.0385 609.281C5.34427 600.587 0.459961 588.795 0.459961 576.5C0.459961 574.569 1.22696 572.717 2.59222 571.352C3.95749 569.987 5.80915 569.22 7.73993 569.22H941.42C943.351 569.22 945.202 569.987 946.568 571.352C947.933 572.717 948.7 574.569 948.7 576.5C948.701 582.587 947.504 588.614 945.176 594.238C942.847 599.862 939.435 604.972 935.131 609.277C930.828 613.582 925.719 616.997 920.097 619.328C914.474 621.659 908.447 622.859 902.36 622.86Z" fill="#CCCCCC"/>
<path d="M617.73 592H331.48C328.49 592.001 325.529 591.414 322.767 590.27C320.004 589.127 317.494 587.451 315.38 585.337C313.265 583.224 311.588 580.714 310.443 577.952C309.299 575.19 308.71 572.23 308.71 569.24H640.49C640.49 575.276 638.092 581.065 633.824 585.334C629.555 589.602 623.766 592 617.73 592Z" fill="#B3B3B3"/>
<path d="M860.025 0H88.9746C72.4201 0 59 13.5412 59 30.2451V530.755C59 547.459 72.4201 561 88.9746 561H860.025C876.58 561 890 547.459 890 530.755V30.2451C890 13.5412 876.58 0 860.025 0Z" fill="black"/>
<path d="M848 25.58H101.21C92.7766 25.58 85.9399 32.4166 85.9399 40.85V519.88C85.9399 528.313 92.7766 535.15 101.21 535.15H848C856.433 535.15 863.27 528.313 863.27 519.88V40.85C863.27 32.4166 856.433 25.58 848 25.58Z" fill="#1A1A1A"/>
<path d="M474.6 21.66C479.173 21.66 482.88 17.9529 482.88 13.38C482.88 8.80709 479.173 5.10001 474.6 5.10001C470.027 5.10001 466.32 8.80709 466.32 13.38C466.32 17.9529 470.027 21.66 474.6 21.66Z" fill="#333333"/>
<path d="M474.6 19.33C477.886 19.33 480.55 16.6661 480.55 13.38C480.55 10.0939 477.886 7.42999 474.6 7.42999C471.314 7.42999 468.65 10.0939 468.65 13.38C468.65 16.6661 471.314 19.33 474.6 19.33Z" fill="#1A1A1A"/>
<g filter="url(#filter0_d)">
<path d="M255.27 151.38H681.22V445.48H243.62V163.03C243.62 161.5 243.921 159.985 244.507 158.572C245.092 157.158 245.95 155.874 247.032 154.792C248.114 153.71 249.398 152.852 250.812 152.267C252.225 151.681 253.74 151.38 255.27 151.38Z" fill="#B3B3B3"/>
<path d="M279.64 117.15H693.93C697.02 117.15 699.983 118.377 702.168 120.562C704.353 122.747 705.58 125.71 705.58 128.8V445.48H267.98V128.81C267.979 127.278 268.279 125.762 268.865 124.346C269.45 122.931 270.309 121.645 271.392 120.562C272.475 119.479 273.761 118.62 275.176 118.035C276.592 117.449 278.108 117.149 279.64 117.15Z" fill="#F2F2F2"/>
<path d="M705.58 445.48C705.58 455.02 699.96 462.76 693.03 462.76H255.42C262.36 462.76 267.98 455.02 267.98 445.48H705.58Z" fill="url(#paint0_linear)"/>
<path d="M255.82 462.75C262.552 462.75 268.01 455.018 268.01 445.48C268.01 435.942 262.552 428.21 255.82 428.21C249.088 428.21 243.63 435.942 243.63 445.48C243.63 455.018 249.088 462.75 255.82 462.75Z" fill="#B3B3B3"/>
<path d="M428.06 162.23H307.45V282.84H428.06V162.23Z" fill="#E6E6E6"/>
<path d="M515.1 162.23H442.74V174.81H515.1V162.23Z" fill="#E6E6E6"/>
<path d="M628.11 184.25H442.74V208.37H628.11V184.25Z" fill="#E6E6E6"/>
<path d="M666.12 219.44H442.74V281.32H666.12V219.44Z" fill="#E6E6E6"/>
<path d="M666.12 298.43H545.51V419.04H666.12V298.43Z" fill="#E6E6E6"/>
<path d="M462.93 298.43H307.45V309.32H462.93V298.43Z" fill="#E6E6E6"/>
<path d="M509.33 316.29H307.45V344.18H509.33V316.29Z" fill="#E6E6E6"/>
<path d="M532.93 355.33H307.45V419.04H532.93V355.33Z" fill="#E6E6E6"/>
</g>
<path d="M701.73 506.81C721.397 506.81 737.34 490.867 737.34 471.2C737.34 451.533 721.397 435.59 701.73 435.59C682.063 435.59 666.12 451.533 666.12 471.2C666.12 490.867 682.063 506.81 701.73 506.81Z" fill="#FBB03B"/>
<rect x="788" y="224" width="203" height="399" rx="28" fill="black"/>
<rect x="797" y="234" width="185" height="379" rx="19" fill="white"/>
<path d="M873.45 276.9H814.03C813.207 276.9 812.54 277.567 812.54 278.39V283.93C812.54 284.753 813.207 285.42 814.03 285.42H873.45C874.273 285.42 874.94 284.753 874.94 283.93V278.39C874.94 277.567 874.273 276.9 873.45 276.9Z" fill="#E6E6E6"/>
<path d="M962.01 290.91H815.95C814.067 290.91 812.54 292.437 812.54 294.32V305.76C812.54 307.643 814.067 309.17 815.95 309.17H962.01C963.893 309.17 965.42 307.643 965.42 305.76V294.32C965.42 292.437 963.893 290.91 962.01 290.91Z" fill="#E6E6E6"/>
<path d="M910.8 313.65H815.32C813.784 313.65 812.54 314.895 812.54 316.43V329.13C812.54 330.665 813.784 331.91 815.32 331.91H910.8C912.335 331.91 913.58 330.665 913.58 329.13V316.43C913.58 314.895 912.335 313.65 910.8 313.65Z" fill="#E6E6E6"/>
<path d="M958.44 348.85H819.52C815.665 348.85 812.54 351.975 812.54 355.83V418.23C812.54 422.085 815.665 425.21 819.52 425.21H958.44C962.295 425.21 965.42 422.085 965.42 418.23V355.83C965.42 351.975 962.295 348.85 958.44 348.85Z" fill="#E6E6E6"/>
<path d="M959.37 437.38H818.59C815.249 437.38 812.54 440.089 812.54 443.43V488.65C812.54 491.991 815.249 494.7 818.59 494.7H959.37C962.711 494.7 965.42 491.991 965.42 488.65V443.43C965.42 440.089 962.711 437.38 959.37 437.38Z" fill="#E6E6E6"/>
<path d="M958.56 506.86H821.24C816.943 506.86 813.46 510.343 813.46 514.64V593.96C813.46 598.257 816.943 601.74 821.24 601.74H958.56C962.857 601.74 966.34 598.257 966.34 593.96V514.64C966.34 510.343 962.857 506.86 958.56 506.86Z" fill="#E6E6E6"/>
<circle cx="820.5" cy="251.5" r="7.5" fill="#1B1B1B"/>
<defs>
<filter id="filter0_d" x="233.62" y="117.15" width="481.96" height="373.61" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="18"/>
<feGaussianBlur stdDeviation="5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="480.5" y1="462.76" x2="480.5" y2="445.48" gradientUnits="userSpaceOnUse">
<stop stop-color="#CCCCCC"/>
<stop offset="1" stop-color="#F2F2F2"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 6.0 KiB

9750
index.html

File diff suppressed because it is too large Load Diff