Update file human-practices.html

07d25410 · HouTeng Chan · e89f76bc · 07d25410
Commit 07d25410 authored 6 months ago by HouTeng Chan
--- a/wiki/pages/human-practices.html
+++ b/wiki/pages/human-practices.html
@@ -27,51 +27,42 @@
    }
    .expert-card {
-      background-color: white;
+            background-color: white;
-      border: 1px solid #ddd;
+            border: 1px solid #ddd;
-      border-radius: 8px;
+            border-radius: 8px;
-      padding: 20px;
+            padding: 20px;
-      margin-bottom: 20px;
+            margin-bottom: 20px;
-      transition: box-shadow 0.3s ease;
+            transition: box-shadow 0.3s ease;
-      position: relative;
+        }
-    }
+        .expert-card:hover {
-    .expert-card:hover {
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
-    }
+        .expert-image {
-    .expert-image {
+            width: 200px;
-      width: 200px;
+            height: 200px;
-      height: 200px;
+            object-fit: cover;
-      object-fit: cover;
+        }
-    }
+        .expert-details {
-    .expert-details {
+            display: flex;
-      display: flex;
+            flex-direction: column;
-      flex-direction: column;
+        }
-    }
+        .expert-name {
-    .expert-name {
+            font-size: 1.5rem;
-      font-size: 1.5rem;
+            font-weight: bold;
-      font-weight: bold;
+        }
-    }
+        .expert-role {
-    .expert-role {
+            font-size: 1.2rem;
-      font-size: 1.2rem;
+            color: #666;
-      color: #666;
+        }
-    }
+        .expert-takeaway {
-    .expert-takeaway {
+            margin-top: 15px;
-      margin-top: 15px;
+            font-weight: bold;
-      font-weight: bold;
+        }
-    }
+        .expert-content {
-    .expert-content {
+            margin-top: 10px;
-      margin-top: 10px;
+            display: none;
-      display: none;
+        }
-    }
-    .toggle-button {
-      position: absolute;
-      bottom: 10px;
-      right: 10px;
-      background-color: #f8f9fa;
-      border: 1px solid #ddd;
-      padding: 5px 10px;
-      cursor: pointer;
-    }
  </style>
 </head>
 <body>
@@ -170,7 +161,6 @@
                    <p>Moreover, in the early stages of our Muscure project, since we chose yeast as the chassis organism, it was necessary for us to culture yeast. However, there were relatively few yeast laboratories at Tsinghua University, and we couldn't find a source to obtain yeast, nor did we know how to culture it. It was Dr Li Peng who provided us with the yeast strains he had preserved from the past and taught us how to culture them. Dr Li Peng also gave us his molecular biology laboratory manual, guiding us on the process of yeast transformation. During our initial meetings when we were selecting topics, Dr. Li Peng also listened attentively on the side, offering us advice on feasibility and other aspects.</p>
                    <p>Dr Li Peng provided us with tremendous support in terms of experimental safety, materials, and methods, largely laying the foundation for our project.</p>
                </div>
-                <button class="toggle-button" onclick="toggleContent(this)">Click for more</button>
            </div>
        </div>
    </div>
@@ -759,20 +749,16 @@
  </div>
-  <script>
+<script>
-    function toggleContent(button) {
+        function toggleContent(element) {
-      var card = button.closest('.expert-card');
+            const content = element.querySelector('.expert-content');
-      var content = card.querySelector('.expert-content');
+            if (content.style.display === 'none' || content.style.display === '') {
-      if (content.style.display === 'none' || content.style.display === '') {
+                content.style.display = 'block';
-        content.style.display = 'block';
+            } else {
-        button.textContent = 'Click to collapse';
+                content.style.display = 'none';
-      } else {
+            }
-        content.style.display = 'none';
+        }
-        button.textContent = 'Click for more';
+    </script>
-      }
-    }
-  </script>
 </body>
 </html>
 {% endblock %}
\ No newline at end of file