RanchiMall/bobsfund
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code refactoring

Browse Source
This commit is contained in:
sairaj mote 2022-10-31 13:28:43 +05:30
parent dd961dd928
commit 3caa81efd5
5 changed files with 1734 additions and 3523 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

318
css/main.css
View File

@ -3,25 +3,26 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: "Inter", sans-serif; font-family: "Roboto", sans-serif;
} }
:root { :root {
font-size: clamp(1rem, 1.2vmax, 3rem); font-size: clamp(1rem, 1.2vmax, 1.2rem);
} }
html, body { html,
body {
height: 100%; height: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body { body {
--accent-color: #2353FF; --accent-color: #2353ff;
--light-shade: rgba(var(--text-color), 0.06); --light-shade: rgba(var(--text-color), 0.06);
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 100, 100, 100; --text-color-light: 100, 100, 100;
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
--background-color: #F6f6f6; --background-color: #f6f6f6;
--error-color: red; --error-color: red;
--green: #00843b; --green: #00843b;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
@ -29,7 +30,7 @@ body {
} }
body[data-theme=dark] { body[data-theme=dark] {
--accent-color: #2353FF; --accent-color: #2353ff;
--green: #13ff5a; --green: #13ff5a;
--text-color: 240, 240, 240; --text-color: 240, 240, 240;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
@ -84,6 +85,7 @@ p {
} }
img { img {
-o-object-fit: cover;
object-fit: cover; object-fit: cover;
} }
@ -124,6 +126,42 @@ button:focus-visible {
outline: rgba(var(--text-color), 1) 0.1rem solid; outline: rgba(var(--text-color), 1) 0.1rem solid;
} }
a:-webkit-any-link {
position: relative;
display: inline-flex;
align-items: center;
background: none;
cursor: pointer;
outline: none;
color: inherit;
font-weight: 500;
font-size: 0.8rem;
border-radius: 0.3rem;
padding: 0.4rem 0.6rem;
align-self: flex-start;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
border: 1px solid rgba(var(--text-color), 0.8);
}
a:-moz-any-link {
position: relative;
display: inline-flex;
align-items: center;
background: none;
cursor: pointer;
outline: none;
color: inherit;
font-weight: 500;
font-size: 0.8rem;
border-radius: 0.3rem;
padding: 0.4rem 0.6rem;
align-self: flex-start;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
border: 1px solid rgba(var(--text-color), 0.8);
}
a:any-link { a:any-link {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -142,28 +180,26 @@ a:any-link {
border: 1px solid rgba(var(--text-color), 0.8); border: 1px solid rgba(var(--text-color), 0.8);
} }
a:-webkit-any-link:focus-visible {
outline: rgba(var(--text-color), 1) 0.1rem solid;
}
a:-moz-any-link:focus-visible {
outline: rgba(var(--text-color), 1) 0.1rem solid;
}
a:any-link:focus-visible { a:any-link:focus-visible {
outline: rgba(var(--text-color), 1) 0.1rem solid; outline: rgba(var(--text-color), 1) 0.1rem solid;
} }
sm-input, sm-input,
sm-textarea { sm-textarea {
--border-radius: 0.2rem; --border-radius: 0.5rem;
--background: rgba(var(--text-color), 0.06); --background: rgba(var(--text-color), 0.06);
} }
sm-button { sm-button {
--border-radius: 0.2rem; --border-radius: 0.5rem;
}
sm-tab-header {
align-self: flex-start;
--active-tab-color: white;
margin-bottom: 1rem;
justify-self: flex-start;
padding: 0.3rem;
border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.06);
} }
ul { ul {
@ -178,6 +214,10 @@ ul {
display: flex; display: flex;
} }
.flex-wrap {
flex-wrap: wrap;
}
.grid { .grid {
display: grid; display: grid;
} }
@ -367,17 +407,17 @@ ul {
word-wrap: break-word; word-wrap: break-word;
-ms-word-break: break-all; -ms-word-break: break-all;
word-break: break-word; word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
} }
.ripple { .ripple {
height: 8rem;
width: 8rem;
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
transform: scale(0); transform: scale(0);
background: rgba(var(--text-color), 0.16); background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
pointer-events: none; pointer-events: none;
} }
@ -418,12 +458,26 @@ ul {
} }
.sad-face .eyes { .sad-face .eyes {
transform-origin: center; transform-origin: center;
-webkit-animation: blink 1s infinite alternate;
animation: blink 1s infinite alternate; animation: blink 1s infinite alternate;
} }
.sad-face .face { .sad-face .face {
-webkit-animation: nod 2s 1s;
animation: nod 2s 1s; animation: nod 2s 1s;
} }
@-webkit-keyframes blink {
0% {
transform: scaleY(1);
}
80% {
transform: scaleY(1);
}
100% {
transform: scaleY(0);
}
}
@keyframes blink { @keyframes blink {
0% { 0% {
transform: scaleY(1); transform: scaleY(1);
@ -435,6 +489,38 @@ ul {
transform: scaleY(0); transform: scaleY(0);
} }
} }
@-webkit-keyframes nod {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-1.5rem);
}
30% {
transform: translateX(1.5rem);
}
40% {
transform: translateX(-1rem);
}
50% {
transform: translateX(1rem);
}
60% {
transform: translateX(-0.7rem);
}
70% {
transform: translateX(0.7rem);
}
80% {
transform: translateX(-0.5rem);
}
90% {
transform: translateX(0.5rem);
}
100% {
transform: translateX(0);
}
}
@keyframes nod { @keyframes nod {
0% { 0% {
transform: translateX(0); transform: translateX(0);
@ -493,9 +579,22 @@ ul {
#loader polyline:nth-of-type(3), #loader polyline:nth-of-type(3),
#loader polyline:nth-of-type(4) { #loader polyline:nth-of-type(4) {
stroke-dasharray: 60; stroke-dasharray: 60;
-webkit-animation: loading infinite 1s;
animation: loading infinite 1s; animation: loading infinite 1s;
} }
@-webkit-keyframes loading {
0% {
stroke-dashoffset: -60;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 60;
}
}
@keyframes loading { @keyframes loading {
0% { 0% {
stroke-dashoffset: -60; stroke-dashoffset: -60;
@ -549,15 +648,6 @@ ul {
margin-right: 1rem; margin-right: 1rem;
} }
sm-select {
min-width: 6rem;
--selection-font-size: 0.9rem;
}
sm-option {
--color: rgba(var(--text-color), 1);
}
.dropdown { .dropdown {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -576,7 +666,7 @@ sm-option {
grid-template-columns: 1fr; grid-template-columns: 1fr;
justify-content: flex-start; justify-content: flex-start;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
width: min(24rem, calc(100vw - 2rem)); width: min(24rem, 100vw - 2rem);
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
box-shadow: 0 2rem 2rem -0.5rem rgba(0, 0, 0, 0.16); box-shadow: 0 2rem 2rem -0.5rem rgba(0, 0, 0, 0.16);
} }
@ -607,20 +697,24 @@ sm-option {
.page-layout { .page-layout {
display: grid; display: grid;
grid-template-columns: 1rem 1fr 1rem; grid-template-columns: 1rem minmax(0, 1fr) 1rem;
} }
.page-layout > * { .page-layout > * {
grid-column: 2/3; grid-column: 2/3;
} }
#home_page { #home_page {
--side-padding: 8vw;
display: flex;
flex-direction: column;
padding: 0 max(1rem, var(--side-padding));
padding-bottom: 6rem; padding-bottom: 6rem;
} }
#homepage__hero-section { #homepage__hero-section {
color: white; color: white;
padding: 2rem 0 12rem 0; padding: 2rem 0 12rem 0;
margin-bottom: -8rem; margin: 0 calc(-1 * max(1rem, var(--side-padding))) -8rem calc(-1 * max(1rem, var(--side-padding)));
background-image: url(../assets/bg-1.svg); background-image: url(../assets/bg-1.svg);
background-color: var(--accent-color); background-color: var(--accent-color);
background-size: cover; background-size: cover;
@ -636,36 +730,27 @@ sm-option {
} }
#search_investor { #search_investor {
--font-weight: 500;
--padding: 0.5rem 1rem;
--background: rgba(var(--foreground-color), 1); --background: rgba(var(--foreground-color), 1);
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
grid-area: search; grid-area: search;
width: min(24rem, 100%); width: min(20rem, 100%);
justify-self: flex-end; justify-self: flex-end;
} }
#search_investor .icon {
height: 1.2rem;
width: 1.2rem;
margin-left: -0.5rem;
}
.label { .label {
font-weight: 500; font-weight: 500;
font-size: 0.75rem; font-size: 0.85rem;
margin-bottom: 0.2rem; margin-bottom: 0.3rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
.value { .value {
font-weight: 600; font-weight: 700;
font-size: 0.9rem; font-size: 1rem;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
-ms-word-break: break-all; -ms-word-break: break-all;
word-break: break-word; word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
} }
@ -775,12 +860,15 @@ form select option {
width: min(24rem, 100%); width: min(24rem, 100%);
} }
.fund-placeholder:nth-of-type(2) .placeholder__block { .fund-placeholder:nth-of-type(2) .placeholder__block {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; animation-delay: 0.3s;
} }
.fund-placeholder:nth-of-type(3) .placeholder__block { .fund-placeholder:nth-of-type(3) .placeholder__block {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s; animation-delay: 0.6s;
} }
.fund-placeholder:nth-of-type(4) .placeholder__block { .fund-placeholder:nth-of-type(4) .placeholder__block {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s; animation-delay: 0.8s;
} }
@ -789,10 +877,20 @@ form select option {
border-radius: 0.3rem; border-radius: 0.3rem;
min-width: 9rem; min-width: 9rem;
padding: 1.2rem 1rem; padding: 1.2rem 1rem;
-webkit-animation: pulse alternate 0.6s ease infinite;
animation: pulse alternate 0.6s ease infinite; animation: pulse alternate 0.6s ease infinite;
background-color: rgba(var(--text-color), 0.1); background-color: rgba(var(--text-color), 0.1);
} }
@-webkit-keyframes pulse {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@keyframes pulse { @keyframes pulse {
from { from {
opacity: 0.4; opacity: 0.4;
@ -801,95 +899,189 @@ form select option {
opacity: 1; opacity: 1;
} }
} }
.fund-investor {
display: grid;
gap: 1rem;
padding: 1rem 0;
background-color: rgba(var(--foreground-color), 1);
}
.transaction-column {
display: flex;
flex-direction: column;
}
.space-between {
justify-content: space-between;
}
.fund-block {
border-radius: 0.5rem;
padding: 1rem;
background-color: rgba(var(--foreground-color), 1);
box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.16);
}
.fund-block__details {
gap: 1.5rem;
}
.tapout-container,
.investment-container {
grid-column: 1/3;
}
.investment-container {
gap: 1.5rem;
justify-content: flex-start;
grid-template-columns: 1fr 1fr;
}
.tapout-list {
display: grid;
gap: 1.5rem;
overflow-x: auto;
grid-auto-flow: column;
justify-content: flex-start;
}
.tapout-list li {
min-width: 8rem;
}
.fund-link {
justify-self: flex-end;
}
.investor-group {
display: grid;
padding: 0.5rem;
margin-top: 1.8rem;
border-radius: 0.3rem;
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3);
}
.investor-group header {
margin-top: -1.5rem;
margin-bottom: 0.5rem;
justify-self: flex-end;
}
.investor-group > * {
background-color: rgba(var(--foreground-color), 1);
}
.investor-group h4 {
padding: 0 0.5rem;
margin-left: -0.5rem;
}
.investor-group__list {
display: grid;
gap: 0.8rem;
grid-template-columns: minmax(0, 1fr);
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
.h1 { .h1 {
font-size: 2rem; font-size: 2rem;
} }
.h2 { .h2 {
font-size: 1.8rem; font-size: 1.8rem;
} }
.h3 { .h3 {
font-size: 1.3rem; font-size: 1.3rem;
} }
.h4 { .h4 {
font-size: 1rem; font-size: 1rem;
} }
.h5 { .h5 {
font-size: 0.8rem; font-size: 0.8rem;
} }
#main_header { #main_header {
grid-template-areas: ". profile-button"; grid-template-areas: ". profile-button";
} }
#main_header .dropdown { #main_header .dropdown {
grid-area: profile-button; grid-area: profile-button;
} }
#homepage__hero-section { #homepage__hero-section {
padding: 2rem 0 20rem 0; padding: 2rem 0 20rem 0;
margin-bottom: -16rem; margin-bottom: -16rem;
} }
.fund-list__header { .fund-list__header {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: ". ." "search search"; grid-template-areas: ". ." "search search";
} }
.investor-input { .investor-input {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-template-areas: ". close" ". close"; grid-template-areas: ". close" ". close";
} }
.fund-link {
grid-column: 2/3;
}
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
#main_header { #main_header {
padding: 2rem calc((10vw / 2) - 0.4rem); padding: 2rem calc(5vw - 0.4rem);
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
} }
#main_header::after { #main_header::after {
height: 5rem; height: 5rem;
} }
.page-layout { .page-layout {
grid-template-columns: 1fr 90vw 1fr; grid-template-columns: 1fr 90vw 1fr;
} }
.value {
min-width: 9rem;
}
#current_price { #current_price {
justify-self: flex-end; justify-self: flex-end;
} }
.dropdown__panel { .dropdown__panel {
left: auto; left: auto;
} }
.fund-list__header { .fund-list__header {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: ". search ."; grid-template-areas: ". search .";
} }
.investor-input { .investor-input {
grid-template-columns: 1.5fr 1fr auto; grid-template-columns: 1.5fr 1fr auto;
grid-template-areas: ". . close"; grid-template-areas: ". . close";
} }
.fund-block {
padding: 1.5rem;
}
.fund-block__details {
grid-template-columns: 1fr 1fr;
}
.investor-group {
padding: 0.5rem 1rem;
}
.justify-self-end {
justify-self: flex-end;
text-align: right;
}
.investment-container {
grid-template-columns: auto auto 1fr;
}
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
.page-layout { .page-layout {
grid-template-columns: 1fr 90vw 1fr; grid-template-columns: 1fr 90vw 1fr;
} }
.multi-form { .multi-form {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.fund-investor {
gap: 1.5rem;
grid-template-columns: 1fr auto;
}
} }
@media (any-hover: hover) { @media (any-hover: hover) {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(var(--text-color), 0.3); background: rgba(var(--text-color), 0.3);
border-radius: 1rem; border-radius: 1rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

189
css/main.scss
View File

@ -2,29 +2,30 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Inter', sans-serif; font-family: "Roboto", sans-serif;
} }
:root { :root {
font-size: clamp(1rem, 1.2vmax, 3rem); font-size: clamp(1rem, 1.2vmax, 1.2rem);
} }
html, body{ html,
body {
height: 100%; height: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body { body {
--accent-color: #2353FF; --accent-color: #2353ff;
--light-shade: rgba(var(--text-color), 0.06); --light-shade: rgba(var(--text-color), 0.06);
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 100, 100, 100; --text-color-light: 100, 100, 100;
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
--background-color: #F6f6f6; --background-color: #f6f6f6;
--error-color: red; --error-color: red;
--green: #00843b; --green: #00843b;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background: var(--background-color); background: var(--background-color);
} }
body[data-theme='dark']{ body[data-theme="dark"] {
--accent-color: #2353FF; --accent-color: #2353ff;
--green: #13ff5a; --green: #13ff5a;
--text-color: 240, 240, 240; --text-color: 240, 240, 240;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
@ -131,23 +132,13 @@ a:any-link:focus-visible{
outline: rgba(var(--text-color), 1) 0.1rem solid; outline: rgba(var(--text-color), 1) 0.1rem solid;
} }
sm-input, sm-input,
sm-textarea { sm-textarea {
--border-radius: 0.2rem; --border-radius: 0.5rem;
--background: rgba(var(--text-color), 0.06); --background: rgba(var(--text-color), 0.06);
} }
sm-button { sm-button {
--border-radius: 0.2rem; --border-radius: 0.5rem;
}
sm-tab-header{
align-self: flex-start;
--active-tab-color: white;
margin-bottom: 1rem;
justify-self: flex-start;
padding: 0.3rem;
border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.06);
} }
ul { ul {
list-style: none; list-style: none;
@ -158,6 +149,9 @@ ul{
.flex { .flex {
display: flex; display: flex;
} }
.flex-wrap {
flex-wrap: wrap;
}
.grid { .grid {
display: grid; display: grid;
} }
@ -309,10 +303,16 @@ ul{
hyphens: auto; hyphens: auto;
} }
.ripple { .ripple {
height: 8rem;
width: 8rem;
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
transform: scale(0); transform: scale(0);
background: rgba(var(--text-color), 0.16); background: radial-gradient(
circle,
rgba(var(--text-color), 0.3) 0%,
rgba(0, 0, 0, 0) 50%
);
pointer-events: none; pointer-events: none;
} }
.interact { .interact {
@ -436,7 +436,6 @@ ul{
} }
} }
#main_header { #main_header {
position: relative; position: relative;
display: grid; display: grid;
@ -466,7 +465,7 @@ ul{
display: flex; display: flex;
align-items: center; align-items: center;
&::before { &::before {
content: ''; content: "";
width: 1px; width: 1px;
height: 2rem; height: 2rem;
background-color: white; background-color: white;
@ -474,14 +473,6 @@ ul{
} }
} }
sm-select{
min-width: 6rem;
--selection-font-size: 0.9rem;
}
sm-option{
--color: rgba(var(--text-color), 1);
}
.dropdown { .dropdown {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -530,20 +521,23 @@ sm-option{
.page-layout { .page-layout {
display: grid; display: grid;
grid-template-columns: 1rem 1fr 1rem; grid-template-columns: 1rem minmax(0, 1fr) 1rem;
& > * { & > * {
grid-column: 2/3; grid-column: 2/3;
} }
} }
#home_page { #home_page {
--side-padding: 8vw;
display: flex;
flex-direction: column;
padding: 0 max(1rem, var(--side-padding));
padding-bottom: 6rem; padding-bottom: 6rem;
} }
#homepage__hero-section { #homepage__hero-section {
color: white; color: white;
padding: 2rem 0 12rem 0; padding: 2rem 0 12rem 0;
margin-bottom: -8rem; margin: 0 calc(-1 * max(1rem, var(--side-padding))) -8rem calc(-1 * max(1rem, var(--side-padding)));
background-image: url(../assets/bg-1.svg); background-image: url(../assets/bg-1.svg);
background-color: var(--accent-color); background-color: var(--accent-color);
background-size: cover; background-size: cover;
@ -559,29 +553,22 @@ sm-option{
} }
#search_investor { #search_investor {
--font-weight: 500;
--padding: 0.5rem 1rem;
--background: rgba(var(--foreground-color), 1); --background: rgba(var(--foreground-color), 1);
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
grid-area: search; grid-area: search;
width: min(24rem ,100%); width: min(20rem, 100%);
justify-self: flex-end; justify-self: flex-end;
.icon{
height: 1.2rem;
width: 1.2rem;
margin-left: -0.5rem;
}
} }
.label { .label {
font-weight: 500; font-weight: 500;
font-size: 0.75rem; font-size: 0.85rem;
margin-bottom: 0.2rem; margin-bottom: 0.3rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
.value { .value {
font-weight: 600; font-weight: 700;
font-size: 0.9rem; font-size: 1rem;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
-ms-word-break: break-all; -ms-word-break: break-all;
@ -622,7 +609,7 @@ sm-option{
fund-block { fund-block {
&:first-of-type::before { &:first-of-type::before {
display: inline-flex; display: inline-flex;
content: '• Latest Fund'; content: "• Latest Fund";
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1rem;
@ -632,7 +619,7 @@ fund-block{
} }
&:not(:last-of-type)::after { &:not(:last-of-type)::after {
display: flex; display: flex;
content: ''; content: "";
// justify-content: center; // justify-content: center;
padding: 0.4rem 0; padding: 0.4rem 0;
font-weight: 700; font-weight: 700;
@ -648,7 +635,6 @@ fund-block{
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
} }
form { form {
padding: 1rem; padding: 1rem;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -726,7 +712,74 @@ form{
opacity: 1; opacity: 1;
} }
} }
.fund-investor {
display: grid;
gap: 1rem;
padding: 1rem 0;
background-color: rgba(var(--foreground-color), 1);
}
.transaction-column {
display: flex;
flex-direction: column;
}
.space-between {
justify-content: space-between;
}
.fund-block {
border-radius: 0.5rem;
padding: 1rem;
background-color: rgba(var(--foreground-color), 1);
box-shadow: 0 1rem 2rem -1rem rgba($color: #000000, $alpha: 0.16);
}
.fund-block__details {
gap: 1.5rem;
}
.tapout-container,
.investment-container {
grid-column: 1/3;
}
.investment-container {
gap: 1.5rem;
justify-content: flex-start;
grid-template-columns: 1fr 1fr;
}
.tapout-list {
display: grid;
gap: 1.5rem;
overflow-x: auto;
grid-auto-flow: column;
justify-content: flex-start;
}
.tapout-list li {
min-width: 8rem;
}
.fund-link {
justify-self: flex-end;
}
.investor-group {
display: grid;
padding: 0.5rem;
margin-top: 1.8rem;
border-radius: 0.3rem;
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3);
}
.investor-group header {
margin-top: -1.5rem;
margin-bottom: 0.5rem;
justify-self: flex-end;
}
.investor-group > * {
background-color: rgba(var(--foreground-color), 1);
}
.investor-group h4 {
padding: 0 0.5rem;
margin-left: -0.5rem;
}
.investor-group__list {
display: grid;
gap: 0.8rem;
grid-template-columns: minmax(0, 1fr);
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
.h1 { .h1 {
@ -745,7 +798,7 @@ form{
font-size: 0.8rem; font-size: 0.8rem;
} }
#main_header { #main_header {
grid-template-areas: '. profile-button'; grid-template-areas: ". profile-button";
.dropdown { .dropdown {
grid-area: profile-button; grid-area: profile-button;
} }
@ -756,15 +809,16 @@ form{
} }
.fund-list__header { .fund-list__header {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: '. .' 'search search'; grid-template-areas: ". ." "search search";
} }
.investor-input { .investor-input {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-template-areas: '. close' '. close'; grid-template-areas: ". close" ". close";
}
.fund-link {
grid-column: 2/3;
} }
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
#main_header { #main_header {
padding: 2rem calc((10vw / 2) - 0.4rem); padding: 2rem calc((10vw / 2) - 0.4rem);
@ -776,6 +830,9 @@ form{
.page-layout { .page-layout {
grid-template-columns: 1fr 90vw 1fr; grid-template-columns: 1fr 90vw 1fr;
} }
.value {
min-width: 9rem;
}
#current_price { #current_price {
justify-self: flex-end; justify-self: flex-end;
} }
@ -784,11 +841,27 @@ form{
} }
.fund-list__header { .fund-list__header {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: '. search .'; grid-template-areas: ". search .";
} }
.investor-input { .investor-input {
grid-template-columns: 1.5fr 1fr auto; grid-template-columns: 1.5fr 1fr auto;
grid-template-areas: '. . close'; grid-template-areas: ". . close";
}
.fund-block {
padding: 1.5rem;
}
.fund-block__details {
grid-template-columns: 1fr 1fr;
}
.investor-group {
padding: 0.5rem 1rem;
}
.justify-self-end {
justify-self: flex-end;
text-align: right;
}
.investment-container {
grid-template-columns: auto auto 1fr;
} }
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
@ -798,6 +871,10 @@ form{
.multi-form { .multi-form {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.fund-investor {
gap: 1.5rem;
grid-template-columns: 1fr auto;
}
} }
@media (any-hover: hover) { @media (any-hover: hover) {
::-webkit-scrollbar { ::-webkit-scrollbar {

2650
index.html
View File

File diff suppressed because it is too large Load Diff

6
scripts/components.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long