Adding search bar to mobile, still doing nothing.
This commit is contained in:
parent
9715cf2125
commit
e41ce1102b
|
|
@ -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 {
|
||||
width: 66.6666666667%; }
|
||||
body nav.mobile-shortcuts div.search {
|
||||
width: calc(100% * 4 / 6 - 20px);
|
||||
height: 80%;
|
||||
border-radius: 10px; }
|
||||
body div.page-contents {
|
||||
background: #FEFEFA;
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
width: 100% * 4 / 6;
|
||||
div.search {
|
||||
width: calc(100% * 4 / 6 - 20px);
|
||||
height: 80%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -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ú."/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue