1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*時間軸右下一排噗寶：手動設定區*/
#timeline_cnt:after {
	--位置距離右側: 10px;
	--位置距離時間軸: 15px;
	--噗寶寬度: 48px;
	--噗寶高度: 48px;
	--噗寶數量: 7; /*目前最多7*/
	--噗寶圖片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);
}

/*時間軸右下一排噗寶：自動設定區，勿動*/
#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);
	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;
}