Skip to content

Commit aa0023c

Browse files
evantahlerevantahler
authored
Revert "brutalism style (#44)"
This reverts commit 8ea78bf.
1 parent 8ea78bf commit aa0023c

1 file changed

Lines changed: 112 additions & 137 deletions

File tree

‎frontend/styles/global.css‎

Lines changed: 112 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,190 +1,165 @@
11
:root {
2-
--brutal-red: #ff0000;
3-
--brutal-yellow: #ffff00;
4-
--brutal-blue: #0000ff;
5-
--brutal-green: #00ff00;
6-
--brutal-orange: #ff8000;
7-
--brutal-pink: #ff0080;
8-
--brutal-black: #000000;
9-
--brutal-white: #ffffff;
10-
--brutal-gray: #808080;
2+
--neon-pink: #ff00ff;
3+
--neon-cyan: #00ffff;
4+
--neon-purple: #8000ff;
5+
--dark-blue: #000033;
6+
--light-blue: #0066cc;
117
}
128

139
body {
14-
background: var(--brutal-white);
15-
color: var(--brutal-black);
16-
font-family: "Helvetica", "Arial Black", sans-serif;
17-
font-weight: 900;
10+
background: linear-gradient(135deg, var(--dark-blue), var(--light-blue));
11+
color: white;
12+
font-family: "Orbitron", "Arial", sans-serif;
1813
margin: 0;
1914
padding: 0;
20-
line-height: 1.2;
21-
font-size: 18px;
15+
position: relative;
2216
}
2317

24-
/* Brutal card styles */
18+
/* Miami Vice inspired card styles */
2519
.card {
26-
background: var(--brutal-yellow);
27-
border: 8px solid var(--brutal-black);
28-
border-radius: 0;
29-
box-shadow: 12px 12px 0 var(--brutal-red);
30-
padding: 24px;
31-
margin: 24px 0;
20+
background: rgba(255, 255, 255, 0.1);
21+
backdrop-filter: blur(10px);
22+
border: 1px solid var(--neon-cyan);
23+
border-radius: 8px;
24+
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
25+
padding: 20px;
26+
margin: 20px 0;
3227
position: relative;
33-
transform: rotate(-1deg);
34-
transition: transform 0.1s ease;
35-
}
36-
37-
.card:hover {
38-
transform: rotate(0deg) scale(1.02);
39-
box-shadow: 16px 16px 0 var(--brutal-blue);
40-
}
41-
42-
.card:nth-child(even) {
43-
background: var(--brutal-green);
44-
transform: rotate(1deg);
45-
box-shadow: -12px 12px 0 var(--brutal-orange);
28+
overflow: hidden;
4629
}
4730

48-
.card:nth-child(even):hover {
49-
box-shadow: -16px 16px 0 var(--brutal-pink);
31+
.card::before {
32+
content: "";
33+
position: absolute;
34+
top: -50%;
35+
left: -50%;
36+
width: 200%;
37+
height: 200%;
38+
background: linear-gradient(
39+
45deg,
40+
transparent,
41+
rgba(0, 255, 255, 0.1),
42+
transparent
43+
);
44+
transform: rotate(45deg);
45+
animation: shine 3s infinite;
46+
}
47+
48+
@keyframes shine {
49+
0% {
50+
transform: translateX(-100%) rotate(45deg);
51+
}
52+
100% {
53+
transform: translateX(100%) rotate(45deg);
54+
}
5055
}
5156

52-
/* Brutal button styles */
57+
/* Neon button styles */
5358
.btn {
54-
background: var(--brutal-red);
55-
border: 4px solid var(--brutal-black);
56-
color: var(--brutal-white);
57-
font-weight: 900;
59+
background: linear-gradient(45deg, var(--neon-pink), var(--neon-cyan));
60+
border: none;
61+
color: white;
62+
font-weight: bold;
5863
text-transform: uppercase;
59-
letter-spacing: 2px;
60-
transition: all 0.1s ease;
61-
font-family: "Helvetica", "Arial Black", sans-serif;
62-
font-size: 16px;
63-
padding: 12px 24px;
64-
cursor: pointer;
64+
letter-spacing: 1px;
65+
transition: all 0.3s ease;
66+
font-family: "Orbitron", sans-serif;
6567
position: relative;
66-
border-radius: 0;
67-
box-shadow: 6px 6px 0 var(--brutal-black);
68+
overflow: hidden;
69+
}
70+
71+
.btn::after {
72+
content: "";
73+
position: absolute;
74+
top: -50%;
75+
left: -50%;
76+
width: 200%;
77+
height: 200%;
78+
background: linear-gradient(
79+
45deg,
80+
transparent,
81+
rgba(255, 255, 255, 0.2),
82+
transparent
83+
);
84+
transform: rotate(45deg);
85+
transition: all 0.3s ease;
6886
}
6987

7088
.btn:hover {
71-
background: var(--brutal-blue);
72-
transform: translate(-2px, -2px);
73-
box-shadow: 8px 8px 0 var(--brutal-black);
89+
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
90+
transform: translateY(-2px);
7491
}
7592

76-
.btn:active {
77-
transform: translate(2px, 2px);
78-
box-shadow: 2px 2px 0 var(--brutal-black);
93+
.btn:hover::after {
94+
transform: translateX(100%) rotate(45deg);
7995
}
8096

8197
.btn-outline-secondary {
82-
background: var(--brutal-white);
83-
border: 4px solid var(--brutal-black);
84-
color: var(--brutal-black);
85-
box-shadow: 6px 6px 0 var(--brutal-gray);
98+
background: transparent;
99+
border: 2px solid var(--neon-cyan);
100+
color: var(--neon-cyan);
86101
}
87102

88103
.btn-outline-secondary:hover {
89-
background: var(--brutal-orange);
90-
color: var(--brutal-white);
91-
box-shadow: 8px 8px 0 var(--brutal-black);
104+
background: var(--neon-cyan);
105+
color: var(--dark-blue);
92106
}
93107

94-
/* Brutal table styles */
108+
/* Table styles */
95109
.table {
96-
color: var(--brutal-black);
97-
background: var(--brutal-white);
98-
border: 6px solid var(--brutal-black);
99-
border-collapse: separate;
100-
border-spacing: 0;
101-
}
102-
103-
.table td,
104-
.table th {
105-
border: 3px solid var(--brutal-black);
106-
padding: 16px;
107-
font-weight: 900;
108-
text-transform: uppercase;
109-
}
110-
111-
.table thead th {
112-
background: var(--brutal-red);
113-
color: var(--brutal-white);
114-
}
115-
116-
.table tbody tr:nth-child(odd) {
117-
background: var(--brutal-yellow);
110+
color: white;
111+
background: rgba(255, 255, 255, 0.1);
112+
backdrop-filter: blur(10px);
113+
border: 1px solid var(--neon-cyan);
118114
}
119115

120-
.table tbody tr:nth-child(even) {
121-
background: var(--brutal-green);
116+
.table td {
117+
border-color: var(--neon-cyan);
122118
}
123119

124-
/* Brutal form styles */
120+
/* Form styles */
125121
.form-control {
126-
background: var(--brutal-white);
127-
border: 4px solid var(--brutal-black);
128-
color: var(--brutal-black);
129-
font-family: "Helvetica", "Arial Black", sans-serif;
130-
font-weight: 900;
131-
padding: 12px;
132-
border-radius: 0;
133-
box-shadow: 4px 4px 0 var(--brutal-gray);
122+
background: rgba(255, 255, 255, 0.1);
123+
border: 1px solid var(--neon-cyan);
124+
color: white;
125+
font-family: "Orbitron", sans-serif;
134126
}
135127

136128
.form-control:focus {
137-
background: var(--brutal-yellow);
138-
border-color: var(--brutal-red);
139-
box-shadow: 6px 6px 0 var(--brutal-black);
140-
color: var(--brutal-black);
141-
outline: none;
129+
background: rgba(255, 255, 255, 0.2);
130+
border-color: var(--neon-pink);
131+
box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
132+
color: white;
142133
}
143134

144-
/* Brutal heading styles */
135+
/* Heading styles */
145136
h1,
146137
h2,
147138
h3,
148139
h4,
149140
h5,
150141
h6 {
151-
color: var(--brutal-black);
152-
font-weight: 900;
153-
letter-spacing: 3px;
154-
font-family: "Helvetica", "Arial Black", sans-serif;
142+
color: var(--neon-cyan);
143+
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
144+
font-weight: bold;
145+
letter-spacing: 1px;
146+
font-family: "Orbitron", sans-serif;
155147
position: relative;
156-
text-transform: uppercase;
157-
background: var(--brutal-red);
158-
color: var(--brutal-white);
159-
padding: 16px 24px;
160-
margin: 24px 0;
161-
border: 6px solid var(--brutal-black);
162-
box-shadow: 8px 8px 0 var(--brutal-yellow);
163-
transform: rotate(-1deg);
164148
}
165149

166-
h1 {
167-
font-size: 3rem;
168-
}
169-
h2 {
170-
font-size: 2.5rem;
171-
background: var(--brutal-blue);
172-
}
173-
h3 {
174-
font-size: 2rem;
175-
background: var(--brutal-green);
176-
}
177-
h4 {
178-
font-size: 1.5rem;
179-
background: var(--brutal-orange);
180-
}
181-
h5 {
182-
font-size: 1.25rem;
183-
background: var(--brutal-pink);
184-
}
185-
h6 {
186-
font-size: 1rem;
187-
background: var(--brutal-gray);
150+
h1::after,
151+
h2::after,
152+
h3::after,
153+
h4::after,
154+
h5::after,
155+
h6::after {
156+
content: "";
157+
position: absolute;
158+
bottom: -5px;
159+
left: 0;
160+
width: 100%;
161+
height: 2px;
162+
background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
188163
}
189164

190165
/* InfoBar styles */

0 commit comments

Comments
 (0)