Adding search bar to mobile, still doing nothing.

public/css/styles.css

@@ -8,6 +8,24 @@ body {
   min-height: 100%;
   width: 100%;
   height: 100%; }
+  body div.search {
+    background: white;
+    margin-left: 10px;
+    margin-right: 10px; }
+    body div.search:focus, body div.search:hover {
+      background: aliceblue; }
+    body div.search div.search-icon {
+      height: calc(100% - 28px);
+      display: flex;
+      background: aliceblue;
+      align-items: center;
+      margin: 7px;
+      padding: 7px;
+      border-radius: 10px;
+      border: solid gray 1px;
+      aspect-ratio: 1/1; }
+      body div.search div.search-icon img {
+        height: 80%; }
   body p, body h1, body h2, body h3, body h4, body a {
     font-family: 'arial'; }
   body *.android {
@@ -123,6 +141,7 @@ body {
   body nav.mobile-shortcuts {
     position: fixed;
     display: flex;
+    align-items: center;
     width: 100%;
     background: blueviolet;
     height: 60px;
@@ -134,8 +153,10 @@ body {
       padding-top: 0;
       padding-right: 0;
       padding-bottom: 0; }
-    body nav.mobile-shortcuts div {
+    body nav.mobile-shortcuts div.search {
-      width: 66.6666666667%; }
+      width: calc(100% * 4 / 6 - 20px);
+      height: 80%;
+      border-radius: 10px; }
   body div.page-contents {
     background: #FEFEFA;
     position: fixed;

public/css/styles.scss

@@ -14,6 +14,28 @@ html {
 }
 
 body {
+  div.search {
+    background: white;
+    margin-left: 10px;
+    margin-right: 10px;
+    &:focus,&:hover {
+        background: aliceblue;
+    }
+    div.search-icon {
+        height: calc(100% - 28px);
+        display: flex;
+        background: aliceblue;
+        align-items: center;
+        margin: 7px;
+        padding: 7px;
+        border-radius: 10px;
+        border: solid gray 1px;
+        aspect-ratio: 1/1;
+        img {
+            height: 80%;
+        }
+    }
+  }
   p, h1, h2, h3, h4, a {
     font-family: 'arial';
   }
@@ -201,6 +223,7 @@ body {
   nav.mobile-shortcuts {
     position: fixed;
     display: flex;
+    align-items: center;
     width: 100%;
     background: $background_div;
     height: 60px;
@@ -215,8 +238,10 @@ body {
       padding-bottom: 0;
     }
 
-    div {
+    div.search {
-      width: 100% * 4 / 6;
+      width: calc(100% * 4 / 6 - 20px);
+      height: 80%;
+      border-radius: 10px;
     }
   }
 

public/img/search.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="search.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="1.6291667"
+     inkscape:cx="-122.45524"
+     inkscape:cy="118.46547"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g1595"
+       style="fill:none" />
+    <path
+       id="path234"
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.406748;opacity:1;stroke-opacity:0.98918414"
+       inkscape:label="path234"
+       d="M 42.587891 0.98828125 A 41.311115 41.311115 0 0 0 1.2773438 42.298828 A 41.311115 41.311115 0 0 0 42.587891 83.609375 A 41.311115 41.311115 0 0 0 83.900391 42.298828 A 41.311115 41.311115 0 0 0 42.587891 0.98828125 z M 42.101562 7.703125 A 33.820869 33.820869 0 0 1 75.921875 41.523438 A 33.820869 33.820869 0 0 1 42.101562 75.345703 A 33.820869 33.820869 0 0 1 8.2792969 41.523438 A 33.820869 33.820869 0 0 1 42.101562 7.703125 z " />
+    <path
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.3"
+       d="M 69.229599,73.265986 115.43357,118.34272 118.2149,115.4523 71.943194,71.366409 Z"
+       id="path1731"
+       sodipodi:nodetypes="ccccc" />
+  </g>
+</svg>

templates/page/_mobile_menu.html.ep

@@ -1,7 +1,13 @@
 % my $categories = stash 'categories';
 <nav class="mobile-shortcuts">
     <a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
-    <div></div>
+    <div tabindex="0" class="search">
+        <div class="search-icon">
+            <img alt="" src="/img/search.svg"/>
+        </div>
+        <div class="fake-text-box">
+        </div>
+    </div>
     <a href="#mobile-foldable" class="menu-expand">
         <img class="open-menu-icon" src="/img/hamburger-menu-yellow.webp" alt="Expandir el menú."/>
         <img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/>