From ac579753f7dd2bc0e924f947365b4a19da39bd98 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 23 Jun 2023 00:39:31 +0530 Subject: [PATCH] UI fixes --- css/main.css | 24 +++++++++++++++++------- css/main.min.css | 2 +- css/main.scss | 18 +++++++++++------- 3 files changed, 29 insertions(+), 15 deletions(-) diff --git a/css/main.css b/css/main.css index 1c0d63c..e232161 100644 --- a/css/main.css +++ b/css/main.css @@ -304,9 +304,10 @@ section:nth-of-type(4) p { } #economics_section ul { - display: grid; - gap: 0.5rem; - grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); + -moz-columns: 3 16rem; + columns: 3 16rem; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; } #economics_section li { display: grid; @@ -317,6 +318,10 @@ section:nth-of-type(4) p { border-radius: 0.5rem; padding: max(1rem, 2vw); text-align: center; + page-break-inside: avoid; + -moz-column-break-inside: avoid; + break-inside: avoid; + margin-bottom: 0.5rem; } #team_members { @@ -354,6 +359,7 @@ section:nth-of-type(4) p { flex-wrap: wrap; gap: 1rem; margin: auto; + justify-content: space-evenly; } #partners a, #partners li:not(li:has(a)) { @@ -363,7 +369,6 @@ section:nth-of-type(4) p { text-align: center; align-items: center; padding: 1rem; - flex: 1; text-decoration: none; } #partners a .icon, @@ -409,9 +414,10 @@ section:nth-of-type(4) p { } #services ul { - display: grid; - gap: 0.5rem; - grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); + -moz-columns: 4 16rem; + columns: 4 16rem; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; } #services li { display: grid; @@ -426,6 +432,10 @@ section:nth-of-type(4) p { -webkit-animation: slide-up 0.5s ease var(--delay) forwards; animation: slide-up 0.5s ease var(--delay) forwards; opacity: 0; + margin-bottom: 0.5rem; + -moz-column-break-inside: avoid; + break-inside: avoid; + page-break-inside: avoid; } #news_list { diff --git a/css/main.min.css b/css/main.min.css index d94800d..9612728 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--inline-padding: max(1rem, 6vw)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}ul{list-style:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.flex-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}.text-center{text-align:center}article{padding-top:4rem}article>*{padding:max(1rem,2vw) var(--inline-padding)}#main_header{display:flex;align-items:center;justify-content:space-between;position:fixed;left:0;right:0;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);padding:max(1rem,2vw) var(--inline-padding)}#main_header a{color:rgba(var(--text-color), 0.9);text-decoration:none}#main_header ul{list-style:none;display:flex;gap:.8rem}#main_header ul a{font-weight:500;font-size:.9rem}#main_header ul a::after{content:"";display:block;width:0;height:.15rem;background:var(--accent-color);transition:width .3s;margin:auto}#main_header ul a.active::after{width:1rem}#main_header ul .icon{display:flex}#above_fold{padding-top:0;height:calc(100vh - 6rem);text-align:center;align-content:center}#above_fold h2{margin:auto;max-width:46rem}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height:90vh;align-content:center}section:nth-of-type(2){overflow:hidden}section:nth-of-type(4){text-align:center}section:nth-of-type(4) p{max-width:none}.section-header{display:flex;flex-direction:column;text-align:center;margin-bottom:3rem}.section-header::after{content:"•••";line-height:.5}#bitcoin_lineart{position:absolute;opacity:.2;height:80vh;width:auto;align-self:center;right:0}#el_salvador_section{position:relative;overflow:hidden}#el_salvador_map{position:absolute;opacity:.06;top:0;width:max(100vh,90vw);height:auto;left:50%;transform:translateX(-50%)}#poc_images{display:grid;gap:1vw;grid-template-columns:1fr 1fr}#poc_images .span-2{grid-column:span 2}#poc_images img{height:24vmax;-o-object-fit:cover;object-fit:cover;border-radius:.5rem;transition:filter .2s ease;filter:brightness(0.8)}#poc_images img:hover{filter:brightness(1)}#poc_stats{list-style:none;display:flex;gap:1rem;border:solid thin rgba(var(--text-color), 0.5);padding:max(1.5rem,2vw) max(1rem,2vw);border-radius:1rem;margin:auto}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:max(1.5rem,2.5vw);font-weight:700}#poc_stats .stat__title{font-size:.9rem}#economics_section ul{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}#economics_section li{display:grid;gap:.5rem;align-items:flex-start;align-content:flex-start;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;padding:max(1rem,2vw);text-align:center}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;aspect-ratio:3/3.5;border-radius:1rem;margin-bottom:1.2rem}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem}#partners{display:flex;flex-wrap:wrap;gap:1rem;margin:auto}#partners a,#partners li:not(li:has(a)){display:flex;flex-direction:column;gap:.8rem;text-align:center;align-items:center;padding:1rem;flex:1;text-decoration:none}#partners a .icon,#partners li:not(li:has(a)) .icon{width:2rem;height:2rem}#partners span{font-weight:500;color:rgba(var(--text-color), 0.8)}#social_links{display:flex;flex-wrap:wrap;gap:.5rem;justify-items:center;width:100%;grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}#social_links li{width:100%;justify-content:center;box-shadow:0 0 0 0 rgba(var(--text-color), 1);transition:box-shadow .1s ease;flex:1 1 8rem;border-radius:.5rem}#social_links li:hover{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1)}#social_links a{display:flex;width:100%;gap:.5rem;text-decoration:none;color:rgba(var(--text-color), 0.9);padding:1rem;justify-content:center;border-radius:inherit;background-color:rgba(var(--text-color), 0.06);font-weight:500}#services ul{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr))}#services li{display:grid;aspect-ratio:1/1;padding:max(1rem,2vw);border:solid thin rgba(var(--text-color), 0.2);border-radius:.5rem;text-align:center;font-weight:500;align-content:flex-end;align-items:flex-end;-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0}#news_list{display:grid;gap:.5rem}#news_list li{container:news-item/inline-size}.news-item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:" icon ." "icon ." "icon ." "icon .";gap:.5rem 1rem;border:solid thin rgba(var(--text-color), 0.5);border-radius:.5rem;padding:max(1rem,2vw);text-decoration:none;color:rgba(var(--text-color), 0.9);-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0}.news-item__icon{grid-area:icon}.news-item__icon .icon{height:2rem;width:2rem}.news-item__date{background-color:rgba(var(--text-color), 0.1);margin-right:auto;padding:.1rem .5rem;border-radius:.3rem;font-weight:500;font-size:.8rem}@-webkit-keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@container news-item (max-width: 400px){.news-item{grid-template-areas:none;grid-template-columns:1fr}.news-item__icon{grid-area:unset}}@media screen and (max-width: 768px){#poc_images img:nth-of-type(5){grid-area:3/2/4/3}.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}#bitcoin_lineart{opacity:.6;left:calc(100% - 50vw)}#poc_images{grid-template-columns:repeat(4, 1fr)}.hide-on-large{display:none !important}}@media screen and (any-hover: hover){#main_header ul a:hover::after{width:1rem}}.hidden{display:none} \ No newline at end of file +*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--inline-padding: max(1rem, 6vw)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}ul{list-style:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.flex-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}.text-center{text-align:center}article{padding-top:4rem}article>*{padding:max(1rem,2vw) var(--inline-padding)}#main_header{display:flex;align-items:center;justify-content:space-between;position:fixed;left:0;right:0;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);padding:max(1rem,2vw) var(--inline-padding)}#main_header a{color:rgba(var(--text-color), 0.9);text-decoration:none}#main_header ul{list-style:none;display:flex;gap:.8rem}#main_header ul a{font-weight:500;font-size:.9rem}#main_header ul a::after{content:"";display:block;width:0;height:.15rem;background:var(--accent-color);transition:width .3s;margin:auto}#main_header ul a.active::after{width:1rem}#main_header ul .icon{display:flex}#above_fold{padding-top:0;height:calc(100vh - 6rem);text-align:center;align-content:center}#above_fold h2{margin:auto;max-width:46rem}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height:90vh;align-content:center}section:nth-of-type(2){overflow:hidden}section:nth-of-type(4){text-align:center}section:nth-of-type(4) p{max-width:none}.section-header{display:flex;flex-direction:column;text-align:center;margin-bottom:3rem}.section-header::after{content:"•••";line-height:.5}#bitcoin_lineart{position:absolute;opacity:.2;height:80vh;width:auto;align-self:center;right:0}#el_salvador_section{position:relative;overflow:hidden}#el_salvador_map{position:absolute;opacity:.06;top:0;width:max(100vh,90vw);height:auto;left:50%;transform:translateX(-50%)}#poc_images{display:grid;gap:1vw;grid-template-columns:1fr 1fr}#poc_images .span-2{grid-column:span 2}#poc_images img{height:24vmax;-o-object-fit:cover;object-fit:cover;border-radius:.5rem;transition:filter .2s ease;filter:brightness(0.8)}#poc_images img:hover{filter:brightness(1)}#poc_stats{list-style:none;display:flex;gap:1rem;border:solid thin rgba(var(--text-color), 0.5);padding:max(1.5rem,2vw) max(1rem,2vw);border-radius:1rem;margin:auto}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:max(1.5rem,2.5vw);font-weight:700}#poc_stats .stat__title{font-size:.9rem}#economics_section ul{-moz-columns:3 16rem;columns:3 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#economics_section li{display:grid;gap:.5rem;align-items:flex-start;align-content:flex-start;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;padding:max(1rem,2vw);text-align:center;page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;margin-bottom:.5rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;aspect-ratio:3/3.5;border-radius:1rem;margin-bottom:1.2rem}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem}#partners{display:flex;flex-wrap:wrap;gap:1rem;margin:auto;justify-content:space-evenly}#partners a,#partners li:not(li:has(a)){display:flex;flex-direction:column;gap:.8rem;text-align:center;align-items:center;padding:1rem;text-decoration:none}#partners a .icon,#partners li:not(li:has(a)) .icon{width:2rem;height:2rem}#partners span{font-weight:500;color:rgba(var(--text-color), 0.8)}#social_links{display:flex;flex-wrap:wrap;gap:.5rem;justify-items:center;width:100%;grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}#social_links li{width:100%;justify-content:center;box-shadow:0 0 0 0 rgba(var(--text-color), 1);transition:box-shadow .1s ease;flex:1 1 8rem;border-radius:.5rem}#social_links li:hover{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1)}#social_links a{display:flex;width:100%;gap:.5rem;text-decoration:none;color:rgba(var(--text-color), 0.9);padding:1rem;justify-content:center;border-radius:inherit;background-color:rgba(var(--text-color), 0.06);font-weight:500}#services ul{-moz-columns:4 16rem;columns:4 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#services li{display:grid;aspect-ratio:1/1;padding:max(1rem,2vw);border:solid thin rgba(var(--text-color), 0.2);border-radius:.5rem;text-align:center;font-weight:500;align-content:flex-end;align-items:flex-end;-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0;margin-bottom:.5rem;-moz-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid}#news_list{display:grid;gap:.5rem}#news_list li{container:news-item/inline-size}.news-item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:" icon ." "icon ." "icon ." "icon .";gap:.5rem 1rem;border:solid thin rgba(var(--text-color), 0.5);border-radius:.5rem;padding:max(1rem,2vw);text-decoration:none;color:rgba(var(--text-color), 0.9);-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0}.news-item__icon{grid-area:icon}.news-item__icon .icon{height:2rem;width:2rem}.news-item__date{background-color:rgba(var(--text-color), 0.1);margin-right:auto;padding:.1rem .5rem;border-radius:.3rem;font-weight:500;font-size:.8rem}@-webkit-keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@container news-item (max-width: 400px){.news-item{grid-template-areas:none;grid-template-columns:1fr}.news-item__icon{grid-area:unset}}@media screen and (max-width: 768px){#poc_images img:nth-of-type(5){grid-area:3/2/4/3}.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}#bitcoin_lineart{opacity:.6;left:calc(100% - 50vw)}#poc_images{grid-template-columns:repeat(4, 1fr)}.hide-on-large{display:none !important}}@media screen and (any-hover: hover){#main_header ul a:hover::after{width:1rem}}.hidden{display:none} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 2038139..42c34c6 100644 --- a/css/main.scss +++ b/css/main.scss @@ -268,9 +268,8 @@ section { } #economics_section { ul { - display: grid; - gap: 0.5rem; - grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); + columns: 3 16rem; + column-gap: 0.5rem; } li { display: grid; @@ -281,6 +280,9 @@ section { border-radius: 0.5rem; padding: max(1rem, 2vw); text-align: center; + page-break-inside: avoid; + break-inside: avoid; + margin-bottom: 0.5rem; } } @@ -317,6 +319,7 @@ section { flex-wrap: wrap; gap: 1rem; margin: auto; + justify-content: space-evenly; a, li:not(li:has(a)) { display: flex; @@ -325,7 +328,6 @@ section { text-align: center; align-items: center; padding: 1rem; - flex: 1; text-decoration: none; .icon { width: 2rem; @@ -374,9 +376,8 @@ section { #services { ul { - display: grid; - gap: 0.5rem; - grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); + columns: 4 16rem; + column-gap: 0.5rem; } li { display: grid; @@ -390,6 +391,9 @@ section { align-items: flex-end; animation: slide-up 0.5s ease var(--delay) forwards; opacity: 0; + margin-bottom: 0.5rem; + break-inside: avoid; + page-break-inside: avoid; } } #news_list {