feat: restyle search icon
This commit is contained in:
		
							parent
							
								
									b7a619bbd7
								
							
						
					
					
						commit
						c1b8fe1221
					
				
					 7 changed files with 31 additions and 35 deletions
				
			
		| 
						 | 
				
			
			@ -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 {
 | 
			
		|||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 }}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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}}. 
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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" . }}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										10
									
								
								layouts/partials/header.html
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										10
									
								
								layouts/partials/header.html
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -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>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue