Forráskód Böngészése

Add multicolumn support depending on the view

Danilo Gómez Gómez 5 éve
szülő
commit
f4f2aa1169
1 módosított fájl, 15 hozzáadás és 8 törlés
  1. 15 8
      static/css/main.css

+ 15 - 8
static/css/main.css

@@ -1,6 +1,7 @@
 /* Variables */
 :root {
-	--columns: 5;
+	--preferred-columns: 5;
+	--columns: var(--preferred-columns);
 	--tile-margin: .9vw;
 	--body-margin: 3.6vw;
 	--theme-color: #ff2d00;
@@ -10,21 +11,27 @@
 	--header-space: calc(10 * var(--tile-margin) - 10px);
 }
 /* Columns */
-/* @media (max-width: 1500px) {
-	:root { --columns: 5; }
+@media (min-width: 1501px) {
+	:root { --columns: min(var(--preferred-columns), 6); }
+}
+@media (max-width: 1500px) {
+	:root { --columns: min(var(--preferred-columns), 5); }
+}
+@media (max-width: 1500px) {
+	:root { --columns: min(var(--preferred-columns), 5); }
 }
 @media (max-width: 1000px) {
-	:root { --columns: 4; }
+	:root { --columns: min(var(--preferred-columns), 4); }
 }
 @media (max-width: 700px) {
-	:root { --columns: 3; }
+	:root { --columns: min(var(--preferred-columns), 3); }
 }
 @media (max-width: 500px) {
-	:root { --columns: 2; }
+	:root { --columns: min(var(--preferred-columns), 2); }
 }
 @media (max-width: 400px) {
-	:root { --columns: 1; }
-} */
+	:root { --columns: min(var(--preferred-columns), 1); }
+}
 /* Font Size */
 :root {
 	/* font-size: 180%; */