From 0db308627e8effa9539194e1d175268993c79a57 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Thu, 25 Jul 2024 14:14:22 +0000
Subject: [PATCH] Update file team.html
---
wiki/pages/team.html | 144 ++++++++++++++++++++++---------------------
1 file changed, 74 insertions(+), 70 deletions(-)
diff --git a/wiki/pages/team.html b/wiki/pages/team.html
index b4785acd..08f16c7a 100644
--- a/wiki/pages/team.html
+++ b/wiki/pages/team.html
@@ -3,76 +3,80 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tsinghua - IGEM 2024</title>
<style>
- .team-grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 8px;
- max-width: 1200px;
- margin: 0 auto;
- }
- .team-member {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- }
-
- .image-container {
- width: 300px;
- height: 300px;
- overflow: hidden;
- margin-bottom: 10px;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 20px;
-
- }
- .image-container img {
- max-width: 100%;
- max-height: 100%;
- object-fit: cover;
- }
-
- .image-placeholder {
- width: 300px;
- height: 300px;
- background-color: #000;
- margin-bottom: 10px;
- border-radius: 20px;
- }
- .text-area {
- width: 350px;
- height: 50px;
- min-height: 100px;
- border: 1px solid #ccc;
- padding: 10px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- border-radius: 20px;
- }
- .text-area .name {
- font-size: 18px;
- font-weight: bold;
- margin-bottom: 10px;
- }
-
- .text-area .bio {
- font-size: 14px;
- text-align: left;
- }
- @media (max-width: 768px) {
- .team-grid {
- grid-template-columns: repeat(2, 1fr);
- }
- }
- @media (max-width: 480px) {
- .team-grid {
- grid-template-columns: 1fr;
- }
- }
+ .team-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20px; /* Reduced from 8px */
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px; /* Added padding for better mobile view */
+}
+
+.team-member {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+
+.image-container, .image-placeholder {
+ width: 250px; /* Reduced from 300px */
+ height: 250px; /* Reduced from 300px */
+ overflow: hidden;
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 20px;
+}
+
+.image-container img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: cover;
+}
+
+.image-placeholder {
+ background-color: #000;
+}
+
+.text-area {
+ width: 250px; /* Reduced from 350px */
+ min-height: 80px; /* Reduced from 100px */
+ border: 1px solid #ccc;
+ padding: 10px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ border-radius: 20px;
+}
+
+.text-area .name {
+ font-size: 16px; /* Reduced from 18px */
+ font-weight: bold;
+ margin-bottom: 5px; /* Reduced from 10px */
+}
+
+.text-area .bio {
+ font-size: 12px; /* Reduced from 14px */
+ text-align: left;
+}
+
+@media (max-width: 768px) {
+ .team-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px; /* Further reduced gap for tablet view */
+ }
+}
+
+@media (max-width: 480px) {
+ .team-grid {
+ grid-template-columns: 1fr;
+ gap: 10px; /* Further reduced gap for mobile view */
+ }
+}
+
</style>
</head>
--
GitLab