1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*時間軸右下一排噗寶：手動設定區*/
#timeline_cnt:after {
	--位置距離右側: 10px;
	--位置距離時間軸: 15px;
	--噗寶寬度: 48px;
	--噗寶高度: 48px;
	--噗寶數量: 14; /*目前最多14*/
	--噗寶圖片1: url(https://imgur.com/Q16Mr2k.png);
	--噗寶圖片2: url(https://imgur.com/iuGrQwu.png);
	--噗寶圖片3: url(https://imgur.com/8YksaG6.png);
	--噗寶圖片4: url(https://imgur.com/GzbQNi0.png);
	--噗寶圖片5: url(https://imgur.com/vNDN1Gm.png);
	--噗寶圖片6: url(https://imgur.com/nUZTF5u.png);
	--噗寶圖片7: url(https://imgur.com/EHNuQ9q.png);
	--噗寶圖片8: url(https://imgur.com/Q16Mr2k.png);
	--噗寶圖片9: url(https://imgur.com/iuGrQwu.png);
	--噗寶圖片10: url(https://imgur.com/8YksaG6.png);
	--噗寶圖片11: url(https://imgur.com/GzbQNi0.png);
	--噗寶圖片12: url(https://imgur.com/vNDN1Gm.png);
	--噗寶圖片13: url(https://imgur.com/nUZTF5u.png);
	--噗寶圖片14: url(https://imgur.com/EHNuQ9q.png);
}

/*時間軸右下一排噗寶：自動設定區，勿動*/
#timeline_cnt:after {
	position:absolute; bottom: var(--位置距離時間軸); right: var(--位置距離右側);
	content: ""; width: calc(var(--噗寶寬度) * var(--噗寶數量)); height: var(--噗寶高度);
	background: var(--噗寶圖片1), var(--噗寶圖片2), var(--噗寶圖片3), var(--噗寶圖片4), var(--噗寶圖片5), var(--噗寶圖片6), var(--噗寶圖片7), var(--噗寶圖片8), var(--噗寶圖片9), var(--噗寶圖片10), var(--噗寶圖片11), var(--噗寶圖片12), var(--噗寶圖片13), var(--噗寶圖片14);
	background-repeat: no-repeat;
	background-position: right 0 bottom, right calc(var(--噗寶寬度) * 1) bottom, right calc(var(--噗寶寬度) * 2) bottom, right calc(var(--噗寶寬度) * 3) bottom, right calc(var(--噗寶寬度) * 4) bottom, right calc(var(--噗寶寬度) * 5) bottom, right calc(var(--噗寶寬度) * 6) bottom, right calc(var(--噗寶寬度) * 7) bottom, right calc(var(--噗寶寬度) * 8) bottom, right calc(var(--噗寶寬度) * 9) bottom, right calc(var(--噗寶寬度) * 10) bottom, right calc(var(--噗寶寬度) * 11) bottom, right calc(var(--噗寶寬度) * 12) bottom, right calc(var(--噗寶寬度) * 13) bottom;
}