YatCC-AI/src/components/HomeTitle.astro at main · arcsysu/YatCC-AI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
---
import "@styles/satoshi.css";
import "@styles/harmonyos-sans.css";

interface Props {
  title?: string;
  subtitle?: string;
}

const {
  title = "YatCC AI",
  subtitle = "从应用到算力的一站式、智能化服务平台",
} = Astro.props;
---

<style define:vars={{}}>
  @keyframes flowDirectional {
    from {
      background-position: 0% center;
    }
    to {
      background-position: -200% center;
    }
  }

  @keyframes fade-slide-in {
    0% {
      opacity: 0;
      transform: translateX(-30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
      filter: blur(0);
    }
  }

  .container {
    @apply flex flex-col items-center text-center px-4 py-20;
  }

  .fluid-title {
    font-family: "Satoshi-Bold";
    font-weight: bold;
    font-variation-settings: normal;
    font-optical-sizing: auto;
    font-feature-settings:
      "salt" 1,
      "ss02" 1;
    font-size: clamp(10vw, 70rem, 90%);

    letter-spacing: -0.02em;
    /* margin-top: 0.7em; */
    margin-bottom: 0.01em;
    width: fit-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    user-select: none;

    position: relative;
    isolation: isolate;
    overflow: visible;
    background-image: linear-gradient(
      to right,
      #715ec2,
      #a451bf,
      #ebb5a5,
      #a451bf,
      #715ec2,
      #a451bf,
      #ebb5a5,
      #a451bf,
      #715ec2
    );
    background-size: 200% auto;

    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;

    animation:
      flowDirectional 4s linear infinite,
      fade-slide-in 0.8s ease-out forwards;
  }

  .fluid-subtitle {
    font-family: "HarmonyOS-Sans-SC-Medium", sans-serif;
    font-size: clamp(10px, 1.5vw + 0.5rem, 1.5rem);
    @apply mt-6 text-slate-400 max-w-2xl leading-relaxed;
    color: var(--sub-text-color);
    letter-spacing: -0.01em;
    margin-left: 0.3rem;
    max-width: 80%;

    user-select: none;

    animation: fade-slide-in 0.8s ease-out forwards;
  }

  /* 针对超大屏幕的微调 */
  @media (min-width: 1536px) {
    .fluid-title {
      font-size: clamp(10vw, 70rem, 99%);
      letter-spacing: -0.06em;
    }
  }

  @media (max-width: 400px) {
    .container {
      padding-top: 3.75rem;
      padding-bottom: 1.5rem;
      padding-inline: 0.75rem;
    }

    .fluid-title {
      width: 100%;
      font-size: clamp(2.7rem, 15vw, 4rem);
      line-height: 1;
      white-space: normal;
      text-wrap: balance;
    }

    .fluid-subtitle {
      margin-left: 0;
      margin-top: 1rem;
      max-width: 100%;
      font-size: 0.95rem;
    }
  }
</style>

<div>
  <div class="container">
    <h1 class="fluid-title">{title}</h1>
    <div class="fluid-subtitle">
      {subtitle}
    </div>
  </div>
</div>