add Google site-search input to header nav
Slim pill-shaped search input. Submits site:viralmvp.com queries to Google in a new tab. Magenta border + cyan/lemon stacked focus shadow matches the Y2K palette. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -160,6 +160,31 @@ const year = new Date().getFullYear();
|
|||||||
}
|
}
|
||||||
nav.nav a:hover { color: var(--accent); }
|
nav.nav a:hover { color: var(--accent); }
|
||||||
|
|
||||||
|
/* Site search — slim Google-redirect input, Y2K palette */
|
||||||
|
.site-search { display: inline-flex; }
|
||||||
|
.site-search input {
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1.5px solid var(--accent-soft);
|
||||||
|
color: var(--ink);
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 6px 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
width: 150px;
|
||||||
|
transition: width 0.2s ease, border-color 0.15s, box-shadow 0.15s;
|
||||||
|
}
|
||||||
|
.site-search input::placeholder {
|
||||||
|
color: var(--ink-muted);
|
||||||
|
}
|
||||||
|
.site-search input:focus {
|
||||||
|
outline: none;
|
||||||
|
width: 200px;
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow:
|
||||||
|
2px 2px 0 var(--cyan),
|
||||||
|
4px 4px 0 var(--lemon);
|
||||||
|
}
|
||||||
|
|
||||||
main { padding: 0 0 64px; }
|
main { padding: 0 0 64px; }
|
||||||
|
|
||||||
/* ========== Index post cards ========== */
|
/* ========== Index post cards ========== */
|
||||||
@@ -740,6 +765,10 @@ const year = new Date().getFullYear();
|
|||||||
<a href="/">Home</a>
|
<a href="/">Home</a>
|
||||||
<a href="/about/">About</a>
|
<a href="/about/">About</a>
|
||||||
<a href="/rss.xml">RSS</a>
|
<a href="/rss.xml">RSS</a>
|
||||||
|
<form class="site-search" role="search"
|
||||||
|
onsubmit="event.preventDefault();window.open('https://www.google.com/search?q='+encodeURIComponent('site:viralmvp.com '+this.q.value),'_blank');this.q.value='';">
|
||||||
|
<input type="search" name="q" placeholder="Search…" aria-label="Search viralmvp" required />
|
||||||
|
</form>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
Reference in New Issue
Block a user