From 0e9507228cc0bf67161678dc079d3b88dca5a2e5 Mon Sep 17 00:00:00 2001 From: Huy Tran Date: Thu, 20 Sep 2018 11:43:24 +1000 Subject: [PATCH] experiment search box --- layouts/partials/sidebar.html | 27 +---- layouts/partials/sidebar/search.html | 27 +++++ static-src/scss/hyde-hyde.scss | 4 + static-src/scss/hyde-hyde/_responsive.scss | 46 +++++--- static-src/scss/hyde-hyde/_search.scss | 130 +++++++++++++++++++++ static-src/scss/hyde-hyde/_sidebar.scss | 4 +- static-src/scss/hyde-hyde/_variables.scss | 3 + 7 files changed, 200 insertions(+), 41 deletions(-) create mode 100644 layouts/partials/sidebar/search.html create mode 100644 static-src/scss/hyde-hyde/_search.scss diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index a5e5414..0aa737c 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -1,37 +1,16 @@
-
- - {{ .Site.Title }} - - {{ with .Site.Params.authorimage }} - {{ $strippedSlash := ($.Site.Params.authorimage | replaceRE "^(/)+(.*)" "$2") }} - {{ $authorImage := (printf "%s/%s" $.Site.BaseURL $strippedSlash) }} -
- Author Image -
- {{ end }} -

- {{ with .Site.Params.description }} {{.}} {{end}} -

-
+ {{ partial "sidebar/about.html" . }} {{ partial "sidebar/menu.html" . }} {{ partial "sidebar/social.html" . }} + {{ partial "sidebar/copyright.html" . }} + {{ partial "sidebar/search.html" . }}
-

- {{ with .Site.Params.copyright }}{{.|safeHTML}}{{ else }}© {{ now.Format "2006"}} {{.Site.Params.author}}. - Some Rights Reserved. -
Built with - Hugo ❤️ hyde-hyde. - {{end}} -

-
-
diff --git a/layouts/partials/sidebar/search.html b/layouts/partials/sidebar/search.html new file mode 100644 index 0000000..f01288e --- /dev/null +++ b/layouts/partials/sidebar/search.html @@ -0,0 +1,27 @@ + + + + + + + + +
+
+ +
+
diff --git a/static-src/scss/hyde-hyde.scss b/static-src/scss/hyde-hyde.scss index 2db5a25..b26b35b 100644 --- a/static-src/scss/hyde-hyde.scss +++ b/static-src/scss/hyde-hyde.scss @@ -15,5 +15,9 @@ @import 'hyde-hyde/taxonomies'; @import 'hyde-hyde/project'; @import 'hyde-hyde/responsive'; +@import 'hyde-hyde/search'; @import 'hyde-hyde/misc'; @import 'hyde-hyde/theme'; + +// font-awesome +@import 'font-awesome/assets/stylesheets/font-awesome'; diff --git a/static-src/scss/hyde-hyde/_responsive.scss b/static-src/scss/hyde-hyde/_responsive.scss index e9541a1..fd9b73f 100644 --- a/static-src/scss/hyde-hyde/_responsive.scss +++ b/static-src/scss/hyde-hyde/_responsive.scss @@ -8,16 +8,15 @@ } .sidebar { li { - padding: .1rem 0; + padding: 0.1rem 0; } } .hidden-tablet { display: none; } - .sidebar-about, .copyright { display: none; - } + } .sidebar { margin: 0; padding: 0; @@ -26,39 +25,54 @@ padding: 0 0 0 0px; max-height: 0; overflow: hidden; - margin-top: 0; } + margin-top: 0; + } .collapsible-menu { - padding: 0px 0px; + padding: 0px 0px; } .collapsible-menu ul { list-style-type: none; - padding: 0; + padding: 0; } .collapsible-menu li { display: block; } .collapsible-menu a { text-decoration: none; - cursor: pointer; } + cursor: pointer; + } .collapsible-menu label { - background: url(/img/menu-open.svg) no-repeat left center; + //background: url(/img/menu-open.svg) no-repeat left center; + background-repeat: no-repeat; display: block; cursor: pointer; - color: #fff; - padding: 10px 0 10px 0px; } - + padding: 10px 0 10px 0px; + &:before { + content: "\f054"; + font-family: 'Font Awesome 5 Free'; + left: 1.667em; + position: absolute; + top: .667em; + } + } input#menuToggle { - display: none; + display: none; } input#menuToggle + label { font-weight: bold; } input#menuToggle:checked + label { - background-image: url(/img/menu-close.svg); - color: #fff; + //background-image: url(/img/menu-close.svg); + &:before { + content: "\f078"; + font-family: 'Font Awesome 5 Free'; + left: 20px; + position: absolute; + top: 10px; + } } - + input#menuToggle:checked ~ .menu-content { max-height: 100% !important; } @@ -125,7 +139,7 @@ } } -// Large devices (laptops/desktops, 992px and up) +// Large devices (laptops/desktops, 992px and up) // ~ 62rem/16px ~ 58.3529rem/17px ~ 55.1111rem/18px @media (min-width: 992px) { html, diff --git a/static-src/scss/hyde-hyde/_search.scss b/static-src/scss/hyde-hyde/_search.scss new file mode 100644 index 0000000..49dad33 --- /dev/null +++ b/static-src/scss/hyde-hyde/_search.scss @@ -0,0 +1,130 @@ +// search box styles +// generated and adapted from https://shipow.github.io/searchbox +.searchbox { + margin-top: 1rem; + margin-bottom: 1rem; + text-align: center; + form { + display: inline-block; + position: relative; + width: 12rem; + height: 1.65rem; + white-space: nowrap; + font-size: $searchbox-font-size; + } +} + +.searchbox__wrapper { + width: 100%; + height: 100%; +} + +.searchbox__input { + display: inline-block; + transition: box-shadow 0.4s ease, background 0.4s ease; + border: 0; + border-radius: 17px; + box-shadow: inset 0 0 0 1px #e1e8ed; + background: #f5f8fa; + padding: 0; + padding-right: 52px; + padding-left: 16px; + width: 100%; + height: 100%; + vertical-align: middle; + white-space: normal; + font-size: inherit; + appearance: none; + &:hover { + box-shadow: inset 0 0 0 1px #c1d0da; + } + &:focus { + outline: 0; + } + &:active { + outline: 0; + } + &:valid ~ .searchbox__reset { + display: block; + animation-name: sbx-reset-in; + animation-duration: 0.15s; + } +} +.searchbox__input::-webkit-search-decoration { + display: none; +} +.searchbox__input::-webkit-search-cancel-button { + display: none; +} +.searchbox__input::-webkit-search-results-button { + display: none; +} +.searchbox__input::-webkit-search-results-decoration { + display: none; +} +.searchbox__input::placeholder { + color: #9aaeb5; +} + +.searchbox__submit { + position: absolute; + top: 0; + right: 0; + left: inherit; + margin: 0; + border: 0; + border-radius: 0 16px 16px 0; + background-color: rgba(62, 130, 247, 0); + padding: 0; + width: 33px; + height: 100%; + vertical-align: middle; + text-align: center; + font-size: inherit; + user-select: none; + &:hover { + cursor: pointer; + } + &:active { + cursor: pointer; + } + &:focus { + outline: 0; + } + svg { + width: 13px; + height: 13px; + vertical-align: middle; + fill: #657580; + } +} +.searchbox__submit::before { + display: inline-block; + margin-right: -4px; + height: 100%; + vertical-align: middle; + content: ""; +} +.searchbox__reset { + display: none; + position: absolute; + top: 7px; + right: 33px; + margin: 0; + border: 0; + background: none; + cursor: pointer; + padding: 0; + font-size: inherit; + user-select: none; + fill: rgba(0, 0, 0, 0.5); + &:focus { + outline: 0; + } + svg { + display: block; + margin: 4px; + width: 11px; + height: 11px; + } +} diff --git a/static-src/scss/hyde-hyde/_sidebar.scss b/static-src/scss/hyde-hyde/_sidebar.scss index f1fde85..f50bff4 100644 --- a/static-src/scss/hyde-hyde/_sidebar.scss +++ b/static-src/scss/hyde-hyde/_sidebar.scss @@ -72,6 +72,8 @@ } .copyright { + margin-top: 1.5em; text-align: center; - font-size: $copyright-font-size; + font-size: $copyright-font-size; + line-height: 1.5; } diff --git a/static-src/scss/hyde-hyde/_variables.scss b/static-src/scss/hyde-hyde/_variables.scss index 8d33b59..447ca4a 100644 --- a/static-src/scss/hyde-hyde/_variables.scss +++ b/static-src/scss/hyde-hyde/_variables.scss @@ -102,3 +102,6 @@ $project__subtitle-font-style: italic; $project__subtitle-color: #778492; $ribbon-color: #276582; $ribbon-background-color: #479fc8; + +// search box +$searchbox-font-size: .7rem;