feat(website): Adds artiq and about-us + responsive

content/experiment-control/artiq.md

@@ -2,3 +2,104 @@
 title = "Artiq"
 weight = 1
 +++
+
+## ARTIQ
+
+
+{% textimg(src="images/lab_hardware@2x.jpg", alt="lab hardware", bodyleft=true) %}
+
+ARTIQ (Advanced Real-Time Infrastructure for Quantum physics) is a leading-edge control system for quantum information experiments. It was initiated and developed in partnership with the <a href="https://www.nist.gov/pml/time-and-frequency-division/ion-storage" target="_blank" rel="noopener noreferrer">Ion Storage Group</a> at NIST, and is now used and supported by a growing number of research institutions worldwide. While ARTIQ is currently mostly used by atomic physics groups, its applicability reaches beyond ion trapping.
+
+{% end %}
+
+
+{% textimg(src="images/nist_crate1@2x.jpg", alt="lab hardware", md=true) %}
+
+Modern research on quantum information systems poses particular challenges to the control system:
+
+- dozens of signals need to be received and generated with extremely precise timing, in particular to ensure phase coherence
+- quantum error correction schemes require very low reaction latency in response to a measurement
+- real-world implementations of quantum gates, and a fortiori quantum algorithms, involve structurally complex protocols
+- ever-improving experimental techniques drive the need for a flexible and programmable system
+- the diversity of equipment, device drivers and data analysis software involved in a single experiment results in a distributed and multi-platform environment
+
+{% end %}
+
+
+##### Enter ARTIQ
+
+
+{% textimg(src="images/gui_screenshot_small@2x.jpg", alt="lab hardware", bodyleft=true, md=true) %}
+
+ARTIQ features a high-level programming language, based on Python, that helps describing complex experiments. It is compiled and executed on dedicated FPGA hardware with nanosecond timing resolution and sub-microsecond latency.
+
+The time-critical code (a kernel) running on the FPGA (the core device) is easily interfaced with Python code on the computer using a remote procedure call (RPC) mechanism.
+
+The FPGA design is highly portable so that it can adapt to different laboratory setups and resist hardware obsolescence.
+
+ARTIQ drivers for non-realtime devices can be run on remote machines with different operating systems.
+
+The project also includes a graphical user interface, an experiment scheduling system, and databases for experiments, devices, parameters and results.
+
+Technologies employed include <a href="http://python.org/" target="_blank" rel="noopener noreferrer">Python</a>, [Migen](/gateware/migen/), [MiSoC](/gateware/migen/)/<a href="https://github.com/openrisc/mor1kx" target="_blank" rel="noopener noreferrer">mor1kx</a>, <a href="http://llvm.org/" target="_blank" rel="noopener noreferrer">LLVM</a> and <a href="https://github.com/numba/llvmlite" target="_blank" rel="noopener noreferrer">llvmlite</a>.
+
+{% end %}
+
+
+{{ centercontent(md=true, src='images/comp@2x.png', alt='comp') }}
+
+
+##### Partners
+
+
+ARTIQ was initiated by the Ion Storage Group at NIST, and other partners have contributed to major features and developments related to ARTIQ and/or Sinara. Please get in touch if you would like to help move ARTIQ forward!
+
+{% logos() %}
+
+[![](/images/logo_nist.png)](https://www.nist.gov/pml/time-and-frequency-division/ion-storage)
+[![](/images/logo_oxford.png)](https://www2.physics.ox.ac.uk/)
+[![](/images/logo_jqi.png)](http://jqi.umd.edu/)
+[![](/images/logo_duke.png)](http://www.duke.edu)
+[![](/images/logo_ptb.png)](http://ptb.de)
+[![](/images/logo_bmbf.png)](https://bmbf.de)
+[![](/images/logo_ise.png)](http://www.ise.pw.edu.pl)
+
+{% end %}
+
+
+##### Open source
+
+
+{% textimg(src="images/gui_screenshot_allcock_small@2x.jpg", alt="gui screenshot allcock small", bodyleft=true, md=true) %}
+
+Another goal of ARTIQ is to streamline and simplify the design flow of quantum physics instrumentation by promoting design reuse through the development of platform-independent, open-source hardware and software.
+
+Our aim is to provide a control system suitable for the challenges of modern quantum information research, which is based on modular, parameterized and open components that allow physicists to rapidly design and deploy new experiments.
+
+{% end %}
+
+
+##### Sinara hardware
+
+
+{% textimg(src="images/sinara_crate_small@2x.jpg", alt="sinara crate small", md=true) %}
+
+The first ARTIQ core devices used hardware built in-house by physicists. To improve the quality, features and scalability of ARTIQ systems, we have been developing the Sinara device family. It aims at providing turnkey control hardware that is reproducible, open, flexible, modular, well-tested, and well-supported by the ARTIQ control software.
+
+{% end %}
+
+
+##### Other users and contributors
+
+
+{% logos() %}
+
+[![](/images/logo_freiburg.png)](https://www.qsim.uni-freiburg.de/)
+[![](/images/logo_uh.png)](https://www.lnqe.uni-hannover.de)
+[![](/images/logo_hu.png)](https://www.physics.hu-berlin.de/en/qom)
+[![](/images/logo_sysu.png)](http://spa.sysu.edu.cn/en)
+[![](/images/logo_wipm.jpg)](http://www.wipm.cas.cn/)
+[![](/images/logo_ustc.png)](http://en.ustc.edu.cn/)
+[![](/images/logo_tsinghua.png)](http://www.tsinghua.edu.cn/)
+
+{% end %}

sass/css/_layout.scss

@@ -8,7 +8,7 @@ h5 {
   color: $brand-color;
 }
 
-h3 {
+h3, h2 {
   color: $color-secondary;
 }
 
@@ -16,6 +16,20 @@ h3 {
   background: #fff;
 }
 
+.logos-centered {
+  p {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    img {
+      padding: .8rem;
+    }
+  }
+}
+
 
 // Small devices (landscape phones, 576px and up)
 @media (min-width: 576px) {

templates/_base.html

@@ -109,6 +109,8 @@
 
     <footer class="container text-center text-md-left">
 
+      {% block footer_contact %}
+
         <div class="row pt-5 pb-5">
 
           <div class="col-12 col-md-6 pb-5 pb-md-0">
@@ -202,6 +204,7 @@
 
         </div>
 
+      {% endblock %}
 
       <p class="pt-5 pb-2 text-center">
         <small>Copyright &copy; <span id="copyright_year"></span>, M-Labs. All Rights Reserved.</small>

templates/about-us.html

@@ -3,4 +3,48 @@
 
 {% block main_content %}
 
+<h2>ABOUT US</h2>
+
+
+<div class="mt-5 pt-3 mb-5 pb-5">
+
+  <h5 class="mb-3">Milkymist</h5>
+
+  <div class="row">
+
+    <div class="col-12 col-md-6">
+
+      <p>
+        Milkymist was founded in summer 2007 by Sébastien Bourdeauducq. The open source project tackled the development of a system-on-chip design capable of running MilkDrop. The name "Milkymist" was chosen to evoke a parallel MilkDrop. The development was no small task, as it required designing and/or integrating a powerful 32-bit microprocessor core, basic peripherals, many interfaces, a fast SDRAM controller, and graphics acceleration. The video synthesizer born out of those efforts, the <a href="https://m-labs.hk/m1.html" target="_blank" rel="noopener noreferrer">Milkymist One</a>, was launched in September 2011 with the help of open hardware company Sharism at Work.
+      </p>
+
+    </div>
+
+    <div class="col-12 col-md-6">
+
+      <p>
+        Components of the Milkymist system-on-chip soon found many other uses, such as <a href="https://m-labs.hk/jpl_letter.jpg" target="_blank" rel="noopener noreferrer">software-defined radio</a> on board the International Space Station. The community grew and activities diversified, with the development of a <a href="http://www.ohwr.org/projects/tdc-core/wiki" target="_blank" rel="noopener noreferrer">TDC core</a> for CERN (using a variant of the Milkymist SoC for integration), the <a href="https://m-labs.hk/migen/index.html" target="_blank" rel="noopener noreferrer">Migen</a> logic design system and its application to the Rhino software-defined radio platform, and the <a href="https://m-labs.hk/mixxeo.html" target="_blank" rel="noopener noreferrer">Mixxeo</a> digital video mixer. In 2013, Milkymist was renamed to M-Labs to mark the more varied activities, and formally incorporated in Hong Kong as M-Labs Limited.
+      </p>
+
+    </div>
+
+  </div>
+
+  <div class="row">
+
+    <div class="col-12">
+
+      <p class="pt-4">
+        <strong>The company's current main project is <a href="{{ get_url(path='@/experiment-control/artiq.md') }}">ARTIQ</a>, a leading-edge open source control system for quantum information experiments. In 2016, Robert Jördens joined the directorate of the company to further develop ARTIQ and other physics-related projects.</strong>
+      </p>
+
+    </div>
+
+  </div>
+
+</div>
+
+
+<h2>CONTACT US</h2>
+
 {% endblock %}

templates/page.html

@@ -1 +1,12 @@
 {% extends 'section.html' %}
+
+{% block styles %}
+<style>
+  h2, h5 {
+    margin-bottom: 3rem!important;
+  }
+</style>
+{% endblock %}
+
+
+{% block footer_contact %}{% endblock %}

templates/shortcodes/centercontent.html

@@ -0,0 +1,11 @@
+<div class="row d-flex align-items-center mt-5 mb-5 pt-3 pb-3">
+
+  <div class="col-12">
+
+    <p class="text-center">
+      <img class="img-fluid" src="{{ get_url(path=src) }}" alt="{{ alt }}">
+    </p>
+
+  </div>
+
+</div>

templates/shortcodes/logos.html

@@ -0,0 +1,3 @@
+<div class="logos-centered pt-5 pb-5">
+  {{ body | markdown | safe }}
+</div>

templates/shortcodes/quote.html

@@ -0,0 +1,4 @@
+<blockquote>
+    {{ body }} <br>
+    -- {{ author}}
+</blockquote>

templates/shortcodes/textimg.html

@@ -0,0 +1,61 @@
+<div class="row d-flex align-items-center mt-5 mb-5 pt-3 pb-3">
+
+  {% if bodyleft %}
+
+    <div class="col-12 col-md-6">
+
+      {% if md %}
+
+        {{ body | markdown | safe }}
+
+      {% else %}
+
+        {{ body | safe }}
+
+      {% endif %}
+
+    </div>
+
+    <div class="col-12 col-md-6">
+
+      <div class="card shadow">
+
+        <div class="card-body">
+          <img src="{{ get_url(path=src, cachebust=true) }}" alt="{{ alt }}" width="100%" class="img-fluid" >
+        </div>
+
+      </div>
+
+    </div>
+
+  {% else %}
+
+    <div class="col-12 col-md-6 order-2 order-md-1">
+
+      <div class="card shadow">
+
+        <div class="card-body">
+          <img src="{{ get_url(path=src, cachebust=true) }}" alt="{{ alt }}" width="100%" class="img-fluid" >
+        </div>
+
+      </div>
+
+    </div>
+
+    <div class="col-12 col-md-6 order-1 order-md-2">
+
+      {% if md %}
+
+        {{ body | markdown | safe }}
+
+      {% else %}
+
+        {{ body | safe }}
+
+      {% endif %}
+
+    </div>
+
+  {% endif %}
+
+</div>