Fix a few small visual issues

GoogleChrome · Mar 18, 2021 · 141d344 · 141d344
1 parent 403de1f
commit 141d344
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/public/styles.css b/public/styles.css
@@ -156,7 +156,8 @@ header {
   padding-bottom: 56.25%; /* 16:9 */
   position: relative;
 }
-.poster-image picture img {
+.poster-image picture img,
+.poster-image > img {
   width: 100%;
   height: auto;
 }
@@ -192,7 +193,7 @@ header.with-video {
   height: auto;
 }
 .poster-wrapper .info {
-  padding: 2rem 2rem 0 2rem;
+  padding: 2rem 0;
 }
 .poster-wrapper .has-player .info {
   display: none;
@@ -249,7 +250,7 @@ header .menu offline-toggle-button {
   padding-right: 1rem;
 }
 header .container {
-  padding: 2rem 0;
+  padding: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -300,7 +301,7 @@ header .hamburger, header .close {
 
 article {
   background: #FFF;
-  padding: 4rem 2rem;
+  padding: 4rem 0;
 }
 article h2 {
   font-size: 2rem;
@@ -348,8 +349,9 @@ article p {
 }
 
 .container {
-  max-width: 1200px;
+  max-width: calc(1200px + 4rem);
   margin: 0 auto;
+  padding: 0 2rem;
 }
 
 div.card {
@@ -389,7 +391,7 @@ div.card {
 footer {
   background: var(--background-dark);
   color: var(--text-footer);
-  padding: 2rem;
+  padding: 2rem 0;
   font-size: 1rem;
 }
 footer a {

diff --git a/src/js/pages/Downloads.js b/src/js/pages/Downloads.js
@@ -19,6 +19,7 @@ export default async (routerContext) => {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
         grid-gap: 2rem;
+        max-width: 1200px;
       }
       .clearing {
         opacity: 0.3;
@@ -28,8 +29,8 @@ export default async (routerContext) => {
         <h2>Manage your downloads</h2>
         <img src="/images/arrow-down.svg" alt="" />
     </div>
-    <div class="downloads">
-        <div class="header container">
+    <div class="downloads container">
+        <div class="header">
             <span>20 GB available <span>of 220 GB</span></span>
             <div>
                 <button class="primary delete-all" disabled>Delete all</button>