add mobile support

README.md

@@ -29,6 +29,7 @@ The static assets are in the `static` directory. The layout and templates are in
         |__ footer.html     -> Footer that will appear in all the pages
         |__ layout.html     -> Main layout of your wiki. All the pages will follow its structure
         |__ menu.html       -> Menu that will appear in all the pages
+        |__ wiki-tools.html -> Wiki tools to help getting started with this template
         |__ pages/          -> Directory for all the pages
             |__ *.html      -> Actual pages of your wiki
     |__ .gitignore          -> Tells GitLab which files/directories should not be uploaded to the repository

wiki/layout.html

@@ -37,11 +37,11 @@
     {% block page_content %}{% endblock %}
   </div>
 
-  <!-- Footer -->
+  <!-- Footer: MUST mention license AND have a link to team wiki's repository on gitlab.igem.org -->
   {% include 'footer.html' %}
 
-  <!-- Wiki Tools -->
-  {% include 'wikitools.html' %}
+  <!-- Wiki Tools: Teams are allowed to remove it -->
+  {% include 'wiki-tools.html' %}
 
   <!-- Bootstrap Bundle with Popper -->
   <script src="{{ url_for('static', filename = 'bootstrap.bundle.min.js') }}"></script>

wiki/pages/attributions.html

@@ -17,7 +17,7 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>What should this page contain?</h2>
     <hr>
   <ul>
@@ -55,7 +55,7 @@
   <li>Literature references: we encourage you to display literature references throughout your entire wiki
     </ul>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspiration</h2>
     <hr>
     <ul>
@@ -71,17 +71,17 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-6">
+  <div class="col-lg-6">
     <h2>Why is this page needed?</h2>
     <hr>
     <p>The Attribution requirement helps the judges know what you did yourselves and what you had help with. You can get help with difficult or complex techniques, but you must report what work your team did and what work was done by others.</p>
     <p>For example, you might choose to work with an animal model during your project. Working with animals requires getting a license and applying far in advance to conduct certain experiments in many countries. This is difficult to achieve during the course of a summer, but much easier if you can work with a postdoc or PI who has the right licenses.</p>
   </div>
-  <div class="col-6">
+  <div class="col-lg-6">
     <h2>Can we base our project on a previous one?</h2>
     <hr>
     <p>Yes! You can have a project based on a previous team, or based on someone else's idea, <b>as long as you state this fact very clearly and give credit for the original project.</b></p>
   </div>
 </div>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}

wiki/pages/collaborations.html

@@ -17,12 +17,12 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-6">
+  <div class="col-lg-6">
     <h2>Which teams can we work with?</h2>
     <hr>
     <p>You can work with any other iGEM 2022 team in the competition. You can also work with non-iGEM research groups, but they do not count towards the iGEM team collaboration silver medal criterion.</p>
   </div>
-  <div class="col-6">
+  <div class="col-lg-6">
     <h2>Some suggestions</h2>
     <hr>
     <ul>

wiki/pages/description.html

@@ -17,7 +17,7 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>What should this page contain?</h2>
     <hr>
     <ul>
@@ -27,7 +27,7 @@
       <li>Use illustrations and other visual resources to explain your project.</li>
     </ul>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspirations</h2>
     <hr>
     <ul>
@@ -42,12 +42,12 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>Some advice</h2>
     <hr>
     <p>We encourage you to put up a lot of information and content on your wiki, but we also encourage you to include summaries as much as possible. If you think of the sections in your project description as the sections in a publication, you should try to be concise, accurate, and unambiguous in your achievements. Your Project Description should include more information than your project abstract.</p>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>References</h2>
     <hr>
     <p>iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you thought about your project and what works inspired you.</p>

wiki/pages/entrepreneurship.html

@@ -18,13 +18,13 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>Patents and intellectual property</h2>
     <hr>
     <p>If your team is seriously considering commercializing and looking into building a company after the competition, you may want to look at how you are going to protect your work and secure investment. Investors will usually require some form of intellectual protection, so you may want to investigate how to apply for a patent or provisional patent in your country and region before disclosing your project at iGEM. Remember that you can only be evaluated in iGEM based on what you share on your wiki and at the Jamboree, so any work you don't present can't count towards your project.</p>
     <p>This is an area where we are different as we care about sharing, openness and contributing to the community and investors don't always agree with these values. It is up to you and your team to decide what to do. Remember that most universities have a commercialization department and that you can talk to them before coming to a decision.</p>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspirations</h2>
     <hr>
     <ul>

wiki/pages/experiments.html

@@ -6,13 +6,13 @@
 {% block page_content %}
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>What should this page contain?</h2>
     <hr>
     <p>Describe the research, experiments, and protocols you used in your iGEM project. These should be detailed enough for another team to repeat your experiments.</p>
     <p>If you made Parts this year, please remember to put all information, characterization, and measurement data on the Part's Main Page on the <a href="http://parts.igem.org/Main_Page">Registry</a>.</p>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspirations</h2>
     <hr>
     <ul>

wiki/pages/hardware.html

@@ -19,12 +19,12 @@
 
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>Overview</h2>
     <hr>
     <p>In addition to encouraging teams to work with DNA parts and build biological devices in the lab, iGEM also encourages other types of technical solutions for synthetic biology. This can include physical devices (hardware) related to robotic assembly, microfluidics, low-cost measurement devices, to name a few examples. There are many exciting opportunities for hardware innovation in synthetic biology.</p>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspirations</h2>
     <hr>
     <ul>

wiki/pages/human-practices.html

@@ -32,7 +32,7 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>Overview</h2>
     <hr>
     <p>At iGEM we believe societal considerations should be upfront and integrated throughout the design and execution of synthetic biology projects. “Human Practices” refers to iGEM teams' efforts to actively consider how the world affects their work and their work affects the world. Through your Human Practices activities, your team should demonstrate how you have thought carefully and creatively about whether your project is responsible and good for the world. We invite you to explore issues relating (but not limited) to the ethics, safety, security, and sustainability of your project, and to show how this exploration feeds back into your project purpose, design, and execution.</p>
@@ -40,7 +40,7 @@
     <p>For more information, please see the <a href="https://responsibility.igem.org/human-practices/what-is-human-practices">Human Practices Hub</a>.
     <p>On this page, your team should document all of your Human Practices work and activities. You should write about the Human Practices topics you considered in your project, document any activities you conducted to explore these topics (such as engaging with experts and stakeholders), describe why you took a particular approach (including referencing any work you built upon), and explain if and how you integrated takeaways from your Human Practices work back into your project purpose, design and/or execution.</p>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspirations</h2>
     <hr>
     <ul>

wiki/pages/inclusivity.html

@@ -18,12 +18,12 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>Overview</h2>
     <hr>
     <p>We should all recognize the importance of building an open and welcoming scientific community. A more diverse community involved in creating knowledge and technology is more likely to produce a more equitable and representative system. Every individual, regardless of background or experience, should have an equal opportunity to engage with scientific knowledge and technological development. Everyone should be able to share their opinions on the societal implications of research.</p>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspirations</h2>
     <hr>
     <ul>

wiki/pages/index.html

@@ -25,7 +25,7 @@
   </div>
 </div>
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>Tips</h2>
     <hr>
     <p>This wiki will be your team's first interaction with the rest of the world, so here are a few tips to help you get started:</p>
@@ -39,7 +39,7 @@
       <li>Have lots of fun!</li>
     </ul>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspiration</h2>
     <hr>
     <p>You can also view other team wikis for inspiration! Here are some examples:</p>

wiki/pages/measurement.html

@@ -18,12 +18,12 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>Overview</h2>
     <hr>
     <p> If you've done excellent work in measurement, you should consider nominating your team for this special prize. Synthetic Biology needs great measurement approaches for characterizing parts, and efficient new methods for characterizing many parts at once. If you've done something exciting in the area of Measurement, describe it here!</p>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspirations</h2>
     <hr>
     <ul>

wiki/pages/model.html

@@ -24,13 +24,13 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>Overview</h2>
     <hr>
     <p>Mathematical models and computer simulations provide a great way to describe the function and operation of Parts and Devices. Synthetic Biology is an engineering discipline, and part of engineering is simulation and modeling to determine the behavior of your design before you build it. Designing and simulating can be iterated many times in a computer before moving to the lab.</p>
     <p>Please note you can compete for both the Gold Medal criterion #3 and the Best Model prize with this page.</p>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspirations</h2>
     <hr>
     <ul>

wiki/pages/notebook.html

@@ -6,7 +6,7 @@
 {% block page_content %}
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>What should this page contain?</h2>
     <hr>
     <ul>
@@ -16,7 +16,7 @@
       <li>Mention who participated in what task.</li>
     </ul>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspirations</h2>
     <hr>
     <ul> 

wiki/pages/results.html

@@ -6,7 +6,7 @@
 {% block page_content %}
 
 <div class="row mt-4">
-  <div class="col-5">
+  <div class="col-lg-5">
     <h2>What should this page contain?</h2>
     <hr>
     <ul>
@@ -15,7 +15,7 @@
       <li>Considerations for replicating the experiments.</li>
     </ul>
   </div>
-  <div class="col-7">
+  <div class="col-lg-7">
     <h2>Describe what your results mean</h2>
     <hr>
     <ul>
@@ -27,7 +27,7 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>Project Achievements</h2>
     <hr>
     <p>You can also include a list of bullet points (and links) of the successes and failures you have had over your summer. It is a quick reference page for the judges to see what you achieved during your summer.</p>
@@ -36,7 +36,7 @@
       <li>A list of linked bullet points of the unsuccessful results during your project. This is about being scientifically honest. If you worked on an area for a long time with no success, tell us so we know where you put your effort.</li>
     </ul>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Inspirations</h2>
     <hr>
     <ul>

wiki/pages/safety.html

@@ -29,7 +29,7 @@
 </div>
 
 <div class="row mt-4">
-  <div class="col-8">
+  <div class="col-lg-8">
     <h2>Safe Project Design</h2>
     <hr>
     <p>Does your project include any safety features? Have you made certain decisions about the design to reduce risks? Write about them here! For example:</p>
@@ -40,7 +40,7 @@
       <li>Including an "induced lethality" or "kill-switch" device</li>
     </ul>
   </div>
-  <div class="col-4">
+  <div class="col-lg-4">
     <h2>Safe Lab Work</h2>
     <hr>
     <p>What safety procedures do you use every day in the lab? Did you perform any unusual experiments, or face any unusual safety issues? Write about them here!</p>

wiki/wikitools.html → wiki/wiki-tools.html

@@ -17,6 +17,9 @@
     .wiki-tools-footer a:hover {
         color: #08C784;
     }
+    .wiki-tools-footer img {
+        object-fit: contain;
+    }
 </style>
 
 <section class="wiki-tools-footer container">