diff --git a/docs/.vuepress/components/HumanPractices.vue b/docs/.vuepress/components/HumanPractices.vue index 8b487cbfb39509448acd228d2d7d93921f7e7b6a..ef9855aab1a124d86aa491eda59760e6a516ac4c 100644 --- a/docs/.vuepress/components/HumanPractices.vue +++ b/docs/.vuepress/components/HumanPractices.vue @@ -8,7 +8,7 @@ width="300" /> <p> - Our team, MSP-Maastricht, is dedicated to being an active and ongoing contributor to the iGEM community. We believe that science and engineering bridge the past and future, as all research builds on the knowledge of those who came before us. A key part of this tradition is our Contributions page, which showcases the innovative solutions we are developing to tackle real-world challenges. By sharing our strategies, methodologies, and findings, we aim to enhance the accessibility and application of synthetic biology techniques. Through facilitating such knowledge transfer, we hope to benefit future iGEM teams and the broader SynBio community. + Our team, MSP-Maastricht, is dedicated to being an active and ongoing contributor to the iGEM community. We believe that science and engineering bridge the past and future, as all research builds on the knowledge of those who came before us. A key part of this tradition is our Contributions page, which showcases the innovative solutions we are developing to tackle real-world challenges. By sharing our strategies, methodologies, and findings, we aim to enhance the accessibility and application of synthetic biology techniques. Through facilitating such knowledge transfer, we hope to benefit future iGEM teams and the broader SynBio community. </p> </div> <!-- Introduction Section --> @@ -126,8 +126,26 @@ <h3 style="color: #396d7e;">Madrid, ESP: European iGEM 2024 MeetUp</h3> <p style="color: #333;">Write here...</p> + </div> + </div> + + <!-- Future Steps Section --> + <div class="card mb-2" style="background-color: #e3f2fd;"> + <div class="card-header" @click="toggleSection('future-steps')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;"> + <h2 style="color: #396d7e;">Future Steps for Natronaut</h2> + <span>{{ openSection === 'future-steps' ? 'â–²' : 'â–¼' }}</span> + </div> + <div v-if="openSection === 'future-steps'" class="card-body" style="background-color: #e5efdf;"> + <h3 style="color: #396d7e;">Highlighting Key Takeaways and Path Forward</h3> + <p style="color: #333;">Write here...</p> + + <h3 style="color: #396d7e;">Supporting Sustainability and Regenerative Practices</h3> + <p style="color: #333;">Write here...</p> - <h3 style="color: #396d7e;">University of Michigan: Bioremediation Virtual Symposium</h3> + <h3 style="color: #396d7e;">Next Steps for Sustainability</h3> + <p style="color: #333;">Write here...</p> + + <h3 style="color: #396d7e;">Reflections on iGEM Journey</h3> <p style="color: #333;">Write here...</p> </div> </div> @@ -138,12 +156,11 @@ export default { data() { return { - openSection: null, // Track which section is open + openSection: null, }; }, methods: { toggleSection(section) { - // Toggle the section, close others this.openSection = this.openSection === section ? null : section; }, }, @@ -151,26 +168,23 @@ export default { </script> <style scoped> -.mb-2 { - margin-bottom: 1rem; +.contribution { + max-width: 800px; + margin: auto; } + .card { - border-radius: 0.25rem; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + border-radius: 10px; + margin-bottom: 20px; + border: 1px solid #b0bec5; } + .card-header { - padding: 1rem; - font-size: 1.25rem; -} -.contribution { - padding: 20px; + font-size: 1.2em; + padding: 15px; } -.contribution-container { - display: flex; - align-items: center; -} .card-body { - padding: 1rem; + padding: 15px; } </style>