Skip to content

Commit 5ac5e22

Browse files
System-EndSystem-End
committed
Revert "css updates"
This reverts commit 4080ef4.
1 parent 4080ef4 commit 5ac5e22

File tree

3 files changed

+117
-91
lines changed

3 files changed

+117
-91
lines changed

‎src/styles/base.css‎

Lines changed: 81 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -2,110 +2,101 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
/* Base styles */
6-
:root {
7-
--background-primary: #1a0b2e;
8-
--background-secondary: #2f1c54;
9-
--accent-primary: #9d4edd;
10-
--accent-neon: #b249f8;
11-
--text-glow: #e0aaff;
12-
--text-primary: #ffffff;
13-
--dark-accent: #240046;
14-
--fox-pink: #ffc6e5;
15-
--fox-pink-glow: #ffadd6;
16-
--fox-orange: #ff9466;
17-
--fox-white: #fff5f9;
18-
}
19-
20-
/* Utility classes */
21-
.text-glow {
22-
text-shadow: 0 0 10px var(--text-glow);
23-
}
24-
25-
.section-spacing > * + * {
26-
margin-top: 3rem;
27-
}
28-
29-
.card-spacing > * + * {
30-
margin-top: 2rem;
31-
}
32-
33-
.element-spacing > * + * {
34-
margin-top: 1rem;
35-
}
5+
@layer base {
6+
:root {
7+
--background-primary: #1a0b2e;
8+
--background-secondary: #2f1c54;
9+
--accent-primary: #9d4edd;
10+
--accent-neon: #b249f8;
11+
--text-glow: #e0aaff;
12+
--text-primary: #ffffff;
13+
--dark-accent: #240046;
14+
--fox-pink: #ffc6e5;
15+
--fox-pink-glow: #ffadd6;
16+
--fox-orange: #ff9466;
17+
--fox-white: #fff5f9;
18+
}
3619

37-
/* Component classes */
38-
.content-wrapper {
39-
max-width: 80rem;
40-
margin-left: auto;
41-
margin-right: auto;
42-
padding: 2rem 1rem;
20+
body {
21+
background-color: var(--background-primary);
22+
color: var(--text-primary);
23+
}
4324
}
4425

45-
.nav-link {
46-
display: flex;
47-
align-items: center;
48-
gap: 0.75rem;
49-
padding: 0.5rem 1rem;
50-
border-radius: 0.5rem;
51-
transition: all 0.2s ease;
26+
@layer utilities {
27+
.text-glow {
28+
text-shadow: 0 0 10px var(--text-glow);
29+
}
30+
31+
.section-spacing > * + * {
32+
margin-top: 1.5rem;
33+
}
34+
35+
.card-spacing > * + * {
36+
margin-top: 1rem;
37+
}
38+
39+
.element-spacing > * + * {
40+
margin-top: 0.75rem;
41+
}
5242
}
5343

54-
.nav-link:hover {
55-
background-color: rgba(157, 78, 221, 0.05);
56-
color: var(--accent-neon);
57-
}
44+
@layer components {
45+
.content-wrapper {
46+
max-width: 80rem;
47+
margin-left: auto;
48+
margin-right: auto;
49+
padding: 1.5rem 1rem;
50+
}
5851

59-
.nav-link.active {
60-
background-color: rgba(157, 78, 221, 0.1);
61-
color: var(--accent-neon);
62-
}
52+
.nav-link {
53+
display: flex;
54+
align-items: center;
55+
gap: 0.75rem;
56+
padding: 0.5rem 1rem;
57+
border-radius: 0.5rem;
58+
transition: all 0.2s ease;
59+
}
6360

64-
.fox-card {
65-
position: relative;
66-
border-radius: 0.75rem;
67-
padding: 2rem;
68-
transition: all 0.2s ease;
69-
border: 1px solid rgba(157, 78, 221, 0.1);
70-
background: linear-gradient(135deg, rgba(47, 28, 84, 0.2) 0%, rgba(157, 78, 221, 0.05) 100%);
71-
}
61+
.nav-link:hover {
62+
background-color: rgba(157, 78, 221, 0.05);
63+
color: var(--accent-neon);
64+
}
7265

73-
.fox-card:hover {
74-
border-color: rgba(157, 78, 221, 0.2);
75-
box-shadow: 0 2px 8px rgba(157, 78, 221, 0.05);
76-
}
66+
.nav-link.active {
67+
background-color: rgba(157, 78, 221, 0.1);
68+
color: var(--accent-neon);
69+
}
7770

78-
.content-grid {
79-
display: grid;
80-
gap: 2rem;
81-
grid-template-columns: repeat(1, minmax(0, 1fr));
82-
}
71+
.fox-card {
72+
position: relative;
73+
border-radius: 0.75rem;
74+
padding: 1.5rem;
75+
transition: all 0.2s ease;
76+
border: 1px solid rgba(157, 78, 221, 0.1);
77+
background: linear-gradient(135deg, rgba(47, 28, 84, 0.2) 0%, rgba(157, 78, 221, 0.05) 100%);
78+
}
8379

84-
@media (min-width: 768px) {
85-
.content-grid {
86-
grid-template-columns: repeat(2, minmax(0, 1fr));
80+
.fox-card:hover {
81+
border-color: rgba(157, 78, 221, 0.2);
82+
box-shadow: 0 2px 8px rgba(157, 78, 221, 0.05);
8783
}
88-
}
8984

90-
@media (min-width: 1024px) {
9185
.content-grid {
92-
grid-template-columns: repeat(3, minmax(0, 1fr));
86+
display: grid;
87+
gap: 1.5rem;
88+
grid-template-columns: repeat(1, minmax(0, 1fr));
9389
}
94-
}
95-
96-
/* Additional utilities */
97-
.bg-gradient-card {
98-
background: linear-gradient(135deg, rgba(47, 28, 84, 0.3) 0%, rgba(157, 78, 221, 0.1) 100%);
99-
}
100-
101-
.border-accent {
102-
border-color: var(--accent-primary);
103-
}
10490

105-
.text-accent {
106-
color: var(--accent-primary);
107-
}
91+
@media (min-width: 768px) {
92+
.content-grid {
93+
grid-template-columns: repeat(2, minmax(0, 1fr));
94+
}
95+
}
10896

109-
.text-primary {
110-
color: var(--text-primary);
97+
@media (min-width: 1024px) {
98+
.content-grid {
99+
grid-template-columns: repeat(3, minmax(0, 1fr));
100+
}
101+
}
111102
}

‎src/styles/utilities.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@layer utilities {
2+
/* Animated background */
23
.animated-bg {
34
position: relative;
45
overflow: hidden;
@@ -14,6 +15,7 @@
1415
animation: gradientShift 15s ease infinite;
1516
}
1617

18+
/* Fox ear styling */
1719
.fox-ear {
1820
position: absolute;
1921
width: 30px;
@@ -36,6 +38,34 @@
3638
transform: rotate(-45deg);
3739
border-radius: 0 0 15px 0;
3840
}
41+
42+
/* Hover effects */
43+
.hover-glow {
44+
transition: all 0.2s ease;
45+
}
46+
47+
.hover-glow:hover {
48+
filter: drop-shadow(0 0 4px var(--fox-pink-glow));
49+
}
50+
51+
/* Spacing utilities */
52+
.section-spacing {
53+
margin-top: 2rem;
54+
margin-bottom: 2rem;
55+
}
56+
57+
.section-spacing > * + * {
58+
margin-top: 1.5rem;
59+
}
60+
61+
.content-spacing {
62+
margin-top: 1rem;
63+
margin-bottom: 1rem;
64+
}
65+
66+
.content-spacing > * + * {
67+
margin-top: 1rem;
68+
}
3969
}
4070

4171
@keyframes gradientShift {

‎tailwind.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,16 @@ export default {
2121
},
2222
backgroundImage: {
2323
'gradient-primary': 'linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%)',
24-
'gradient-card': 'linear-gradient(135deg, rgba(47, 28, 84, 0.2) 0%, rgba(157, 78, 221, 0.05) 100%)',
24+
'gradient-card': 'linear-gradient(135deg, rgba(47, 28, 84, 0.3) 0%, rgba(157, 78, 221, 0.1) 100%)',
25+
},
26+
spacing: {
27+
'ear': '30px',
2528
},
2629
opacity: {
2730
'5': '0.05',
2831
'10': '0.1',
32+
'15': '0.15',
33+
'20': '0.2',
2934
},
3035
},
3136
},

0 commit comments

Comments
 (0)