From ad503162f29f4c5a273b1d61dfa5adad6eef0d87 Mon Sep 17 00:00:00 2001
From: FarseaSH <yy_shao@outlook.com>
Date: Thu, 5 Sep 2024 21:55:44 +0800
Subject: [PATCH] FEATURE: pic set can support more than 9 pictures

---
 assets/more-icon.png          | Bin 0 -> 2316 bytes
 assets/style-refractored.scss |  23 +++++++++++++++++++++++
 layouts/partials/pic_set.html |  32 ++++++++++++++++++++++----------
 3 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 assets/more-icon.png

diff --git a/assets/more-icon.png b/assets/more-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb2035534f89b04384ff148c1f5d9f909b8d77ac
GIT binary patch
literal 2316
zcmeHHi8mB_6#mUvvg8rZl6unPkr}*_EZMWASx7`0;Z&B)FeF*BJc+VLV@Q^9vSp2F
z7$!4h$=E4Vw&^vh<BgeYA?us|jZXKRd%k<WbMCq4e&>AmffL$ZN<vuz03hXX*2WnC
zsGx)bF;M}mM!eY+fH?l_rJDdq%Kb<Pc>F|3KtgUh+n)h-Lx<-Djj*2;$_jwznUdQ+
zA^?by9BiyyA|Sk(rH69%3j01(AQ&<o^MAIy6hkX^JnZ1vf{gfE!aWDvGk^)SRt?yz
z8behR!W{>l$|+d)fpaT|=C__*!O3r*oLYIt=JMa?!vtG?#ZRSxQHpEFLI2v?t;}kb
z%&3}*xY%(HOC>m(cBS@WFgM}bi6{$$S4J^!IZLZv$y&2(C!#zR`D)bFx}K2M4Gc7I
z&}kqF8+C`xLA4dTnO#B3ZQClvvQ&nn7x>0@uiV=gmgucAq2k_<^1jXQe#kd*zPE>L
zgJAw`YuDFs+9}-A)+k+wwsrBfVspl|9s8X1)*+iiZrg2Z4Qpmatb+l)ePupw-k!iT
zE&NGoIP0S%#sqzSYouL=#yCY4ZrC5A_wupCu-2W+lBY1yCh0Mm)gC1V3VSgo>D`}Y
z84Hu{+nLnT9W^$qlf3j~_fb-GW0gq2%G?-UeX$a>&<*M)&}KgL<~)s(!k|xaEPSxS
zbGZ?8+cG^cMCvaF*0-pEoodmG<H#-CoNQk7gHCQd-D@B0KM4WrqnZP_{)Q?i95!2a
z0p^~ASgfFlXB~?vrSUDCDJbdcxBnfHugn~8kBvjjOxJB0?Kt_2g;w>_X;xY4aq!pK
zWY5zzjm55cRSmW9-bFiFSMp40Xq7!iH{`uO=n~V$-tAhMA_pp`#JPk>4whAr(q$FT
z30Y=W5Wbur`_2o~;WAg)%<PRDv!o3##l#UHL)zIDq1ZUU`CMigVeA-+O0Gf%2&Rxi
zmMNM9F3g{6K#j-3UX_R94hv<S5wLTe2FQ0!U(w{HZj-)l4x4Z^hES-7#u!NftuZ!?
zh>s~?=7vhM2s+D-2&$<v@HNCeC=X8EZTd_!x6AbCDS(U@^d(}TQs6)?USqT6b93FD
zrrG{1(YXr~A`pF`?(WuJe<N0$wWy_nzk6>4FhXhY_<f}i)eaIc(vkw=xr_fi^12a=
zP^z#V^nc;;2aHWpjTeo7kMcT;_&X^1F`Fx)=o~Li;IR^bGH{;0NJ;!yFbk$HigJY4
zOCYM<!}2xt*x*3l9p$9XT-t?fJW}ueP?-k<{TtCraN-d-%aNcq@4-JuO`c-jGWjF2
zV?iI-<PBv6!^iuX&ufv%iJsXVF5ZHcqM9fguWsQ|L~7{9uw1UmHD?9G`V9%1FruZ9
zWtzEh5d5n+zks>odHn$#OG+O@S!KCeWlc<$@4a(PA~o2?Qfo8EkJ}Y6@r5mo1jJ%U
zIJmD@JMFBZvE}$_vsG`pJSfnS`l#{p@*ea9Cuvw{{ath9j7v*w`tT%eO=p`M{lgE4
zVttm`EIASzcy#kcyZ?$3f6!IOG6w<r^?uJgsKLkS4B!WO<fQ23rwUI8a}f1W8>V^;
zuhE{jQ|*O4sUDTFJVTzoLenz6y3l|~5n&MXHTa$;MWjlz>U)8llaOA_C%(r<{$2%{
z^JUC?i7G5p=2*kx{p*Hrqb!!Lkqi`ClFem}Qbp&jc@b3d>zM=b5jbtUq4e>{uag_M
zKl%l1%uEvN!;(8K(!O0Px@su!A`*w`##vm2vQcuo<+@!ib48RbLm}(YIOB9)w<%*H
zj-^?gkEqwxAsSiC3ctSO&zaylHB4OCKf4;?#)11t6L;k)RVDNz74-E8(;XJ6XLvuo
p$ebBAIw$*6{oG&22ozu_ewSi*Wso6^(`i2haj-?()SdB8_#Y*!s|5f6

literal 0
HcmV?d00001

diff --git a/assets/style-refractored.scss b/assets/style-refractored.scss
index 2786005..34c4592 100644
--- a/assets/style-refractored.scss
+++ b/assets/style-refractored.scss
@@ -360,6 +360,29 @@ $gray: #919EB1;
         padding-bottom: 50%;
         position: relative;
         height: 0px;
+        
+        &.img-black-filter::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+
+            background-color: rgb(0, 0, 0);
+            opacity: 0.8;
+        }
+
+        .more-icon {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+
+            background-size: 100% 100%;
+            z-index: 1;
+        }
     }
 
     img{
diff --git a/layouts/partials/pic_set.html b/layouts/partials/pic_set.html
index 45f5215..a825969 100644
--- a/layouts/partials/pic_set.html
+++ b/layouts/partials/pic_set.html
@@ -11,18 +11,30 @@
 <div class="pic-grid" style="width: {{ $max_width }}%">
     <div class="pure-g">
         {{ range $num, $a := $pic_set }}
-        {{ if resources.Get $a }}
-            {{ $a = (resources.Get $a).Permalink }}
-        {{ end }}
-        <div class="pure-u-1-{{ $num_per_row }}">
-            <div class="add-padding">
-                <div class="img-container">
-                    <a data-src="{{ $a }}" data-fancybox="gallery" data-caption="{{ $caption }}">
-                        <img src="{{ $a }}" alt="pictures"/>
-                    </a>
+            {{ if resources.Get $a }}
+                {{ $a = (resources.Get $a).Permalink }}
+            {{ end }}
+
+            {{ $display := "block"}}
+            {{ if gt $num 8 }} {{ $display = "none"}} {{ end }}
+            <div class="pure-u-1-{{ $num_per_row }}" style="display: {{$display}};">
+                <div class="add-padding">
+                    {{ if and (eq $num 8) (gt (len $pic_set) 9) }}
+                        <div class="img-container img-black-filter">
+                            <a data-src="{{ $a }}" data-fancybox="gallery" data-caption="{{ $caption }}">
+                                <div class="more-icon" style="background-image: url('{{ (resources.Get "more-icon.png").Permalink }}');"></div>
+                                <img src="{{ $a }}" alt="pictures"/>
+                            </a>
+                        </div>
+                    {{ else }}
+                        <div class="img-container">
+                            <a data-src="{{ $a }}" data-fancybox="gallery" data-caption="{{ $caption }}">
+                                <img src="{{ $a }}" alt="pictures"/>
+                            </a>
+                        </div>
+                    {{ end }}
                 </div>
             </div>
-        </div>
         {{ end }}
     </div>
 </div>
\ No newline at end of file