Skip to content

Commit c30d8df

Browse files
Max updates: theme switch (brisbanesocialchess#678)
* adding svg, handling js switch * working on theme switcher * Clean script.js * js check * working on theme switcher color-bg * remove bg and color classes * update clean * change yellow role to orange * add reverse-text-color * change [var(--reverse-text-color)] to white * change 0px to 0 * Update frontend/assets/scripts/script.js Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * run pre-commit * change right to left * add text-white * remove strange and useless file * Update package.json file - test does it works in non-windows and linux systems? * remove platform spefic libs from package.json * run upadte * update * adding @tailwindcss/cli? * use minify in tailwindcss:build --------- Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
1 parent f718a89 commit c30d8df

File tree

18 files changed

+312
-333
lines changed

18 files changed

+312
-333
lines changed

frontend/404.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ eleventyExcludeFromCollections: true
1111
Error 404 – Not Found
1212
</h2>
1313
<!-- Description -->
14-
<p class="text-center text-white text-base md:text-lg mb-8">
14+
<p class="text-center text-base md:text-lg mb-8">
1515
Don’t worry, you haven’t blundered too badly. Maybe the link is outdated or there's a typo in the URL.
1616
</p>
17-
<p class="text-center text-white text-base md:text-lg mb-8">
17+
<p class="text-center text-base md:text-lg mb-8">
1818
You can return to our homepage or explore other sections of our site.
1919
</p>
2020
<!-- Button -->

frontend/_includes/layouts/base.njk

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,38 @@
1212
<link rel="apple-touch-icon" href="{{ '/assets/images/apple-touch-icon.png' | url }}" />
1313
<meta name="generator" content="{{ eleventy.generator }}" />
1414
</head>
15-
<body class="flex flex-col min-h-screen font-montserrat text-white bg-[url('/assets/images/background.jpg')] bg-cover bg-center bg-fixed">
15+
<body class="flex flex-col min-h-screen font-montserrat text-[var(--text-color)] bg-[var(--bg-color)] bg-[url('/assets/images/background.jpg')] bg-cover bg-center bg-fixed bg-blend-multiply">
16+
<!-- Ribbon -->
17+
<a class="github-fork-ribbon right-top" href="https://github.com/brisbanesocialchess/brisbanesocialchess.github.io" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
1618
<!-- Background overlay -->
17-
<div class="flex-grow min-h-[calc(100vh-85px)] bg-black/65 flex justify-center p-12 max-md:p-4">
18-
<main class="max-w-[620px] w-[calc(100%-1rem)] bg-black/55 p-4 rounded-xl shadow-[0_0_50px_rgba(0,0,0,0.6)] flex flex-col gap-6">
19-
<!-- Ribbon -->
20-
<a
21-
class="github-fork-ribbon right-top"
22-
href="https://github.com/brisbanesocialchess/brisbanesocialchess.github.io"
23-
data-ribbon="Fork me on GitHub"
24-
title="Fork me on GitHub"
25-
>Fork me on GitHub</a
19+
<div class="flex-grow min-h-[calc(100vh-85px)] bg-[var(--bg-overlay)] flex justify-center p-12 max-md:p-4">
20+
<!-- Container -->
21+
<main class="relative max-w-[620px] w-[calc(100%-1rem)] bg-[var(--card-bg)] p-4 rounded-xl shadow-[0_0_50px_rgba(0,0,0,0.6)] flex flex-col gap-6">
22+
<!-- Switch -->
23+
<button
24+
class="theme-toggle absolute top-4 left-4 cursor-pointer"
25+
id="theme-toggle"
26+
title="Toggle light & dark theme"
27+
aria-label="Toggle theme"
2628
>
29+
<svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
30+
<mask class="moon" id="moon-mask">
31+
<rect x="0" y="0" width="100%" height="100%" fill="white" />
32+
<circle cx="24" cy="10" r="6" fill="black" />
33+
</mask>
34+
<circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
35+
<g class="sun-beams" stroke="currentColor">
36+
<line x1="12" y1="1" x2="12" y2="3" />
37+
<line x1="12" y1="21" x2="12" y2="23" />
38+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
39+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
40+
<line x1="1" y1="12" x2="3" y2="12" />
41+
<line x1="21" y1="12" x2="23" y2="12" />
42+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
43+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
44+
</g>
45+
</svg>
46+
</button>
2747
<!-- Logo -->
2848
<div class="text-center">
2949
<a href="{{ '/' | url }}">
@@ -41,24 +61,24 @@
4161
<!-- Top Navigation -->
4262
<nav>
4363
<div class="flex items-center md:hidden">
44-
<button id="menu-toggle" type="button" aria-expanded="false" class="text-gray-300 hover:text-white cursor-pointer">
64+
<button id="menu-toggle" type="button" aria-expanded="false" class="cursor-pointer">
4565
<svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2"
4666
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
4767
<path stroke-linecap="round" stroke-linejoin="round"
4868
d="M4 6h16M4 12h16M4 18h16"></path>
4969
</svg>
5070
</button>
51-
<span class="flex-1 text-center text-white text-md font-bold">
71+
<span class="flex-1 text-center text-md font-bold">
5272
Brisbane Social Chess
5373
</span>
5474
</div>
5575
<div id="menu"
5676
class="flex-wrap hidden flex-col items-center justify-center space-y-2 mt-4 text-center text-sm md:flex md:flex-row md:space-y-0 md:space-x-2 md:mt-0">
5777
{% for link in navigation.navLinks -%}
5878
<a href="{{ link.url | url }}"
59-
class="block w-full py-2 rounded hover:bg-white/10 hover:text-white
79+
class="block w-full py-2 rounded hover:bg-white/10
6080
md:inline-block md:w-auto md:py-0 md:p-2
61-
{% if page.url == link.url %}text-[#849eff] hover:text-[#849eff] font-bold{% else %} text-gray-300{% endif %}">
81+
{% if page.url == link.url %}text-[#849eff] hover:text-[#849eff] font-bold{% else %}{% endif %}">
6282
{{ link.text }}
6383
</a>
6484
{%- endfor %}
@@ -80,7 +100,7 @@
80100
{% endfor %}
81101
</div>
82102
<!-- Footer -->
83-
<footer class="h-[85px] text-center p-8 pb-20 md:pb-8 text-sm text-white/60 flex flex-col items-center justify-center gap-3">
103+
<footer class="h-[85px] text-center p-8 pb-20 md:pb-8 text-sm flex flex-col items-center justify-center gap-3">
84104
<div class="hidden md:flex space-x-4">
85105
{% for social in site.socials %}
86106
{{ social_macro.social_link(social, "hover:opacity-80 transition") }}

frontend/_includes/layouts/meetup.njk

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ eleventyComputed:
66
---
77

88
<section class="px-4 max-w-3xl">
9-
<h2 class="text-center text-xl md:text-2xl font-semibold text-indigo-200 mb-3">
9+
<h2 class="text-center text-xl md:text-2xl font-semibold mb-3">
1010
{{ heading }}
1111
</h2>
1212

13-
<p class="text-gray-200 text-sm"><strong>Location:</strong> {{ location }}</p>
14-
<p class="text-gray-200 text-sm"><strong>Hosted by:</strong> {{ hosts | join(", ") }}</p>
13+
<p class="text-sm"><strong>Location:</strong> {{ location }}</p>
14+
<p class="text-sm"><strong>Hosted by:</strong> {{ hosts | join(", ") }}</p>
1515

1616
{% if hosts_images %}
1717
<div class="flex justify-center gap-4 flex-wrap mt-2">
@@ -29,9 +29,9 @@ eleventyComputed:
2929
{{ description | safe }}
3030
</p>
3131

32-
<p class="text-gray-200 text-sm"><strong>Time:</strong> {{ time }}</p>
33-
<p class="text-gray-200 text-sm"><strong>When:</strong> {{ when }}</p>
34-
<p class="text-gray-200 text-sm"><strong>Address:</strong> {{ address }}</p>
32+
<p class="text-sm"><strong>Time:</strong> {{ time }}</p>
33+
<p class="text-sm"><strong>When:</strong> {{ when }}</p>
34+
<p class="text-sm"><strong>Address:</strong> {{ address }}</p>
3535

3636
{% if map %}
3737
<div class="mt-4">

0 commit comments

Comments
 (0)