<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>$page_title</title> <link href="/youtube.com/shared.css" type="text/css" rel="stylesheet"> <style type="text/css"> main{ display:grid; grid-template-columns: 3fr 1fr; } header{ display:grid; grid-template-columns: 3fr 1fr; } #header-left{ grid-column:1; display:grid; grid-template-columns: 1fr 800px; } #site-search{ grid-column: 2; } #left{ grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 1fr 800px; grid-template-rows: 0fr 1fr 0fr; } .playlist-metadata{ grid-column:2; grid-row:1; display:grid; grid-template-columns: 0fr 1fr; grid-template-rows: 0fr 0fr 0fr 0fr 1fr; } .playlist-thumbnail{ grid-row: 1 / span 5; grid-column:1; justify-self:start; width:250px; } .playlist-title{ grid-row: 1; grid-column:2; } .playlist-author{ grid-row:2; grid-column:2; } .playlist-stats{ grid-row:3; grid-column:2; } .playlist-description{ grid-row:4; grid-column:2; min-width:0px; white-space: pre-line; } .page-button-row{ grid-row: 3; grid-column: 2; justify-self: center; } #right{ grid-column: 2; grid-row: 1; } #results{ grid-row: 2; grid-column: 2; display: grid; grid-auto-rows: 0fr; grid-row-gap: 10px; } </style> </head> <body> <header> <div id="header-left"> <form id="site-search" action="/youtube.com/search"> <input type="search" name="query" class="search-box"> <button type="submit" value="Search" class="search-button">Search</button> </form> </div> </header> <main> <div id="left"> <div class="playlist-metadata"> <img class="playlist-thumbnail" src="$thumbnail"> <h2 class="playlist-title">$title</h2> <a class="playlist-author" href="$author_url">$author</a> <div class="playlist-stats"> $stats </div> <div class="playlist-description">$description</div> </div> <div id="results"> $videos </div> <nav class="page-button-row"> $page_buttons </nav> </div> <div id="right"> </div> </main> </body> </html>