add mobile styles

3 files changed, 94 insertions, 15 deletions

diff --git a/apps/Notes/styles/_listItem.scss b/apps/Notes/styles/_listItem.scss
index 5e7376f..fcee9aa 100644
--- a/apps/Notes/styles/_listItem.scss
+++ b/apps/Notes/styles/_listItem.scss
@@ -23,24 +23,34 @@
         opacity: 0;
         font-size: 80%;
         transition: .3s opacity linear .3s;
+
+        @media(max-width: 40em) {
+          display: none;
+        }
       }
     }
+
+    &:nth-of-type(n+2) span {
+      padding-right: .5em;
+    }
   }
 
-  &:hover {
-    background: var(--color-window-menu-alt);
-    border-radius: .5em;
-    // cursor: pointer;
+  @media(hover: hover) {
+    &:hover {
+      background: var(--color-window-menu-alt);
+      border-radius: .5em;
+      // cursor: pointer;
 
-    & > td:first-of-type > span:nth-child(n+2){
-      color: var(--color-window-buttons);
-      visibility: visible;
-      opacity: 1;
+      & > td:first-of-type > span:nth-child(n+2){
+        color: var(--color-window-buttons);
+        visibility: visible;
+        opacity: 1;
+      }
     }
-  }
 
-  & > td:first-of-type > span:nth-child(n+2):hover {
-    color: var(--color-text-alt);
-    background-color: var(--color-glass);
+    & > td:first-of-type > span:nth-child(n+2):hover {
+      color: var(--color-text-alt);
+      background-color: var(--color-glass);
+    }
   }
 }
diff --git a/apps/Notes/styles/_noteView.scss b/apps/Notes/styles/_noteView.scss
index cf6a080..63e3fa3 100644
--- a/apps/Notes/styles/_noteView.scss
+++ b/apps/Notes/styles/_noteView.scss
@@ -4,7 +4,6 @@
     to {opacity: 1;}
   }
 
-  padding: 1rem;
   position: absolute;
   top: 0;
   right: 0;
@@ -15,13 +14,12 @@
   h2 {
     font-size: 1.25em;
     font-weight: 600;
-    padding: 1rem;
     user-select: text;
   }
 
   p {
+    padding-top: 1em;
     line-height: 1.33;
-    padding: 0 1rem 1rem;
     white-space: pre-line;
     user-select: text;
   }
diff --git a/apps/Notes/styles/_notesList.scss b/apps/Notes/styles/_notesList.scss
index f55757f..4580d62 100644
--- a/apps/Notes/styles/_notesList.scss
+++ b/apps/Notes/styles/_notesList.scss
@@ -40,4 +40,75 @@
       animation: fade-in .3s;
     }
   }
+
+  @media(max-width: 40em) {
+    thead {
+      display: flex;
+
+      tr:first-of-type {
+        flex-shrink: 1;
+      }
+    }
+
+    tr {
+      flex-direction: column;
+    }
+
+    tbody {
+      tr {
+        padding-bottom: 1em;
+      }
+
+      td:first-of-type {
+        font-weight: 600;
+      }
+
+      td:nth-of-type(n+2) {
+        font-size: .8em;
+        padding-top: .5em;
+        color: var(--color-decor);
+      }
+    }
+  }
+}
+
+.mobileSort {
+  @media(max-width: 40em) {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--color-window-popup);
+    border-radius: .5em;
+    border-bottom: 1px solid var(--color-window-border-bottom);
+    border-top: 1px solid var(--color-window-border-top);
+    padding: 1.5em;
+    width: 15em;
+
+    tr:nth-of-type(1) > th {
+      font-weight: normal;
+    }
+
+    tr:nth-of-type(2) {
+      padding-left: 1.5em;
+
+      th {
+        padding: .75em;
+
+        svg {
+          margin-left: .5em;
+        }
+      }
+    }
+
+    tr:nth-of-type(3) {
+      text-align: center;
+
+      & > td {
+        display: inline-block;
+      }
+    }
+  }
 }