sidebar subs added, gallery mask, mode added,

2019-11-13 17:06:51 +09:00 · 2019-11-13 17:06:51 +09:00 · b4c2a225a9
parent f59c56b66b
commit b4c2a225a9
32 changed files with 255 additions and 42 deletions
--- a/README.md
+++ b/README.md
@ -238,6 +238,7 @@ enableSidebarSeries = true
 enableSidebarCategories = true
 enableToc = true
 itemsPerCategory = 5
+enableSideSubscribe = false

 # comment
 enableComment = false
@ -312,7 +313,34 @@ The CSS grid layout are in `assets/sass/layout/_grid.scss`. A lot can be done by

 ## Gallery

-Follow the steps below if you want to make gallery
+There are two ways to make gallery. You can specify **mode** at frontmatter.
+
+```bash
+content/gallery/mygallery/index.md
+
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+description: 
+type: gallery
+mode: one-by-one # at-once or one-by-one
+tags:
+-
+series:
+-
+categories:
+-
+images: # when mode is one-by-one, images front matter works
+  - image: image1.jpg
+    caption: caption1
+  - image: image2.jpg
+    caption: caption2
+    ...
+---
+
+```
+
+If you set the mode to one-by-one, list.html page will use images frontmatter above. If you set the mode to at-once, list.html page will not use images frontmatter and just read all files under the static/gallery/mygallery folder.

 1. Make a gallery folder under the content folder

--- a/archetypes/gallery.md
+++ b/archetypes/gallery.md
@ -3,10 +3,14 @@ title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 description: 
 type: gallery
+mode: at-once # at-once or one-by-one
 tags:
 -
 series:
 -
 categories:
 -
+images: # when mode is one-by-one, images front matter works
+  - image: 
+    caption: 
 ---
--- a/assets/sass/abstracts/_variables.scss
+++ b/assets/sass/abstracts/_variables.scss
@ -6,7 +6,7 @@ $code-font-stack: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "
  "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
  monospace !default;

-$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search", "content", "footer", "taxo", "toc");
+$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search", "content", "footer", "taxo", "toc", "gallery-mask");
 $ls: (
  base: -10,
  heading: 10,
--- a/assets/sass/components/_subs.scss
+++ b/assets/sass/components/_subs.scss
@ -15,22 +15,57 @@
  &__form {
    @include flexbox();
    @include align-items(center);
+    margin-bottom: 0.25rem;
+  }
+
+  &__icon {
+    padding: 0.3rem;
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;    
+
+    @include flexbox();
+    @include align-items(center);
+    @include themify($themes) {
+      color: themed("search-icon-color");
+      background-color: themed("search-background-color");
+    }
  }

  &__input {
    height: 32px;
    width: 100%;
    padding: 0.25rem;
-    border-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
    margin-right: 1rem;
-    background-color: #212121;
-    border: 1px solid #212121;
-    color: red;
-    border-left: none;
+    border: none;
    outline: none;
+    @include themify($themes) {
+      color: themed("search-color");
+      background-color: themed("search-background-color");
+      @include input-placeholder {
+          font-family: $search_placeholder_font;
+          color: themed("search-placeholder-color");
+      }      
+    }
  }

  &__button {
+    border-radius: 0.125rem;
+    border: none;
+    outline: none;
+    height: 25px;
+    width: auto;
+    min-width: 60px;    
+    cursor: pointer;

+    @include transition(all, 0.25s, ease);
+    @include themify($themes) {
+      color: themed('subs-button-color');
+      background-color:themed('subs-button-background-color');
+      @include on-event {
+        background-color:themed('subs-button-hover-background-color');
+      }
+    }
  }
 }
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -124,6 +124,11 @@ $whoami_border_color: {{ $scr.Get "whoami_border_color" }};
 $switch_background_color: {{ $scr.Get "switch_background_color" }};
 $switch_button_color: {{ $scr.Get "switch_button_color" }};
 $switch_active_color: {{ $scr.Get "switch_active_color" }};
+$subs_button_color: {{ $scr.Get "subs_button_color" }};
+$subs_button_background_color: {{ $scr.Get "subs_button_background_color" }};
+$subs_button_hover_background_color: {{ $scr.Get "subs_button_hover_background_color" }};
+$gallery_mask_color: {{ $scr.Get "gallery_mask_color" }};
+$gallery_mask_background_color: {{ $scr.Get "gallery_mask_background_color" }};

@import 'abstracts/variables';
@import 'abstracts/mixins';
--- a/assets/sass/pages/_gallery.scss
+++ b/assets/sass/pages/_gallery.scss
@ -35,20 +35,16 @@
 .grid-sizer,
 .grid-item {
  width: 33.333%;
-  padding: 0.25rem;
-  
-  img {
-      border-radius: 0.25rem;
-  }
+  padding: 0.5rem;  
 }

 .grid-item {
-  float: left;
+  float: left;    
 }

 .grid-item img {
  display: block;
-  max-width: 100%;
+  max-width: 100%;  
 }


@ -62,4 +58,37 @@
      font-size: 1rem;
      text-align: center;
  }
+
+  .grid-item {
+    position: relative;
+    opacity: 1;
+    height: auto;
+    cursor: pointer;
+
+    &__desc {
+      position: absolute;
+      display: none;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      padding: 0.5rem;
+      width: calc(100% - 1rem);
+      height: calc(100% - 1rem);
+      border-radius: 0.25rem;      
+      z-index: z('gallery-mask');
+      font-family: $single_title_font;
+      font-weight: 700;
+      cursor: pointer;      
+
+      @include box-shadow(0, 4px, 4px, 0, rgba(0, 0, 0, 0.4));
+      @include on-event {
+        @include themify($themes) {
+          color: themed('gallery-mask-color');
+          background-color: themed('gallery-mask-background-color');
+        }
+      }
+    }
+  }
 }
--- a/assets/sass/themes/_custom.scss
+++ b/assets/sass/themes/_custom.scss
@ -94,4 +94,9 @@ $custom: (
  switch-background-color: $switch_background_color,
  switch-button-color: $switch_button_color,
  switch-active-color: $switch_active_color,
+  subs-button-color: $subs_button_color,
+  subs-button-background-color: $subs_button_background_color,
+  subs-button-hover-background-color: $subs_button_hover_background_color,
+  gallery-mask-color: $gallery_mask_color,
+  gallery-mask-background-color: $gallery_mask_background_color,
 ) !default;
--- a/assets/sass/themes/_dark.scss
+++ b/assets/sass/themes/_dark.scss
@ -95,4 +95,9 @@ $dark: (
    switch-background-color: #403E41,
    switch-button-color: #FCFCFA,
    switch-active-color: #FF6188,
+    subs-button-color: #FCFCFA,
+    subs-button-background-color: #FF6188,
+    subs-button-hover-background-color: darken(#FF6188, 5%),
+    gallery-mask-color: #FCFCFA,
+    gallery-mask-background-color: rgba(0, 0, 0, 0.7),
 );
--- a/assets/sass/themes/_hacker.scss
+++ b/assets/sass/themes/_hacker.scss
@ -98,4 +98,9 @@ $hacker: (
    switch-background-color: #403E41,
    switch-button-color: #FCFCFA,
    switch-active-color: #FF6188,
+    subs-button-color: $primary-color,
+    subs-button-background-color: #252526,
+    subs-button-hover-background-color: lighten(#252526, 5%),
+    gallery-mask-color: #FCFCFA,
+    gallery-mask-background-color: rgba(0, 0, 0, 0.7),
 );
--- a/assets/sass/themes/_light.scss
+++ b/assets/sass/themes/_light.scss
@ -95,4 +95,9 @@ $light: (
    switch-background-color: #bdbdbd,
    switch-button-color: #FCFCFA,
    switch-active-color: #FF6188,
+    subs-button-color: #607d8b,
+    subs-button-background-color: #eeeeee,
+    subs-button-hover-background-color: darken(#eeeeee, 5%),
+    gallery-mask-color: #424242,
+    gallery-mask-background-color: rgba(255, 255, 255, 0.7),
 );
--- a/assets/sass/themes/_solarized.scss
+++ b/assets/sass/themes/_solarized.scss
@ -9,7 +9,7 @@ $solarized: (
    title-color: $primary-color,
    meta-color: lighten($primary-color, 5%),
    body-color: #424242,
-    hr-color: $primary-color,
+    hr-color: $secondary-color,
    body-background-color: #FDF7E3,
    backdrop-background-color: #DDD6C7,
    dropdown-border-color: $primary-color,
@ -98,4 +98,9 @@ $solarized: (
    switch-background-color: darken(#EEE8D5, 10%),
    switch-button-color: #FCFCFA,
    switch-active-color: #FF6188,
+    subs-button-color: #FCFCFA,
+    subs-button-background-color: $secondary-color,
+    subs-button-hover-background-color: darken($secondary-color, 3%),
+    gallery-mask-color: #424242,
+    gallery-mask-background-color: rgba(253, 247, 227, 0.7),
 );
--- a/data/_config/_default/params.toml
+++ b/data/_config/_default/params.toml
@ -22,6 +22,7 @@ enableSidebarSeries = true
 enableSidebarCategories = true
 enableToc = true
 itemsPerCategory = 5
+enableSideSubscribe = false

 # footer
 showPoweredBy = true
--- a/data/skin.toml
+++ b/data/skin.toml
@ -93,4 +93,9 @@ gtt_hover_background_color = "inherit"
 whoami_border_color = "inherit"
 switch_background_color = "inherit"
 switch_button_color = "inehrit"
-switch_active_color = "inehrit"
+switch_active_color = "inehrit"
+subs_button_color = "inherit"
+subs_button_background_color = "inherit"
+subs_button_hover_background_color = "inherit"
+gallery_mask_color = "inherit"
+gallery_mask_background_color = "inherit"
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@ -48,7 +48,8 @@ rssLimit = 100
  enableSidebarCategories = true
  enableToc = true
  itemsPerCategory = 5
-
+  enableSideSubscribe = false
+  
  # footer
  showPoweredBy = true
  showFeedLinks = true
--- a/exampleSite/content/gallery/photo/index.ko.md
+++ b/exampleSite/content/gallery/photo/index.ko.md
@ -2,5 +2,9 @@
 title: "Photo"
 date: 2018-10-12T10:20:16+09:00
 type: "gallery"
+mode: "one-by-one"
 description: "포토 갤러리"
+images:
+  - image: owl.jpg
+    caption: owl caption
 ---
--- a/exampleSite/content/gallery/photo/index.md
+++ b/exampleSite/content/gallery/photo/index.md
@ -2,5 +2,9 @@
 title: "Photo"
 date: 2018-10-12T10:20:16+09:00
 type: "gallery"
+mode: "one-by-one"
 description: "photo gallery"
+images:
+  - image: owl.jpg
+    caption: owl caption
 ---
--- a/exampleSite/static/gallery/photo/owl-4590569_640.jpg
+++ b/exampleSite/static/gallery/photo/owl-4590569_640.jpg
--- a/i18n/en.toml
+++ b/i18n/en.toml
@ -37,8 +37,11 @@ other = "What's on this Page"
 [subs-label]
 other = "Subscribe"

-[subs-placeholder]
+[subs-placeholder-email]
 other = "Your email address"

+[subs-placeholder-name]
+other = "Your name"
+
 [subs-button]
 other = "Join"
--- a/i18n/ko.toml
+++ b/i18n/ko.toml
@ -37,8 +37,11 @@ other = "목차"
 [subs-label]
 other = "구독"

-[subs-placeholder]
-other = "이메일 주소 입력"
+[subs-placeholder-email]
+other = "이메일 주소"
+
+[subs-placeholder-name]
+other = "이름"

 [subs-button]
 other = "구독하기"
--- a/layouts/archive/list.html
+++ b/layouts/archive/list.html
@ -10,7 +10,7 @@
 </span>
 <main class="main archive">
  <div>
-    {{ range (and (where .Site.RegularPages "Type" "!=" "about") (where .Site.RegularPages "Type" "!=" "archive")).GroupByDate .Site.Params.archiveGroupByDate }}
+    {{ range (and (where .Site.RegularPages "Type" "!=" "about") (where .Site.RegularPages "Type" "!=" "archive")).GroupByDate (.Site.Params.archiveGroupByDate | default 2006) }}
    <span class="archive__key">{{ .Key }}</span>
    <ul class="archive__ul">
      {{ range .Pages }}
--- a/layouts/gallery/single.html
+++ b/layouts/gallery/single.html
@ -5,18 +5,45 @@
    {{ .Content }}
  </div>
 </header>
+
+{{ if in (lower .Params.Mode) "one" }}
+
 <main class="gallery main">
  <div class="grid single__contents">
    <div class="grid-sizer"></div>
-    {{ $basename := (replace .File.Dir "\\" "/") }}
-    {{ range (readDir (print "./static/" $basename)) }}
-    <div class="grid-item">
-      <img src="{{ $basename | relURL }}{{ .Name }}" alt="{{ .Name }}">
-    </div>
+    {{ if .File.Dir }}
+      {{ $basename := (replace .File.Dir "\\" "/") }}
+      {{ range .Params.Images }}
+      <div class="grid-item">
+        <img src="{{ $basename | relURL }}{{ .image }}" alt="{{ print .caption }}"/>
+        <div class="grid-item__desc hide">{{ .caption }}</div>
+      </div>
+      {{ end }}
    {{ end }}
  </div>
  {{ partial "pagination/pagination-single" . }}
 </main>
+
+{{ else }}
+
+<main class="gallery main">
+  <div class="grid single__contents">
+    <div class="grid-sizer"></div>
+    {{ if .File.Dir }}
+      {{ $basename := (replace .File.Dir "\\" "/") }}
+      {{ range (readDir (print "./static/" $basename)) }}
+      <div class="grid-item">
+        <img src="{{ $basename | relURL }}{{ .Name }}" alt="{{ index (split .Name ".") 0 }}"/>
+        <div class="grid-item__desc hide">{{ index (split .Name ".") 0 }}</div>
+      </div>
+      {{ end }}
+    {{ end }}
+  </div>
+  {{ partial "pagination/pagination-single" . }}
+</main>
+
+{{ end }}
+
 {{ partial "body/photoswipe" . }}

 {{ $masonry := resources.Get `js/masonry.pkgd.min.js` | resources.Fingerprint }}
@ -35,6 +62,14 @@
      $grid.masonry();
    });

+    $('.grid-item').mouseenter(function () {
+      $(this).children('.grid-item__desc').show();
+    });
+
+    $('.grid-item').mouseleave(function () {
+      $(this).children('.grid-item__desc').hide();
+    });
+
    enquire.register("screen and (max-width:500px)", {
      match: function () {
        $('.grid-item').addClass('full');
--- a/layouts/partials/body/photoswipe.html
+++ b/layouts/partials/body/photoswipe.html
@ -82,17 +82,28 @@
    var pswpElement = $('.pswp')[0];
    var imgElements = $('.single__contents').find('img');
    var items = [];
-  
+
+    {{ $mode:= .Params.Mode }}
+    var mode = JSON.parse({{ $mode | jsonify }});    
+
    imgElements.each(function (i, v) {
-      $(this).click(function (e) {
+      $(this).siblings().click(function (e) {
        initGallery(i);
      });
      $(this).css('cursor', 'pointer');
+
+      var caption = null;
+      if (mode && mode.toLowerCase().includes('one')) {        
+        caption = $(this).attr('alt');
+      } else {
+        caption = filename(v['src']);
+      }
+
      items.push({
        src: v['src'],
        w: 0,
        h: 0,
-        title: filename(v['src']),
+        title: caption,
      });
    });
  
--- a/layouts/partials/functions/parse_theme.html
+++ b/layouts/partials/functions/parse_theme.html
@ -96,3 +96,8 @@
 {{- $scr.Set "switch_background_color" $skin.switch_background_color -}}
 {{- $scr.Set "switch_button_color" $skin.switch_button_color -}}
 {{- $scr.Set "switch_active_color" $skin.switch_active_color -}}
+{{- $scr.Set "subs_button_color" $skin.subs_button_color -}}
+{{- $scr.Set "subs_button_background_color" $skin.subs_button_background_color -}}
+{{- $scr.Set "subs_button_hover_background_color" $skin.subs_button_hover_background_color -}}
+{{- $scr.Set "gallery_mask_color" $skin.gallery_mask_color -}}
+{{- $scr.Set "gallery_mask_background_color" $skin.gallery_mask_background_color -}}
--- a/layouts/partials/head/scripts.html
+++ b/layouts/partials/head/scripts.html
@ -13,10 +13,12 @@
 {{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}
 <script defer src="{{ $zzo.RelPermalink }}"></script>

-{{ range .Site.Params.custom_js -}}
+{{ if .Site.Params.custom_js }}
+{{ range .Site.Params.custom_js }}
  {{ $custom_template := resources.Get . }}
  {{ if $custom_template }}
    {{ $custom_js := $custom_template | resources.Minify | resources.Fingerprint }}
    <script defer src="{{ $custom_js.RelPermalink }}"></script>
  {{ end }}
-{{- end }}
+{{ end }}
+{{ end }}
--- a/layouts/partials/head/styles.html
+++ b/layouts/partials/head/styles.html
@ -3,10 +3,12 @@
 {{ $main_style := $main_template | resources.ExecuteAsTemplate "main_parsed.scss" . | toCSS $main_options | resources.Minify }}
 <link rel="stylesheet" href="{{ $main_style.RelPermalink }}">

-{{ range .Site.Params.custom_css -}}
+{{ if .Site.Params.custom_css }}
+{{ range .Site.Params.custom_css }}
  {{ $custom_template := resources.Get . }}
  {{ if $custom_template }}
    {{ $custom_style := $custom_template | resources.ToCSS | resources.Minify }}
    <link rel="stylesheet" href="{{ $custom_style.RelPermalink }}">
  {{ end }}
-{{- end }}
+{{ end }}
+{{ end }}
--- a/layouts/partials/header/site-header.html
+++ b/layouts/partials/header/site-header.html
@ -1,7 +1,7 @@
 {{ if .IsHome }}
 <header class="header">
    <div class="header__whoami">
-        <img src="{{ "/images/whoami/photo.png" | relURL }}" alt="{{ .Site.Params.myname }}" class="header__whoami--image">
+        <img src="{{ "/images/whoami/photo.png" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ end }}" class="header__whoami--image">
        <div class="header__whoami--name h6">
            Hi, I'm {{ .Site.Params.myname }}
        </div>
--- a/layouts/partials/sidebar/sidebar-home.html
+++ b/layouts/partials/sidebar/sidebar-home.html
@ -9,10 +9,12 @@
    <section class="sidebar-home">
        <a href="{{ .RelPermalink }}" class="sidebar-home__title p2">{{ .Title }}</a>
        <ul class="sidebar-home__ul">
+            {{ if .Site.Params.itemsPerCategory }}
            {{ range first .Site.Params.itemsPerCategory .Pages }}
            <li><a href="{{ .RelPermalink }}" class="sidebar-home__a p2">{{ .Title }}</a>
            </li>
            {{ end }}
+            {{ end }}
        </ul>
    </section>
    {{ end }}
--- a/layouts/partials/sidebar/sidebar-list.html
+++ b/layouts/partials/sidebar/sidebar-list.html
@ -5,6 +5,7 @@
 {{ with .File }}{{ $currentID = .UniqueID }}{{ end }}
 <div class="sidebar">
    {{ partial "sidebar/site-search" . }}
+    {{ if .Site.Params.itemsPerCategory }}
    {{ range first .Site.Params.itemsPerCategory .Pages }}
    <section class="sidebar-list">
        <a href="{{ .RelPermalink }}" class="sidebar-list__title p1 {{ if eq $currentSection .Section }}active{{ end }}">{{ .Title }}</a>
@ -16,6 +17,7 @@
        </ul>
    </section>
    {{ end }}
+    {{ end }}
 </div>

 {{ partial "taxonomy/taxonomy-tags" . }}
--- a/layouts/partials/sidebar/site-subs.html
+++ b/layouts/partials/sidebar/site-subs.html
@ -5,13 +5,18 @@
      {{ i18n "subs-label" }}
    </div>
    <div class="subs__form">
-      <input type="text" class="subs__input" placeholder="{{ T "subs-placeholder" }}"/>      
+      <span class="subs__icon">
+        {{ partial "svgs/etc/person.svg" (dict "width" 22 "height" 22) }}
+      </span>
+      <input id="subs-name" type="text" class="subs__input" placeholder="{{ T "subs-placeholder-name" }}"/>
    </div>
-    <button class="subs__button">{{ T "subs-button" }}</button>
+    <div class="subs__form">
+      <span class="subs__icon">
+        {{ partial "svgs/social/email.svg" (dict "width" 22 "height" 22) }}
+      </span>
+      <input id="subs-email" type="text" class="subs__input" placeholder="{{ T "subs-placeholder-email" }}"/>      
+    </div>
+    <button id="subs-button" class="subs__button">{{ T "subs-button" }}</button>
  </aside>
 </div>
-
-<script>
-
-</script>
 {{ end }}
--- a/layouts/partials/summary/card.html
+++ b/layouts/partials/summary/card.html
@ -15,7 +15,7 @@
    {{ if $params.featured_image }}
    <div class="summary-card__image-wrapper">
      {{ with (print "images/" $params.featured_image) }}
-      <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image">
+        <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image"/>
      {{ end }}
    </div>
    {{ else if $params.featured_video }}
@ -23,7 +23,7 @@
    <div class="summary-card__video-wrapper">
      <video class="summary-card__video" controls preload='none' poster='{{ . | relURL }}' data-setup='{"fluid": true}'>
        {{ with print ("videos/" | relURL) $params.featured_video }}
-        <source src="{{ . | relURL }}" type='video/mp4'>
+          <source src="{{ . | relURL }}" type='video/mp4'>
        {{ end }}
      </video>
    </div>
--- a/layouts/partials/svgs/etc/person.svg
+++ b/layouts/partials/svgs/etc/person.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z"/></svg>
--- a/layouts/partials/svgs/etc/visibility.svg
+++ b/layouts/partials/svgs/etc/visibility.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z"/></svg>`