✨ Add an animation effects for social links.

assets/css/style_gemini.css

@@ -3,7 +3,9 @@
 
 {{- with $P.sidebar -}}
 {{- $width := (int (math.Max .width 240)) -}}
-{{- $pad := (add $width .offset) }}
+{{- $offset := (int (math.Max .offset 12)) -}}
+{{- $padding := (int (math.Max .padding 18)) -}}
+{{- $positPad := (add $width $offset) }}
 .main {
 {{ if eq .position "right" }}
   flex-direction: row-reverse;
@@ -13,18 +15,17 @@
   width: {{ $width }}px;
 }
 .main-inner {
-  width: calc(100% - {{ $pad }}px);
+  width: calc(100% - {{ $positPad }}px);
 }
 .sidebar {
   width: {{ $width }}px;
   visibility: inherit;
 }
 .sidebar-inner {
-  padding: {{ .padding }}px 10px;
+  padding: {{ $padding }}px 10px;
 }
 .footer-inner {
-  padding-{{ .position }}: {{ $pad }}px;
-  width: calc(100% - 20px);
+  padding-{{ .position }}: {{ $positPad }}px;
 }
 {{- end }}
 
@@ -37,6 +38,10 @@
 {{- end }}
 }
 
+.site-author-image:hover {
+  transform: rotateZ(360deg);
+}
+
 .site-state-item {
   border-left: 1px solid #eee;
 }
@@ -57,32 +62,6 @@
   border-bottom: none;
 }
 
-@keyframes wobble-vertical {
-  16.65% {
-    transform: translateX(8px);
-  }
-
-  33.3% {
-    transform: translateX(-6px);
-  }
-
-  49.95% {
-    transform: translateX(4px);
-  }
-
-  66.6% {
-    transform: translateX(-2px);
-  }
-
-  83.25% {
-    transform: translateX(1px);
-  }
-
-  100% {
-      transform: translateX(0);
-  }
-}
-
 .rss-link a:hover {
   animation-name: wobble-vertical;
   animation-duration: 2s;
@@ -95,6 +74,44 @@
   transform: scaleY(-1);
 }
 
+.links-of-social a {
+  font-size: 0.8125em;
+}
+.links-of-social .fa,
+.links-of-social .fab,
+.links-of-social .far,
+.links-of-social .fas {
+  margin-right: 2px;
+}
+.links-of-social {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.links-of-social-item {
+  margin: 5px 0 0;
+{{- if and $P.socialIcons.enable (not $P.socialIcons.iconsOnly) }}
+  width: 50%;
+{{- end }}
+}
+.links-of-social-item a {
+  box-sizing: border-box;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.links-of-social-item a {
+  border-bottom: 0;
+  border-radius: 4px;
+  display: block;
+}
+.links-of-social-item a:hover {
+  background: var(--body-bg-color);
+}
+
 .cc-license {
 {{ if eq $P.creativeCommons.size "big" }}
   margin-top: 10px;

exampleSite/config.yaml

@@ -89,10 +89,10 @@ params:
     #  - remove  totally remove sidebar including sidebar toggle.
     display: post
 
-    # Sidebar padding in pixels.
-    padding: 30
-    # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
-    offset: 18
+    # Sidebar padding in pixels, default 18.
+    padding: 18
+    # Sidebar offset from top menubar in pixels (only for Pisces | Gemini), default 12.
+    offset: 12
 
   # Sidebar Avatar
   avatar:
@@ -122,6 +122,10 @@ params:
     # {"Instagram": "https://instagram.com/yourname || fab fa-instagram"},
     # {"Skype": "skype:yourname?call|chat || fab fa-skype"}
   ]
+  socialIcons:
+    enable: true
+    iconsOnly: false
+    transition: true
 
   # Creative Commons 4.0 International License.
   # See: https://creativecommons.org/about/cclicenses/

layouts/partials/head/css.html

@@ -1,6 +1,7 @@
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css" integrity="sha256-DfWjNxDkM94fVBWx1H5BMMp0Zq7luBlV8QRcSES7s+0=" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
   <!-- NexT theme css style -->
-  <link rel="stylesheet" href="/css/main-gemini.css">  
-{{- $style := resources.Get "css/style-gemini.css" | resources.ExecuteAsTemplate "css/style-gemini.css" . }}
-  <link rel="stylesheet" href="{{ $style.RelPermalink }}">  
+  <link rel="stylesheet" href="/css/main_gemini.css">
+{{- $style := resources.Get "css/style_gemini.css" | resources.ExecuteAsTemplate "css/style_gemini.css" . }}
+  <link rel="stylesheet" href="{{ $style.RelPermalink }}">  
+  <link rel="stylesheet" href="/css/a_hover.css">

layouts/partials/header/sidebar.html

@@ -40,14 +40,22 @@
             </a>
           </div>
         </div>
-        <div class="links-of-author site-overview-item animated">
+        <div class="links-of-social site-overview-item animated">
+          {{ $si := $SP.socialIcons }}
           {{- range $SP.socials }}
           {{- range $name,$val := . }}
           {{- $vals := split $val "||" }}
           {{- $url := trim (index $vals 0) " " }}
           {{- $icon := trim (index $vals 1) " " }}
-          <span class="links-of-author-item">
-            <a href="{{- $url }}" title="{{- $name }} → {{- $url }}" rel="noopener" target="_blank"><i class="{{- $icon }}"></i>{{- $name }}</a>
+          <span class="links-of-social-item">
+            <a href="{{- $url }}" title="{{- $name }} → {{- $url }}" rel="noopener" {{- if and $si.enable $si.transition }} class="hvr-icon-pulse" {{- end }} target="_blank">
+              {{- if $si.enable }}
+              <i class="{{- $icon }} fa-fw {{ if $si.transition }} hvr-icon {{ end }}"></i>
+              {{- end }}
+              {{- if or (not $si.enable) (not $si.iconsOnly) }}
+                 {{- $name }}
+              {{- end }} 
+            </a>
           </span>
           {{- end }}
           {{- end }}

static/css/a_hover.css

@@ -0,0 +1,71 @@
+
+@keyframes wobble-vertical {
+  16.65% {
+    transform: translateX(8px);
+  }
+
+  33.3% {
+    transform: translateX(-6px);
+  }
+
+  49.95% {
+    transform: translateX(4px);
+  }
+
+  66.6% {
+    transform: translateX(-2px);
+  }
+
+  83.25% {
+    transform: translateX(1px);
+  }
+
+  100% {
+      transform: translateX(0);
+  }
+}
+
+/* Icon Pulse */
+@-webkit-keyframes hvr-icon-pulse {
+  25% {
+    -webkit-transform: scale(1.3);
+    transform: scale(1.3);
+  }
+  75% {
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+  }
+}
+@keyframes hvr-icon-pulse {
+  25% {
+    -webkit-transform: scale(1.3);
+    transform: scale(1.3);
+  }
+  75% {
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+  }
+}
+.hvr-icon-pulse {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+.hvr-icon-pulse .hvr-icon {
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon {
+  -webkit-animation-name: hvr-icon-pulse;
+  animation-name: hvr-icon-pulse;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}

static/css/main_gemini.css

@@ -2661,9 +2661,6 @@ ul.breadcrumb li:last-child {
     width: 100%;
   }
 }
-/* .footer-inner {
-  padding-left: 300px;
-} */
 @media (max-width: 991px) {
   .footer-inner {
     padding-left: 0;