Skip to content

Commit 04e766c

Browse files
AmitSingh-5600jbampton
AmitSingh-5600
and
jbampton
authored
Fix dark mode background (brisbanesocialchess#773)
* fix: make background image visible in dark mode * Fix CSS formatting issues for PR checks * Fix Proselint issues: remove extra spaces in CSS classes * Fix Proselint false positive: add ignore comment for HTML attribute * Update frontend/register.md --------- Co-authored-by: John Bampton <[email protected]>
1 parent 9b79c0c commit 04e766c

File tree

3 files changed

+25
-8
lines changed

3 files changed

+25
-8
lines changed

‎frontend/_includes/layouts/base.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
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-[var(--text-color)] bg-[var(--bg-color)] bg-[url('/assets/images/background.jpg')] bg-cover bg-center bg-fixed bg-blend-multiply">
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 theme-bg-blend">
1616
<!-- Ribbon -->
1717
<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>
1818
<!-- Background overlay -->

‎frontend/assets/styles/custom.css‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
--toggle-icon-color: #ffffff;
33
--toggle-icon-hover: #ffd700;
44
--bg-color: #000000;
5-
--bg-overlay: rgba(0, 0, 0, 0.65);
5+
--bg-overlay: rgba(48, 48, 48, 0.95);
66
--text-color: #ffffff;
77
--reverse-text-color: #111111;
8-
--card-bg: rgba(255, 255, 255, 0.1);
8+
--card-bg: rgba(26, 26, 26, 1);
99
--team-role-shadow-rgb: 255, 255, 255;
1010
}
1111
[data-theme='light'] {
@@ -102,3 +102,20 @@
102102
.footer-copyright {
103103
color: var(--footer-copyright-color);
104104
}
105+
106+
/* Theme-specific background blend modes */
107+
.theme-bg-blend {
108+
background-blend-mode: multiply;
109+
}
110+
111+
[data-theme='light'] .theme-bg-blend {
112+
background-blend-mode: multiply;
113+
}
114+
115+
[data-theme='dark'] .theme-bg-blend {
116+
background-blend-mode: normal;
117+
}
118+
119+
[data-theme='random'] .theme-bg-blend {
120+
background-blend-mode: multiply;
121+
}

‎frontend/register.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,21 @@ captcha: true
1818
<label for="firstName" class="font-semibold mb-1">
1919
First Name <span aria-hidden="true">*</span>
2020
</label>
21-
<input type="text" id="firstName" name="fname" required autocomplete="given-name" class="w-full px-4 py-2 rounded-md border border-gray-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400 outline-none transition" />
21+
<input type="text" id="firstName" name="fname" required autocomplete="given-name" class="w-full px-4 py-2 rounded-md border border-gray-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400 outline-none transition" />
2222
</div>
2323
<!-- Last Name -->
2424
<div class="flex flex-col">
2525
<label for="lastName" class="font-semibold mb-1">
2626
Last Name <span aria-hidden="true">*</span>
2727
</label>
28-
<input type="text" id="lastName" name="lname" required autocomplete="family-name" class="w-full px-4 py-2 rounded-md border border-gray-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400 outline-none transition" />
28+
<input type="text" id="lastName" name="lname" required autocomplete="family-name" class="w-full px-4 py-2 rounded-md border border-gray-400 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400 outline-none transition" />
2929
</div>
3030
<!-- Birth Year -->
3131
<div class="flex flex-col">
3232
<label for="birthYear" class="font-semibold mb-1">
3333
Birth Year <span aria-hidden="true">*</span>
3434
</label>
35-
<input type="number" id="birthYear" name="birthyear" min="1900" max="2025" oninput="if(this.value.length>4) this.value=this.value.slice(-4)" required placeholder="e.g. 1990" class="w-full px-4 py-2 rounded-md border border-gray-400 placeholder-gray-400 italic focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400 outline-none transition" />
35+
<input type="number" id="birthYear" name="birthyear" min="1900" max="2025" oninput="if(this.value.length>4) this.value=this.value.slice(-4)" required placeholder="e.g. 1990" class="w-full px-4 py-2 rounded-md border border-gray-400 placeholder-gray-400 italic focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400 outline-none transition" />
3636
</div>
3737
<!-- Gender -->
3838
<fieldset class="flex flex-col border border-gray-400 rounded-md p-4 bg-white/5">
@@ -57,14 +57,14 @@ captcha: true
5757
<label for="discordUsername" class="font-semibold mb-1">
5858
Discord Username (optional)
5959
</label>
60-
<input type="text" id="discordUsername" name="discordusername" placeholder="e.g. User#1234" class="w-full px-4 py-2 rounded-md border border-gray-400 placeholder-gray-400 italic focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400 outline-none transition" />
60+
<input type="text" id="discordUsername" name="discordusername" placeholder="e.g. User#1234" class="w-full px-4 py-2 rounded-md border border-gray-400 placeholder-gray-400 italic focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400 outline-none transition" />
6161
</div>
6262
<!-- Email -->
6363
<div class="flex flex-col">
6464
<label for="email" class="font-semibold mb-1">
6565
Email <span aria-hidden="true">*</span>
6666
</label>
67-
<input type="email" id="email" name="email" required autocomplete="email" class="w-full px-4 py-2 rounded-md border border-gray-400 placeholder-gray-400 italic focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400 outline-none transition" />
67+
<input type="email" id="email" name="email" required autocomplete="email" class="w-full px-4 py-2 rounded-md border border-gray-400 placeholder-gray-400 italic focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400 outline-none transition" />
6868
</div>
6969
<!-- Captcha -->
7070
<div class="cf-turnstile" data-sitekey="{{ site.cloudflare_turnstile_key }}" data-action="submit"></div>

0 commit comments

Comments
 (0)