defunkt/shout
1
0
Fork 0
Code Pull Requests Activity

Add color vars and redesign hero section

Browse Source
This commit is contained in:
user.email 2026-04-03 08:09:52 -07:00
parent c9dba93f7f
commit 691cebbfee
1 changed files with 169 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
web/index.html
View File

@ -18,6 +18,9 @@
--accent: #1a7f37; --accent: #1a7f37;
--code-bg: #f5f5f5; --code-bg: #f5f5f5;
--border: #ddd; --border: #ddd;
--yellow: #9a7200;
--install-bg: #f0faf2;
--install-border: #c5e4cc;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -31,83 +34,172 @@
--accent: #4ec966; --accent: #4ec966;
--code-bg: #111; --code-bg: #111;
--border: #222; --border: #222;
--yellow: #e5b567;
--install-bg: #0d1a10;
--install-border: #1a3d20;
} }
} }
html { font-size: 16px; }
body { body {
background: var(--bg); background: var(--bg);
color: var(--fg); color: var(--fg);
font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Menlo', 'Consolas', monospace; font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
line-height: 1.6; line-height: 1.6;
padding: 0 1.5rem; padding: 0 24px;
max-width: 680px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
/* ---- Hero ---- */
header { header {
padding: 6rem 0 2.5rem; padding: 64px 0 0;
} }
h1 { h1 {
font-size: 2.5rem; font-size: 64px;
font-weight: 700; font-weight: 800;
color: var(--bright); color: var(--bright);
letter-spacing: -0.03em; letter-spacing: -0.04em;
line-height: 1;
display: flex;
align-items: baseline;
} }
h1 span { h1 .dollar {
color: var(--accent); color: var(--accent);
margin-right: 10px;
} }
.tagline {
font-size: 1.1rem; .subtitle {
font-size: 20px;
color: var(--dim); color: var(--dim);
margin-top: 0.5rem; margin-top: 8px;
font-weight: 400;
} }
/* ---- Install ---- */
.install { .install {
margin-top: 2rem; margin-top: 32px;
display: inline-block; display: flex;
align-items: center;
justify-content: space-between;
background: var(--install-bg);
border: 1px solid var(--install-border);
padding: 11px 11px 11px 19px;
border-radius: 8px;
font-size: 14px;
color: var(--bright);
}
.install code {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.install .prompt { color: var(--dim); }
.install .cmd { color: var(--bright); }
.copy-btn {
background: var(--accent);
color: #fff;
border: none;
padding: 7px 14px;
border-radius: 5px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.15s;
flex-shrink: 0;
margin-left: 16px;
}
@media (prefers-color-scheme: dark) {
.copy-btn { color: #0a0a0a; }
}
.copy-btn:hover {
opacity: 0.85;
}
/* ---- "Write a test" box ---- */
.hero-section {
padding: 40px 0 24px;
}
.write-box {
background: var(--code-bg); background: var(--code-bg);
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 0.6rem 1.2rem; border-radius: 8px;
border-radius: 4px; padding: 20px;
font-size: 0.9rem; padding-top: 16px;
color: var(--bright);
cursor: pointer;
position: relative;
transition: border-color 0.15s;
} }
.install:hover { .two-col {
border-color: var(--accent); display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 32px;
align-items: start;
} }
.install .hint { .two-col .explain h2 {
color: var(--dim); margin-bottom: 16px;
font-size: 0.75rem; color: var(--fg);
margin-left: 1rem;
} }
.two-col .explain p {
margin-bottom: 14px;
font-size: 15px;
}
.two-col .explain .feature {
margin-bottom: 11px;
font-size: 14px;
}
.two-col .explain .feature code {
padding: 2px 6px;
border-radius: 3px;
font-size: 13px;
}
.write-box pre {
background: var(--bg);
margin-bottom: 0;
}
@media (max-width: 680px) {
.two-col {
grid-template-columns: 1fr;
gap: 24px;
}
.write-box {
padding: 19px;
}
}
/* ---- Sections ---- */
section { section {
padding: 0 0 2em 0; padding: 0 0 32px 0;
} }
h2 { h2 {
font-size: 0.85rem; font-size: 13px;
font-weight: 600; font-weight: 600;
color: var(--dim); color: var(--dim);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
margin-bottom: 1.5rem; margin-bottom: 24px;
} }
p { p {
margin-bottom: 1rem; margin-bottom: 16px;
font-size: 0.95rem; font-size: 15px;
} }
.bright { color: var(--bright); } .bright { color: var(--bright); }
@ -118,19 +210,19 @@
pre { pre {
background: var(--code-bg); background: var(--code-bg);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 6px;
padding: 1.2rem 1.4rem; padding: 19px 22px;
overflow-x: auto; overflow-x: auto;
font-size: 0.85rem; font-size: 13px;
line-height: 1.7; line-height: 1.7;
margin-bottom: 1.5rem; margin-bottom: 24px;
} }
pre code { pre code {
color: var(--fg); color: var(--fg);
} }
.prompt { color: var(--dim); } .prompt { color: var(--yellow); }
.cmd { color: var(--bright); } .cmd { color: var(--bright); }
.output { color: var(--fg); } .output { color: var(--fg); }
.comment { color: var(--dim); font-style: italic; } .comment { color: var(--dim); font-style: italic; }
@ -138,12 +230,11 @@
.exit-code { color: var(--red); } .exit-code { color: var(--red); }
.pass { color: var(--green); } .pass { color: var(--green); }
footer { footer {
padding: 3rem 0; padding: 48px 0;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
color: var(--dim); color: var(--dim);
font-size: 0.8rem; font-size: 13px;
} }
footer a { footer a {
@ -165,26 +256,37 @@
} }
@media (max-width: 520px) { @media (max-width: 520px) {
header { padding: 3rem 0 2rem; } header { padding: 40px 0 0; }
h1 { font-size: 2rem; } h1 { font-size: 44px; }
section { padding: 2rem 0; } .subtitle { font-size: 16px; }
section { padding: 24px 0; }
} }
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<h1><span>$</span> shout</h1> <h1><span class="dollar">$</span>shout</h1>
<p class="tagline">shell output tester</p> <p class="subtitle">shell output tester</p>
<div class="install" onclick="navigator.clipboard.writeText('curl -fsSL https://because.sh/shout | sh')"> <div class="install">
<span class="prompt">$</span> <span class="cmd">curl -fsSL https://because.sh/shout | sh</span> <code><span class="prompt">$</span> <span class="cmd">curl -fsSL https://because.sh/shout | sh</span></code>
<span class="hint">click to copy</span> <button class="copy-btn" onclick="copyInstall(this)">Copy</button>
</div> </div>
</header> </header>
<section> <div class="hero-section">
<h2>Write a test</h2> <div class="write-box">
<p>A <code>.shout</code> file is just a shell session. Commands start with <code class="bright">$</code>, everything else is expected output.</p> <div class="two-col">
<div class="explain">
<h2>✓ Write a test</h2>
<p>A <code class="bright">.shout</code> file is a shell session.</p>
<p class="feature">Commands start with <code class="bright">$</code>.</p>
<p class="feature">Everything else is the expected output.</p>
<p class="feature"><code class="wildcard">...</code> matches anything &mdash; inline or across lines.</p>
<p class="feature"><code class="exit-code">[1]</code> asserts the exit code. Default expects 0.</p>
<p class="feature">Lines starting with <code class="dim">#</code> are comments.</p>
</div>
<div class="example">
<pre><code><span class="prompt">$</span> <span class="cmd">echo hello</span> <pre><code><span class="prompt">$</span> <span class="cmd">echo hello</span>
<span class="output">hello</span> <span class="output">hello</span>
@ -193,16 +295,16 @@
<span class="exit-code">[1]</span> <span class="exit-code">[1]</span>
<span class="prompt">$</span> <span class="cmd">brew --version</span> <span class="prompt">$</span> <span class="cmd">brew --version</span>
<span class="output">Homebrew 5</span><span class="wildcard">...</span></code></pre> <span class="output">Homebrew 5</span><span class="wildcard">...</span>
<p><code class="wildcard">...</code> matches anything &mdash; inline or across lines.</p>
<p><code class="exit-code">[1]</code> asserts the exit code.</p> <span class="comment"># start the server</span>
<p><code class="dim">$#</code> starts a comment line &mdash; not executed, no output expected.</p>
<pre><code><span class="prompt">$</span><span class="comment"># start the server</span>
<span class="prompt">$</span> <span class="cmd">my-server &amp;</span> <span class="prompt">$</span> <span class="cmd">my-server &amp;</span>
<span class="prompt">$</span><span class="comment"># now test it</span>
<span class="prompt">$</span> <span class="cmd">curl localhost:8080</span> <span class="prompt">$</span> <span class="cmd">curl localhost:8080</span>
<span class="output">OK</span></code></pre> <span class="output">OK</span></code></pre>
</section> </div>
</div>
</div>
</div>
<section> <section>
<h2>Setup &amp; teardown</h2> <h2>Setup &amp; teardown</h2>
@ -281,5 +383,13 @@ Options:
<a href="https://github.com/because/shout">GitHub</a> &middot; <a href="https://www.npmjs.com/package/@because/shout">npm</a> <a href="https://github.com/because/shout">GitHub</a> &middot; <a href="https://www.npmjs.com/package/@because/shout">npm</a>
</footer> </footer>
<script>
function copyInstall(btn) {
navigator.clipboard.writeText('curl -fsSL https://because.sh/shout | sh');
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
}
</script>
</body> </body>
</html> </html>