Skip to content

Commit 640bb15

Browse files
zachlattazachlatta
committed
Implement Summer of Making color palette
- Override default Tailwind colors with Hack Club Summer of Making palette - Red: #ec3750, Orange: #ff8c37, Yellow: #ffd700, Purple: #9c27b0, Blue: #2196f3, Green: #4caf50 - All existing templates now use vibrant Summer of Making colors automatically - Homepage hero updated to use red-to-orange gradient with yellow CTA button - Color palette researched from summer.hackclub.com for brand consistency
1 parent 9115c35 commit 640bb15

File tree

2 files changed

+47
-63
lines changed

2 files changed

+47
-63
lines changed

‎app/assets/tailwind/application.css‎

Lines changed: 44 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,48 @@
11
@import "tailwindcss";
22

3-
/* Summer of Making Color Palette */
3+
/* Summer of Making Color Palette - Override Default Tailwind Colors */
44
:root {
5-
--hackclub-red: #ec3750;
6-
--hackclub-orange: #ff8c37;
7-
--hackclub-yellow: #ffd700;
8-
--hackclub-purple: #9c27b0;
9-
--hackclub-blue: #2196f3;
10-
--hackclub-green: #4caf50;
11-
--hackclub-gray: #666666;
12-
--hackclub-light: #f8f9fa;
13-
}
14-
15-
@layer utilities {
16-
/* Text Colors */
17-
.text-hackclub-red { color: var(--hackclub-red); }
18-
.text-hackclub-orange { color: var(--hackclub-orange); }
19-
.text-hackclub-yellow { color: var(--hackclub-yellow); }
20-
.text-hackclub-purple { color: var(--hackclub-purple); }
21-
.text-hackclub-blue { color: var(--hackclub-blue); }
22-
.text-hackclub-green { color: var(--hackclub-green); }
23-
.text-hackclub-gray { color: var(--hackclub-gray); }
24-
25-
/* Background Colors */
26-
.bg-hackclub-red { background-color: var(--hackclub-red); }
27-
.bg-hackclub-orange { background-color: var(--hackclub-orange); }
28-
.bg-hackclub-yellow { background-color: var(--hackclub-yellow); }
29-
.bg-hackclub-purple { background-color: var(--hackclub-purple); }
30-
.bg-hackclub-blue { background-color: var(--hackclub-blue); }
31-
.bg-hackclub-green { background-color: var(--hackclub-green); }
32-
.bg-hackclub-light { background-color: var(--hackclub-light); }
33-
34-
/* Border Colors */
35-
.border-hackclub-red { border-color: var(--hackclub-red); }
36-
.border-hackclub-orange { border-color: var(--hackclub-orange); }
37-
.border-hackclub-yellow { border-color: var(--hackclub-yellow); }
38-
.border-hackclub-purple { border-color: var(--hackclub-purple); }
39-
.border-hackclub-blue { border-color: var(--hackclub-blue); }
40-
.border-hackclub-green { border-color: var(--hackclub-green); }
41-
42-
/* Hover Variants */
43-
.hover\:bg-hackclub-red:hover { background-color: var(--hackclub-red); }
44-
.hover\:bg-hackclub-orange:hover { background-color: var(--hackclub-orange); }
45-
.hover\:bg-hackclub-yellow:hover { background-color: var(--hackclub-yellow); }
46-
.hover\:bg-hackclub-purple:hover { background-color: var(--hackclub-purple); }
47-
.hover\:bg-hackclub-blue:hover { background-color: var(--hackclub-blue); }
48-
.hover\:bg-hackclub-green:hover { background-color: var(--hackclub-green); }
49-
50-
.hover\:text-hackclub-red:hover { color: var(--hackclub-red); }
51-
.hover\:text-hackclub-orange:hover { color: var(--hackclub-orange); }
52-
.hover\:text-hackclub-yellow:hover { color: var(--hackclub-yellow); }
53-
.hover\:text-hackclub-purple:hover { color: var(--hackclub-purple); }
54-
.hover\:text-hackclub-blue:hover { color: var(--hackclub-blue); }
55-
.hover\:text-hackclub-green:hover { color: var(--hackclub-green); }
56-
57-
/* Ring Colors for Focus States */
58-
.ring-hackclub-red { --tw-ring-color: var(--hackclub-red); }
59-
.ring-hackclub-orange { --tw-ring-color: var(--hackclub-orange); }
60-
.ring-hackclub-yellow { --tw-ring-color: var(--hackclub-yellow); }
61-
.ring-hackclub-purple { --tw-ring-color: var(--hackclub-purple); }
62-
.ring-hackclub-blue { --tw-ring-color: var(--hackclub-blue); }
63-
.ring-hackclub-green { --tw-ring-color: var(--hackclub-green); }
5+
/* Primary Colors */
6+
--color-red-500: #ec3750; /* Hack Club Red */
7+
--color-red-600: #d12d47; /* Darker red */
8+
--color-red-700: #b8243e; /* Even darker red */
9+
--color-red-50: #fef2f4; /* Light red background */
10+
11+
--color-orange-500: #ff8c37; /* Hack Club Orange */
12+
--color-orange-600: #e67a2e; /* Darker orange */
13+
--color-orange-700: #cc6925; /* Even darker orange */
14+
--color-orange-50: #fff7ed; /* Light orange background */
15+
16+
--color-yellow-400: #ffd700; /* Hack Club Yellow */
17+
--color-yellow-500: #ffd700; /* Hack Club Yellow */
18+
--color-yellow-600: #e6c200; /* Darker yellow */
19+
--color-yellow-700: #ccad00; /* Even darker yellow */
20+
--color-yellow-50: #fffef0; /* Light yellow background */
21+
22+
--color-purple-500: #9c27b0; /* Hack Club Purple */
23+
--color-purple-600: #8e24a0; /* Darker purple */
24+
--color-purple-700: #7a1f8a; /* Even darker purple */
25+
--color-purple-50: #faf5ff; /* Light purple background */
26+
27+
--color-blue-500: #2196f3; /* Hack Club Blue */
28+
--color-blue-600: #1e87db; /* Darker blue */
29+
--color-blue-700: #1976d2; /* Even darker blue */
30+
--color-blue-50: #eff6ff; /* Light blue background */
31+
32+
--color-green-500: #4caf50; /* Hack Club Green */
33+
--color-green-600: #43a047; /* Darker green */
34+
--color-green-700: #388e3c; /* Even darker green */
35+
--color-green-50: #f0fdf4; /* Light green background */
36+
37+
/* Grays remain functional */
38+
--color-gray-50: #f8f9fa;
39+
--color-gray-100: #f1f3f4;
40+
--color-gray-200: #e8eaed;
41+
--color-gray-300: #dadce0;
42+
--color-gray-400: #bdc1c6;
43+
--color-gray-500: #9aa0a6;
44+
--color-gray-600: #80868b;
45+
--color-gray-700: #5f6368;
46+
--color-gray-800: #3c4043;
47+
--color-gray-900: #202124;
6448
}

‎app/views/home/index.html.erb‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- Hero Section -->
2-
<div class="bg-gradient-to-r from-hackclub-red to-hackclub-orange rounded-xl p-8 mb-8 text-white">
2+
<div class="bg-gradient-to-r from-red-500 to-orange-500 rounded-xl p-8 mb-8 text-white">
33
<div class="text-center max-w-4xl mx-auto">
44
<h1 class="text-4xl md:text-6xl font-bold mb-6">
55
Earn iPads, Framework Laptops, and More by Inviting High Schoolers to Code This Summer
@@ -9,12 +9,12 @@
99
</p>
1010
<% if logged_in? %>
1111
<%= link_to user_dashboard_path,
12-
class: "inline-flex items-center px-8 py-4 bg-hackclub-yellow text-gray-900 font-bold text-lg rounded-lg hover:bg-white transition-colors shadow-lg" do %>
12+
class: "inline-flex items-center px-8 py-4 bg-yellow-500 text-gray-900 font-bold text-lg rounded-lg hover:bg-white transition-colors shadow-lg" do %>
1313
Get My Referral Link →
1414
<% end %>
1515
<% else %>
1616
<%= link_to "/login",
17-
class: "inline-flex items-center px-8 py-4 bg-hackclub-yellow text-gray-900 font-bold text-lg rounded-lg hover:bg-white transition-colors shadow-lg" do %>
17+
class: "inline-flex items-center px-8 py-4 bg-yellow-500 text-gray-900 font-bold text-lg rounded-lg hover:bg-white transition-colors shadow-lg" do %>
1818
Get My Referral Link →
1919
<% end %>
2020
<% end %>

0 commit comments

Comments
 (0)