mirror of https://gitlab.com/curben/blog
fix(search): consistent class name style
This commit is contained in:
parent
2284440a7d
commit
1cccb619a0
|
@ -5,14 +5,14 @@
|
||||||
<a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
|
<a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<div class="searchContainer">
|
<div class="search-container">
|
||||||
<form id="searchForm" method="post" action="https://duckduckgo.com/" target="_blank" rel="noopener external nofollow noreferrer">
|
<form id="searchForm" method="post" action="https://duckduckgo.com/" target="_blank" rel="noopener external nofollow noreferrer">
|
||||||
<input type="text" name="q" class="searchBox" id="searchTxt" placeholder="Search..." title="Powered by DuckDuckGo">
|
<input type="text" name="q" class="search-box" placeholder="Search..." title="Powered by DuckDuckGo">
|
||||||
<input type="hidden" name="sites" value="<%- config.url.replace(/^http(s)?:\/\//, '') %>">
|
<input type="hidden" name="sites" value="<%- config.url.replace(/^http(s)?:\/\//, '') %>">
|
||||||
<input type="hidden" name="kd" value="-1">
|
<input type="hidden" name="kd" value="-1">
|
||||||
<input type="hidden" name="kg" value="p">
|
<input type="hidden" name="kg" value="p">
|
||||||
<input type="hidden" name="kae" value="#000">
|
<input type="hidden" name="kae" value="#000">
|
||||||
<a class="searchBtn no-underline" id="searchClick">
|
<a class="search-button no-underline" id="search-click">
|
||||||
<svg viewBox="0 0 512 512">
|
<svg viewBox="0 0 512 512">
|
||||||
<title>Powered by DuckDuckGo</title>
|
<title>Powered by DuckDuckGo</title>
|
||||||
<desc>Search icon</desc>
|
<desc>Search icon</desc>
|
||||||
|
@ -29,14 +29,14 @@
|
||||||
<label for="mobile-menu-toggle"><a class="menu-button no-underline">☰</a></label>
|
<label for="mobile-menu-toggle"><a class="menu-button no-underline">☰</a></label>
|
||||||
<input id="mobile-menu-toggle" type="checkbox"/>
|
<input id="mobile-menu-toggle" type="checkbox"/>
|
||||||
<ul class="mobile-nav-link">
|
<ul class="mobile-nav-link">
|
||||||
<div class="searchContainer">
|
<div class="search-container">
|
||||||
<form id="searchFormMob" method="post" action="https://duckduckgo.com/" target="_blank" rel="noopener external nofollow noreferrer">
|
<form id="searchFormMob" method="post" action="https://duckduckgo.com/" target="_blank" rel="noopener external nofollow noreferrer">
|
||||||
<input type="text" name="q" class="searchBox" id="searchTxtMob" placeholder="Search..." title="Powered by DuckDuckGo">
|
<input type="text" name="q" class="search-box" placeholder="Search..." title="Powered by DuckDuckGo">
|
||||||
<input type="hidden" name="sites" value="<%- config.url.replace(/^http(s)?:\/\//, '') %>">
|
<input type="hidden" name="sites" value="<%- config.url.replace(/^http(s)?:\/\//, '') %>">
|
||||||
<input type="hidden" name="kd" value="-1">
|
<input type="hidden" name="kd" value="-1">
|
||||||
<input type="hidden" name="kg" value="p">
|
<input type="hidden" name="kg" value="p">
|
||||||
<input type="hidden" name="kae" value="#000">
|
<input type="hidden" name="kae" value="#000">
|
||||||
<a class="searchBtn no-underline" id="searchClickMob">
|
<a class="search-button no-underline" id="search-click-mobile">
|
||||||
<svg viewBox="0 0 512 512">
|
<svg viewBox="0 0 512 512">
|
||||||
<title>Powered by DuckDuckGo</title>
|
<title>Powered by DuckDuckGo</title>
|
||||||
<desc>Search icon</desc>
|
<desc>Search icon</desc>
|
||||||
|
|
|
@ -648,7 +648,7 @@ td {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* search bar */
|
/* search bar */
|
||||||
.searchContainer {
|
.search-container {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
width: 10em;
|
width: 10em;
|
||||||
background: var(--alt-bg-color);
|
background: var(--alt-bg-color);
|
||||||
|
@ -660,13 +660,13 @@ td {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* inline-block to position them in same line */
|
/* inline-block to position them in same line */
|
||||||
.searchBox,
|
.search-box,
|
||||||
.searchBtn{
|
.search-button{
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* hide the border and fill the height to parent's */
|
/* hide the border and fill the height to parent's */
|
||||||
.searchBox {
|
.search-box {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
height:1.8em;
|
height:1.8em;
|
||||||
|
@ -678,19 +678,19 @@ td {
|
||||||
/*
|
/*
|
||||||
* Override sanitize/forms
|
* Override sanitize/forms
|
||||||
* to prevent conflict with
|
* to prevent conflict with
|
||||||
* .searchBox padding-left
|
* .search-box padding-left
|
||||||
*/
|
*/
|
||||||
input {
|
input {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* highlight the text box when focused */
|
/* highlight the text box when focused */
|
||||||
.searchBox:focus {
|
.search-box:focus {
|
||||||
border: 1px solid var(--link-underline);
|
border: 1px solid var(--link-underline);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* align the button to center */
|
/* align the button to center */
|
||||||
.searchBtn {
|
.search-button {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 45%;
|
top: 45%;
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
// Search button function
|
// Search button function
|
||||||
document.getElementById('searchClick').addEventListener('click', () => {
|
document.getElementById('search-click').addEventListener('click', () => {
|
||||||
searchForm.submit()
|
searchForm.submit()
|
||||||
}, false)
|
}, false)
|
||||||
|
|
||||||
document.getElementById('searchClickMob').addEventListener('click', () => {
|
document.getElementById('search-click-mobile').addEventListener('click', () => {
|
||||||
searchFormMob.submit()
|
searchFormMob.submit()
|
||||||
}, false)
|
}, false)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue