Skip to content

docs: 🛡️ brand consistency, live site link, responsive presentation #33

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
FiscalMindset merged 1 commit into from
Jul 14, 2026
Merged

docs: 🛡️ brand consistency, live site link, responsive presentation #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 4 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<div align="center">

<img src="assets/logo.png" alt="Blindfold — Your AI Agent Can't Leak The API Key It Never Had" width="560" />
<h1>🛡️ Blindfold</h1>

<p><strong>Your AI agent can't leak the API key it never had.</strong></p>

[![npm version](https://img.shields.io/npm/v/@fiscalmindset/blindfold?style=for-the-badge&color=cb3837&logo=npm&logoColor=white)](https://www.npmjs.com/package/@fiscalmindset/blindfold)
[![Built on Terminal 3](https://img.shields.io/badge/built%20on-Terminal%203-6e44ff?style=for-the-badge)](https://terminal3.io)
Expand All @@ -13,7 +15,7 @@
npm i -g @fiscalmindset/blindfold && blindfold signup --email you@example.com
```

[**📦 Install**](#installation) &nbsp;·&nbsp; [**📊 Interactive Presentation**](https://fiscalmindset.github.io/Blindfold/) &nbsp;·&nbsp; [**⚡ Quickstart**](#quickstart)
[**🌐 Live site**](https://blindfold-rho.vercel.app) &nbsp;·&nbsp; [**📦 Install**](#installation) &nbsp;·&nbsp; [**📊 Interactive Presentation**](https://fiscalmindset.github.io/Blindfold/) &nbsp;·&nbsp; [**⚡ Quickstart**](#quickstart)

@qodo-code-review qodo-code-review Bot Jul 14, 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.

Remediation recommended

1. Missing explain.md log entry 📘 Rule violation § Compliance

The PR makes material documentation updates (README branding/live-site link and presentation
hero/responsiveness) but does not update explain.md with a corresponding status-table update and a
new dated running-log entry. This breaks the project’s requirement that explain.md remain the
up-to-date source of truth for material changes.
Agent Prompt 
## Issue description
`explain.md` must be updated for each material change, including (1) the relevant status-table row and (2) a new dated entry appended to the running log. This PR changes the README hero/linking and the docs presentation hero/responsive behavior, but `explain.md` has no 2026-07-14 entry and no status update reflecting these doc changes.

## Issue Context
This repo treats `explain.md` as the single source of truth and requires it to be updated whenever material changes land.

## Fix Focus Areas
- explain.md[41-52]
- explain.md[70-78]
- README.md[18-18]
- docs/index.html[349-380]
- docs/index.html[541-546]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


<br/>

Expand Down
Binary file removed assets/logo.png
View file
Open in desktop
Binary file not shown.
75 changes: 62 additions & 13 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,6 +346,39 @@
margin-top: 20px;
}

/* hero + closing shield mark (replaces logo.png, consistent 🛡️ brand) */
.hero-mark {
font-size: 96px;
line-height: 1;
margin-bottom: 18px;
filter: drop-shadow(0 10px 30px rgba(37, 99, 235, 0.35));
animation: slideUp 0.8s ease-out 0.05s both;
}
.hero-title {
font-size: 5rem;
font-weight: 800;
letter-spacing: -0.03em;
margin: 0 0 14px;
background: linear-gradient(90deg, #2563EB, #7c3aed);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: slideUp 0.8s ease-out 0.1s both;
}
.hero-tag {
font-size: 1.5rem;
color: #444;
max-width: 640px;
margin: 0 auto;
animation: fadeIn 0.8s ease-out 0.3s both;
}
.close-mark {
font-size: 54px;
line-height: 1;
margin-bottom: 10px;
filter: drop-shadow(0 8px 20px rgba(37, 99, 235, 0.3));
}

/* ── 1024px ───────────────────────────────── */
@media (max-width: 1024px) {
.diagram { font-size: 0.9rem; padding: 20px; }
Expand All @@ -360,6 +393,10 @@
h2 { font-size: 1.8rem; }
p { font-size: 1.1rem; }

.hero-mark { font-size: 72px; margin-bottom: 12px; }
.hero-title { font-size: 3.2rem; }
.hero-tag { font-size: 1.15rem; }

.split-screen { grid-template-columns: 1fr; gap: 12px; }

.slide {
Expand Down Expand Up @@ -389,15 +426,11 @@
}
.slide-content { max-width: 100%; padding: 4px 0; margin-top: 0; }

/* Hero logo */
img[src*="logo.png"] {
max-width: 240px !important;
max-height: 120px !important;
height: auto !important;
width: auto !important;
margin: 0 0 16px 0 !important;
object-fit: contain !important;
}
/* Hero shield mark */
.hero-mark { font-size: 58px; margin-bottom: 10px; }
.hero-title { font-size: 2.4rem; }
.hero-tag { font-size: 0.95rem; }
.close-mark { font-size: 40px; }

img[src*="avatars.githubusercontent.com"] {
width: 55px !important;
Expand Down Expand Up @@ -458,6 +491,21 @@
#slide8 .demo-output { max-height: 100px; font-size: 0.55rem; padding: 6px; margin: 4px 0; }
#slide8 .slide8-footer { display: none; } /* footer hidden on phones — panels say it all */
}

/* ── landscape phones / short viewports ───── */
@media (max-height: 520px) and (orientation: landscape) {
.slide { padding: 14px 26px; justify-content: center; }
.slide-content { padding: 4px 0; }
.hero-mark { font-size: 46px; margin-bottom: 6px; }
.hero-title { font-size: 2.2rem; margin-bottom: 6px; }
.hero-tag { font-size: 0.9rem; }
h1 { font-size: 2rem; margin-bottom: 12px; }
h2 { font-size: 1.5rem; margin-bottom: 12px; }
p { font-size: 0.9rem; margin: 6px 0; }
.badge { margin-bottom: 6px; }
.diagram, .code-block { margin: 10px 0; }
.controls { padding: 8px 16px; }
}
</style>
</head>
<body>
Expand Down Expand Up @@ -493,8 +541,9 @@
<!-- SLIDE 1: HERO -->
<div class="slide active">
<div class="slide-content">
<img src="assets/logo.png" alt="Blindfold Logo"
style="height: 180px; margin-bottom: 30px; object-fit: contain;" />
<div class="hero-mark">🛡️</div>
<h1 class="hero-title">Blindfold</h1>
<p class="hero-tag">Your AI agent can't leak the API key it never had.</p>

<div style="margin-top: 24px;">
<div class="badge">Built on Terminal 3</div>
Expand Down Expand Up @@ -878,8 +927,8 @@ <h2>What's Actually Protected</h2>
<!-- SLIDE 12: CLOSING -->
<div class="slide">
<div class="slide-content">
<img src="assets/logo.png" alt="Blindfold Logo"
style="height: 90px; margin-bottom: 16px; object-fit: contain;" />
<div class="close-mark">🛡️</div>
<h2 style="font-size: 2rem; margin-bottom: 10px;">Blindfold</h2>

@qodo-code-review qodo-code-review Bot Jul 14, 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.

Remediation recommended

2. Inline h2 breaks scaling 🐞 Bug ⚙ Maintainability

In docs/index.html slide 12, the closing title uses an inline font-size: 2rem, so the existing
responsive media-query rules that downsize h2 on phones/landscape won’t apply to this element.
This makes the closing title ignore the intended responsive typography (inconsistent sizing vs other
slides on small screens).
Agent Prompt 
## Issue description
The closing slide title (`<h2>`) is styled inline (`font-size: 2rem; ...`), which overrides the stylesheet’s responsive `h2` rules in the 480px and landscape media queries.

## Issue Context
Other headings are controlled via CSS + media queries, but this one heading will not scale down with the rest of the deck on small/short viewports.

## Fix Focus Areas
- docs/index.html[927-935]
- docs/index.html[418-434]
- docs/index.html[495-507]

## Suggested fix
1. Change the closing slide heading to use a class, e.g.:
   - `<h2 class="close-title">Blindfold</h2>`
2. Add `.close-title` base styles near the other hero/close mark styles (instead of inline).
3. Add media-query overrides for `.close-title` inside the existing `@media (max-width: 480px)` and `@media (max-height: 520px) and (orientation: landscape)` blocks so it scales consistently with the rest of the typography.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


<p style="font-size: 1.3rem; color: #555; margin: 12px 0 16px; line-height: 1.5;">
<em>The only durable fix is that the key is never in the agent's context.</em>
Expand Down
Loading