From 9ebb63b02c866035166c6581f17d003e081b4746 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Thu, 25 Jul 2024 14:29:14 +0000
Subject: [PATCH] Update file team.html
---
wiki/pages/team.html | 151 ++++++++++++++++++++++---------------------
1 file changed, 79 insertions(+), 72 deletions(-)
diff --git a/wiki/pages/team.html b/wiki/pages/team.html
index a8ba8f7f..eb16469a 100644
--- a/wiki/pages/team.html
+++ b/wiki/pages/team.html
@@ -1,76 +1,82 @@
-<!DOCTYPE html>
-<html lang="en">
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Tsinghua - IGEM 2024</title>
- <style>
- body {
- font-family: Arial, sans-serif;
- margin: 0;
- padding: 0;
- }
- .team-grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 10px; /* Reduced gap to bring frames closer */
- max-width: 1200px;
- margin: 20px auto;
- padding: 0 10px;
- }
- .team-member {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- background-color: #f9f9f9;
- border-radius: 10px;
- overflow: hidden;
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
- }
- .image-container, .image-placeholder {
- width: 100%;
- height: 300px;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .image-container img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- .image-placeholder {
- background-color: #ddd;
- }
- .text-area {
- padding: 15px;
- width: 100%;
- box-sizing: border-box;
- }
- .text-area .name {
- font-size: 18px;
- font-weight: bold;
- margin-bottom: 5px;
- }
- .text-area .bio {
- font-size: 14px;
- text-align: left;
- }
- @media (max-width: 768px) {
- .team-grid {
- grid-template-columns: repeat(2, 1fr);
- gap: 8px;
- }
- }
- @media (max-width: 480px) {
- .team-grid {
- grid-template-columns: 1fr;
- gap: 10px;
- }
- }
- </style>
+ <meta charset="UTF-8">
+ <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: 3px; /* Reduced from the previous value to bring frames closer */
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.team-member {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+
+.image-container, .image-placeholder {
+ width: 300px; /* Kept original size */
+ height: 300px; /* Kept original size */
+ 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: 350px; /* Kept original size */
+ min-height: 100px; /* Kept original size */
+ 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);
+ gap: 15px; /* Slightly 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>
{% extends "layout.html" %}
@@ -218,3 +224,4 @@ Meet Our Team Members
{% endblock %}
+
--
GitLab