Skip to content

Commit c752334

Browse files
BaseMaxgemini-code-assist[bot]
BaseMax
and
gemini-code-assist[bot]
authored
Build tailwindcss - custom colors - setup tailwindcss in a right way for new version V4 - add border for avatars (brisbanesocialchess#519)
* add style to table * make all tables responsive, we have totally 3 tables one in homepage, 2 in about page * Chagne AI — to normal - * Add tailwindcss config file, setup bg-table-header * Fix broken item for user therealnugget * working on images * responsive imgs * fix bug: remove extra div closing * Update tailwind config * Update frontend/about.md Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * Update frontend/about.md Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * update tailwind config, add blue color for links inside book section in about * change and port all tailwindcss syntax to 4, not 3 * add concurrently" * update config * update css * change contet files of tailwind * working on about - badge colors roles * set color for roles * add color * split me and other devs * change all w-33 to w-1/3 * change max size * change role colors * change tailwind config * change roles * change a020f0 * change colors - lead dev * add class for imgs * add w-1/3 to some missed items * checking tailwind * add vite, fix mistakes for core members * add vite * vite * remove test index.html, port from v3 to 4 * update tailwind * fix tailwind * Update vite.config.js Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * Add role-coordinator text-role-coordinator * remove colors * increase border of avatars * run pre-commit --------- Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
1 parent a44c272 commit c752334

File tree

6 files changed

+93
-77
lines changed

6 files changed

+93
-77
lines changed

‎frontend/about.md‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -41,22 +41,22 @@ title: About Us | Brisbane Social Chess Club
4141
<tbody>
4242
<tr>
4343
<th class="border px-4 py-2 text-left w-[40px]">President</th>
44-
<td class="border px-4 py-2"><span class="role-board text-role-board text-[#ed7014]">Jimmy Joe</span></td>
44+
<td class="border px-4 py-2"><span class="role-board text-role-board">Jimmy Joe</span></td>
4545
</tr>
4646
<tr>
4747
<th class="border px-4 py-2 text-left w-[40px]">Treasurer</th>
4848
<td class="border px-4 py-2">
49-
<a href="https://github.com/LuckyNotGood" class="hover:underline role-board text-role-board text-[#ed7014]">Matt McLean</a>
49+
<a href="https://github.com/LuckyNotGood" class="hover:underline role-board text-role-board">Matt McLean</a>
5050
</td>
5151
</tr>
5252
<tr>
5353
<th class="border px-4 py-2 text-left w-[40px]">Secretary</th>
54-
<td class="border px-4 py-2"><span class="role-board text-role-board text-[#ed7014]">Steve</span></td>
54+
<td class="border px-4 py-2"><span class="role-board text-role-board">Steve</span></td>
5555
</tr>
5656
<tr>
5757
<th class="border px-4 py-2 text-left w-[40px]">Auditor</th>
5858
<td class="border px-4 py-2">
59-
<a href="https://github.com/garveybiz" class="hover:underline role-board text-role-board text-[#ed7014]">Rob Garvey</a>
59+
<a href="https://github.com/garveybiz" class="hover:underline role-board text-role-board">Rob Garvey</a>
6060
</td>
6161
</tr>
6262
<tr>
@@ -68,14 +68,14 @@ title: About Us | Brisbane Social Chess Club
6868
<tr>
6969
<th class="border px-4 py-2 text-left w-[40px]">General Managers</th>
7070
<td class="border px-4 py-2">
71-
<span class="role-board text-role-board text-[#ed7014]">Adam Lomsargis</span>, <span class="role-board text-role-board text-[#ed7014]">Ben M</span>
71+
<span class="role-board text-role-board">Adam Lomsargis</span>, <span class="role-board text-role-board">Ben M</span>
7272
</td>
7373
</tr>
7474
<tr>
7575
<th class="border px-4 py-2 text-left w-[40px]">Coordinators</th>
7676
<td class="border px-4 py-2">
77-
<span class="role-coordinator text-role-coordinator text-[#a020f0]">Ross Barnard</span>,
78-
<a class="hover:underline role-coordinator text-role-coordinator text-[#a020f0]" href="https://github.com/therealnugget">therealnugget</a>
77+
<span class="role-coordinator text-role-coordinator">Ross Barnard</span>,
78+
<a class="hover:underline role-coordinator text-role-coordinator" href="https://github.com/therealnugget">therealnugget</a>
7979
</td>
8080
</tr>
8181
</tbody>
@@ -87,34 +87,34 @@ title: About Us | Brisbane Social Chess Club
8787
<h2 class="text-center text-xl md:text-2xl font-semibold text-indigo-200 mb-3"><span aria-hidden="true">🧑🏽‍🎨</span> Organizers</h2>
8888
<ul class="list-disc list-inside text-white space-y-3">
8989
<li>
90-
<strong>Organizer</strong>: <a href="https://github.com/LuckyNotGood" class="role-board text-role-board text-[#ed7014]">Matt McLean</a>: "A good player is always lucky" -
90+
<strong>Organizer</strong>: <a href="https://github.com/LuckyNotGood" class="role-board text-role-board">Matt McLean</a>: "A good player is always lucky" -
9191
<a href="https://en.wikipedia.org/wiki/Jos%C3%A9_Ra%C3%BAl_Capablanca" class="underline text-blue-400">Capablanca</a>
9292
</li>
9393
<li>
9494
<strong>Co-organizers</strong>:
9595
<ul class="list-disc list-inside space-y-2 ml-5">
96-
<li><span class="text-[#a020f0]">Adam Lomsargis</span>: Long time chess player with a great respect and passion for the game. I believe chess offers more than
96+
<li><span class="role-coordinator text-role-coordinator">Adam Lomsargis</span>: Long time chess player with a great respect and passion for the game. I believe chess offers more than
9797
just a competitive space in which to battle your opponent. It's also a great way to socialise with intelligent people and
9898
have a laugh! :D
9999
</li>
100-
<li><span class="role-board text-role-board text-[#ed7014]">Ben M</span>: How does the horsey move again? <span aria-hidden="true">🤔</span></li>
101-
<li><span class="role-board text-role-board text-[#ed7014]">Jimmy Joe</span></li>
100+
<li><span class="role-board text-role-board">Ben M</span>: How does the horsey move again? <span aria-hidden="true">🤔</span></li>
101+
<li><span class="role-board text-role-board">Jimmy Joe</span></li>
102102
<li>
103-
<a href="https://github.com/garveybiz" class="role-board text-role-board text-[#ed7014]">Rob Garvey</a>: Welcome to Brisbane Social Chess. Come along and play with us, let us know your ideas, and help us organize future events.
103+
<a href="https://github.com/garveybiz" class="role-board text-role-board">Rob Garvey</a>: Welcome to Brisbane Social Chess. Come along and play with us, let us know your ideas, and help us organize future events.
104104
</li>
105-
<li><span class="role-board text-role-board text-[#ed7014]">Steve</span>: Official pawn wrangler.</li>
105+
<li><span class="role-board text-role-board">Steve</span>: Official pawn wrangler.</li>
106106
<li><span class="text-role-co-organizers text-[#2196f3]">the Prof</span></li>
107107
</ul>
108108
</li>
109-
<li><strong>Assistant organizer</strong>: <span class="text-role-assistant-organizers text-[#c35339]">Roger Clarke</span></li>
109+
<li><strong>Assistant organizer</strong>: <span class="text-role-assistant-organizers">Roger Clarke</span></li>
110110
<li>
111111
<strong>Event organizers</strong>:
112112
<ul class="list-disc list-inside space-y-2 ml-5">
113-
<li><span class="text-role-event-organizers text-[#00d166]">Christoph Dierkes</span></li>
114-
<li><span class="text-role-event-organizers text-[#00d166]">JoeT</span></li>
115-
<li><span class="text-role-event-organizers text-[#00d166]">Marty Benjamin</span></li>
116-
<li><span class="text-role-event-organizers text-[#00d166]">Peiqi Sun</span></li>
117-
<li><span class="text-role-event-organizers text-[#00d166]">Stuart</span></li>
113+
<li><span class="text-role-event-organizers">Christoph Dierkes</span></li>
114+
<li><span class="text-role-event-organizers">JoeT</span></li>
115+
<li><span class="text-role-event-organizers">Marty Benjamin</span></li>
116+
<li><span class="text-role-event-organizers">Peiqi Sun</span></li>
117+
<li><span class="text-role-event-organizers">Stuart</span></li>
118118
</ul>
119119
</li>
120120
</ul>
@@ -128,7 +128,7 @@ title: About Us | Brisbane Social Chess Club
128128
<span aria-hidden="true">🧑‍🔧</span> Maintainer
129129
</h3>
130130
<div class="flex justify-center mb-8">
131-
<a href="https://github.com/jbampton" class="flex flex-col items-center text-center role-admin text-role-admin text-[red]">
131+
<a href="https://github.com/jbampton" class="flex flex-col items-center text-center role-admin text-role-admin">
132132
<img class="w-40 md:w-60 lg:w-[420px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/418747?v=4&s=420" alt="John Bampton avatar" />
133133
<span class="font-medium">John Bampton</span>
134134
<span class="text-gray-500">@jbampton</span>
@@ -138,19 +138,19 @@ title: About Us | Brisbane Social Chess Club
138138
<span aria-hidden="true">💾</span> Developers
139139
</h3>
140140
<div class="flex flex-wrap justify-center items-end gap-6 mb-8">
141-
<a href="https://github.com/BaseMax" class="flex flex-col items-center text-center role-lead-developer text-role-lead-developer text-[#ff0001]">
141+
<a href="https://github.com/BaseMax" class="flex flex-col items-center text-center role-lead-developer text-role-lead-developer">
142142
<img class="w-35 md:w-50 lg:w-[300px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/2658040?v=4&s=300" alt="Max Base avatar" />
143143
<span class="font-medium">Max Base</span>
144144
<span class="text-gray-500">@BaseMax</span>
145145
</a>
146146
</div>
147147
<div class="flex flex-wrap justify-center items-end gap-6 mb-8">
148-
<a href="https://github.com/anufdo" class="flex flex-col items-center text-center w-1/3 role-developer text-role-developer text-[#00ffff]">
148+
<a href="https://github.com/anufdo" class="flex flex-col items-center text-center w-1/3 role-developer text-role-developer">
149149
<img class="w-32 md:w-40 lg:w-[225px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/8244245?v=4&s=225" alt="Anuradha Fernando avatar" />
150150
<span class="font-medium">Anuradha Fernando</span>
151151
<span class="text-gray-500">@anufdo</span>
152152
</a>
153-
<a href="https://github.com/ugifractal" class="flex flex-col items-center text-center w-1/3 role-developer text-role-developer text-[#00ffff]">
153+
<a href="https://github.com/ugifractal" class="flex flex-col items-center text-center w-1/3 role-developer text-role-developer">
154154
<img class="w-32 md:w-40 lg:w-[225px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/70807?v=4&s=225" alt="sugiarto avatar" />
155155
<span class="font-medium">sugiarto</span>
156156
<span class="text-gray-500">@ugifractal</span>
@@ -160,42 +160,42 @@ title: About Us | Brisbane Social Chess Club
160160
<span aria-hidden="true">🎮</span> Discord Moderators
161161
</h2>
162162
<div class="flex flex-wrap justify-center gap-6">
163-
<a href="https://github.com/carefreeav09" class="flex flex-col items-center text-center w-1/3 role-moderator text-role-moderator text-[yellow]">
163+
<a href="https://github.com/carefreeav09" class="flex flex-col items-center text-center w-1/3 role-moderator text-role-moderator">
164164
<img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/10443785?v=4&s=120" alt="Abhushan Gautam avatar" />
165165
<span class="font-medium">Abhushan Gautam</span>
166166
<span class="text-gray-500">@carefreeav09</span>
167167
</a>
168-
<a href="https://github.com/ayushrana182" class="flex flex-col items-center text-center w-1/3 role-moderator text-role-moderator text-[yellow]">
168+
<a href="https://github.com/ayushrana182" class="flex flex-col items-center text-center w-1/3 role-moderator text-role-moderator">
169169
<img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/43984189?v=4&s=95" alt="Ayush Rana avatar" />
170170
<span class="font-medium">Ayush Rana</span>
171171
<span class="text-gray-500">@ayushrana182</span>
172172
</a>
173-
<div class="flex flex-col items-center text-center w-1/3 role-moderator text-role-moderator role-board text-role-board text-[#ed7014]">
173+
<div class="flex flex-col items-center text-center w-1/3 role-moderator text-role-moderator role-board text-role-board">
174174
<img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/583231?v=4&s=95" alt="Jasper avatar" />
175175
<span class="font-medium">Jasper</span>
176176
<span class="text-gray-500">N/A</span>
177177
</div>
178-
<a href="https://github.com/prio101" class="flex flex-col items-center text-center w-1/3 role-moderator text-role-moderator text-[yellow]">
178+
<a href="https://github.com/prio101" class="flex flex-col items-center text-center w-1/3 role-moderator text-role-moderator">
179179
<img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/3279809?v=4&s=95" alt="Mahabub Islam Prio avatar" />
180180
<span class="font-medium">Mahabub Islam Prio</span>
181181
<span class="text-gray-500">@prio101</span>
182182
</a>
183-
<a href="https://github.com/mohammadlotfia" class="flex flex-col items-center text-center w-1/3 text-[yellow]">
183+
<a href="https://github.com/mohammadlotfia" class="flex flex-col items-center text-center w-1/3 role-moderator text-role-moderator">
184184
<img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/87372623?v=4&s=95" alt="Mohammad Lotfi Akbarabadi avatar" />
185185
<span class="font-medium">Mohammad Lotfi Akbarabadi</span>
186186
<span class="text-gray-500">@mohammadlotfia</span>
187187
</a>
188-
<a href="https://github.com/udha" class="flex flex-col items-center text-center w-1/3 text-[yellow]">
188+
<a href="https://github.com/udha" class="flex flex-col items-center text-center w-1/3 role-moderator text-role-moderator">
189189
<img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/1697199?v=4&s=95" alt="Nicholas Meredith avatar" />
190190
<span class="font-medium">Nicholas Meredith</span>
191191
<span class="text-gray-500">@udha</span>
192192
</a>
193-
<a href="https://github.com/smriad" class="flex flex-col items-center text-center w-1/3 text-[yellow]">
193+
<a href="https://github.com/smriad" class="flex flex-col items-center text-center w-1/3 role-moderator text-role-moderator">
194194
<img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/21966124?v=4&s=95" alt="SM Riad avatar" />
195195
<span class="font-medium">SM Riad</span>
196196
<span class="text-gray-500">@smriad</span>
197197
</a>
198-
<a href="https://github.com/therealnugget" class="flex flex-col items-center text-center w-1/3 role-board text-role-board text-[#ed7014]">
198+
<a href="https://github.com/therealnugget" class="flex flex-col items-center text-center w-1/3 role-board text-role-board">
199199
<img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="https://avatars.githubusercontent.com/u/83858713?v=4&s=95" alt="therealnugget avatar" />
200200
<span class="font-medium">therealnugget</span>
201201
<span class="text-gray-500">@therealnugget</span>

‎frontend/tailwind.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,50 @@
1+
@import 'tailwindcss';
2+
13
@tailwind base;
24
@tailwind components;
35
@tailwind utilities;
6+
7+
:root {
8+
--border-solid-2px: 2px solid;
9+
}
10+
@theme {
11+
--color-table-header: #091a52;
12+
--color-highlight: #ff5733;
13+
--color-role-admin: #ff0000;
14+
--color-role-developer: #00ffff;
15+
--color-role-moderator: yellow;
16+
--color-role-board: #ed7014;
17+
--color-role-coordinator: #a020f0;
18+
--color-role-co-organizers: #2196f3;
19+
--color-role-lead-developer: #ff0001;
20+
--color-role-event-organizers: #00d166;
21+
--color-role-assistant-organizers: #c35339;
22+
}
23+
24+
.role-admin img {
25+
border: var(--border-solid-2px) var(--color-role-admin);
26+
}
27+
.role-developer img {
28+
border: var(--border-solid-2px) var(--color-role-developer);
29+
}
30+
.role-moderator img {
31+
border: var(--border-solid-2px) var(--color-role-moderator);
32+
}
33+
.role-board img {
34+
border: var(--border-solid-2px) var(--color-role-board);
35+
}
36+
.role-coordinator img {
37+
border: var(--border-solid-2px) var(--color-role-coordinator);
38+
}
39+
.role-co-organizers img {
40+
border: var(--border-solid-2px) var(--color-role-co-organizers);
41+
}
42+
.role-lead-developer img {
43+
border: var(--border-solid-2px) var(--color-role-lead-developer);
44+
}
45+
.role-event-organizers img {
46+
border: var(--border-solid-2px) var(--color-role-event-organizers);
47+
}
48+
.role-assistant-organizers img {
49+
border: var(--border-solid-2px) var(--color-role-assistant-organizers);
50+
}

‎frontend/vite.config.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { defineConfig } from "vite";
22

33
export default defineConfig({
4+
build: {
5+
emptyOutDir: true,
6+
outDir: '../frontend/assets',
7+
},
48
root: './frontend',
59
server: {
610
port: 5173,
711
strictPort: true,
812
},
9-
build: {
10-
outDir: '../frontend/assets',
11-
emptyOutDir: true,
12-
},
1313
});

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@
2525
"start": "concurrently \"npm run tailwindcss:watch\" \"npx @11ty/eleventy --serve --input=frontend\"",
2626
"build": "npm run tailwindcss:build && npx @11ty/eleventy --input=frontend",
2727
"tailwindcss:build": "tailwindcss -i frontend/tailwind.css -o frontend/assets/tailwind.css",
28-
"tailwindcss:watch": "tailwindcss -i frontend/tailwind.css -o frontend/assets/tailwind.css --watch"
28+
"tailwindcss:build2": "tailwindcss -i frontend/tailwind.css -o _site/assets/tailwind.css",
29+
"tailwindcss:watch": "tailwindcss -i frontend/tailwind.css -o frontend/assets/tailwind.css --watch",
30+
"tailwindcss:watch2": "tailwindcss -i frontend/tailwind.css -o _site/assets/tailwind.css --watch"
2931
},
3032
"workspaces": [
3133
"packages/*"

‎tailwind.config.js‎

Lines changed: 4 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
33
content: [
4-
'./frontend/**/*.{html,js,ts,md}',
5-
'./frontend/pages/**/*.{html,js,ts}',
6-
'./_site/**/*.{html}',
4+
'./_site/**/*.{html}'
75
],
6+
plugins: [],
87
safelist: [
9-
'bg-table-header',
108
'role-admin',
119
'role-developer',
1210
'role-moderator',
@@ -15,38 +13,7 @@ module.exports = {
1513
'role-co-organizers',
1614
'role-lead-developer',
1715
'role-event-organizers',
18-
'role-assistant-organizers',
19-
],
20-
theme: {
21-
extend: {
22-
colors: {
23-
'table-header': '#091a52',
24-
'role-admin': '#ff0000',
25-
'role-developer': '#00ffff',
26-
'role-moderator': 'yellow',
27-
'role-board': '#ed7014',
28-
'role-coordinator': '#a020f0',
29-
'role-co-organizers': '#2196f3',
30-
'role-lead-developer': '#ff0001',
31-
'role-event-organizers': '#00d166',
32-
'role-assistant-organizers': '#c35339',
33-
},
34-
},
35-
},
36-
plugins: [
37-
function({ addBase, theme }) {
38-
const roles = [
39-
'admin','developer','moderator','board','coordinator',
40-
'co-organizers','lead-developer','event-organizers','assistant-organizers'
41-
];
42-
const base = {};
43-
44-
roles.forEach(role => {
45-
const color = theme(`colors.role-${role}`);
46-
base[`.role-${role} img`] = { border: `1px solid ${color}` };
47-
});
48-
49-
addBase(base);
50-
}
16+
'role-assistant-organizers'
5117
],
18+
theme: {},
5219
};

‎vite.config.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { defineConfig } from "vite";
22

33
export default defineConfig({
4+
build: {
5+
emptyOutDir: true,
6+
outDir: '../frontend/assets',
7+
},
48
root: './frontend',
59
server: {
610
port: 5173,
711
strictPort: true,
812
},
9-
build: {
10-
outDir: './frontend/assets',
11-
emptyOutDir: true,
12-
},
1313
});

0 commit comments

Comments
 (0)