chore: update sandbox

typographist · Nov 12, 2019 · ea7e10d · ea7e10d
1 parent 822aaa7
commit ea7e10d
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 20 deletions.
diff --git a/sandbox/dist/index.css b/sandbox/dist/index.css
@@ -5,22 +5,19 @@
   font-size: 75%;
 }
 
-@media  (min-width: 48em) {
-
+@media (min-width: 48em) {
   :root {
     font-size: calc(75% + 1 * ((100vw - 48em) / 224));
   }
 }
 
-@media  (min-width: 62em) {
-
+@media (min-width: 62em) {
   :root {
     font-size: calc(81.25% + 1.5 * ((100vw - 62em) / 208));
   }
 }
 
-@media  (min-width: 75em) {
-
+@media (min-width: 75em) {
   :root {
     font-size: 100%;
   }
@@ -31,22 +28,19 @@ body {
   line-height: 2rem;
 }
 
-@media  (min-width: 48em) {
-
+@media (min-width: 48em) {
   body {
     font-size: 1.3076923076923077rem;
   }
 }
 
-@media  (min-width: 62em) {
-
+@media (min-width: 62em) {
   body {
     font-size: 1.3103448275862069rem;
   }
 }
 
-@media  (min-width: 75em) {
-
+@media (min-width: 75em) {
   body {
     font-size: 1.3125rem;
   }
@@ -56,23 +50,52 @@ h1 {
   font-size: 1.4166666666666667rem;
 }
 
-@media  (min-width: 48em) {
-
+@media (min-width: 48em) {
   h1 {
     font-size: 1.4615384615384615rem;
   }
 }
 
-@media  (min-width: 62em) {
-
+@media (min-width: 62em) {
   h1 {
     font-size: 1.5862068965517242rem;
   }
 }
 
-@media  (min-width: 75em) {
-
+@media (min-width: 75em) {
   h1 {
     font-size: 1.5625rem;
   }
 }
+
+.foo {
+  color: red;
+  font-size: 1.3333333333333333rem;
+}
+
+@media (min-width: 48em) and (max-width: 61.99875em) and (orientation: portrait) {
+  .foo {
+    color: black;
+    font-size: 2.076923076923077rem;
+  }
+}
+
+@media (min-width: 48em) and (max-width: 74.99875em) and (orientation: landscape) {
+  .foo {
+    color: lightblue;
+  }
+}
+
+@media (max-width: 61.99875em) and (orientation: portrait) {
+  .foo {
+    color: green;
+    font-size: 1.4615384615384615rem;
+  }
+}
+
+@media (min-width: 62em) and (orientation: landscape) {
+  .foo {
+    color: gold;
+    font-size: 1.8620689655172413rem;
+  }
+}
diff --git a/sandbox/package.json b/sandbox/package.json
@@ -7,10 +7,10 @@
     "start": "npx postcss src/index.css -o dist/index.css -w"
   },
   "devDependencies": {
-    "postcss": "^7.0.21",
     "postcss-cli": "^6.1.3"
   },
   "dependencies": {
-    "@typographist/postcss": "^5.1.0"
+    "@typographist/postcss": "^5.1.0",
+    "postcss": "^7.0.21"
   }
 }
diff --git a/sandbox/src/index.css b/sandbox/src/index.css
@@ -9,3 +9,27 @@ body {
 h1 {
   font-size: step(1);
 }
+
+.foo {
+  color: red;
+  font-size: 0step;
+
+  @only (tablet): portrait {
+    color: black;
+    font-size: 4step;
+  }
+
+  @between (tablet, desktop):landscape {
+    color: lightblue;
+  }
+
+  @down (tablet):portrait {
+    color: green;
+    font-size: 1step;
+  }
+
+  @up (desktop):landscape {
+    color: gold;
+    font-size: 2step;
+  }
+}