💄 ⚡ optimization CDN vendors display & import generate site speed.

assets/css/_common/outline/footer/index.scss

@@ -38,6 +38,19 @@
       img {
         display: inline-block;
       }
+      
+      $footer_vendors_imgs_len: length($footer_vendors_imgs_width);
+      @if ($footer_vendors_imgs_len>0) {
+        @for $i from 1 through $footer_vendors_imgs_len {
+          a:nth-child(#{$i}) img {
+            width: #{nth($footer_vendors_imgs_width, $i)}px;
+
+            @include mobile() {
+              width: #{nth($footer_vendors_imgs_width, $i)-10}px;
+            }
+          }
+        }
+      }      
     }
   }
 }
@@ -48,24 +61,6 @@
   }
 }
 
-@keyframes icon-animate {
-  0%, 100% {
-    transform: scale(1);
-  }
-
-  10%, 30% {
-    transform: scale(.9);
-  }
-
-  20%, 40%, 60%, 80% {
-    transform: scale(1.1);
-  }
-
-  50%, 70% {
-    transform: scale(1.1);
-  }
-}
-
 .languages {
   display: inline-block;
   font-size: $font-size-large;
@@ -91,7 +86,7 @@
   margin: 0 5px;
 
   @if $footer_icon_animated {
-    animation: icon-animate 1.33s ease-in-out infinite;
+    animation: beat 1.33s ease-in-out infinite;
   }
 }
 

assets/css/_common/scaffolding/animation/icon.scss

@@ -0,0 +1,17 @@
+@keyframes beat {
+  0%, 100% {
+    transform: scale(1);
+  }
+
+  10%, 30% {
+    transform: scale(.9);
+  }
+
+  20%, 40%, 60%, 80% {
+    transform: scale(1.1);
+  }
+
+  50%, 70% {
+    transform: scale(1.1);
+  }
+}

assets/css/_common/scaffolding/animation/index.scss

@@ -1,2 +1,3 @@
+@import 'icon';
 @import 'show';
 @import 'hover';

assets/css/main.scss

@@ -23,6 +23,15 @@ $footer_icon_color          : {{ $P.footer.icon.color }};
 $footer_icon_animated       : {{ $P.footer.icon.animated }};
 $footer_beian_enable        : {{ $P.footer.beian.enable }};
 $footer_vendors_enable      : {{ isset $P.footer "vendors" }};
+{{ with $P.footer.vendors }}
+{{ $width := slice "start" }}
+{{ range .list }}
+{{ if .image }}
+{{ $width = $width | append .image.width }}
+{{ end }}
+{{ end }}
+{{ printf "$footer_vendors_imgs_width:%s;" (delimit (after 1 $width) ", ") }}
+{{ end }}
 
 // Counter
 $busuanzi_enable            : {{ $P.busuanzi.enable }};