<!DOCTYPE html>
<html lang="en">
<head>
<title>Videos | Kris Yotam</title>
<link rel="stylesheet" href="c/site.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
max-width: none;
}
.vids-page {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
max-width: 780px;
margin: 0 auto;
padding: 2em 3em;
}
.vids-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5em 2em;
}
.vid-card {
text-decoration: none;
color: inherit;
display: block;
}
.vid-card:visited { color: inherit; }
.vid-card img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
}
.vid-info {
padding: 0.6em 0;
}
.vid-title {
font-weight: 700;
font-size: 0.68em;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #222;
margin-bottom: 0.2em;
}
.vid-guest {
font-size: 0.68em;
color: #555;
margin-bottom: 0.1em;
}
.vid-role {
font-size: 0.62em;
color: #888;
margin-bottom: 0.35em;
}
.vid-links {
font-size: 0.62em;
}
.vid-links a {
color: #5a8a6a;
text-decoration: none;
margin-right: 0.3em;
}
.vid-links a:hover {
text-decoration: underline;
}
.vid-links span {
color: #ccc;
margin-right: 0.3em;
}
@media only screen and (max-width: 500px) {
.vids-grid { grid-template-columns: 1fr; }
.vids-page { padding: 1.5em 1em; }
}
</style>
</head>
<body>
<div class="mode-container">
<input type="radio" name="theme" id="theme-auto" checked>
<label for="theme-auto" class="auto" title="Auto theme"></label>
<input type="radio" name="theme" id="theme-light">
<label for="theme-light" class="light" title="Light theme"></label>
<input type="radio" name="theme" id="theme-dark">
<label for="theme-dark" class="dark" title="Dark theme"></label>
</div>
<div class="top-bar" role="navigation">
<a href="index.html" title="Main page"><img src="c/sigma.svg" alt="Main page"></a>
<a href="#" title="About"><img src="c/news.svg" alt="About"></a>
<a href="#" title="Code"><img src="c/code.svg" alt="Code"></a>
<a href="pics.html" title="Photography"><img src="c/camera.svg" alt="Photography"></a>
<a href="#" title="Pictures"><img src="c/picture.svg" alt="Pictures"></a>
<a href="vids.html" title="Videos"><img src="c/video.svg" alt="Videos"></a>
<a href="#" title="Donations"><img src="c/beer.svg" alt="Donations"></a>
<a href="#" title="Social"><img src="c/elephant.svg" alt="Social"></a>
</div>
<div class="vids-page">
<div class="vids-grid">
<div class="vid-card">
<img src="img/vids/arch.jpg" alt="">
<div class="vid-info">
<div class="vid-title">Why I Use Arch Linux</div>
<div class="vid-links"><a href="#">Video</a><span>|</span><a href="#">Notes</a></div>
</div>
</div>
<div class="vid-card">
<img src="img/vids/gentoo.jpg" alt="">
<div class="vid-info">
<div class="vid-title">Install Gentoo Unironically</div>
<div class="vid-links"><a href="#">Video</a><span>|</span><a href="#">Notes</a></div>
</div>
</div>
<div class="vid-card">
<img src="img/vids/suckless.jpg" alt="">
<div class="vid-info">
<div class="vid-title">Suckless Software Philosophy</div>
<div class="vid-links"><a href="#">Video</a><span>|</span><a href="#">Notes</a></div>
</div>
</div>
<div class="vid-card">
<img src="img/vids/neomutt.jpg" alt="">
<div class="vid-info">
<div class="vid-title">Email with Neomutt</div>
<div class="vid-links"><a href="#">Video</a><span>|</span><a href="#">Notes</a></div>
</div>
</div>
</div>
</div>
</body>
</html>