Resolve "Responsive behaviour"

50186cc5 · mahogony · o@immerda.ch · 2c1bcb9b · 50186cc5 · 50186cc5
Commit 50186cc5 authored Mar 28, 2020 by mahogony Committed by o@immerda.ch Mar 28, 2020
--- a/ipick.js
+++ b/ipick.js
@@ -38,7 +38,7 @@
      bottom: 0;
      right: 0;
      height: 100%;
-      width: 18.75em;
+      width: 100vw;
      max-width: 0;
      transition:  max-width 300ms ease-in-out;
      background-color: #222;
@@ -50,28 +50,46 @@
      padding: 0em 4em;
      margin: auto;
      line-height: normal;
+      width: calc(100% - 8em);
+      text-align: center;
    }
    .ipick-menu ul li {
      list-style: none;
      padding: 0px;
      margin: auto;
      line-height: normal;
+      padding-top: 0.625em;
    }
    .ipick-menu ul li a {
      color: green;
-      font-size: 20pt;
+      font-size: 1.5em;
      border: none;
      padding: 0px;
      margin: 0px;
      line-height: normal;
+      text-decoration: none;
    }
    .ipick-menu ul li a:hover {
      border: none;
      text-decoration: underline;
    }
+    .ipick-open .ipick-menu {
+      max-width: 100vw;
+      width: 100vw
+    }
+    
+    @media screen and (min-width: 576px) {
+      .ipick-menu {
+        width: 18.75em;
+      }
+
+      .ipick-menu ul {
+        text-align: left;
+      }
      .ipick-open .ipick-menu {
        max-width: 18.75em;
      }
+    }
  `;
  // add styles
  var styleDom = document.createElement("style");

--- a/test.html
+++ b/test.html
@@ -2,6 +2,8 @@
 <html>
 <head>
  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
  <title></title>
 </head>
 <body style="background-color: #cdc">