Change general design theme

1 files changed, 19 insertions, 57 deletions

diff --git a/youtube/templates/playlist.html b/youtube/templates/playlist.html
index af86c82..8c88cc7 100644
--- a/youtube/templates/playlist.html
+++ b/youtube/templates/playlist.html
@@ -2,77 +2,39 @@
 {% extends "base.html" %}
 {% import "common_elements.html" as common_elements %}
 {% block style %}
-    main > * {
-        width: 800px;
-        margin:auto;
-    }
-
-    .playlist-metadata{
-        display:grid;
-        grid-template-columns: 0fr 1fr;
-    }
-        .playlist-thumbnail{
-            grid-row: 1 / span 5;
-            grid-column:1;
-            justify-self:start;
-            width:250px;
-            margin-right: 10px;
-        }
-        .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;
-        }
-
-    #results{
-        margin-top:10px;
-
-        display: grid;
-        grid-auto-rows: 0fr;
-        grid-row-gap: 10px;
-
-    }
+    <link href="/youtube.com/static/playlist.css" rel="stylesheet">
 {% endblock style %}
 
 {% block main %}
+
     <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="author">
+            <img alt="{{ title }}" src="{{ thumbnail }}"/>
+            <h2>{{ title }}</h2>
+        </div>
+        <div class="summary">
+            <a class="playlist-author" href="{{ author_url }}">{{ author }}</a>
+        </div>
         <div class="playlist-stats">
             <div>{{ video_count|commatize }} videos</div>
             <div>{{ view_count|commatize }} views</div>
             <div>Last updated {{ time_published }}</div>
         </div>
-        <div class="playlist-description">{{ common_elements.text_runs(description) }}</div>
     </div>
+    <hr/>
 
-    <div id="results">
+
+    <div id="results" class="video-container">
         {% for info in video_list %}
             {{ common_elements.item(info) }}
         {% endfor %}
     </div>
-    <nav class="page-button-row">
-        {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlist', parameters_dictionary) }}
-    </nav>
-{% endblock main %}
-
-
-
-
+    <hr/>
 
+    <footer class="pagination-container">
+        <nav class="pagination-list">
+            {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlist', parameters_dictionary) }}
+        </nav>
+    </footer>
 
+{% endblock main %}