diff options
Diffstat (limited to 'yt_playlist_template.html')
| -rw-r--r-- | yt_playlist_template.html | 262 |
1 files changed, 131 insertions, 131 deletions
diff --git a/yt_playlist_template.html b/yt_playlist_template.html index 1d664b4..6dbfe30 100644 --- a/yt_playlist_template.html +++ b/yt_playlist_template.html @@ -1,132 +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>
+<!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 |