add mobile styles

4 files changed, 120 insertions, 35 deletions

diff --git a/styles/global.scss b/styles/global.scss
index 0a542a9..04473b8 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -32,3 +32,16 @@ textarea, input {
   padding-right: 2rem;
 }
 
+.mobile-only {
+  display: none!important;
+
+  @media(max-width: 40em) {
+    display: inline-block!important;
+  }
+}
+
+.desktop-only {
+  @media(max-width: 40em) {
+    display: none!important;
+  }
+}
diff --git a/styles/global/_themes.scss b/styles/global/_themes.scss
index 9319fa5..e0b146f 100644
--- a/styles/global/_themes.scss
+++ b/styles/global/_themes.scss
@@ -13,7 +13,7 @@
   --color-window-border-top: rgba(255,255,255,.7);
   --color-window-border-bottom: #ccc;
   --color-window-content: #fff;
-  --color-window-popup: #fff;
+  --color-window-popup: #eee;
   --color-window-buttons: #666;
   --color-window-buttons-alt: #222;
   --color-window-menu: #eee;
@@ -42,7 +42,7 @@
   --color-window-border-top: rgba(255,255,255,.7);
   --color-window-border-bottom: #ccc;
   --color-window-content: #fff;
-  --color-window-popup: #fff;
+  --color-window-popup: #eee;
   --color-window-buttons: #666;
   --color-window-buttons-alt: #222;
   --color-window-menu: #eee;
diff --git a/styles/global/_window.scss b/styles/global/_window.scss
index 08ddfaf..c489796 100644
--- a/styles/global/_window.scss
+++ b/styles/global/_window.scss
@@ -1,11 +1,14 @@
 .window {
   position: absolute;
-  transition-property: opacity, visibility, transform, width, height, top, left;
-  transition-duration: .3s;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   border-radius: .5em;
   color: var(--color-text);
 
+  @media(min-width: 40em) {
+    transition-property: opacity, visibility, transform, width, height, top, left;
+    transition-duration: .3s;
+  }
+
   &.moving {
     transition: none
   }
@@ -29,19 +32,6 @@
     height: 100%;
     width: 100%;
   }
-    // top: 50%;
-    // left: 50%;
-
-    // @media (min-width: 80em) {
-      // width: 64em;
-      // left: calc((100vw - 64em) / 2)
-    // }
-
-    // @media (min-height: 80em) {
-      // width: 64em;
-      // left: calc((100vh - 64em) / 2)
-    // }
-  // }
 
   &__title {
     position: absolute;
@@ -86,6 +76,10 @@
         color: var(--color-window-buttons-alt);
       }
     }
+
+    @media(max-width: 40em) {
+      display: none;
+    }
   }
 
   &__content {
@@ -96,7 +90,6 @@
     right: 0;
     bottom: 0;
     left: 0;
-    padding: 1em;
     border-bottom-left-radius: .5em;
     border-bottom-right-radius: .5em;
   }
@@ -109,18 +102,35 @@
 
   .window__submenu {
     display: block;
-    margin: -1em -1em 1em;
     height: 2em;
+    width: 100%;
     background: var(--color-window-menu);
 
-    & > div {
+    & > div > div {
       // cursor: pointer;
       display: inline-block;
       padding: .5em;
       transition: .3s background;
+      white-space: nowrap;
 
-      &:hover {
-        background-color: var(--color-window-menu-alt);
+      @media(hover: hover) {
+        &:hover {
+          background-color: var(--color-window-menu-alt);
+        }
+      }
+    }
+
+
+    @media(max-width: 40em) {
+      height: 3em;
+      overflow: auto;
+
+      & > div {
+        display: flex;
+      }
+
+      & > div > div {
+        padding: 1em;
       }
     }
   }
@@ -128,7 +138,7 @@
   &__scroll {
     height: 100%;
     overflow: auto;
-    margin: -1em -1em 0;
+    padding: 1em;
   }
 
   &__buttons--popup {
@@ -150,8 +160,10 @@
     // cursor: pointer;
     transition: .3s background-color;
 
-    &:hover {
-      background-color:  var(--color-button-alt);
+    @media(hover: hover) {
+      &:hover {
+        background-color:  var(--color-button-alt);
+      }
     }
   }
 
@@ -163,8 +175,10 @@
       border-top: 1px solid var(--color-popup-error-border);
       border-bottom: 1px solid  var(--color-popup-error-border);
 
-      &:hover {
-        background-color: var(--color-popup-error-button-alt);
+      @media(hover: hover) {
+        &:hover {
+          background-color: var(--color-popup-error-button-alt);
+        }
       }
     }
   }
diff --git a/styles/main/_header.scss b/styles/main/_header.scss
index 9fab16b..e6ac70f 100644
--- a/styles/main/_header.scss
+++ b/styles/main/_header.scss
@@ -6,34 +6,92 @@
   nav {
     display: flex;
 
-    & > ul:first-of-type {
+    & > div {
       flex-grow: 1;
-      overflow: auto;
+      overflow-y: auto;
+
+      & > span {
+        padding-left: .5em;
+        line-height: 2em;
+        font-weight: 600;
+      }
+
+      & > ul {
+        display: flex;
+      }
     }
 
-    & > ul {
+    & > ul,
+    & > div > ul {
       display: block;
 
       & > li {
         display: inline-block;
 
+        & > span > span {
+          padding: .75em;
+          display: inline-block;
+          margin-left: .5em;
+          color: var(--color-error);
+        }
+
         & > span,
         & > a {
           display: inline-block;
           color: var(--color-text);
           text-decoration: none;
           align-items: center;
-          padding: .25em .5em;
-          margin: .25em;
           border-radius: .5em;
           transition: .3s background, .3s color;
+          white-space: nowrap;
+          padding: .25em .5em;
+          margin: .25em;
 
-          &:hover {
-            background-color: var(--color-selected);
-            color: var(--color-text-alt);
+          @media(hover: hover) {
+            &:hover {
+              background-color: var(--color-selected);
+              color: var(--color-text-alt);
+            }
           }
         }
       }
     }
   }
 }
+
+.showMobileAppList {
+  @media(max-width: 40em) {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--color-window-popup);
+    border-bottom: 1px solid var(--color-window-border-bottom);
+    border-top: 1px solid var(--color-window-border-top);
+    border-radius: .5em;
+    padding: 1em;
+    min-width: 13em;
+
+    li {
+      width: 100%;
+      padding: 0;
+      margin: -.25em 0;
+    }
+
+    & > li:first-of-type {
+      padding: .5em .5em 1em;
+      white-space: nowrap;
+    }
+
+    & > li:last-of-type {
+      width: 100%;
+      padding-top: 1em;
+      text-align: center;
+
+      span {
+        height: 2.1em;
+        padding: .5em .75em;
+      }
+    }
+  }
+}