Skip to content

feat(defcon): Meshtastic × DEF CON 34 logo + accessible event theme #376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thebentern merged 2 commits into from
Jul 15, 2026
Merged

feat(defcon): Meshtastic × DEF CON 34 logo + accessible event theme #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
755e4e9
feat(defcon): Meshtastic × DEF CON 34 logo + accessible event theme
thebentern Jul 15, 2026
84664d0
docs(defcon): move applyEventTheme JSDoc to the right function
thebentern Jul 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
--accent-dark: #22C55E;
--accent-glow: rgba(103, 234, 148, 0.3);
--accent-subtle: rgba(103, 234, 148, 0.5);
/* Legible text on a solid --accent fill (buttons, badges). Overridden per
event theme by applyEventTheme() to stay contrast-safe on any accent. */
--on-accent: #000000;

/* Button colors */
--btn-icon-bg: rgba(255, 255, 255, 0.05);
Expand Down Expand Up @@ -329,14 +332,15 @@

/* Modern UI Components */
@layer components {
/* Gradient primary button */
/* Solid primary button */
.btn-primary {
@apply inline-flex items-center justify-center gap-2;
@apply font-normal text-sm text-black;
@apply font-normal text-sm;
@apply px-5 py-2.5 rounded-xl;
@apply transition-all duration-300 ease-out;
@apply disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
background: var(--accent);
color: var(--on-accent);
Comment on lines 341 to +343

@coderabbitai coderabbitai Bot Jul 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Add an empty line after @apply directives.

To resolve the Stylelint declaration-empty-line-before errors flagged in static analysis, insert an empty line between the Tailwind @apply directives and the standard CSS property declarations.

  • assets/css/main.css#L341-L343: Add an empty line before background: var(--accent); in .btn-primary.
  • assets/css/main.css#L415-L417: Add an empty line before background: var(--accent); in .step-badge.
🧰 Tools
🪛 Stylelint (17.14.0)

[error] 342-342: Expected empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)

📍 Affects 1 file
  • assets/css/main.css#L341-L343 (this comment)
  • assets/css/main.css#L415-L417
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@assets/css/main.css` around lines 341 - 343, In assets/css/main.css lines
341-343 and 415-417, add an empty line after each Tailwind `@apply` directive and
before the following background declaration in .btn-primary and .step-badge.

Source: Linters/SAST tools

box-shadow: 0 4px 15px var(--accent-glow);
}

Expand Down Expand Up @@ -407,9 +411,10 @@
.step-badge {
@apply inline-flex items-center justify-center;
@apply w-8 h-8 rounded-full;
@apply text-sm font-bold text-black;
@apply text-sm font-bold;
@apply mb-4;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
background: var(--accent);
color: var(--on-accent);
box-shadow: 0 0 20px var(--accent-glow);
}

Expand Down
1 change: 1 addition & 0 deletions assets/img/defcon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 55 additions & 0 deletions components/LogoHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,41 @@
</p>
</div>

<!-- DEF CON event branding variant -->
<div
v-else-if="eventMode.enabled && eventMode.eventTag === 'DEFCON'"
class="logo-header-content"
>
<div class="logo-container">
<div class="logo-glow">
<img
v-if="themeStore.isDark"
src="@/assets/img/logo.svg"
class="logo-icon"
alt="Meshtastic Logo"
>
<img
v-else
src="@/assets/img/logo-dark.svg"
class="logo-icon"
alt="Meshtastic Logo"
>
</div>
<span class="logo-separator">×</span>
<img
src="@/assets/img/defcon.svg"
class="logo-icon-event logo-icon-defcon"
alt="DEF CON 34 Logo"
>
Comment on lines +110 to +128

@coderabbitai coderabbitai Bot Jul 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Use localization for user-visible alt text.

The alt text strings for the logos are hardcoded in the template. As per coding guidelines, all user-visible text must go through useI18n / $t('key') and should not be hardcoded.

Consider replacing "Meshtastic Logo" and "DEF CON 34 Logo" with appropriate translation keys.

🌐 Proposed replacements 
-            alt="Meshtastic Logo"
+            :alt="$t('meshtastic_logo')"
-          alt="DEF CON 34 Logo"
+          :alt="$t('defcon_logo')"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<img
v-if="themeStore.isDark"
src="@/assets/img/logo.svg"
class="logo-icon"
alt="Meshtastic Logo"
>
<img
v-else
src="@/assets/img/logo-dark.svg"
class="logo-icon"
alt="Meshtastic Logo"
>
</div>
<span class="logo-separator">×</span>
<img
src="@/assets/img/defcon.svg"
class="logo-icon-event logo-icon-defcon"
alt="DEF CON 34 Logo"
>
<img
v-if="themeStore.isDark"
src="`@/assets/img/logo.svg`"
class="logo-icon"
:alt="$t('meshtastic_logo')"
>
<img
v-else
src="`@/assets/img/logo-dark.svg`"
class="logo-icon"
:alt="$t('meshtastic_logo')"
>
</div>
<span class="logo-separator">×</span>
<img
src="`@/assets/img/defcon.svg`"
class="logo-icon-event logo-icon-defcon"
:alt="$t('defcon_logo')"
>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@components/LogoHeader.vue` around lines 110 - 128, Update the three logo
image alt attributes in the template, including both theme variants and the DEF
CON image, to use the component’s existing localization mechanism via translated
keys instead of hardcoded strings. Add or reuse appropriate translation keys
while preserving the current accessible descriptions.

Source: Coding guidelines

</div>
<h1 class="logo-title">
<span class="logo-title-gradient">{{ $t('header_title') }}</span>
</h1>
<p class="logo-tagline">
{{ eventMode.tagline || eventMode.eventName }}
</p>
</div>

<!-- Hamvention event branding variant -->
<div
v-else-if="eventMode.enabled && eventMode.eventTag === 'Hamvention'"
Expand Down Expand Up @@ -299,6 +334,26 @@ const { eventMode } = useEventMode()
}
}

/* The full DEF CON 34 mark (mesh burst + skull) is a detailed square, so it runs
a little larger than the M to let the artwork read. It ships transparent and
theme-adaptive: the opaque gradient mesh reads on either background and the
skull's knockout face shows the page behind it, so it needs no filter/tile. */
.logo-icon-defcon {
height: 6rem;
}

@media (min-width: 640px) {
.logo-icon-defcon {
height: 7rem;
}
}

@media (min-width: 768px) {
.logo-icon-defcon {
height: 8rem;
}
}

.logo-header-hamvention {
position: relative;
background-image: url('@/assets/img/hamvention-bg.png');
Expand Down
Loading
Loading