diff options
| author | James Taylor <user234683@users.noreply.github.com> | 2018-09-01 22:09:44 -0700 |
|---|---|---|
| committer | James Taylor <user234683@users.noreply.github.com> | 2018-09-01 22:09:44 -0700 |
| commit | d1196cb721045285f36bc134a1770c3c7b033747 (patch) | |
| tree | 0eda0b78d5689094f0c41aedc89029340f177648 /yt_watch_template.html | |
| parent | ffeccc5ac3740080a6597e74af35e03e53425318 (diff) | |
| download | yt-local-d1196cb721045285f36bc134a1770c3c7b033747.tar.lz yt-local-d1196cb721045285f36bc134a1770c3c7b033747.tar.xz yt-local-d1196cb721045285f36bc134a1770c3c7b033747.zip | |
Use less laggy grid layout strategy for watch page
Diffstat (limited to 'yt_watch_template.html')
| -rw-r--r-- | yt_watch_template.html | 29 |
1 files changed, 11 insertions, 18 deletions
diff --git a/yt_watch_template.html b/yt_watch_template.html index 4a2f8e0..84ae40e 100644 --- a/yt_watch_template.html +++ b/yt_watch_template.html @@ -10,16 +10,14 @@ <style type="text/css"> main{ display:grid; - grid-template-columns: 3fr 2fr; + grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr); + background-color:#cccccc; } #left{ background-color:#bcbcbc; - - display: grid; grid-column: 1; - grid-row: 1; - grid-template-columns: 1fr 640px; + } .full-item{ display: grid; @@ -27,6 +25,7 @@ grid-template-rows: 0fr 0fr 0fr 0fr 20px 0fr 0fr; grid-template-columns: 1fr 1fr; align-content: start; + background-color:#bcbcbc; } .full-item > video{ grid-column: 1 / span 2; @@ -111,16 +110,9 @@ font-weight:bold; margin-bottom:5px; } - #right{ - background-color:#cccccc; - grid-column: 2; - grid-row: 1; - - display: grid; - grid-template-columns: 40px 500px 1fr; - } + #related{ - grid-column: 2; + grid-column: 4; display: grid; grid-auto-rows: 90px; grid-row-gap: 10px; @@ -162,7 +154,8 @@ <body> $header <main> - <div id="left"> + <div id="left"> + </div> <article class="full-item"> <video width="640" height="360" controls autofocus> @@ -192,14 +185,14 @@ $music_list </div> $comments </article> - </div> + - <div id="right"> + <nav id="related"> $related </nav> - </div> + </main> |