refactor(ARTIQ): Reviews layout and md file

content/experiment-control/artiq.md

@@ -5,14 +5,15 @@ template = "page.html"
 +++
 
 
-{% textimg(src="images/lab-hardware@2x.jpg", alt="lab hardware", bodyleft=true, customcss="row d-flex align-items-center mb-4 pb-2", shadow=true) %}
+{% layout_text_img(src="images/lab-hardware@2x.jpg", alt="lab hardware", textleft=true, shadow=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/modern-research@2x.png", alt="modern research", md=true, shadow=false) %}
+
+{% layout_text_img(src="images/modern-research@2x.png", alt="modern research", shadow=false) %}
 
 Modern research on quantum information systems poses particular challenges to the control system:
 
@@ -25,11 +26,11 @@ Modern research on quantum information systems poses particular challenges to th
 {% end %}
 
 
+
+{% layout_text_img(src="images/gui_screenshot_small@2x.jpg", alt="lab hardware", textleft=true, shadow=true) %}
+
 ##### Enter ARTIQ
 
-
-{% textimg(src="images/gui_screenshot_small@2x.jpg", alt="lab hardware", bodyleft=true, md=true, shadow=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.
@@ -45,16 +46,24 @@ Technologies employed include <a href="http://python.org/" target="_blank" rel="
 {% end %}
 
 
-{{ centercontent(md=true, src='images/comp@2x.png', alt='comp') }}
+
+{{ layout_centered_img(src='images/comp@2x.png', alt='comp') }}
 
 
-{{ herocontent(title="Partners") }}
 
-{% centerp() %}
+{{ layout_separator(separator_title="Partners") }}
+
+
+
+{% layout_centered_content() %}
+
 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!
+
 {% end %}
 
-{% logos() %}
+
+
+{% layout_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/)
@@ -67,11 +76,11 @@ ARTIQ was initiated by the Ion Storage Group at NIST, and other partners have co
 {% end %}
 
 
+
+{% layout_text_img(src="images/gui_screenshot_allcock_small@2x.jpg", alt="gui screenshot allcock small", textleft=true, shadow=true) %}
+
 ##### Open source
 
-
-{% textimg(src="images/gui_screenshot_allcock_small@2x.jpg", alt="gui screenshot allcock small", bodyleft=true, md=true, customcss="row d-flex align-items-center mt-4 mb-5 pt-2 pb-3", shadow=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.
@@ -79,7 +88,8 @@ Our aim is to provide a control system suitable for the challenges of modern qua
 {% end %}
 
 
-{% textimg(src="images/sinara_crate_small@2x.jpg", alt="sinara crate small", md=true, customcss="row d-flex align-items-center mt-4 mb-5 pt-2 pb-3", shadow=true) %}
+
+{% layout_text_img(src="images/sinara_crate_small@2x.jpg", alt="sinara crate small", shadow=true) %}
 
 ##### Sinara hardware
 
@@ -90,7 +100,8 @@ The first ARTIQ core devices used hardware built in-house by physicists. To impr
 {% end %}
 
 
-{% logos(title="Other users and contributors") %}
+
+{% layout_logos(title="Other users and contributors") %}
 
 [![](/images/logo_freiburg.png)](https://www.qsim.uni-freiburg.de/)
 [![](/images/logo_uh.png)](https://www.lnqe.uni-hannover.de)

templates/includes/separator_design.html

@@ -1,4 +1,4 @@
-<div class="container-fluid hero3 d-flex flex-column justify-content-center">
+<div class="container-fluid {% if not separator_rm_bg %}hero3{% else %}{% endif %} d-flex flex-column justify-content-center">
 
   <div class="container">
 

templates/page.html

@@ -2,8 +2,8 @@
 
 {% block styles %}
 <style>
-  h2, h5 {
+  h5 {
-    margin-bottom: 3rem!important;
+    margin-bottom: 2rem!important;
   }
 </style>
 {% endblock %}

templates/shortcodes/layout_centered_content.html

@@ -0,0 +1,9 @@
+<div class="{% if css %}{{ css }}{% else %}row d-flex align-items-center mt-5 mb-5{% endif %}">
+
+  <div class="col-12 text-center">
+
+    <p>{{ body | markdown | safe }}</p>
+
+  </div>
+
+</div>

templates/shortcodes/layout_centered_img.html

@@ -0,0 +1,9 @@
+<div class="{% if css %}{{ css }}{% else %}row d-flex align-items-center mt-5 mb-5{% endif %}">
+
+  <div class="col-12 text-center">
+
+    <img class="img-fluid" src="{{ get_url(path=src) }}" alt="{{ alt }}">
+
+  </div>
+
+</div>

templates/shortcodes/layout_logos.html

@@ -1,4 +1,7 @@
-<div class="logos-centered pt-5 pb-5 text-center">
+<div class="logos-centered mt-5 mb-5 text-center">
+
   {% if title %}<h5>{{ title}}</h5>{% endif %}
+
   {{ body | markdown | safe }}
+
 </div>

templates/shortcodes/layout_separator.html

@@ -0,0 +1,7 @@
+{% if separator_title %}
+
+{% set separator_rm_bg = true %}
+
+{% include "includes/separator_design.html" %}
+
+{% endif %}

templates/shortcodes/layout_text_img.html

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