diff options
| -rw-r--r-- | assets/sass/main.scss | 12 | ||||
| -rw-r--r-- | assets/sass/menu.scss | 22 | ||||
| -rw-r--r-- | exampleSite/content/content-organisation/placeholders/header.md | 2 | ||||
| -rw-r--r-- | exampleSite/content/content-organisation/placeholders/menu.md | 6 | ||||
| -rw-r--r-- | exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content | 9 | ||||
| -rw-r--r-- | exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content | 16 | ||||
| -rw-r--r-- | i18n/en.toml | 2 | ||||
| -rw-r--r-- | layouts/partials/body-header.html | 18 | ||||
| -rw-r--r-- | layouts/partials/body-sidebar.html | 20 | ||||
| -rw-r--r-- | static/vendor/auto-complete/auto-complete.css | 9 |
10 files changed, 68 insertions, 48 deletions
diff --git a/assets/sass/main.scss b/assets/sass/main.scss index b706116..1da65f0 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -84,17 +84,7 @@ body{ }
- div.search{
- order: 5; /* default is 0 */
- flex-grow: 1;
- margin-left: 25px;
-
- input {
- padding: 5px;
- width: 100%;
- height: 20px;
- }
- }
+
nav.shortcuts {
diff --git a/assets/sass/menu.scss b/assets/sass/menu.scss index 878ac54..2c85cc4 100644 --- a/assets/sass/menu.scss +++ b/assets/sass/menu.scss @@ -9,13 +9,33 @@ $color_main : hsl(random(360)-1, random(100)-1%, 45%); $c_dark1 : darken($color_main, 15%);
-
+.autocomplete-suggestions{
+ background-color: lighten($color_main, 50%)!important;
+ height: 100vh;
+}
article>aside {
/*background-color: $c_light3;*/
background-color: transparentize($color_main,0.9);
background-color: lighten($color_main,50%);
padding: 2rem 0rem 1rem 0rem;
+
+ div.search{
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: calc(100% - 25px - 25px );
+ input {
+ padding: 3px 25px;
+ width: 100%;
+ height: 2rem;
+ border: 0px;
+ background-color: transparentize($color_main,0.9);
+ border-bottom: 1px solid transparentize($color_main,0.8);
+ }
+ }
+
+
.menu {
list-style-type: none;
line-height: 2rem;
diff --git a/exampleSite/content/content-organisation/placeholders/header.md b/exampleSite/content/content-organisation/placeholders/header.md index d9884df..cf133cb 100644 --- a/exampleSite/content/content-organisation/placeholders/header.md +++ b/exampleSite/content/content-organisation/placeholders/header.md @@ -15,6 +15,4 @@ Create a `_header.md` page in content root folder. Its content is what you get i {{%alert info%}}**Tip :** look at * [ extra static menu]({{%relref "content-organisation/extramenu.md"%}}) if you want to add (or remove) header links -* [ hide search box ]({{%relref "content-organisation/customize-style/disable.md"%}}) if you want to remove the search box from header - {{%/alert%}}
\ No newline at end of file diff --git a/exampleSite/content/content-organisation/placeholders/menu.md b/exampleSite/content/content-organisation/placeholders/menu.md index 177480e..03bf338 100644 --- a/exampleSite/content/content-organisation/placeholders/menu.md +++ b/exampleSite/content/content-organisation/placeholders/menu.md @@ -25,4 +25,8 @@ Create a `_sidepage-after.md` page in content root folder. -{{%alert info%}}**Tip :** You can put a full HTML content in your .md files{{%/alert%}}
\ No newline at end of file +{{%alert info%}}**Tip :** You can put a full HTML content in your .md files{{%/alert%}} + +{{%alert info%}}**Tip :** You can [ hide search box ]({{%relref "content-organisation/customize-style/disable.md"%}}) if you want to remove the search box from header + +{{%/alert%}}
\ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content b/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content index dc9af9f..4b79472 100644 --- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content +++ b/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content @@ -35,15 +35,6 @@ body { margin-right: 0.5rem; } body header .logo .burger { margin-right: 1rem; } - body header div.search { - order: 5; - /* default is 0 */ - flex-grow: 1; - margin-left: 25px; } - body header div.search input { - padding: 5px; - width: 100%; - height: 20px; } body header nav.shortcuts { margin-left: 24px; display: flex; diff --git a/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content b/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content index 2bd07d0..c373cb0 100644 --- a/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content +++ b/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content @@ -1,8 +1,24 @@ +.autocomplete-suggestions { + background-color: #f3f2f2 !important; + height: 100vh; } + article > aside { /*background-color: $c_light3;*/ background-color: rgba(115, 115, 115, 0.1); background-color: #f3f2f2; padding: 2rem 0rem 1rem 0rem; } + article > aside div.search { + position: absolute; + left: 0px; + top: 0px; + width: calc(100% - 25px - 25px); } + article > aside div.search input { + padding: 3px 25px; + width: 100%; + height: 2rem; + border: 0px; + background-color: rgba(115, 115, 115, 0.1); + border-bottom: 1px solid rgba(115, 115, 115, 0.2); } article > aside .menu { list-style-type: none; line-height: 2rem; } diff --git a/i18n/en.toml b/i18n/en.toml index 4d4cc9b..13f95bd 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -5,7 +5,7 @@ other = "Create a content/_header.md to customize this" other = "Create a content/_footer.md file to customize the footer content !" [Search-placeholder] -other = "Search..." +other = "Type to search..." [Clear-History] other = "Clear History" diff --git a/layouts/partials/body-header.html b/layouts/partials/body-header.html index 8c0d2ad..d8c342a 100644 --- a/layouts/partials/body-header.html +++ b/layouts/partials/body-header.html @@ -22,22 +22,4 @@ </div> - {{- if not .Site.Params.disableSearch}} - <div class="search"> - <div class="searchbox"> - <input data-search-input id="search-by" type="text" placeholder="{{T "Search-placeholder"}}"> - </div> - <script type="text/javascript" src="{{"vendor/lunr/lunr.min.js" | relURL}}"></script> - <script type="text/javascript" src="{{"vendor/auto-complete/auto-complete.js" | relURL}}"></script> - <link href="{{"vendor/auto-complete/auto-complete.css" | relURL}}" rel="stylesheet"> - <script type="text/javascript"> - {{ if .Site.IsMultiLingual }} - var baseurl = "{{.Site.BaseURL}}{{.Site.LanguagePrefix}}"; - {{ else }} - var baseurl = "{{.Site.BaseURL}}"; - {{ end }} - </script> - <script type="text/javascript" src="{{"js/search.js" | relURL}}"></script> - </div> - {{- end}} diff --git a/layouts/partials/body-sidebar.html b/layouts/partials/body-sidebar.html index 45f1b5f..169f9f5 100644 --- a/layouts/partials/body-sidebar.html +++ b/layouts/partials/body-sidebar.html @@ -1,3 +1,23 @@ +{{- if not .Site.Params.disableSearch}} +<div class="search"> + <div class="searchbox"> + <input data-search-input id="search-by" type="text" placeholder="{{T "Search-placeholder"}}"> + </div> + <script type="text/javascript" src="{{"vendor/lunr/lunr.min.js" | relURL}}"></script> + <script type="text/javascript" src="{{"vendor/auto-complete/auto-complete.js" | relURL}}"></script> + <link href="{{"vendor/auto-complete/auto-complete.css" | relURL}}" rel="stylesheet"> + <script type="text/javascript"> + {{ if .Site.IsMultiLingual }} + var baseurl = "{{.Site.BaseURL}}{{.Site.LanguagePrefix}}"; + {{ else }} + var baseurl = "{{.Site.BaseURL}}"; + {{ end }} + </script> + <script type="text/javascript" src="{{"js/search.js" | relURL}}"></script> +</div> +{{- end}} + + {{- partial "_mdinclude.html" (dict "name" "_sidebar-before" "context" .) -}} <div id="close_menu"> diff --git a/static/vendor/auto-complete/auto-complete.css b/static/vendor/auto-complete/auto-complete.css index 27952ee..446819a 100644 --- a/static/vendor/auto-complete/auto-complete.css +++ b/static/vendor/auto-complete/auto-complete.css @@ -1,18 +1,17 @@ .autocomplete-suggestions { text-align: left; cursor: default; - border: 1px solid #ccc; + /*border: 1px solid #ccc;*/ border-top: 0; - background: #fff; - box-shadow: 1px 2px 6px; + /*box-shadow: 1px 2px 6px;*/ transition: left 0.1s ease-in-out; /* core styles should not be changed */ position: absolute; display: none; z-index: 9999; - max-height: 70vh; - min-width: 265px; + /*max-height: 70vh;*/ + /*min-width: 265px;*/ overflow: hidden; overflow-y: hidden; box-sizing: border-box; |