From c1b8fe1221e3367f0632ce43f602e811c0fd0284 Mon Sep 17 00:00:00 2001 From: Jacky Zhao <j.zhao2k19@gmail.com> Date: Wed, 13 Jul 2022 14:32:32 -0700 Subject: [PATCH] feat: restyle search icon --- assets/styles/base.scss | 19 +++++++++++++++---- layouts/_default/section.html | 7 +------ layouts/_default/single.html | 9 ++------- layouts/_default/taxonomy.html | 7 +------ layouts/_default/term.html | 7 +------ layouts/index.html | 7 +------ layouts/partials/header.html | 10 ++++++++++ 7 files changed, 31 insertions(+), 35 deletions(-) create mode 100644 layouts/partials/header.html diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 776f32d..4426abb 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -24,7 +24,6 @@ h1, h2, h3, h4, h5, h6, ol, ul, thead { opacity: 0.3; transition: opacity 0.3s ease; color: var(--secondary); - } p, ul, text { @@ -381,11 +380,24 @@ header { flex: 1 1 auto; } - & > svg { + #search-icon { + background-color: var(--lightgray); + border-radius: 4px; + height: 2em; + display: flex; + align-items: center; + cursor: pointer; + & > p { + display: inline; + padding-left: 0.5em; + } + } + + & svg { cursor: pointer; width: 18px; min-width: 18px; - margin: 0 1em; + margin: 0 0.5em; &:hover .search-path { stroke: var(--tertiary); @@ -592,4 +604,3 @@ header { } } - diff --git a/layouts/_default/section.html b/layouts/_default/section.html index abdf0b0..2fc7144 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -6,12 +6,7 @@ {{partial "search.html" .}} <div class="singlePage"> <!-- Begin actual content --> - <header> - <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1> - <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg> - <div class="spacer"></div> - {{partial "darkmode.html" .}} - </header> + {{partial "header.html" .}} <article> <h1>All {{.Title}}</h1> {{partial "page-list.html" .Paginator.Pages.ByLastmod.Reverse }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 06507a7..7c2ab10 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -6,13 +6,8 @@ {{partial "search.html" .}} <div class="singlePage"> <!-- Begin actual content --> - <header> - <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1> - <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg> - <div class="spacer"></div> - {{partial "darkmode.html" .}} - </header> - <article> + {{partial "header.html" .}} + <article> {{if .Title}}<h1>{{ .Title }}</h1>{{end}} <p class="meta"> Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}. diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html index e0a1e87..8f86b64 100644 --- a/layouts/_default/taxonomy.html +++ b/layouts/_default/taxonomy.html @@ -6,12 +6,7 @@ {{partial "search.html" .}} <div class="singlePage"> <!-- Begin actual content --> - <header> - <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1> - <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg> - <div class="spacer"></div> - {{partial "darkmode.html" .}} - </header> + {{partial "header.html" .}} <article> <h1>All {{.Title}}</h1> <div class="tags"> diff --git a/layouts/_default/term.html b/layouts/_default/term.html index 58f024b..abddc07 100644 --- a/layouts/_default/term.html +++ b/layouts/_default/term.html @@ -6,12 +6,7 @@ {{partial "search.html" .}} <div class="singlePage"> <!-- Begin actual content --> - <header> - <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1> - <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg> - <div class="spacer"></div> - {{partial "darkmode.html" .}} - </header> + {{partial "header.html" .}} <article> <h1>Tag: {{.Title | humanize}}</h1> {{partial "page-list.html" .Paginator.Pages}} diff --git a/layouts/index.html b/layouts/index.html index 5053614..c7871e9 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -6,12 +6,7 @@ {{partial "search.html" .}} <div class="singlePage"> <!-- Begin actual content --> - <header> - <h1>{{if .Title}}{{ .Title }}{{else}}Untitled{{end}}</h1> - <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg> - <div class="spacer"></div> - {{partial "darkmode.html" .}} - </header> + {{partial "header.html" .}} <article> {{partial "toc.html" .}} {{partial "textprocessing.html" . }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..773e068 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,10 @@ +<header> + <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1> + <div class="spacer"></div> + <div id="search-icon"> + <p>Search</p> + <svg tabindex="0" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg> + </div> + {{partial "darkmode.html" .}} +</header> +