diff options
Diffstat (limited to 'yt_playlist_template.html')
| -rw-r--r-- | yt_playlist_template.html | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/yt_playlist_template.html b/yt_playlist_template.html new file mode 100644 index 0000000..1d664b4 --- /dev/null +++ b/yt_playlist_template.html @@ -0,0 +1,132 @@ +<!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>
\ No newline at end of file |