Skip to content

Commit 4080ef4

Browse files
System-EndSystem-End
committed
css updates
1 parent 48aeabc commit 4080ef4

File tree

3 files changed

+91
-117
lines changed

3 files changed

+91
-117
lines changed

‎src/styles/base.css‎

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

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-
}
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+
}
1919

20-
body {
21-
background-color: var(--background-primary);
22-
color: var(--text-primary);
23-
}
20+
/* Utility classes */
21+
.text-glow {
22+
text-shadow: 0 0 10px var(--text-glow);
2423
}
2524

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-
}
25+
.section-spacing > * + * {
26+
margin-top: 3rem;
4227
}
4328

44-
@layer components {
45-
.content-wrapper {
46-
max-width: 80rem;
47-
margin-left: auto;
48-
margin-right: auto;
49-
padding: 1.5rem 1rem;
50-
}
29+
.card-spacing > * + * {
30+
margin-top: 2rem;
31+
}
5132

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-
}
33+
.element-spacing > * + * {
34+
margin-top: 1rem;
35+
}
6036

61-
.nav-link:hover {
62-
background-color: rgba(157, 78, 221, 0.05);
63-
color: var(--accent-neon);
64-
}
37+
/* Component classes */
38+
.content-wrapper {
39+
max-width: 80rem;
40+
margin-left: auto;
41+
margin-right: auto;
42+
padding: 2rem 1rem;
43+
}
6544

66-
.nav-link.active {
67-
background-color: rgba(157, 78, 221, 0.1);
68-
color: var(--accent-neon);
69-
}
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;
52+
}
7053

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-
}
54+
.nav-link:hover {
55+
background-color: rgba(157, 78, 221, 0.05);
56+
color: var(--accent-neon);
57+
}
7958

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);
83-
}
59+
.nav-link.active {
60+
background-color: rgba(157, 78, 221, 0.1);
61+
color: var(--accent-neon);
62+
}
63+
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+
}
72+
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+
}
8477

78+
.content-grid {
79+
display: grid;
80+
gap: 2rem;
81+
grid-template-columns: repeat(1, minmax(0, 1fr));
82+
}
83+
84+
@media (min-width: 768px) {
8585
.content-grid {
86-
display: grid;
87-
gap: 1.5rem;
88-
grid-template-columns: repeat(1, minmax(0, 1fr));
86+
grid-template-columns: repeat(2, minmax(0, 1fr));
8987
}
88+
}
9089

91-
@media (min-width: 768px) {
92-
.content-grid {
93-
grid-template-columns: repeat(2, minmax(0, 1fr));
94-
}
90+
@media (min-width: 1024px) {
91+
.content-grid {
92+
grid-template-columns: repeat(3, minmax(0, 1fr));
9593
}
94+
}
9695

97-
@media (min-width: 1024px) {
98-
.content-grid {
99-
grid-template-columns: repeat(3, minmax(0, 1fr));
100-
}
101-
}
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+
}
104+
105+
.text-accent {
106+
color: var(--accent-primary);
107+
}
108+
109+
.text-primary {
110+
color: var(--text-primary);
102111
}

‎src/styles/utilities.css‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@layer utilities {
2-
/* Animated background */
32
.animated-bg {
43
position: relative;
54
overflow: hidden;
@@ -15,7 +14,6 @@
1514
animation: gradientShift 15s ease infinite;
1615
}
1716

18-
/* Fox ear styling */
1917
.fox-ear {
2018
position: absolute;
2119
width: 30px;
@@ -38,34 +36,6 @@
3836
transform: rotate(-45deg);
3937
border-radius: 0 0 15px 0;
4038
}
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-
}
6939
}
7040

7141
@keyframes gradientShift {

‎tailwind.config.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,11 @@ 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.3) 0%, rgba(157, 78, 221, 0.1) 100%)',
25-
},
26-
spacing: {
27-
'ear': '30px',
24+
'gradient-card': 'linear-gradient(135deg, rgba(47, 28, 84, 0.2) 0%, rgba(157, 78, 221, 0.05) 100%)',
2825
},
2926
opacity: {
3027
'5': '0.05',
3128
'10': '0.1',
32-
'15': '0.15',
33-
'20': '0.2',
3429
},
3530
},
3631
},

0 commit comments

Comments
 (0)