Initial Version

core/src/scss/layout/_container.scss

@@ -0,0 +1,146 @@
+html {
+  overflow-y: auto;
+}
+.horizontalLayout {
+  .page-wrapper {
+    .v-container {
+      padding-top: 20px;
+    }
+  }
+}
+.spacer {
+  padding: 100px 0;
+  @media (max-width: 1264px) {
+    padding: 72px 0;
+  }
+}
+@media (max-width: 800px) {
+  .spacer {
+    padding: 40px 0;
+  }
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+.page-wrapper {
+  background: rgb(var(--v-theme-containerBg));
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 60px);
+  overflow: hidden;
+
+  .page-content-container {
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 15px;
+    @media (max-width: 1550px) {
+      max-width: 100%;
+    }
+    @media (min-width: 768px) {
+      padding-inline: 40px;
+    }
+  }
+
+  .page-footer-container {
+    flex-shrink: 0;
+  }
+
+  .v-container {
+    padding: 15px;
+    @media (max-width: 1550px) {
+      max-width: 100%;
+    }
+    @media (min-width: 768px) {
+      padding-inline: 40px;
+    }
+  }
+}
+.maxWidth {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+$sizes: (
+  'display-1': 44px,
+  'display-2': 40px,
+  'display-3': 30px,
+  'h1': 36px,
+  'h2': 30px,
+  'h3': 21px,
+  'h4': 18px,
+  'h5': 16px,
+  'h6': 14px,
+  'text-8': 8px,
+  'text-10': 10px,
+  'text-13': 13px,
+  'text-18': 18px,
+  'text-20': 20px,
+  'text-24': 24px,
+  'body-text-1': 10px
+);
+
+@each $pixel, $size in $sizes {
+  .#{$pixel} {
+    font-size: $size;
+    line-height: $size + 10;
+  }
+}
+
+.customizer-btn {
+  .icon {
+    animation: progress-circular-rotate 1.4s linear infinite;
+    transform-origin: center center;
+    transition: all 0.2s ease-in-out;
+  }
+}
+.fixed-width {
+  max-width: 1300px;
+}
+.ga-2 {
+  gap: 8px;
+}
+
+// font family
+body {
+  font-family: 'Public Sans', sans-serif;
+  .Roboto {
+    font-family: 'Roboto', sans-serif !important;
+  }
+
+  .Poppins {
+    font-family: 'Poppins', sans-serif !important;
+  }
+
+  .Inter {
+    font-family: 'Inter', sans-serif !important;
+  }
+
+  .Public {
+    font-family: 'Public sans', sans-serif !important;
+  }
+}
+
+@keyframes slideY {
+  0%,
+  50%,
+  100% {
+    transform: translateY(0px);
+  }
+  25% {
+    transform: translateY(-10px);
+  }
+  75% {
+    transform: translateY(10px);
+  }
+}
+
+.link {
+  color: rgb(var(--v-theme-lightText));
+  text-decoration: none;
+  &:hover {
+    color: rgb(var(--v-theme-primary));
+  }
+}