xiaoxue_admin
/
herdr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: add community video section

This commit is contained in:
Ogulcan Celik 2026-07-06 19:43:42 +03:00
parent faee06764e
commit eb03995128
2 changed files with 184 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
website/css/style.css
View File

@ -1490,6 +1490,14 @@ samp {
font-weight: 400;
}
.logo-cloud-note {
margin: 0.35rem 0 0;
color: var(--muted-2);
font-family: var(--mono);
font-size: 0.68rem;
line-height: 1.4;
}
.logo-marquee {
position: relative;
overflow: hidden;
@ -1538,6 +1546,116 @@ samp {
display: none;
}
.community-section {
padding-top: 4.25rem;
}
.community-video-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.community-video-card {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--bg-elevated);
color: var(--ink-soft);
transition:
border-color 120ms ease,
transform 120ms ease,
background 120ms ease;
}
.community-video-card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
background: color-mix(in srgb, var(--bg-elevated) 88%, var(--accent-soft));
color: var(--ink-soft);
}
.community-video-thumb {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--term-bg);
border-bottom: 1px solid var(--line);
}
.community-video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 180ms ease;
}
.community-video-card:hover .community-video-thumb img {
transform: scale(1.025);
}
.play-badge {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
display: grid;
place-items: center;
width: 2.3rem;
height: 2.3rem;
border: 1px solid color-mix(in srgb, #fff 45%, transparent);
border-radius: 50%;
background: color-mix(in srgb, var(--term-bg) 78%, transparent);
backdrop-filter: blur(8px);
}
.play-badge::before {
content: "";
display: block;
width: 0;
height: 0;
margin-left: 0.16rem;
border-top: 0.42rem solid transparent;
border-bottom: 0.42rem solid transparent;
border-left: 0.68rem solid #fff;
}
.community-video-copy {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.45rem;
padding: 1rem;
}
.community-video-meta {
color: var(--accent);
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.community-video-title {
color: var(--ink);
font-family: var(--mono);
font-size: 1.05rem;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.2;
}
.community-video-desc {
margin-top: auto;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.55;
}
@keyframes logo-marquee {
to {
transform: translateX(-50%);
@ -2330,6 +2448,10 @@ td:last-child {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.community-video-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.access-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@ -2443,6 +2565,7 @@ td:last-child {
.pillar-grid,
.contrast-grid,
.community-video-grid,
.access-grid,
.differ-list {
grid-template-columns: 1fr;

62
website/index.html
View File

@ -57,7 +57,7 @@
document.documentElement.setAttribute("data-palette", saved || system);
})();
</script>
<link rel="stylesheet" href="/css/style.css?v=41" />
<link rel="stylesheet" href="/css/style.css?v=42" />
</head>
<body>
<header class="site-header">
@ -382,6 +382,7 @@
<div class="logo-cloud-heading">
<p class="section-kicker"># used in the wild</p>
<h2 id="logo-cloud-title">Popular with engineers from</h2>
<p class="logo-cloud-note">Individual engineers, not company endorsements.</p>
</div>
<div class="logo-marquee" aria-label="Company logos">
<div class="logo-track">
@ -425,6 +426,65 @@
</div>
</section>
<section class="section community-section" id="community" aria-labelledby="community-title">
<div class="section-heading-wide">
<div>
<p class="section-kicker"># from the community</p>
<h2 id="community-title">Watch Herdr through other developers' workflows.</h2>
</div>
<p>
Independent walkthroughs from Jilles, DevOps Toolbox, and Better Stack. See how Herdr feels as a tmux-style multiplexer for coding agents, remote sessions, and day-to-day agent orchestration.
</p>
</div>
<div class="community-video-grid" aria-label="Community videos about Herdr">
<a class="community-video-card" href="https://www.youtube.com/watch?v=qnIu-Xu64H0" target="_blank" rel="noopener">
<span class="community-video-thumb">
<img
src="https://i.ytimg.com/vi/qnIu-Xu64H0/maxresdefault.jpg"
alt="Thumbnail for Jilles' Herdr in about 6 minutes video"
loading="lazy"
/>
<span class="play-badge" aria-hidden="true"></span>
</span>
<span class="community-video-copy">
<span class="community-video-meta">Jilles · 6:37</span>
<span class="community-video-title">Herdr in about 6 minutes</span>
<span class="community-video-desc">The fastest practical intro: install, workspaces, agent states, persistence, and the agent skill workflow.</span>
</span>
</a>
<a class="community-video-card" href="https://www.youtube.com/watch?v=5GtkyPvuvbQ" target="_blank" rel="noopener">
<span class="community-video-thumb">
<img
src="https://i.ytimg.com/vi/5GtkyPvuvbQ/maxresdefault.jpg"
alt="Thumbnail for DevOps Toolbox's This Tmux Rewrite Is Actually Brilliant video"
loading="lazy"
/>
<span class="play-badge" aria-hidden="true"></span>
</span>
<span class="community-video-copy">
<span class="community-video-meta">DevOps Toolbox · 16:40</span>
<span class="community-video-title">This Tmux "Rewrite" Is Actually Brilliant</span>
<span class="community-video-desc">A deeper hands-on look at the full package: mouse-first panes, remote use, agent support, and the CLI.</span>
</span>
</a>
<a class="community-video-card" href="https://www.youtube.com/watch?v=PlN86TvzGy4" target="_blank" rel="noopener">
<span class="community-video-thumb">
<img
src="https://i.ytimg.com/vi/PlN86TvzGy4/maxresdefault.jpg"
alt="Thumbnail for Better Stack's Herdr agent multiplexer video"
loading="lazy"
/>
<span class="play-badge" aria-hidden="true"></span>
</span>
<span class="community-video-copy">
<span class="community-video-meta">Better Stack · 7:10</span>
<span class="community-video-title">Is This the Ultimate Agent Multiplexer?</span>
<span class="community-video-desc">A clear tmux comparison with agent awareness, remote attach, and why Herdr stays inside your terminal.</span>
</span>
</a>
</div>
</section>
<section class="section access-section why-section" id="why">
<div class="section-heading-wide">
<div>