tab

ismism.ts/ui/index.html

@@ -113,8 +113,7 @@
 
 	.tag span {
 		display: inline-block;
-		padding-left: 8px;
-		padding-right: 8px;
+		padding: 0.1em 8px;
 		margin-left: 0.75ch;
 		text-align: center;
 		border-radius: 50%;
@@ -273,7 +272,7 @@
 	}
 
 	.stat {
-		margin-top: 10px;
+		margin-top: 24px;
 	}
 
 	.stat>.label {
@@ -368,6 +367,25 @@
 		text-shadow: 0 2px 2px var(--cl-light-gray);
 	}
 
+	.tab {
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: center;
+		margin: 16px 0;
+	}
+
+	.tab>button {
+		margin: 0 3px;
+	}
+
+	.tab>button>span {
+		display: inline-block;
+		background: var(--cl-black);
+		color: var(--cl-white);
+		padding: 0.1em 8px;
+		text-align: center
+	}
+
 	.animate-left {
 		position: relative;
 		animation: animateleft 0.4s
@@ -495,25 +513,13 @@
 					</div>
 				</section>
 
-				<div class="w3-container">
-					<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem
-						euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed
-						ultricies mi non congue ullam corper. Praesent tincidunt sed
-						tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida
-						diam non fringilla.</p>
-					<div class="w3-row">
-						<div class="w3-col m8 s12">
-							<p><button class="w3-button w3-padding-large w3-white w3-border"><b>READ MORE
-										»</b></button></p>
-						</div>
-						<div class="w3-col m4 w3-hide-small">
-							<p>
-								<span class="w3-padding-large w3-right"><b>支持  </b><span
-										class="w3-tag">1000</span></span>
-							</p>
-						</div>
+				<section>
+					<div class="tab">
+						<button><span>332</span> 条活动日志 ❯</button>
+						<button><span>32</span> 名参与者 ❯</button>
+						<button><span>3212</span> 位支持者 ❯</button>
 					</div>
-				</div>
+				</section>
 			</article>
 			<hr>
 			<article>