Mercurial

comparison react_games/public/base.css @ 37:fb9bcd3145cb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ReactGames] Few games I made using react just to practice few things.
author MrJuneJune <me@mrjunejune.com>
date Mon, 01 Dec 2025 20:22:47 -0800
parents
children 9f4429c49733
comparison
equal deleted inserted replaced
36:84672efec192 37:fb9bcd3145cb
1 * {
2 margin: 0;
3 padding: 0;
4 box-sizing: border-box;
5 }
6
7 body {
8 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
9 background: linear-gradient(135deg, #667eea 10%, #764ba2 100%);
10 background-attachment: fixed;
11 background-repeat: no-repeat;
12 background-size: cover;
13 min-height: 100vh;
14 overflow-x: hidden;
15 }
16
17 .container {
18 display: flex;
19 flex-direction: column;
20 justify-content: center;
21 align-items: center;
22 padding: 2rem;
23 position: relative;
24 }
25
26 /* Animated background particles */
27 .particle {
28 position: absolute;
29 background: rgba(255, 255, 255, 0.1);
30 border-radius: 50%;
31 pointer-events: none;
32 animation: float 6s ease-in-out infinite;
33 }
34
35 .particle:nth-child(1) { width: 80px; height: 80px; top: 10%; left: 10%; animation-delay: 0s; }
36 .particle:nth-child(2) { width: 60px; height: 60px; top: 20%; right: 10%; animation-delay: 2s; }
37 .particle:nth-child(3) { width: 40px; height: 40px; bottom: 30%; left: 20%; animation-delay: 4s; }
38 .particle:nth-child(4) { width: 100px; height: 100px; bottom: 10%; right: 20%; animation-delay: 1s; }
39
40 @keyframes float {
41 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
42 50% { transform: translateY(-20px) rotate(180deg); opacity: 0.3; }
43 }
44
45 .main-content {
46 text-align: center;
47 z-index: 10.logo:hover::before {
48 transform: rotate(45deg) translate(50%, 50%);
49 };
50 max-width: 800px;
51 }
52
53 .logo-container {
54 margin-bottom: 2rem;
55 position: relative;
56 }
57
58 .logo {
59 width: 120px;
60 height: 120px;
61 background: url('epi_favicon.svg');
62 border-radius: 50%;
63 display: flex;
64 align-items: center;
65 justify-content: center;
66 margin: 0 auto;
67 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
68 transition: transform 0.3s ease;
69 position: relative;
70 overflow: hidden;
71 }
72
73 .logo::before {
74 content: '';
75 position: absolute;
76 top: -50%;
77 left: -50%;
78 width: 200%;
79 height: 200%;
80 background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
81 transform: rotate(45deg);
82 transition: transform 0.6s ease;
83 }
84
85 .logo:hover {
86 transform: scale(1.05) rotate(5deg);
87 }
88
89 .logo-placeholder {
90 font-size: 3rem;
91 color: #333;
92 }
93
94 h1 {
95 font-size: 3.5rem;
96 font-weight: 800;
97 color: white;
98 margin-bottom: 1rem;
99 background: linear-gradient(45deg, #fff, #f0f0f0);
100 -webkit-background-clip: text;
101 -webkit-text-fill-color: transparent;
102 background-clip: text;
103 text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
104 animation: fadeInUp 1s ease-out;
105 }
106
107 .subtitle {
108 font-size: 1.3rem;
109 color: rgba(255, 255, 255, 0.9);
110 margin-bottom: 3rem;
111 font-weight: 300;
112 animation: fadeInUp 1s ease-out 0.2s both;
113 }
114
115 .nav-grid {
116 display: grid;
117 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
118 gap: 2rem;
119 width: 100%;
120 max-width: 800px;
121 animation: fadeInUp 1s ease-out 0.4s both;
122 }
123
124 .nav-card {
125 background: rgba(255, 255, 255, 0.1);
126 backdrop-filter: blur(20px);
127 border-radius: 20px;
128 padding: 2.5rem 2rem;
129 text-decoration: none;
130 color: white;
131 transition: all 0.3s ease;
132 border: 1px solid rgba(255, 255, 255, 0.2);
133 position: relative;
134 overflow: hidden;
135 group: hover;
136 }
137
138 .nav-card::before {
139 content: '';
140 position: absolute;
141 top: 0;
142 left: -100%;
143 width: 100%;
144 height: 100%;
145 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
146 transition: left 0.5s ease;
147 }
148
149 .nav-card:hover::before {
150 left: 100%;
151 }
152
153 .nav-card:hover {
154 transform: translateY(-10px) scale(1.02);
155 background: rgba(255, 255, 255, 0.15);
156 box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
157 }
158
159 .nav-icon {
160 font-size: 3rem;
161 margin-bottom: 1rem;
162 display: block;
163 transition: transform 0.3s ease;
164 }
165
166 .nav-card:hover .nav-icon {
167 transform: scale(1.1) rotate(5deg);
168 }
169
170 .nav-title {
171 font-size: 1.5rem;
172 font-weight: 600;
173 margin-bottom: 0.5rem;
174 }
175
176 .nav-description {
177 font-size: 1rem;
178 opacity: 0.8;
179 line-height: 1.5;
180 }
181
182 .games { --accent: #ff6b6b; }
183 .todo { --accent: #4ecdc4; }
184 .others { --accent: #45b7d1; }
185
186 .nav-card.games:hover { border-color: var(--accent); box-shadow: 0 25px 50px rgba(255, 107, 107, 0.3); }
187 .nav-card.todo:hover { border-color: var(--accent); box-shadow: 0 25px 50px rgba(78, 205, 196, 0.3); }
188 .nav-card.others:hover { border-color: var(--accent); box-shadow: 0 25px 50px rgba(69, 183, 209, 0.3); }
189
190 @keyframes fadeInUp {
191 from {
192 opacity: 0;
193 transform: translateY(30px);
194 }
195 to {
196 opacity: 1;
197 transform: translateY(0);
198 }
199 }
200
201 @media (max-width: 768px) {
202 h1 {
203 font-size: 2.5rem;
204 }
205
206 .subtitle {
207 font-size: 1.1rem;
208 }
209
210 .nav-grid {
211 grid-template-columns: 1fr;
212 gap: 1.5rem;
213 }
214
215 .nav-card {
216 padding: 2rem 1.5rem;
217 }
218 }
219
220 /* Floating elements */
221 .floating-shape {
222 position: absolute;
223 pointer-events: none;
224 opacity: 0.1;
225 }
226
227 .shape-1 {
228 top: 10%;
229 left: 5%;
230 width: 50px;
231 height: 50px;
232 background: white;
233 border-radius: 10px;
234 animation: rotate 10s linear infinite;
235 }
236
237 .shape-2 {
238 top: 70%;
239 right: 10%;
240 width: 30px;
241 height: 30px;
242 background: white;
243 border-radius: 50%;
244 animation: rotate 15s linear infinite reverse;
245 }
246
247 @keyframes rotate {
248 from { transform: rotate(0deg); }
249 to { transform: rotate(360deg); }
250 }
251
252 /* This gets used within the script */
253 @keyframes sparkleAnim {
254 0% {
255 transform: scale(0) rotate(0deg);
256 opacity: 1;
257 }
258 50% {
259 transform: scale(1) rotate(180deg);
260 opacity: 1;
261 }
262 100% {
263 transform: scale(0) rotate(360deg);
264 opacity: 0;
265 }
266 }