diff --git a/helpers/search.ts b/helpers/search.ts
index d35fff181d802c633bb16cd15f77775e4ffa602b..64b2ceddec304ddbe00850df0477fd8bb26cb73a 100644
--- a/helpers/search.ts
+++ b/helpers/search.ts
@@ -2,6 +2,19 @@ let suggestions: HTMLElement = document.querySelector('div.items');
let body: HTMLElement = document.querySelector('main') || document.querySelector('section');
let userinput = document.querySelector('input.search');
+const btn_clear = document.querySelector('form button.clear')
+btn_clear.style.display = "none";
+
+function clear_search() {
+ userinput.blur();
+ userinput.value = '';
+ for(let i of [suggestions,btn_clear]){
+ i.style.display = "none";
+ }
+}
+
+btn_clear.addEventListener("click", clear_search);
+
// in page results when press enter or click search icon from search box
function close_search() {
document.getElementById('close-search').onclick= function() {
@@ -60,26 +73,25 @@ window.onload = function() {
};
function inputFocus(e) {
-
- if (e.keyCode === 191
+ if (e.key === '/'
&& document.activeElement.tagName !== "INPUT"
&& document.activeElement.tagName !== "TEXTAREA") {
e.preventDefault();
userinput.focus();
}
- if (e.keyCode === 27 ) {
- userinput.blur();
+ if (e.key == 'Escape' ) {
+ clear_search()
}
-
+ btn_clear.style.display = "block";
}
function suggestionFocus(e) {
const focusableSuggestions= suggestions.querySelectorAll('a');
-
- if (focusableSuggestions.length === 0) {
+ if (focusableSuggestions.length == 0 || userinput.style.display == "none") {
return;
}
+
const focusable= [...focusableSuggestions];
const index = focusable.indexOf(document.activeElement);
@@ -95,11 +107,9 @@ function suggestionFocus(e) {
nextIndex= index+1 < focusable.length ? index+1 : index;
focusableSuggestions[nextIndex].focus();
}
-
}
document.addEventListener("keydown", inputFocus);
-document.addEventListener("click", function(event) {suggestions.contains(event.target)});
document.addEventListener("keydown", suggestionFocus);
// Get substring by bytes
@@ -185,6 +195,8 @@ Source:
let index = elasticlunr.Index.load(window.searchIndex);
userinput.addEventListener('input', show_results, true);
suggestions.addEventListener('click', accept_suggestion, true);
+ // if (userinput.value != '') {
+ //}
function show_results(){
let value = this.value.trim();
@@ -200,7 +212,7 @@ Source:
let entry, childs = suggestions.childNodes;
let i = 0, len = results.length;
let items = value.split(/\s+/);
-// suggestions.classList.remove('d-none');
+ suggestions.style.display = "block"
results.forEach(function(page) {
if (page.doc.body !== '') {
diff --git a/sass/_article.scss b/sass/_article.scss
index 8b81d69371363d30f311bedfbbb6e5662834c833..ece7bdff55bfa10f301b4372cd283c9c82e372aa 100644
--- a/sass/_article.scss
+++ b/sass/_article.scss
@@ -1,20 +1,19 @@
-body[data-theme="light"] {
- article pre {
- background-color: #f6f7f6 !important;
- }
- article code {
- background-color: invert($dark3);
- }
+body[data-theme='light'] {
+ article pre {
+ background-color: #f6f7f6 !important;
+ }
+ article code {
+ background-color: invert($dark3);
+ }
}
-
@media (prefers-color-scheme: light) {
- body:not([data-theme="black"]) {
+ body:not([data-theme='black']) {
article pre {
- background-color: #f6f7f6 !important;
+ background-color: #f6f7f6 !important;
}
article code {
- background-color: invert($dark3);
+ background-color: invert($dark3);
}
}
}
@@ -33,13 +32,13 @@ article {
h2 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
- &:hover{
+ &:hover {
a.anchors::before {
content: '#';
margin-right: 0.25rem;
color: var(--green);
}
- }
+ }
}
h3,
h4,
@@ -82,8 +81,8 @@ article {
}
}
p {
- display: inline;
- margin-top: 0;
+ display: inline;
+ margin-top: 0;
}
}
table {
@@ -140,35 +139,35 @@ article {
height: auto;
}
blockquote.hint {
- display: grid;
- grid-template-columns: 0.1fr 1fr;
- max-width: 100%;
- padding: 15px;
- overflow: hidden;
- border: none;
- svg {
- width: 25px;
- height: 25px;
- }
- p {
- text-align: center;
- opacity: 85%;
- font-weight: inherit;
- font-size: 16px;
- }
+ display: grid;
+ grid-template-columns: 0.1fr 1fr;
+ max-width: 100%;
+ padding: 15px;
+ overflow: hidden;
+ border: none;
+ svg {
+ width: 25px;
+ height: 25px;
+ }
+ p {
+ text-align: center;
+ opacity: 85%;
+ font-weight: inherit;
+ font-size: 16px;
+ }
}
blockquote.warning {
- background: $yellow;
- color: var(--black);
+ background: $yellow;
+ color: var(--black);
}
blockquote.note {
- background: $blue;
- color: var(--white);
+ background: $blue;
+ color: var(--white);
}
blockquote.critical {
- background: $red;
- color: var(--white);
-}
+ background: $red;
+ color: var(--white);
+ }
}
.sections {
@@ -212,20 +211,19 @@ nav.navigation {
border-bottom: 1px solid $dark1;
}
& svg {
- position: relative;
- bottom: -4px;
- margin-left: 0.25rem;
- margin-right: 0.25rem;
+ position: relative;
+ bottom: -4px;
+ margin-left: 0.25rem;
+ margin-right: 0.25rem;
}
}
}
-
@media (max-width: 1000px) {
- article {
- padding-top: 5rem;
- }
- nav.navigation {
- min-width: 100%;
- }
+ article {
+ padding-top: 5rem;
+ }
+ nav.navigation {
+ min-width: 100%;
+ }
}
diff --git a/sass/index.scss b/sass/index.scss
index b74587679cfcccce9fac46e6d332adcb9e7b0cb0..ba078e3060088f7b90134e1cac7e79c159cde9dd 100644
--- a/sass/index.scss
+++ b/sass/index.scss
@@ -37,26 +37,26 @@ img {
}
body {
- --foreground: var(--black);
- --background: var(--white);
- background: var(--background);
+ --foreground: var(--black);
+ --background: var(--white);
+ background: var(--background);
}
-body[data-theme="black"] {
- --background: var(--black);
- --foreground: var(--white);
+body[data-theme='black'] {
+ --background: var(--black);
+ --foreground: var(--white);
}
-body[data-theme="light"] {
- --foreground: var(--black);
- --background: var(--white);
+body[data-theme='light'] {
+ --foreground: var(--black);
+ --background: var(--white);
}
@media (prefers-color-scheme: dark) {
-body:not([data-theme="light"]) {
+ body:not([data-theme='light']) {
--background: var(--black);
--foreground: var(--white);
-}
+ }
}
button {
@@ -67,7 +67,7 @@ button {
header nav {
display: flex;
justify-content: space-between;
- ul {
+ ul {
display: flex;
align-items: center;
}
diff --git a/sass/macros/_header.scss b/sass/macros/_header.scss
index 954a7806a0f9528caa2c95b3e6a94536a5eff208..fab3b1aecce89d3cbf9270a929561417af71b532 100644
--- a/sass/macros/_header.scss
+++ b/sass/macros/_header.scss
@@ -1,8 +1,8 @@
header > nav > ul > li.separator {
- button {
- margin-left: 0.75rem;
- }
- svg {
+ button {
+ margin-left: 0.75rem;
+ }
+ svg {
margin: 3px 3px;
}
}
@@ -17,13 +17,15 @@ body[data-theme='black'] > header > nav > ul > li > button.toggle {
}
}
-body:not([data-theme='black']) > header > nav > ul > li > button.toggle {
- svg:not(.toggle-black) {
- display: none;
- }
- svg.toggle-black {
- color: var(--foreground);
- display: block;
+body:not([data-theme='black']) > header > nav {
+ & ul > li > button.toggle {
+ svg:not(.toggle-black) {
+ display: none;
+ }
+ svg.toggle-black {
+ color: var(--foreground);
+ display: block;
+ }
}
}
@@ -106,7 +108,7 @@ header {
li.separator {
display: flex;
button.search {
- display: none;
+ display: none;
}
}
li.separator::before {
@@ -117,6 +119,12 @@ header {
display: flex;
border: 1px solid;
border-color: var(--foreground);
+ button.clear {
+ color: var(--foreground);
+ &:hover {
+ color: var(--green);
+ }
+ }
input {
color: var(--foreground);
background: var(--background);
@@ -139,9 +147,9 @@ header {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 0.2fr 1fr;
- gap: 1px;
- align-content: center;
- }
+ gap: 1px;
+ align-content: center;
+ }
& div {
border: 1px solid var(--foreground);
}
@@ -172,16 +180,19 @@ div.items {
position: fixed;
z-index: 5;
form {
- display: none;
+ display: none;
+ width: 98%;
+ input {
width: 98%;
+ }
}
div.items {
- display: none;
+ display: none !important;
}
li.separator {
- button.search {
- display: block;
- }
+ button.search {
+ display: block;
+ }
}
}
}
diff --git a/sass/macros/_search.scss b/sass/macros/_search.scss
index f2bd3de26d12317d9b526217456b474f95d8b0a9..336d119b566c117cb7ee3e1302709f8016b879df 100644
--- a/sass/macros/_search.scss
+++ b/sass/macros/_search.scss
@@ -1,55 +1,55 @@
main.full-screen {
- grid-template-columns: 1fr;
- grid-template-rows: 0.1fr 1fr;
- min-height: 100vh;
- align-content: center;
- justify-items: center;
- grid-gap: 20px 0;
- button {
- justify-self: end;
- margin: 2rem 2rem 0;
- border: none;
- background: none;
- color: var(--foreground);
- &:hover {
- border: 1px solid $dark1;
- }
+ grid-template-columns: 1fr;
+ grid-template-rows: 0.1fr 1fr;
+ min-height: 100vh;
+ align-content: center;
+ justify-items: center;
+ grid-gap: 20px 0;
+ button {
+ justify-self: end;
+ margin: 2rem 2rem 0;
+ border: none;
+ background: none;
+ color: var(--foreground);
+ &:hover {
+ border: 1px solid $dark1;
+ }
+ }
+ & div.items {
+ & a {
+ display: inline-grid;
+ grid-template-rows: 0.5fr 1fr;
+ justify-items: start;
+ padding: 0.75rem;
}
- & div.items {
- & a {
- display: inline-grid;
- grid-template-rows: 0.5fr 1fr;
- justify-items: start;
- padding: 0.75rem;
- }
- & span {
- width: 37rem;
- font-size: 15px;
- margin-top: 0.5rem;
- }
- & span:first-child{
- font-size: 20px;
- }
+ & span {
+ width: 37rem;
+ font-size: 15px;
+ margin-top: 0.5rem;
}
+ & span:first-child {
+ font-size: 20px;
+ }
+ }
}
-@media (max-width: 1000px){
- main.full-screen {
- gap: 5px 0;
- button {
- margin: 3rem 1rem 1rem 0;
- }
- div.items span {
- max-width: 15rem;
- }
+@media (max-width: 1000px) {
+ main.full-screen {
+ gap: 5px 0;
+ button {
+ margin: 3rem 1rem 1rem 0;
+ }
+ div.items span {
+ max-width: 15rem;
+ }
div.items {
- span {
+ span {
margin-top: 0.2rem;
font-size: 12px;
- }
- span:first-child{
+ }
+ span:first-child {
font-size: 18px;
+ }
}
}
- }
}
diff --git a/sass/macros/_sidebar.scss b/sass/macros/_sidebar.scss
index 6815b7737f30060d5b5beea2ce1064d64060ee76..6875861de9d66419bdf0f3cd95fdf2f006675290 100644
--- a/sass/macros/_sidebar.scss
+++ b/sass/macros/_sidebar.scss
@@ -1,4 +1,4 @@
-main nav {
+main nav {
padding-left: 0;
max-height: 100vh;
background: var(--background);
diff --git a/sass/macros/_toc.scss b/sass/macros/_toc.scss
index e8b78779d08df01150c0c8110a7bf4a052bb71b8..15e6b0b495d304eb21584a0b5b1295b6186d231d 100644
--- a/sass/macros/_toc.scss
+++ b/sass/macros/_toc.scss
@@ -19,14 +19,14 @@ aside {
margin-top: 0.345rem;
padding-top: 0.345rem;
&.children {
- a {
- margin-left: 2.5rem;
- }
+ a {
+ margin-left: 2.5rem;
+ }
}
&.edit-page {
- svg {
- margin-right: 0.5rem;
- }
+ svg {
+ margin-right: 0.5rem;
+ }
}
}
a {
@@ -52,7 +52,7 @@ aside {
aside {
display: none;
span {
- margin-left: 1rem;
+ margin-left: 1rem;
}
ul {
border: none;
diff --git a/sass/page.scss b/sass/page.scss
index d9175d0ea01c4044625be2b3f08bf4797b656282..5f122215c6c1f324f8bb822ee6c96ea778931937 100644
--- a/sass/page.scss
+++ b/sass/page.scss
@@ -6,7 +6,6 @@
@import 'macros/sidebar';
@import 'macros/toc';
-
.mheader {
display: none;
}
@@ -22,7 +21,7 @@
position: fixed;
top: 2.6rem;
grid-template-rows: 1fr;
- grid-template-columns: repeat(2,1fr);
+ grid-template-columns: repeat(2, 1fr);
justify-content: space-around;
background: var(--background);
color: var(--foreground);
@@ -31,8 +30,8 @@
border-bottom: 1px solid $dark1;
a {
padding-left: 0.5rem;
- &:last-child{
- justify-self: end;
+ &:last-child {
+ justify-self: end;
}
}
}
diff --git a/sass/section.scss b/sass/section.scss
index 8046444fbf6b66fa0b5bec2071dede051d16d683..c9b38fc5a5aeff04c0dc64b3f162e5f6a8b0677c 100644
--- a/sass/section.scss
+++ b/sass/section.scss
@@ -2,12 +2,12 @@
@import 'special-pages';
-body[data-theme="black"] > section a {
- border: 1px solid $light4;
+body[data-theme='black'] > section a {
+ border: 1px solid $light4;
}
-body:not([data-theme="dark"]) > section a {
- border: 1px solid $dark2;
+body:not([data-theme='dark']) > section a {
+ border: 1px solid $dark2;
}
section {
diff --git a/templates/macros/header.html b/templates/macros/header.html
index e3bf939357604252d868dc226056cf9d63d8d720..ed86e2908ddbfdd62b6d528be122ddbbdb1621aa 100644
--- a/templates/macros/header.html
+++ b/templates/macros/header.html
@@ -30,6 +30,9 @@
<form name="go_search">
<input class="search" type="search" placeholder="Search ..."
aria-label="Search ..." autocomplete="off">
+ <button class="clear" type="reset">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="22" height="22" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z" fill="currentColor"></path></svg>
+ </button>
<div class="items"></div>
</form>
{% endif %}