feat: changed background wave to gradient

Ryaang · Aug 11, 2023 · e9f02e8 · e9f02e8
1 parent fbcb65e
commit e9f02e8
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 114 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -10,6 +10,7 @@
       <HeaderMain />
       <div class="app-banner app-banner-image" :style="headerImage" />
       <div class="app-banner app-banner-screen" :style="headerBaseBackground" />
+      <div class="app-banner app-banner-cover" />
       <div class="relative z-10">
         <router-view v-slot="{ Component }">
           <transition name="fade-slide-y" mode="out-in">
@@ -191,9 +192,7 @@ export default defineComponent({
       themeConfig: computed(() => appStore.themeConfig),
       headerImage: computed(() => {
         return {
-          backgroundImage: `url(${
-            commonStore.headerImage
-          }), url(${defaultCover})`,
+          backgroundImage: `url(${commonStore.headerImage}), url(${defaultCover})`,
           opacity: commonStore.headerImage !== '' ? 1 : 0
         }
       }),
@@ -241,7 +240,6 @@ body {
 
 #app {
   @apply relative min-w-full min-h-screen h-full;
-  font-family: Rubik, Avenir, Helvetica, Arial, sans-serif;
   .app-wrapper {
     @apply bg-ob-deep-900 min-w-full h-full pb-12;
     transition-property: transform, border-radius;
@@ -281,111 +279,20 @@ body {
   left: 0;
   width: 100%;
   z-index: 1;
-  clip-path: polygon(
-    100% 0,
-    0 0,
-    0 77.5%,
-    1% 77.4%,
-    2% 77.1%,
-    3% 76.6%,
-    4% 75.9%,
-    5% 75.05%,
-    6% 74.05%,
-    7% 72.95%,
-    8% 71.75%,
-    9% 70.55%,
-    10% 69.3%,
-    11% 68.05%,
-    12% 66.9%,
-    13% 65.8%,
-    14% 64.8%,
-    15% 64%,
-    16% 63.35%,
-    17% 62.85%,
-    18% 62.6%,
-    19% 62.5%,
-    20% 62.65%,
-    21% 63%,
-    22% 63.5%,
-    23% 64.2%,
-    24% 65.1%,
-    25% 66.1%,
-    26% 67.2%,
-    27% 68.4%,
-    28% 69.65%,
-    29% 70.9%,
-    30% 72.15%,
-    31% 73.3%,
-    32% 74.35%,
-    33% 75.3%,
-    34% 76.1%,
-    35% 76.75%,
-    36% 77.2%,
-    37% 77.45%,
-    38% 77.5%,
-    39% 77.3%,
-    40% 76.95%,
-    41% 76.4%,
-    42% 75.65%,
-    43% 74.75%,
-    44% 73.75%,
-    45% 72.6%,
-    46% 71.4%,
-    47% 70.15%,
-    48% 68.9%,
-    49% 67.7%,
-    50% 66.55%,
-    51% 65.5%,
-    52% 64.55%,
-    53% 63.75%,
-    54% 63.15%,
-    55% 62.75%,
-    56% 62.55%,
-    57% 62.5%,
-    58% 62.7%,
-    59% 63.1%,
-    60% 63.7%,
-    61% 64.45%,
-    62% 65.4%,
-    63% 66.45%,
-    64% 67.6%,
-    65% 68.8%,
-    66% 70.05%,
-    67% 71.3%,
-    68% 72.5%,
-    69% 73.6%,
-    70% 74.65%,
-    71% 75.55%,
-    72% 76.35%,
-    73% 76.9%,
-    74% 77.3%,
-    75% 77.5%,
-    76% 77.45%,
-    77% 77.25%,
-    78% 76.8%,
-    79% 76.2%,
-    80% 75.4%,
-    81% 74.45%,
-    82% 73.4%,
-    83% 72.25%,
-    84% 71.05%,
-    85% 69.8%,
-    86% 68.55%,
-    87% 67.35%,
-    88% 66.2%,
-    89% 65.2%,
-    90% 64.3%,
-    91% 63.55%,
-    92% 63%,
-    93% 62.65%,
-    94% 62.5%,
-    95% 62.55%,
-    96% 62.8%,
-    97% 63.3%,
-    98% 63.9%,
-    99% 64.75%,
-    100% 65.7%
-  );
+}
+
+.app-banner-cover {
+  pointer-events: none;
+  position: absolute;
+  top: 60px;
+  z-index: 3;
+  height: 540px;
+  background: var(--banner-cover);
+}
+
+.theme-light .app-banner-cover {
+  top: 300px;
+  height: 300px;
 }
 
 .app-banner-image {

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -24,11 +24,29 @@
 }
 
 .diamond-icon {
-  @apply w-12 h-12 text-xl flex items-center justify-center text-ob-bright hover:opacity-50 transition cursor-pointer;
+  @apply w-[2.7rem] h-[2.7rem] text-xl flex items-center justify-center text-ob-bright hover:opacity-50 transition cursor-pointer;
 }
 
 html {
   scrollbar-color: rgba(82, 82, 82, 0.8) transparent;
+  height: 100%;
+  font-size: 18px;
+}
+
+body {
+  min-height: 100%;
+  font-size: 16px;
+  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
+  line-height: 2;
+}
+
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code {
+  font-size: inherit !important;
 }
 
 html::-webkit-scrollbar {

diff --git a/src/styles/theme-variables.scss b/src/styles/theme-variables.scss
@@ -1,6 +1,6 @@
 :root {
   --max-width: 1600px;
-  --gap: 2rem;
+  --gap: 1.75rem;
   --main-gradient: linear-gradient(
     130deg,
     #24c6dc,
@@ -11,7 +11,7 @@
 }
 
 .theme-light {
-  --background-primary: #f1f3f9;
+  --background-primary: hsl(225, 40%, 96%);
   --background-primary-alt: #fafafa;
   --background-secondary: #ffffff;
   --background-secondary-alt: #2e3236;
@@ -76,6 +76,25 @@
     hsla(0, 0%, 98%, 0.987) 91.9%,
     var(--background-secondary)
   );
+  --banner-cover: linear-gradient(180deg,
+        hsla(225,
+          40%,
+          96%, 0) 0,
+        hsla(225, 40%, 96%, 0.013) 8.1%,
+        hsla(225, 40%, 96%, 0.049) 15.5%,
+        hsla(225, 40%, 96%, 0.104) 22.5%,
+        hsla(225, 40%, 96%, 0.175) 29%,
+        hsla(225, 40%, 96%, 0.259) 35.3%,
+        hsla(225, 40%, 96%, 0.352) 41.2%,
+        hsla(225, 40%, 96%, 0.45) 47.1%,
+        hsla(225, 40%, 96%, 0.55) 52.9%,
+        hsla(225, 40%, 96%, 0.648) 58.8%,
+        hsla(225, 40%, 96%, 0.741) 64.7%,
+        hsla(225, 40%, 96%, 0.825) 71%,
+        hsla(225, 40%, 96%, 0.896) 77.5%,
+        hsla(225, 40%, 96%, 0.951) 84.5%,
+        hsla(225, 40%, 96%, 0.987) 91.9%,
+        var(--background-primary));
   --trans-ease: all 250ms ease;
   --accent-shadow: 0 20px 25px -5px rgba(232, 57, 255, 0.06),
     0 10px 10px -5px rgba(53, 11, 59, 0.1);
@@ -158,6 +177,23 @@
     hsla(00, 0%, 13%, 0.987) 91.9%,
     var(--background-secondary)
   );
+  --banner-cover: linear-gradient(180deg,
+        hsla(0, 0%, 10%, 0) 0,
+        hsla(0, 0%, 10%, 0.010) 8.1%,
+        hsla(0, 0%, 10%, 0.049) 15.5%,
+        hsla(0, 0%, 10%, 0.104) 22.5%,
+        hsla(0, 0%, 10%, 0.175) 29%,
+        hsla(0, 0%, 10%, 0.259) 35.3%,
+        hsla(0, 0%, 10%, 0.352) 41.2%,
+        hsla(0, 0%, 10%, 0.45) 47.1%,
+        hsla(0, 0%, 10%, 0.55) 52.9%,
+        hsla(0, 0%, 10%, 0.648) 58.8%,
+        hsla(0, 0%, 10%, 0.741) 64.7%,
+        hsla(0, 0%, 10%, 0.825) 71%,
+        hsla(0, 0%, 10%, 0.896) 77.5%,
+        hsla(0, 0%, 10%, 0.951) 84.5%,
+        hsla(00, 0%, 10%, 0.987) 91.9%,
+        var(--background-primary));
   --trans-ease: all 250ms ease;
   --accent-shadow: 0 20px 25px -5px rgba(11, 42, 59, 0.35),
     0 10px 10px -5px rgba(11, 42, 59, 0.14);
@@ -198,7 +234,7 @@
 }
 
 .ob-avatar {
-  @apply h-28 w-28 shadow-xl m-0;
+  @apply h-24 w-24 shadow-xl m-0;
 }
 .footer-avatar {
   @apply h-20 w-20 shadow-xl m-0 opacity-40;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {