Fix CSS on thumbnail page

This required a small change to the main page's structure. A div after the #container was added to match the thumbnail page's #thumblist div.
zorchenhimer · Mar 19, 2017 · 9c797c7 · 9c797c7
1 parent 9a7a292
commit 9c797c7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/templates/base.html b/templates/base.html
@@ -16,8 +16,11 @@
         #container {
             max-width: 1440px;
             width: 100%;
-            /*margin: auto;*/
-            margin-left: 2.5%;
+            margin: auto;
+            /*padding-left: 2.5%;*/
+        }
+        #mainlist {
+            padding-left: 2.5%;
         }
         #title {
             max-width: 1440px;
@@ -27,11 +30,6 @@
             font-family: sans-serif;
             color: #ddd;
         }
-        #thumblist {
-            max-width: 1260px;
-            min-width: 840px;
-            margin: auto;
-        }
         .thumbnail {
             width: 200px;
             height: 150px;
@@ -86,6 +84,7 @@
             padding-bottom: 5px;
             padding-top: 3px;
         }
+
         @media screen and (max-width: 550px) {
             .grid {
                 clear: both;
@@ -94,6 +93,24 @@
                 padding-left: 2.5%;
             }
         }
+
+        #thumblist {
+            max-width: 1260px;
+            /*min-width: 840px;*/
+            margin: auto;
+        }
+        @media screen and (max-width: 1300px) {
+            #thumblist { width: 1050px; }
+        }
+        @media screen and (max-width: 1080px) {
+            #thumblist { width: 840px; }
+        }
+        @media screen and (max-width: 870px) {
+            #thumblist { width: 630px; }
+        }
+        @media screen and (max-width: 660px) {
+            #thumblist { width: 420px; }
+        }
     </style>
     </head>
     <body style="background-image: url('/static/bg-repeat.png'); background-repeat: repeat-x; background-color: #1b2838;">

diff --git a/templates/main.html b/templates/main.html
@@ -1,6 +1,8 @@
 {{define "header"}}<h1>Steam Screenshots</h1>{{end}}
 
 {{define "body"}}
+<div id="mainlist">
     {{range .}}<div class="grid{{.Clear}}"><a href="{{.Target}}"><img src="/banner/{{.Target}}" /></a><div class="txtlink subtext"><a href="{{.Target}}">{{.Pretty}}</a> ({{.Count}})</div></div>
     {{end}}
+</div>
 {{end}}