52 lines
1.7 KiB
HTML
52 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Input Fields</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; background: var(--background); }
|
|
.card { padding: 28px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; font-family: var(--font-sans); align-items: start; }
|
|
.field { display: flex; flex-direction: column; }
|
|
label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
/* label-sm in secondary-fixed-dim — muted, sophisticated */
|
|
color: #9a8679;
|
|
margin-bottom: 8px;
|
|
}
|
|
/* Forgo the "box" look. surface-variant bg, bottom-only ghost border. No radius box. */
|
|
input, textarea {
|
|
font: inherit;
|
|
font-family: var(--font-sans);
|
|
font-size: 15px;
|
|
color: var(--on-surface);
|
|
background: #e7e1d0; /* surface-variant */
|
|
border: 0;
|
|
border-bottom: 1px solid rgba(186,186,176,0.30); /* ghost border fallback */
|
|
border-radius: 0;
|
|
padding: 10px 2px;
|
|
outline: none;
|
|
transition: border-color 160ms ease, background 160ms ease;
|
|
}
|
|
input:hover { background: #ded7c4; }
|
|
input:focus { border-bottom-color: #785f53; }
|
|
.hint { font-size: 12px; color: var(--on-surface-variant); margin-top: 8px; font-style: italic; font-family: var(--font-serif); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="field">
|
|
<label>Search the archive</label>
|
|
<input placeholder="A question, or a title…" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Title</label>
|
|
<input value="Notes from the margin" />
|
|
<div class="hint">Auto-saved a moment ago.</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|