website: sample controls for smaller screens (still needs more love)

1 files changed, 18 insertions, 0 deletions

diff --git a/docs/res/ctxedit.css b/docs/res/ctxedit.css
index 26ec13517..e0fadddbe 100644
--- a/docs/res/ctxedit.css
+++ b/docs/res/ctxedit.css
@@ -26,10 +26,14 @@
   opacity:0;
   transition: 90ms all cubic-bezier(0.25, 0.47, 0.44, 0.93);
   transform: translate(0, var(--strip-height));
+
+  outline: none;
+  pointer-events: none;
 }
 #ctxedit-ui.visible {
   opacity:1;
   transform: translate(0, 0);
+  pointer-events: initial;
 }
 #ctxedit-ui .wrapper {
   display: flex;
@@ -180,6 +184,20 @@
   #ctxedit-ui .button.dismiss-button { background-image: url(dismiss.svg); }
 
 
+
+/* narrow viewports */
+@media only screen and (max-width: 639px) {
+  #ctxedit-ui {
+    background: black;
+    height: calc(var(--strip-height) * 4);
+  }
+  #ctxedit-ui .wrapper {
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+}
+
+
 .font-preload {
   position: fixed;
   display: block;