Skip to content

Commit 89b5b1d

Browse files
sethsecsethsec
committed
Updated header
1 parent 446c811 commit 89b5b1d

4 files changed

Lines changed: 141 additions & 133 deletions

File tree

‎docs/css/style.css‎

Lines changed: 93 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,8 @@ html.light-theme .datadog-logo {
282282
align-items: center;
283283
justify-content: space-between;
284284
height: 60px;
285+
flex-wrap: nowrap;
286+
gap: 20px;
285287
}
286288

287289
/* Header Left - Logo and Site Name */
@@ -297,23 +299,38 @@ html.light-theme .datadog-logo {
297299
flex-shrink: 0;
298300
}
299301

302+
.site-branding {
303+
display: flex;
304+
flex-direction: column;
305+
gap: 2px;
306+
}
307+
300308
.site-name {
301309
font-size: 20px;
302310
font-weight: 700;
303311
letter-spacing: 0.5px;
304312
color: var(--text-primary);
305313
text-decoration: none;
306314
white-space: nowrap;
315+
line-height: 1.2;
307316
}
308317

309318
.site-name:hover {
310319
color: var(--accent-color);
311320
}
312321

313-
/* Header Center - Navigation Links */
322+
.site-tagline {
323+
font-size: 13px;
324+
font-weight: 400;
325+
color: var(--text-secondary);
326+
line-height: 1.3;
327+
white-space: normal;
328+
max-width: 400px;
329+
}
330+
331+
/* Header Center - Navigation Links (hidden, using hamburger menu instead) */
314332
.header-center {
315-
display: flex;
316-
gap: 24px;
333+
display: none;
317334
}
318335

319336
.nav-link {
@@ -400,6 +417,7 @@ header h1 {
400417
display: flex;
401418
gap: 12px;
402419
align-items: center;
420+
flex-shrink: 0;
403421
}
404422

405423
.header-left-stack {
@@ -420,26 +438,18 @@ header h1 {
420438
.security-labs-link {
421439
display: flex;
422440
align-items: center;
423-
gap: 10px;
424-
padding: 10px 20px;
425-
background: rgba(255, 255, 255, 0.1);
426-
border: 2px solid rgba(255, 255, 255, 0.2);
427-
border-radius: 8px;
428-
color: white;
441+
color: var(--text-primary);
429442
text-decoration: none;
430-
transition: all 0.3s;
431-
font-size: 0.85em;
432-
font-weight: 500;
433-
white-space: nowrap;
443+
transition: all 0.2s;
444+
padding: 8px;
445+
border-radius: 6px;
434446
}
435447

436448
.github-link:hover,
437449
.pathfinder-link:hover,
438450
.security-labs-link:hover {
439-
background: rgba(255, 255, 255, 0.15);
440-
border-color: var(--accent-color);
441-
box-shadow: 0 0 15px rgba(157, 78, 221, 0.3);
442-
transform: translateY(-2px);
451+
color: var(--accent-color);
452+
background: rgba(157, 78, 221, 0.1);
443453
}
444454

445455
.github-link svg,
@@ -448,10 +458,37 @@ header h1 {
448458
flex-shrink: 0;
449459
}
450460

451-
.github-link span,
452-
.pathfinder-link span,
453-
.security-labs-link span {
454-
line-height: 1.3;
461+
/* Icon labels - hidden by default, shown on hover */
462+
.icon-label {
463+
position: absolute;
464+
bottom: -35px;
465+
left: 50%;
466+
transform: translateX(-50%);
467+
background: var(--card-background);
468+
color: var(--text-primary);
469+
padding: 6px 12px;
470+
border-radius: 6px;
471+
font-size: 13px;
472+
font-weight: 500;
473+
white-space: nowrap;
474+
opacity: 0;
475+
pointer-events: none;
476+
transition: opacity 0.2s;
477+
box-shadow: var(--shadow-lg);
478+
border: 1px solid var(--border-color);
479+
z-index: 1000;
480+
}
481+
482+
.datadog-logo-link,
483+
.theme-toggle,
484+
.github-link {
485+
position: relative;
486+
}
487+
488+
.datadog-logo-link:hover .icon-label,
489+
.theme-toggle:hover .icon-label,
490+
.github-link:hover .icon-label {
491+
opacity: 1;
455492
}
456493

457494
.github-stats {
@@ -468,27 +505,21 @@ header h1 {
468505

469506
/* Theme Toggle Button */
470507
.theme-toggle {
471-
background: rgba(255, 255, 255, 0.1);
472-
border: 2px solid rgba(255, 255, 255, 0.2);
473-
border-radius: 8px;
474-
padding: 10px 20px;
508+
background: transparent;
509+
border: none;
510+
border-radius: 6px;
511+
padding: 8px;
475512
cursor: pointer;
476-
transition: all 0.3s;
513+
transition: all 0.2s;
477514
display: flex;
478515
align-items: center;
479516
justify-content: center;
480-
gap: 10px;
481-
color: white;
482-
font-size: 0.85em;
483-
font-weight: 500;
484-
white-space: nowrap;
517+
color: var(--text-primary);
485518
}
486519

487520
.theme-toggle:hover {
488-
background: rgba(255, 255, 255, 0.15);
489-
border-color: var(--accent-color);
490-
box-shadow: 0 0 15px rgba(157, 78, 221, 0.3);
491-
transform: translateY(-2px);
521+
color: var(--accent-color);
522+
background: rgba(157, 78, 221, 0.1);
492523
}
493524

494525
.theme-toggle .sun-icon {
@@ -502,18 +533,16 @@ header h1 {
502533
}
503534

504535
.theme-toggle .theme-text {
505-
line-height: 1.3;
536+
display: none;
506537
}
507538

508539
html.light-theme .theme-toggle {
509-
background: var(--card-background);
510-
border-color: var(--border-color);
511540
color: var(--text-primary);
512541
}
513542

514543
html.light-theme .theme-toggle:hover {
515-
background: var(--card-hover);
516-
border-color: var(--accent-color);
544+
color: var(--accent-color);
545+
background: rgba(157, 78, 221, 0.1);
517546
}
518547

519548
html.light-theme .theme-toggle .sun-icon {
@@ -526,20 +555,35 @@ html.light-theme .theme-toggle .moon-icon {
526555

527556
/* Mobile Menu Styles */
528557
.mobile-menu-toggle {
529-
display: none;
558+
display: block;
530559
background: transparent;
531560
border: none;
532561
color: var(--text-primary);
533562
cursor: pointer;
534563
padding: 8px;
535564
margin-right: 12px;
536565
transition: color 0.2s;
566+
flex-shrink: 0;
537567
}
538568

539569
.mobile-menu-toggle:hover {
540570
color: var(--accent-color);
541571
}
542572

573+
/* Datadog Logo Link */
574+
.datadog-logo-link {
575+
display: flex;
576+
align-items: center;
577+
padding: 8px;
578+
border-radius: 6px;
579+
transition: all 0.2s;
580+
flex-shrink: 0;
581+
}
582+
583+
.datadog-logo-link:hover {
584+
background: rgba(157, 78, 221, 0.1);
585+
}
586+
543587
.mobile-menu-overlay {
544588
position: fixed;
545589
top: 0;
@@ -670,12 +714,7 @@ html.light-theme .theme-toggle .moon-icon {
670714
letter-spacing: 0.5px;
671715
}
672716

673-
/* Show mobile menu toggle on mobile devices */
674-
@media (max-width: 768px) {
675-
.mobile-menu-toggle {
676-
display: block;
677-
}
678-
}
717+
/* Mobile menu toggle is now shown on all screen sizes */
679718

680719
.header-stats {
681720
display: flex;
@@ -694,19 +733,7 @@ html.light-theme .header-stats {
694733
border-color: var(--border-color);
695734
}
696735

697-
html.light-theme .github-link,
698-
html.light-theme .pathfinder-link,
699-
html.light-theme .security-labs-link {
700-
background: var(--card-background);
701-
border-color: var(--border-color);
702-
color: var(--text-primary);
703-
}
704-
705-
html.light-theme .github-link:hover,
706-
html.light-theme .pathfinder-link:hover,
707-
html.light-theme .security-labs-link:hover {
708-
background: var(--card-hover);
709-
}
736+
/* Light theme uses same simplified icon styles */
710737

711738
.header-stat-number {
712739
font-size: 1.5em;
@@ -2413,35 +2440,7 @@ html.light-theme .permissions-table code {
24132440
margin-top: 20px !important;
24142441
}
24152442

2416-
/* Responsive */
2417-
@media (max-width: 1200px) {
2418-
.header-right {
2419-
flex-direction: column;
2420-
width: 100%;
2421-
align-items: flex-end;
2422-
}
2423-
2424-
.header-left-stack {
2425-
align-items: flex-end;
2426-
}
2427-
2428-
.github-actions-stack {
2429-
width: auto;
2430-
align-items: flex-end;
2431-
}
2432-
2433-
.github-link,
2434-
.pathfinder-link {
2435-
justify-content: center;
2436-
width: auto;
2437-
}
2438-
2439-
.theme-toggle,
2440-
.header-stats {
2441-
align-self: flex-end;
2442-
width: auto;
2443-
}
2444-
}
2443+
/* Responsive - removed 1200px breakpoint to keep icons horizontal until mobile */
24452444

24462445
@media (max-width: 768px) {
24472446
body {
@@ -2478,6 +2477,11 @@ html.light-theme .permissions-table code {
24782477
font-size: 16px;
24792478
}
24802479

2480+
.site-tagline {
2481+
font-size: 11px;
2482+
white-space: normal;
2483+
}
2484+
24812485
.container {
24822486
max-width: 100%;
24832487
padding: 0 15px;

‎docs/index.html‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -332,16 +332,17 @@
332332
<header>
333333
<div class="header-content">
334334
<div class="header-left">
335-
<button id="mobile-menu-toggle" class="mobile-menu-toggle" aria-label="Toggle mobile menu">
335+
<button id="mobile-menu-toggle" class="mobile-menu-toggle" aria-label="Toggle menu">
336336
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
337337
<line x1="3" y1="12" x2="21" y2="12"/>
338338
<line x1="3" y1="6" x2="21" y2="6"/>
339339
<line x1="3" y1="18" x2="21" y2="18"/>
340340
</svg>
341341
</button>
342-
<img src="/images/datadog-logo-white.png" alt="Datadog Logo" class="header-logo datadog-logo-white" style="filter: brightness(0) invert(1);">
343-
<img src="/images/datadog-logo-purple.png" alt="Datadog Logo" class="header-logo datadog-logo-purple" style="filter: brightness(0) saturate(100%); display: none;">
344-
<a href="/" class="site-name">PATHFINDING.CLOUD</a>
342+
<div class="site-branding">
343+
<a href="/" class="site-name">PATHFINDING.CLOUD</a>
344+
<div class="site-tagline">Understand, Detect &amp; Demonstrate AWS Privilege Escalation</div>
345+
</div>
345346
</div>
346347
<nav class="header-center">
347348
<a href="/" class="nav-link active">Home</a>
@@ -355,8 +356,13 @@
355356
<a href="/labs/" class="nav-link">Labs</a>
356357
</nav>
357358
<div class="header-right">
359+
<a href="https://securitylabs.datadoghq.com" target="_blank" class="datadog-logo-link" aria-label="Visit Datadog Security Labs">
360+
<img src="/images/datadog-logo-white.png" alt="Datadog Logo" class="header-logo datadog-logo-white" style="filter: brightness(0) invert(1);">
361+
<img src="/images/datadog-logo-purple.png" alt="Datadog Logo" class="header-logo datadog-logo-purple" style="filter: brightness(0) saturate(100%); display: none;">
362+
<span class="icon-label">Datadog Security Labs</span>
363+
</a>
358364
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
359-
<svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
365+
<svg class="sun-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
360366
<circle cx="12" cy="12" r="5"/>
361367
<line x1="12" y1="1" x2="12" y2="3"/>
362368
<line x1="12" y1="21" x2="12" y2="23"/>
@@ -367,19 +373,16 @@
367373
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
368374
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
369375
</svg>
370-
<svg class="moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
376+
<svg class="moon-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
371377
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
372378
</svg>
373-
<span class="theme-text">Dark Mode</span>
379+
<span class="icon-label">Toggle Theme</span>
374380
</button>
375-
<a href="https://github.com/DataDog/pathfinding.cloud" target="_blank" class="github-link" title="View on GitHub">
376-
<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
381+
<a href="https://github.com/DataDog/pathfinding.cloud" target="_blank" class="github-link" aria-label="View on GitHub">
382+
<svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
377383
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
378384
</svg>
379-
<span>Pathfinding.cloud</span>
380-
</a>
381-
<a href="https://securitylabs.datadoghq.com" target="_blank" class="security-labs-link" title="Datadog Security Labs">
382-
<span>Datadog Security Labs</span>
385+
<span class="icon-label">View on GitHub</span>
383386
</a>
384387
</div>
385388
</div>
@@ -469,21 +472,16 @@ <h2>About pathfinding.cloud</h2>
469472
<script>
470473
// Theme toggle functionality
471474
const themeToggle = document.getElementById('theme-toggle');
472-
const themeText = document.querySelector('.theme-text');
473475

474476
// Check for saved theme preference or default to light
475477
const currentTheme = localStorage.getItem('theme') || 'light';
476478
if (currentTheme === 'light') {
477479
document.documentElement.classList.add('light-theme');
478-
themeText.textContent = 'Mode';
479-
} else {
480-
themeText.textContent = 'Mode';
481480
}
482481

483482
themeToggle.addEventListener('click', () => {
484483
document.documentElement.classList.toggle('light-theme');
485484
const isLight = document.documentElement.classList.contains('light-theme');
486-
themeText.textContent = isLight ? 'Light' : 'Dark';
487485
localStorage.setItem('theme', isLight ? 'light' : 'dark');
488486
});
489487

0 commit comments

Comments
 (0)