refactor(ARTIQ): Applies various cosmetics changes

content/experiment-control/artiq.md

@@ -1,19 +1,18 @@
 +++
 title = "ARTIQ"
 weight = 1
+template = "page-hero.html"
 +++
 
-## ARTIQ
 
-
-{% textimg(src="images/lab_hardware@2x.jpg", alt="lab hardware", bodyleft=true) %}
+{% 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) %}
 
 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) %}
+{% textimg(src="images/modern-research@2x.png", alt="modern research", md=true, shadow=false) %}
 
 Modern research on quantum information systems poses particular challenges to the control system:
 
@@ -29,7 +28,7 @@ Modern research on quantum information systems poses particular challenges to th
 ##### Enter ARTIQ
 
 
-{% textimg(src="images/gui_screenshot_small@2x.jpg", alt="lab hardware", bodyleft=true, md=true) %}
+{% 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.
 
@@ -49,10 +48,11 @@ Technologies employed include <a href="http://python.org/" target="_blank" rel="
 {{ centercontent(md=true, src='images/comp@2x.png', alt='comp') }}
 
 
-##### Partners
-
+{{ herocontent(title="Partners") }}
 
+{% centerp() %}
 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() %}
 
@@ -70,7 +70,7 @@ ARTIQ was initiated by the Ion Storage Group at NIST, and other partners have co
 ##### Open source
 
 
-{% textimg(src="images/gui_screenshot_allcock_small@2x.jpg", alt="gui screenshot allcock small", bodyleft=true, md=true) %}
+{% 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.
 
@@ -79,20 +79,18 @@ 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) %}
+
 ##### 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.
 
+[Learn more](/experiment-control/sinara/)
+
 {% end %}
 
 
-##### Other users and contributors
-
-
-{% logos() %}
+{% 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)

sass/css/_layout.scss

@@ -2,13 +2,17 @@
   height: 230px;
   background: none;
 }
+.hero2 {
+  height: 130px;
+  background: none;
+}
 
 .card h5,
 h5 {
   color: $brand-color;
 }
 
-h3, h2 {
+h3, h2, h1 {
   color: $color-secondary;
 }
 
@@ -31,6 +35,8 @@ h3, h2 {
   }
 }
 
+.card-img-top {
+  padding: .4rem; }
 
 // Small devices (landscape phones, 576px and up)
 @media (min-width: 576px) {
@@ -59,6 +65,15 @@ h3, h2 {
     }
   }
 
+  .hero2 {
+    height: 380px;
+    background: url("../images/hero2@2x.png") repeat-x top center;
+    -webkit-background-size: contain;
+    -moz-background-size: contain;
+    -o-background-size: contain;
+    background-size: contain;
+  }
+
   .hero + main {
     margin-top: -150px;
   }

templates/index.html

@@ -36,7 +36,7 @@
 
         <div class="card shadow mt-3 mb-3">
 
-          <div class="card-body p-5 card-artiq">
+          <div class="card-body p-3 p-md-5 card-artiq">
 
             <div class="col-12 col-md-6 pl-0 pr-0">
 
@@ -69,7 +69,7 @@
 
         <div class="card shadow mt-3 mb-3">
 
-          <div class="card-body p-5 card-gateware">
+          <div class="card-body p-3 p-md-5 card-gateware">
 
             <div class="col-12 col-md-6 pl-0 pr-0">
 

templates/page-hero.html

@@ -0,0 +1,63 @@
+{% extends 'section.html' %}
+
+{% block styles %}
+<style>
+  h2, h5 {
+    margin-bottom: 3rem!important;
+  }
+</style>
+{% endblock %}
+
+
+{% block hero %}
+
+  <div class="container-fluid hero2 d-flex flex-column justify-content-center">
+
+    <div class="container">
+
+        <div class="row">
+
+          <div class="col-12 text-center mt-n0 mt-lg-n5">
+
+            <h1>{{ page.title }}</h1>
+
+            <img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" width="100" align="ion">
+
+          </div>
+
+        </div>
+
+    </div>
+
+  </div>
+
+{% endblock %}
+
+
+{% block main %}
+
+  <main class="container">
+
+    <div class="row pb-5">
+
+      <div class="col-12">
+
+        {% block main_content %}
+
+          {% if page and page.content %}
+          {{ page.content | safe }}
+          {% endif %}
+
+        {% endblock %}
+
+      </div>
+
+    </div>
+
+  </main>
+
+{% endblock %}
+
+
+
+{% block footer_contact %}{% endblock %}

templates/shortcodes/centerp.html

@@ -0,0 +1,3 @@
+<div class="text-center mt-3">
+  {{ body }}
+</div>

templates/shortcodes/herocontent.html

@@ -0,0 +1,19 @@
+<div class="container-fluid d-flex flex-column justify-content-center mt-3 mb-3">
+
+  <div class="container">
+
+      <div class="row">
+
+        <div class="col-12 text-center">
+
+          <h2 class="mb-0">{{ title }}</h2>
+
+          <img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" width="100" align="ion">
+
+        </div>
+
+      </div>
+
+  </div>
+
+</div>

templates/shortcodes/logos.html

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

templates/shortcodes/textimg.html

@@ -1,4 +1,4 @@
-<div class="row d-flex align-items-center mt-5 mb-5 pt-3 pb-3">
+<div class="{% if customcss %}{{ customcss }}{% else %}row d-flex align-items-center mt-4 mb-4 pt-2 pb-2{% endif%}">
 
   {% if bodyleft %}
 
@@ -16,13 +16,11 @@
 
     </div>
 
-    <div class="col-12 col-md-6">
+    <div class="col-12 col-md-6 pt-3 pt-sm-0">
 
-      <div class="card shadow">
+      <div class="card {% if shadow %}shadow{% endif %}">
 
-        <div class="card-body">
-          <img src="{{ get_url(path=src, cachebust=true) }}" alt="{{ alt }}" width="100%" class="img-fluid" >
-        </div>
+        <img src="{{ get_url(path=src, cachebust=true) }}" alt="{{ alt }}" width="100%" class="card-img-top img-fluid">
 
       </div>
 
@@ -32,11 +30,9 @@
 
     <div class="col-12 col-md-6 order-2 order-md-1">
 
-      <div class="card shadow">
+      <div class="card {% if shadow %}shadow{% endif %}">
 
-        <div class="card-body">
-          <img src="{{ get_url(path=src, cachebust=true) }}" alt="{{ alt }}" width="100%" class="img-fluid" >
-        </div>
+        <img src="{{ get_url(path=src, cachebust=true) }}" alt="{{ alt }}" width="100%" class="card-img-top img-fluid">
 
       </div>