Code refactoring

css/main.css

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