From 04683544cd564f9ed54fc8fbc3e9bee14bda5c37 Mon Sep 17 00:00:00 2001
From: Devyani Ravi <devyaniravi2003@gmail.com>
Date: Sat, 28 Sep 2024 16:22:59 +0000
Subject: [PATCH] adding HP template
---
docs/.vuepress/components/HumanPractices.vue | 162 +++++++++++++++----
docs/human-practices.md | 86 +---------
2 files changed, 131 insertions(+), 117 deletions(-)
diff --git a/docs/.vuepress/components/HumanPractices.vue b/docs/.vuepress/components/HumanPractices.vue
index 8bee292..07c6b4e 100644
--- a/docs/.vuepress/components/HumanPractices.vue
+++ b/docs/.vuepress/components/HumanPractices.vue
@@ -1,42 +1,140 @@
<template>
- <div class="banner" :style="{ right: sidebarWidth }">
- <img :src="imageUrl" alt="Banner Image" class="banner-image" />
+ <div>
+ <!-- Introduction Section -->
+ <b-card no-body class="mb-2" style="background-color: #e3f2fd;">
+ <b-card-header header-tag="header" role="tab">
+ <b-button v-b-toggle.introduction variant="primary" style="background-color: #e3f2fd; color: #396d7e; border: none;">Introduction to Natronaut’s Human Practices: Answering the Important Questions</b-button>
+ </b-card-header>
+ <b-collapse id="introduction" accordion="accordion" role="tabpanel">
+ <b-card-body style="background-color: #e5efdf;">
+ <h5 style="color: #396d7e;">Designing the Natronaut Project: Values in Mind</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Consulting Resources and Communities Meaningful to Natronaut</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Evidence of Responsibility</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Impact of Natronaut</h5>
+ <p style="color: #333;">Write here...</p>
+ </b-card-body>
+ </b-collapse>
+ </b-card>
+
+ <!-- Implementation Section -->
+ <b-card no-body class="mb-2" style="background-color: #e3f2fd;">
+ <b-card-header header-tag="header" role="tab">
+ <b-button v-b-toggle.implementation variant="primary" style="background-color: #e3f2fd; color: #396d7e; border: none;">Implementation and Impact on Design: Natronaut Application Chamber System — 3D Model</b-button>
+ </b-card-header>
+ <b-collapse id="implementation" accordion="accordion" role="tabpanel">
+ <b-card-body style="background-color: #e5efdf;">
+ <h5 style="color: #396d7e;">1. Intake Pump</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">2. Physical Filter</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">3. Interchangeable Filter Module</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">4. Vibrio natriegens Chamber</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">5. Drying Chamber for Single-Cell Proteins and Output Pipe</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">6. Output Pipe</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Considerations</h5>
+ <p style="color: #333;">Write here...</p>
+ </b-card-body>
+ </b-collapse>
+ </b-card>
+
+ <!-- Inclusivity Section -->
+ <b-card no-body class="mb-2" style="background-color: #e3f2fd;">
+ <b-card-header header-tag="header" role="tab">
+ <b-button v-b-toggle.inclusivity variant="primary" style="background-color: #e3f2fd; color: #396d7e; border: none;">Taking Initiative: Inclusivity and Participation</b-button>
+ </b-card-header>
+ <b-collapse id="inclusivity" accordion="accordion" role="tabpanel">
+ <b-card-body style="background-color: #e5efdf;">
+ <h5 style="color: #396d7e;">“Day In The Life of an iGEM Memberâ€</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Introduction Days and Bachelor’s Open Day at Maastricht University</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Spotify Link</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Colour-blind Friendly Colour Palette</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Postcards</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Eindhoven Funding Event</h5>
+ <p style="color: #333;">Write here...</p>
+ </b-card-body>
+ </b-collapse>
+ </b-card>
+
+ <!-- Feedback Section -->
+ <b-card no-body class="mb-2" style="background-color: #e3f2fd;">
+ <b-card-header header-tag="header" role="tab">
+ <b-button v-b-toggle.feedback variant="primary" style="background-color: #e3f2fd; color: #396d7e; border: none;">Gaining More Feedback and Stakeholder Insight</b-button>
+ </b-card-header>
+ <b-collapse id="feedback" accordion="accordion" role="tabpanel">
+ <b-card-body style="background-color: #e5efdf;">
+ <h5 style="color: #396d7e;">Survey on GMOs</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Interview with Philosophy of Technology Expert</h5>
+ <p style="color: #333;">Introduction and Background: Write here...</p>
+ <p style="color: #333;">Intersection of Technology and Nature in Synthetic Biology: Write here...</p>
+ <p style="color: #333;">Ethical Challenges and Commodifying Life: Write here...</p>
+ <p style="color: #333;">Governance and Public Participation in Synthetic Biology: Write here...</p>
+ <p style="color: #333;">Philosophical Insights: Life as Technology: Write here...</p>
+ <p style="color: #333;">Societal Impact and Environmental Concerns: Write here...</p>
+ <p style="color: #333;">Ethical Frameworks and Global Impact: Write here...</p>
+ <p style="color: #333;">Main Takeaways and Incorporation into the Project: Write here...</p>
+
+ <h5 style="color: #396d7e;">Interview with Unimer: A Discussion on Organic Fertilizer</h5>
+ <p style="color: #333;">Introduction and Background: Write here...</p>
+
+ <h5 style="color: #396d7e;">Meeting with Promega's Marloes van der Zwalm</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Meeting with Cultivarium's Henry Lee and Lilan Ling</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Utrecht, NL: The Dutch iGEM 2024 Meet</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Wageningen, NL: SynBioNL event</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">Madrid, ESP: European iGEM 2024 MeetUp</h5>
+ <p style="color: #333;">Write here...</p>
+
+ <h5 style="color: #396d7e;">University of Michigan: Bioremediation Virtual Symposium</h5>
+ <p style="color: #333;">Write here...</p>
+ </b-card-body>
+ </b-collapse>
+ </b-card>
</div>
</template>
<script>
export default {
- props: {
- imageUrl: {
- type: String,
- default: 'https://static.igem.wiki/teams/5306/human-practices/banners/humanpractices-introbanner.png',
- },
- sidebarWidth: {
- type: String,
- default: '18rem', // Default value for sidebar width, adjust if needed
- },
- },
-}
+ name: "HumanPractices",
+};
</script>
<style scoped>
-.banner {
- position: relative;
- left: 0;
- width: calc(100% - 18rem); /* Use the default value for calculation */
- max-width: 100%;
- display: block;
- margin: 0 auto;
-}
-.banner-image {
- width: 100%;
- max-width: 100%;
- display: block;
-}
-@media (max-width: 768px) {
- .banner {
- width: 100%; /* Adjust to full width for smaller screens */
- right: 0; /* No offset on smaller screens */
- }
+.mb-2 {
+ margin-bottom: 1rem;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/human-practices.md b/docs/human-practices.md
index 87d82ed..0575378 100644
--- a/docs/human-practices.md
+++ b/docs/human-practices.md
@@ -2,88 +2,4 @@
title: Human Practices
---
-# Introduction to Natronaut’s Human Practices: Answering the Important Questions
-
-## Designing the Natronaut Project: Values in Mind
-
-## Consulting Resources and Communities Meaningful to Natronaut
-
-## Evidence of Responsibility
-
-## Impact of Natronaut
-
----
-
-# Implementation and Impact on Design: Natronaut Application Chamber System — 3D Model
-
-## 1. Intake Pump
-
-## 2. Physical Filter
-
-## 3. Interchangeable Filter Module
-
-## 4. Vibrio natriegens Chamber
-
-## 5. Drying Chamber for Single-Cell Proteins and Output Pipe
-
-## 6. Output Pipe
-
-## Considerations
-
----
-
-# Taking Initiative: Inclusivity and Participation
-
-## “Day In The life of an iGEM Memberâ€
-
-## Introduction Days and Bachelor’s Open Day at Maastricht University
-
-## Spotify Link
-
-## Colour-blind Friendly Colour Palette
-
-## Postcards
-
-## Eindhoven Funding Event
-
----
-
-# Gaining More Feedback and Stakeholder Insight
-
-## Survey on GMOs
-
-## Interview with Philosophy of Technology Expert
-
-### Introduction and Background
-
-### Intersection of Technology and Nature in Synthetic Biology
-
-### Ethical Challenges and Commodifying Life
-
-### Governance and Public Participation in Synthetic Biology
-
-### Philosophical Insights: Life as Technology
-
-### Societal Impact and Environmental Concerns
-
-### Ethical Frameworks and Global Impact
-
-### Main Takeaways and Incorporation into the Project
-
-## Interview with Unimer: A Discussion on Organic Fertilizer
-
-### Introduction and Background
-
-## Meeting with Promega's Marloes van der Zwalm
-
-## Meeting with Cultivarium's Henry Lee and Lilan Ling
-
-## Utrecht, NL: The Dutch iGEM 2024 Meet
-
-## Wageningen, NL: SynBioNL event
-
-## Madrid, ESP: European iGEM 2024 MeetUp
-
-## University of Michigan: Bioremediation Virtual Symposium
-
----
+<HumanPractices />
--
GitLab