initial mobile style updates (#113)

Author: taramk

lib/ui/search.tsx

@@ -107,10 +107,10 @@ export const Search: m.Component = {
 
 
     return (
-      <div class={(state.results.length > 0)?"search active":"search"} style={{position: "relative", display: "flex", flexGrow: "1"}}>
+      <div class={(state.results.length > 0)?"search active flex grow":"search flex grow"}>
         <div>
           <div class="flex" style={{margin: (state.results.length > 0)?"0":"1px"}}>
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search shrink-0"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
             <input type="text" placeholder="Search" value={state.query} onkeydown={onkeydown} oninput={autocomplete} style={{
               border: "0", 
               outline: "0", 

web/static/app/main.css

@@ -34,6 +34,10 @@ button.primary {
   background-color: var(--primary);
   border: none;
 }
+p {
+  margin-block-start: var(--padding);
+  margin-block-end: var(--padding);
+}
 
 /*------------APP------------*/
 
@@ -202,6 +206,7 @@ svg.node-bullet circle#node-collapsed {
   border: none;
   background: none;
   margin: 0 var(--padding);
+  position: relative;
 }
 .search > div {
   width: 95%;
@@ -353,4 +358,44 @@ svg.node-bullet circle#node-collapsed {
     height: 72px;
     opacity: 0;
   }
-}
+}
+
+
+/*------------MOBILE------------*/
+
+@media (max-width: 600px) {
+
+  :root {
+    --padding: var(--2);
+  }
+
+  .notice {
+    width: 100vw;
+  }
+/*todo: this padding needs to stay to same as desktop 
+for alignment purposes. should probably center
+the top nav in a more elegant way at some point*/
+  .sidebar-topsection, .topbar {
+    padding: calc(var(--padding)*2);
+  }
+ 
+  .search {
+    max-width: 100vw;
+
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+