feat(img_enlarged): Prepares code

/about-us/ is a section not a page. Thus, according to Zola, a section has a _index.md .. but an _index.md file is attach with an file.html. That's why we cannot take advantage of a markdown content..for a section content.

It's the same thing with the homepage.

So basically, homepage and all section content (e.g URL like this ROOT/section/ ) will have its HTML file.

content/about-us/_index.md

@@ -2,5 +2,7 @@
 title = "About us"
 weight = 4
 sort_by = "weight"
-template = "customs/about-us.html"
+
+[extra]
+title = "About us"
 +++

content/about-us/company.md

@@ -0,0 +1,24 @@
++++
+title = "Company"
+weight = 1
+template = "page-contact.html"
+
+[extra]
+title = "About us"
++++
+
+
+{% layout_centered_content(min_width=true) %}
+
+##### History
+
+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.
+
+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="{{ get_url(path='@/gateware/migen.md') }}">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.
+
+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.
+
+{% end %}
+
+
+{{ layout_separator(separator_title="Contact us") }}

content/about-us/directions.md

@@ -0,0 +1,43 @@
++++
+title = "Directions"
+weight = 2
+template = "page.html"
++++
+
+
+{% layout_centered_content(min_width=true) %}
+
+##### All the transportation options below take you to King's Road.
+
+**MTR:** Island Line, Quarry Bay, exit A
+
+**Tramway:** Mount Parker Road
+
+**Bus:** Sunway Gardens / Westlands Road / Pan Hoi Street
+
+{% end %}
+
+
+<div class="row">
+
+{% layout_card(src="images/directions_1@2x.png", imgbottom=true) %}
+
+<span class="badge badge-primary">1</span> When entering from King's Road, Pan Hoi Street looks like this. Go to the location of the red arrow:
+
+{% end %}
+
+
+{% layout_card(src="images/directions_2@2x.png", imgbottom=true) %}
+
+<span class="badge badge-primary">2</span> Enter here:
+
+{% end %}
+
+
+{% layout_card(src="images/directions_3@2x.png", imgbottom=true) %}
+
+<span class="badge badge-primary">3</span> Turn right here, walk a little bit, and M-Labs will be on your left:
+
+{% end %}
+
+</div>

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)

content/experiment-control/control-loops.md

@@ -5,7 +5,7 @@ template = "page.html"
 +++
 
 
-{% textimg(src="images/stabilizer@2x.png", alt="", bodyleft=true, customcss="row d-flex align-items-center mb-4 pb-2", shadow=false, md=true) %}
+{% layout_text_img(src="images/stabilizer@2x.png", alt="", textleft=true, shadow=false) %}
 
 ##### Stabilizer
 
@@ -26,23 +26,18 @@ It can be used as a general-purpose PID controller. Several AFE extensions are u
 {% end %}
 
 
-{% centerp(safe=true) %}
-
-<div class="row">
-
-  <div class="col-12 mt-0 mt-md-5">
-    <p class="m-0">
-      The <a href="https://github.com/quartiq/stabilizer" target="_blank" rel="noopener noreferrer">standard open source firmware</a> that comes with the board has the following features:
-    </p>
-  </div>
-
-</div>
 
+{% layout_centered_content(css="row d-flex align-items-center mt-5 mb-0") %}
+The <a href="https://github.com/quartiq/stabilizer" target="_blank" rel="noopener noreferrer">standard open source firmware</a> that comes with the board has the following features:
 {% end %}
 
-{{ centercontent(customcss="row d-flex align-items-center", md=true, src="images/_standard-open-source-firmware@2x.png", alt="") }}
 
-{% layoutlr1(customcss="row d-flex align-items-center mt-4 mb-5 pt-2 pb-2") %}
+
+{{ layout_centered_img(src="images/_standard-open-source-firmware@2x.png", alt="", css="row d-flex align-items-center mt-0 mb-0") }}
+
+
+
+{% layout_html() %}
 
   <div class="col-12 col-md-3">
     <ul>
@@ -65,7 +60,7 @@ It can be used as a general-purpose PID controller. Several AFE extensions are u
     </ul>
   </div>
 
-  <div class="col-12 col-md-4 mt-4 mt-md-0">
+  <div class="col-12 col-md-4">
     <p>
       To purchase this controller, email sales@m-***s.hk. We also offer firmware customizations and development of new features. Note that features that are not implemented in the open source code above (e.g. control from Kasli) are not supported unless purchased separately.
     </p>
@@ -74,7 +69,8 @@ It can be used as a general-purpose PID controller. Several AFE extensions are u
 {% end %}
 
 
-{% textimg(src="images/Thermostat@2x.png", alt="", customcss="", bodyleft=false, shadow=false, md=true) %}
+
+{% layout_text_img(src="images/Thermostat@2x.png", alt="", shadow=false) %}
 
 ##### Thermostat
 
@@ -96,7 +92,8 @@ This module is still in development and is not currently available.
 {% end %}
 
 
-{% textimg(alt="", customcss="", bodyleft=true, shadow=false, md=true) %}
+
+{% layout_text_img(textleft=true, shadow=false) %}
 
 ##### SU-Servo
 

content/experiment-control/resources.md

@@ -1,5 +1,118 @@
 +++
 title = "Resources"
 weight = 4
-template = "customs/resources.html"
+template = "page.html"
+
+[extra]
 +++
+
+
+<div class="row">
+
+{% layout_card(title="ARTIQ Documentation") %}
+<small>Beta (development) version</small>
+
+<a href="https://m-labs.hk/artiq/manual-beta.pdf" target="_blank">PDF</a> | <a href="https://m-labs.hk/artiq/manual-beta/" target="_blank" rel="noopener noreferrer">HTML</a>
+{% end %}
+
+
+
+{% layout_card(title="ARTIQ Documentation") %}
+<small>Stable version</small>
+
+<a href="https://m-labs.hk/artiq/manual/" target="_blank">HTML</a>
+{% end %}
+
+
+
+{% layout_card(title="ARTIQ Documentation") %}
+<small>Older manuals (HTML only)</small>
+
+<a href="https://m-labs.hk/artiq/manual-release-3/" target="_blank" rel="noopener noreferrer">ARTIQ-3</a> | <a href="https://m-labs.hk/artiq/manual-release-2/" target="_blank" rel="noopener noreferrer">ARTIQ-2</a>
+{% end %}
+
+
+{% layout_card(title="The ARTIQ experiment control system") %}
+&nbsp;
+
+<a href="/docs/artiq/artiq_overview.pdf" target="_blank" rel="noopener noreferrer">View slides</a>
+{% end %}
+
+
+{% layout_card(title="Timing control in ARTIQ") %}
+&nbsp;
+
+<a href="/docs/artiq/slides_timing.pdf" target="_blank" rel="noopener noreferrer">View slides</a>
+{% end %}
+
+</div>
+
+
+
+{{ layout_separator(separator_title="Announcements, community support and discussions") }}
+
+
+
+<div class="row mt-5">
+
+{% layout_card(src="images/mattermost@2x.png", css="col-12 col-md-3 text-center") %}
+<a href="http://chat.m-labs.hk/" target="_blank" rel="noopener noreferrer">Mattermost live chat</a>
+
+<small>(bridged to IRC)</small>
+{% end %}
+
+
+{% layout_card(src="images/forum@2x.png", css="col-12 col-md-3 text-center") %}
+<a href="https://forum.m-labs.hk/" target="_blank" rel="noopener noreferrer">Forum</a>
+
+<small>(New!)</small>
+{% end %}
+
+
+{% layout_card(src="images/irc@2x.png", css="col-12 col-md-3 text-center") %}
+<a href="https://webchat.freenode.net/" target="_blank" rel="noopener noreferrer">IRC: #m-labs</a>
+
+<small>on Freenode</small>
+{% end %}
+
+
+{% layout_card(src="images/github@2x.png", css="col-12 col-md-3 text-center") %}
+<a href="https://github.com/m-labs/artiq" target="_blank" rel="noopener noreferrer">Source code repository</a>
+
+<small>&nbsp;</small>
+{% end %}
+
+</div>
+
+
+
+<div class="row d-flex align-items-center mt-5 mb-5">
+
+{% layout_div(css="col-12 col-md-6") %}
+##### Commercial support available
+
+**Sinara hardware purchases, ports to your hardware, feature development, technical support, bugfixing**
+
+contact sales@m-***s.hk
+
+We welcome inquiries from research groups of all sizes.<br><a href="https://github.com/m-labs/artiq/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Afor-contract" target="_blank" rel="noopener noreferrer">Proposed extensions</a>
+
+{% end %}
+
+<div class="col-12 col-md-6">
+
+{% layout_icon_label(src="images/directory@2x.png") %}
+<a href="https://ssl.serverraum.org/lists/listinfo/artiq" target="_blank" rel="noopener noreferrer">Public mailing list</a>
+{% end %}
+
+
+{% layout_icon_label(src="images/press@2x.png") %}
+NIST press release
+<br>
+<a href="https://www.nist.gov/news-events/news/2015/01/open-source-software-quantum-information" target="_blank" rel="noopener noreferrer">Open-Source Software for Quantum Information</a>
+{% end %}
+
+</div>
+
+</div>
+

content/experiment-control/sinara-core.md

@@ -7,7 +7,8 @@ template = "page.html"
 title = "Sinara hardware"
 +++
 
-{% textimg(src="images/sinara-hardware@2x.png", alt="", bodyleft=true, customcss="row d-flex align-items-center mb-4 pb-2", shadow=false, md=true) %}
+
+{% layout_text_img(src="images/sinara-hardware@2x.png", alt="", textleft=true, shadow=false) %}
 
 The first ARTIQ core devices used hardware built in-house by physicists (based on a Xilinx KC705 development board with custom FMC cards). 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.
 
@@ -18,7 +19,8 @@ Kasli and EEMs can be ordered now. We can deliver a rack-mountable crate that co
 {% end %}
 
 
-{% textimg(src="images/kasli@2x.png", alt="sinara crate small", md=true, shadow=false) %}
+
+{% layout_text_img(src="images/kasli@2x.png", alt="", shadow=false) %}
 
 ##### Kasli
 
@@ -29,7 +31,8 @@ One of the main devices in the Sinara family is the Kasli core device. It contai
 {% end %}
 
 
-{% textimg(src="images/isolated-ttl@2x.png", alt="", bodyleft=true, customcss="row d-flex align-items-center mb-4 pb-2", shadow=false, md=true) %}
+
+{% layout_text_img(src="images/isolated-ttl@2x.png", alt="", textleft=true, shadow=false) %}
 
 ##### Isolated TTL I/O EEMs
 
@@ -40,7 +43,8 @@ More information: <a href="https://github.com/sinara-hw/DIO_BNC/wiki" target="_b
 {% end %}
 
 
-{% textimg(src="images/LVDS@2x.png", alt="sinara crate small", md=true, shadow=false) %}
+
+{% layout_text_img(src="images/LVDS@2x.png", alt="", shadow=false) %}
 
 ##### LVDS I/O EEM
 
@@ -52,7 +56,8 @@ Each RJ45 supplies 4 LVDS DIOs. The direction (input/output) is individually sel
 {% end %}
 
 
-{% textimg(src="images/Banker-TTL-1@2x.png", alt="", bodyleft=true, customcss="row d-flex align-items-center mb-4 pb-2", shadow=false, md=true) %}
+
+{% layout_text_img(src="images/Banker-TTL-1@2x.png", alt="", textleft=true, shadow=false) %}
 
 ##### Banker 128-channel TTL I/O expander
 
@@ -67,7 +72,8 @@ Interfaces include:
 {% end %}
 
 
-{% textimg(src="images/Banker-TTL-2@2x.png", alt="", bodyleft=true, customcss="row d-flex align-items-center mb-4 pb-2", shadow=false, md=true) %}
+
+{% layout_text_img(src="images/Banker-TTL-2@2x.png", alt="", textleft=true, shadow=false) %}
 
 All outputs can be configured either as 3.3 or 5V. They can drive 50R load when set to 5V. FPGA can is configured from on-board FLASH. FLASH can be updated over I2C or with the on-board SPI connector.
 
@@ -85,7 +91,8 @@ There are several DIN-rail compatible modules for use with Banker. They are inte
 {% end %}
 
 
-{% textimg(src="images/Urukul-DDS@2x.png", alt="sinara crate small", md=true, shadow=false) %}
+
+{% layout_text_img(src="images/Urukul-DDS@2x.png", alt="", shadow=false) %}
 
 ##### Urukul DDS card
 
@@ -100,7 +107,8 @@ In regular mode, various DDS features are supported, including frequency, phase
 {% end %}
 
 
-{% textimg(src="images/Zotino-DAC@2x.png", alt="", bodyleft=true, customcss="row d-flex align-items-center mb-4 pb-2", shadow=false, md=true) %}
+
+{% layout_text_img(src="images/Zotino-DAC@2x.png", alt="", textleft=true, shadow=false) %}
 
 ##### Zotino DAC card
 
@@ -115,7 +123,8 @@ It is also possible to connect the Zotino using a HD68 cable to an external crat
 {% end %}
 
 
-{% textimg(src="images/Sampler-ADC@2x.png", alt="sinara crate small", md=true, shadow=false) %}
+
+{% layout_text_img(src="images/Sampler-ADC@2x.png", alt="", shadow=false) %}
 
 ##### Sampler ADC card
 
@@ -130,7 +139,8 @@ Note that update rate specification on this page is for the hardware only; ARTIQ
 {% end %}
 
 
-{% textimg(src="images/Grabber-camera-interface@2x.png", alt="", bodyleft=true, customcss="row d-flex align-items-center mb-4 pb-2", shadow=false, md=true) %}
+
+{% layout_text_img(src="images/Grabber-camera-interface@2x.png", alt="", textleft=true, shadow=false) %}
 
 ##### Grabber camera interface
 
@@ -143,7 +153,8 @@ In the FPGA, frame data streamed through "ROI engines". Each ROI engine gates on
 {% end %}
 
 
-{% textimg(src="images/clocker@2x.png", alt="sinara crate small", md=true, shadow=false) %}
+
+{% layout_text_img(src="images/clocker@2x.png", alt="", shadow=false) %}
 
 ##### Clocker
 
@@ -154,17 +165,29 @@ A low-noise clock distribution module that can be used to distribute low jitter
 {% end %}
 
 
-{% layoutsmall(title="Purchasing Sinara hardware") %}
-<p class="mb-5">
-  Kasli and EEMs can be ordered now. We can deliver a rack-mountable crate that contains all the cards, is fully tested, and is ready to be connected to your experiment and computer network.
-  <br><br>
-  Contact sales@m-***s.hk with your requirements and we will establish a quote.
-</p>
+
+{{ layout_separator(separator_title="Purchasing Sinara hardware") }}
+
+
+
+{% layout_centered_content(min_width=true) %}
+
+##### Kasli and EEMs can be ordered now
+
+We can deliver a rack-mountable crate that contains all the cards, is fully tested, and is ready to be connected to your experiment and computer network.
+
+Contact sales@m-***s.hk with your requirements and we will establish a quote.
+
 {% end %}
 
 
-{% layoutsmall(title="Metlino and Sayma") %}
-<p>
-  For more demanding experiments, we have been developing the Metlino and Sayma system. One Sayma card includes 8 channels of 2.4GSPS 16-bit DACs and a Kintex Ultrascale FPGA. The FPGA synthesizes waveforms for the DACs and our gateware supports two-tone direct digital synthesis and shaping of the waveform parameters with splines. Multiple Sayma cards can be installed in a MicroTCA chassis together with one Metlino master. Clock synchronization will be supported.
-</p>
+
+{% layout_centered_content(min_width=true) %}
+
+##### Metlino and Sayma
+
+For more demanding experiments, we have been developing the Metlino and Sayma system. One Sayma card includes 8 channels of 2.4GSPS 16-bit DACs and a Kintex Ultrascale FPGA. The FPGA synthesizes waveforms for the DACs and our gateware supports two-tone direct digital synthesis and shaping of the waveform parameters with splines.
+
+Multiple Sayma cards can be installed in a MicroTCA chassis together with one Metlino master. Clock synchronization will be supported.
+
 {% end %}

content/gateware/migen.md

@@ -9,89 +9,74 @@ logo_size = 125
 title = "Migen"
 +++
 
-{% centerp(safe=true) %}
-<h5 class="mb-5">Migen is a Python-based tool that automates further the VLSI design process.</h5>
+
+{% layout_centered_content() %}
+##### Migen is a Python-based tool that automates further the VLSI design process.
 {% end %}
 
 
-{% layoutlr1() %}
+<div class="row d-flex align-items-center mt-5 mb-5">
+
+{% layout_div(css="col-12 col-md-6") %}
+
+Despite being faster than schematics entry, hardware design with Verilog and VHDL remains tedious and inefficient for several reasons. The event-driven model introduces issues and manual coding that are unnecessary for synchronous circuits, which represent the lion's share of today's logic designs. Counter-intuitive arithmetic rules result in steeper learning curves and provide a fertile ground for subtle bugs in designs. Finally, support for procedural generation of logic (metaprogramming) through "generate" statements is very limited and restricts the ways code can be made generic, reused and organized.
+
+{% end %}
+
+{% layout_div(css="col-12 col-md-6") %}
+
+To address those issues, we have developed the Migen FHDL library that replaces the event-driven paradigm with the notions of combinatorial and synchronous statements, has arithmetic rules that make integers always behave like mathematical integers, and most importantly allows the design's logic to be constructed by a Python program. This last point enables hardware designers to take advantage of the richness of the Python language - object oriented programming, function parameters, generators, operator overloading, libraries, etc. - to build well organized, reusable and elegant designs.
+
+{% end %}
 
-<div class="col-12 col-md-6">
-  <p>
-    Despite being faster than schematics entry, hardware design with Verilog and VHDL remains tedious and inefficient for several reasons. The event-driven model introduces issues and manual coding that are unnecessary for synchronous circuits, which represent the lion's share of today's logic designs. Counter-intuitive arithmetic rules result in steeper learning curves and provide a fertile ground for subtle bugs in designs. Finally, support for procedural generation of logic (metaprogramming) through "generate" statements is very limited and restricts the ways code can be made generic, reused and organized.
-  </p>
 </div>
 
-<div class="col-12 col-md-6">
-  <p>
-    To address those issues, we have developed the Migen FHDL library that replaces the event-driven paradigm with the notions of combinatorial and synchronous statements, has arithmetic rules that make integers always behave like mathematical integers, and most importantly allows the design's logic to be constructed by a Python program. This last point enables hardware designers to take advantage of the richness of the Python language - object oriented programming, function parameters, generators, operator overloading, libraries, etc. - to build well organized, reusable and elegant designs.
-  </p>
-</div>
+
+{% layout_centered_content(min_width=true) %}
+
+Other Migen libraries are built on FHDL and provide various tools such as a system-on-chip interconnect infrastructure, a dataflow programming system, a more traditional high-level synthesizer that compiles Python routines into state machines with datapaths, and a simulator that allows test benches to be written in Python.
+
+Migen is the foundation for MiSoC.
 
 {% end %}
 
 
-{% layoutlr1() %}
-<div class="col-12 col-md-8 mx-auto">
+{% layout_centered_content(min_width=true, force_left=true, card=true) %}
 
-  <p class="mt-5">Other Migen libraries are built on FHDL and provide various tools such as a system-on-chip interconnect infrastructure, a dataflow programming system, a more traditional high-level synthesizer that compiles Python routines into state machines with datapaths, and a simulator that allows test benches to be written in Python.</p>
+##### More...
 
-  <p>Migen is the foundation for MiSoC.</p>
+You can find the Migen source <a href="http://github.com/m-labs/migen" target="_blank" rel="noopener noreferrer">here</a>, released under the permissive BSD license.
 
-</div>
+**Documentation** (note: sometimes out of date - please help!)
 
-<div class="col-12 col-md-8 mx-auto my-5">
+- <a href="https://m-labs.hk/migen/manual" target="_blank" rel="noopener noreferrer">User guide
+- <a href="https://m-labs.hk/migen/tutorial.pdf" target="_blank" rel="noopener noreferrer">Tutorial: An introduction to Migen
+- <a href="https://m-labs.hk/migen/slides.pdf" target="_blank" rel="noopener noreferrer">Lecture slides
+- <a href="https://www.wdj-consulting.com/blog/migen-port.html" target="_blank" rel="noopener noreferrer">Tutorial "Porting a New Board To Migen"</a> by cr1901
+- <a href="https://lab.whitequark.org/notes/2016-10-18/implementing-an-uart-in-verilog-and-migen/" target="_blank" rel="noopener noreferrer">"Implementing a UART in Verilog and Migen"</a> by whitequark
+- <a href="https://lab.whitequark.org/notes/2016-10-19/implementing-a-simple-soc-in-migen/" target="_blank" rel="noopener noreferrer">"Implementing a simple SoC in Migen"</a> by whitequark
+- <a href="http://blog.lambdaconcept.com/doku.php?id=migen:tutorial" target="_blank" rel="noopener noreferrer">Migen Step by Step Tutorial</a> by LambdaConcept
 
-  <div class="card shadow py-4 px-3">
-    <h5 class="mb-1">More...</h5>
-    <p>You can find the Migen source <a href="http://github.com/m-labs/migen" target="_blank" rel="noopener noreferrer">here</a>, released under the permissive BSD license.</p>
-    <p class="mb-1"><strong>Documentation</strong> (note: sometimes out of date - please help!)</p>
-    <ul class="ml-0 mb-0 th">
-      <li class="pt-2 pb-2"><a href="https://m-labs.hk/migen/manual" target="_blank" rel="noopener noreferrer">User guide</a></li>
-      <li class="pt-2 pb-2"><a href="https://m-labs.hk/migen/tutorial.pdf" target="_blank" rel="noopener noreferrer">Tutorial: An introduction to Migen</a></li>
-      <li class="pt-2 pb-2"><a href="https://m-labs.hk/migen/slides.pdf" target="_blank" rel="noopener noreferrer">Lecture slides</a></li>
-      <li class="pt-2 pb-2"><a href="https://www.wdj-consulting.com/blog/migen-port.html" target="_blank" rel="noopener noreferrer">Tutorial "Porting a New Board To Migen"</a> by cr1901</li>
-      <li class="pt-2 pb-2"><a href="https://lab.whitequark.org/notes/2016-10-18/implementing-an-uart-in-verilog-and-migen/" target="_blank" rel="noopener noreferrer">"Implementing a UART in Verilog and Migen"</a> by whitequark</li>
-      <li class="pt-2 pb-2"><a href="https://lab.whitequark.org/notes/2016-10-19/implementing-a-simple-soc-in-migen/" target="_blank" rel="noopener noreferrer">"Implementing a simple SoC in Migen"</a> by whitequark</li>
-      <li class="pt-2 pb-2"><a href="http://blog.lambdaconcept.com/doku.php?id=migen:tutorial" target="_blank" rel="noopener noreferrer">Migen Step by Step Tutorial</a> by LambdaConcept</li>
-    </ul>
-  </div>
-
-</div>
 {% end %}
 
 
-{% layoutlr1() %}
-<div class="col-12 col-md-6">
 
-  <h5 class="mb-1">MiSoC</h5>
+{% layout_text_img(src="images/side-graphic-min.png", alt="", textleft=true, shadow=false) %}
 
-  <p>Built on Migen, MiSoC provides a high performance, flexible and lightweight solution to build system-on-chips for various applications.</p>
+##### MiSoC
 
-  <ul class="ml-0 th">
-    <li class="pt-2 pb-2">
-      CPU options:
-      <ul>
-        <li class="pt-2 pb-2">LatticeMico32, modified to include an optional MMU (experimental).</li>
-        <li class="pt-2 pb-2">mor1kx, a better OpenRISC implementation.</li>
-      </ul>
-    </li>
-    <li class="pt-2 pb-2">Memory controller supports SDR, DDR, LPDDR, DDR2 and DDR3.</li>
-    <li class="pt-2 pb-2">Provided peripherals: UART, GPIO, timer, GPIO, NOR flash controller, SPI flash controller, Ethernet MAC, and more.</li>
-    <li class="pt-2 pb-2">High performance: on Spartan-6, 83MHz system clock frequencies, 10+Gbps DDR SDRAM bandwidth, 1080p 32bpp framebuffer, etc.</li>
-    <li class="pt-2 pb-2">Low resource usage: basic implementation fits easily in Spartan-6 LX9.</li>
-    <li class="pt-2 pb-2">Portable and easy to customize thanks to Python- and Migen-based architecture.</li>
-    <li class="pt-2 pb-2">Design new peripherals using Migen and benefit from automatic CSR maps and logic, simplified DMAs, etc.</li>
-    <li class="pt-2 pb-2">Possibility to encapsulate legacy Verilog/VHDL code.</li>
-  </ul>
-
-  <p>The MiSoC source is <a href="http://github.com/m-labs/misoc" target="_blank" rel="noopener noreferrer">here</a>, mostly covered by the permissive BSD license.</p>
-
-</div>
+Built on Migen, MiSoC provides a high performance, flexible and lightweight solution to build system-on-chips for various applications.
 
 
-<div class="d-none d-md-block col-md-6">
-  <img src="/images/side-graphic-min.png">
-</div>
+- CPU options:
+  - LatticeMico32, modified to include an optional MMU (experimental).
+  - mor1kx, a better OpenRISC implementation.
+- Memory controller supports SDR, DDR, LPDDR, DDR2 and DDR3.
+- Provided peripherals: UART, GPIO, timer, GPIO, NOR flash controller, SPI flash controller, Ethernet MAC, and more.
+- High performance: on Spartan-6, 83MHz system clock frequencies, 10+Gbps DDR SDRAM bandwidth, 1080p 32bpp framebuffer, etc.
+- Low resource usage: basic implementation fits easily in Spartan-6 LX9.
+- Portable and easy to customize thanks to Python- and Migen-based architecture.
+- Design new peripherals using Migen and benefit from automatic CSR maps and logic, simplified DMAs, etc.
+- Possibility to encapsulate legacy Verilog/VHDL code.
 
-{% end %}
+{% end %}

content/software/smoltcp.md

@@ -1,9 +1,19 @@
 +++
 title = "smoltcp"
 weight = 2
+template = "page.html"
 +++
 
-{% layoutsmall(title="smoltcp is a standalone, event-driven TCP/IP stack that is designed for bare-metal, real-time systems.") %}
+
+{% layout_centered_content(min_width=true) %}
+
+##### smoltcp is a standalone, event-driven TCP/IP stack that is designed for bare-metal, real-time systems.
+
+{% end %}
+
+
+
+{% layout_centered_content(min_width=true, force_left=true) %}
 
 Its design goals are simplicity and robustness. Its design anti-goals include complicated compile-time computations, such as macro or type tricks, even at cost of performance degradation.
 
@@ -18,4 +28,4 @@ The source code is available <a href="https://github.com/m-labs/smoltcp" rel="no
 
 **Commercial support for smoltcp is available.** Email sales@m-l***s.hk.
 
-{% end %}
+{% end %}

content/software/solvespace.md

@@ -4,9 +4,10 @@ weight = 1
 template = "page.html"
 
 [extra]
-layoutcss = "col-12 col-md-10 mx-auto"
+layout_css = "col-12 col-md-10 mx-auto"
 +++
 
+
 {% div() %}
 <script src="/js/hammer-2.0.8.js"></script>
 <script src="/js/three-r76.js"></script>
@@ -14,108 +15,96 @@ layoutcss = "col-12 col-md-10 mx-auto"
 {% end %}
 
 
-{% centerp(markdown=true) %}
+
+{% layout_centered_simple() %}
 ##### What is SolveSpace?
 {% end %}
 
 <a href="http://solvespace.com/" target="_blank" rel="noopener noreferrer">SolveSpace</a> is a libre and open-source parametric computer-aided design application that uses a NURBS geometric kernel, allowing it to represent curved surfaces exactly. It was originally released by <a href="http://cq.cx/" target="_blank" rel="noopener noreferrer">Jonathan Westhues</a> under the GPLv3 license and is now further developed at M-Labs.
 
 
-{% centerp(markdown=true, css="mt-5") %}
+
+{% layout_centered_simple(css="mt-5") %}
 ##### What can be done with SolveSpace?
 {% end %}
 
 SolveSpace is primarily useful for mechanical design. At M-Labs, we use it to design vacuum chambers as well as custom fittings and fixtures. The models can then be exported as STEP or PDF with dimensions and sent to a machine shop for manufacturing.
 
 
-{% centerp(markdown=true, css="mt-5") %}
+
+{% layout_centered_simple(css="mt-5") %}
 **Fittings and adapters**
 {% end %}
 
 Of course, most vacuum chambers would have some standard flanges. These can be easily modelled using a single sketch and a lathe operation:
 
-{% layoutlr1() %}
 
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center">
 
-  <img class="img-fluid" src="/images/kf25-section.png" width="400" height="100%">
+{% layout_treejs(two=true, css="row d-flex align-items-center mt-5 mb-1") %}
+<img class="img-fluid" src="/images/kf25-section.png" width="400" height="100%">
 
-  <div id="kf25"></div>
-  <script src="/js/models/kf25.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("kf25");
-      var params = {width: 400, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)};
-      node.parentNode.replaceChild(solvespace(solvespace_model_kf25, params), node);
-    })();
-  </script>
-
-</div>
+<div id="kf25"></div>
+<script src="/js/models/kf25.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("kf25");
+    var params = {width: 400, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)};
+    node.parentNode.replaceChild(solvespace(solvespace_model_kf25, params), node);
+  })();
+</script>
 {% end %}
 
+*(The illustration on the right is "live"; it can be panned, rotated and scaled.)*
 
 
-{% centerp(markdown=true, css="mt-3") %}
-&nbsp;
-{% end %}
-
-(The illustration on the right is "live"; it can be panned, rotated and scaled.)
 
 In a similar way, an NW160 viewport and an adapter with an NW160 flange, a KF40, two KF25 and two KF16 ports were designed:
 
-{% layoutlr1() %}
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center">
+{% layout_treejs(two=true) %}
+<div id="viewport"></div>
+<script src="/js/models/viewport.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("viewport");
+    var params = {width: 400, height: 300, scale: 3};
+    node.parentNode.replaceChild(solvespace(solvespace_model_viewport, params), node);
+  })();
+</script>
 
-  <div id="viewport"></div>
-  <script src="/js/models/viewport.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("viewport");
-      var params = {width: 400, height: 300, scale: 3};
-      node.parentNode.replaceChild(solvespace(solvespace_model_viewport, params), node);
-    })();
-  </script>
-
-  <div id="multiport"></div>
-  <script src="/js/models/multiport.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("multiport");
-      var params = {width: 400, height: 300, scale: 3};
-      node.parentNode.replaceChild(solvespace(solvespace_model_multiport, params), node);
-    })();
-  </script>
-
-</div>
+<div id="multiport"></div>
+<script src="/js/models/multiport.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("multiport");
+    var params = {width: 400, height: 300, scale: 3};
+    node.parentNode.replaceChild(solvespace(solvespace_model_multiport, params), node);
+  })();
+</script>
 {% end %}
 
 
 
-{% centerp(markdown=true, css="mt-5") %}
+{% layout_centered_simple(css="mt-5") %}
 **A vacuum chamber**
 {% end %}
 
 The fittings above were designed to be used with a cylindrical vacuum chamber, 200mm long with two NW160 flanges, two KF40 and one KF25 ports:
 
-{% layoutlr1() %}
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center align-items-center">
-
-  <div id="chamber"></div>
-  <script src="/js/models/chamber.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("chamber");
-      var params = {width: 800, height: 600, scale: 3};
-      node.parentNode.replaceChild(solvespace(solvespace_model_chamber, params), node);
-    })();
-  </script>
-
-</div>
+{% layout_treejs() %}
+<div id="chamber"></div>
+<script src="/js/models/chamber.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("chamber");
+    var params = {width: 800, height: 600, scale: 3};
+    node.parentNode.replaceChild(solvespace(solvespace_model_chamber, params), node);
+  })();
+</script>
 {% end %}
 
 
 
-{% centerp(markdown=true, css="mt-5") %}
+{% layout_centered_simple(css="mt-5") %}
 **Cryocooler refilling fixture**
 {% end %}
 
@@ -123,101 +112,86 @@ To repair a broken Ricor K526S crycooler, it was necessary to disassemble it, wh
 
 First, the cryocooler and its cold head were modelled to verify fits:
 
-{% layoutlr1() %}
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center mb-3">
+{% layout_treejs(two=true) %}
+<div id="k526s-body"></div>
+<script src="/js/models/k526s-body.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("k526s-body");
+    var params = {width: 400, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)};
+    node.parentNode.replaceChild(solvespace(solvespace_model_k526s_body, params), node);
+  })();
+</script>
 
-  <div id="k526s-body"></div>
-  <script src="/js/models/k526s-body.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("k526s-body");
-      var params = {width: 400, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)};
-      node.parentNode.replaceChild(solvespace(solvespace_model_k526s_body, params), node);
-    })();
-  </script>
-
-  <div id="k526s-head"></div>
-  <script src="/js/models/k526s-head.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("k526s-head");
-      var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)};
-      node.parentNode.replaceChild(solvespace(solvespace_model_k526s_head, params), node);
-    })();
-  </script>
-
-</div>
+<div id="k526s-head"></div>
+<script src="/js/models/k526s-head.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("k526s-head");
+    var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)};
+    node.parentNode.replaceChild(solvespace(solvespace_model_k526s_head, params), node);
+  })();
+</script>
 {% end %}
 
+
+
 Then, a fixture was designed, shown below with a cutout (blue). It consists of a bracket, a piston case that screws into the bracket (the thread is not modelled), a piston with a retaining screw, a retaining washer, a Swagelok fitting attached to the orange port (not modelled), and a few compression gaskets (also not modelled). The bracket and the piston case hold the cryocooler The retaining washer prevents the piston from being ejected by high pressure helium and, conversely, together with another washer prevents the piston from being sucked in and blocking the gas flow during evacuation.
 
-{% layoutlr1() %}
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center align-items-center mb-3">
-
-  <div id="k526s-fixture"></div>
-  <script src="/js/models/k526s-fixture.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("k526s-fixture");
-      var params = {width: 800, height: 400, scale: 12};
-      node.parentNode.replaceChild(solvespace(solvespace_model_k526s_fixture, params), node);
-    })();
-  </script>
-
-</div>
+{% layout_treejs() %}
+<div id="k526s-fixture"></div>
+<script src="/js/models/k526s-fixture.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("k526s-fixture");
+    var params = {width: 800, height: 400, scale: 12};
+    node.parentNode.replaceChild(solvespace(solvespace_model_k526s_fixture, params), node);
+  })();
+</script>
 {% end %}
 
+
+
 The KF25 adapter for the cold head is a much simpler device:
 
-{% layoutlr1() %}
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center mb-5">
+{% layout_treejs(two=true) %}
+<div id="k526s-adapter"></div>
+<script src="/js/models/k526s-adapter.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("k526s-adapter");
+    var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)};
+    node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter, params), node);
+  })();
+</script>
 
-  <div id="k526s-adapter"></div>
-  <script src="/js/models/k526s-adapter.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("k526s-adapter");
-      var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)};
-      node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter, params), node);
-    })();
-  </script>
-
-  <div id="k526s-adapter-assy"></div>
-  <script src="/js/models/k526s-adapter-assy.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("k526s-adapter-assy");
-      var params = {width: 400, height: 300, scale: 8};
-      node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter_assy, params), node);
-    })();
-  </script>
-
-</div>
+<div id="k526s-adapter-assy"></div>
+<script src="/js/models/k526s-adapter-assy.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("k526s-adapter-assy");
+    var params = {width: 400, height: 300, scale: 8};
+    node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter_assy, params), node);
+  })();
+</script>
 {% end %}
 
 
 
-{% centerp(markdown=true) %}
+{% layout_centered_content(css="row d-flex align-items-center mt-5 mb-5 pt-5") %}
 ##### Ongoing development by M-Labs
 {% end %}
 
-
 As originally released, SolveSpace was far ahead almost every other FLOSS CAD by virtue of its parametric nature, exact internal representation of curves and a codebase easy to work with. (The only other FLOSS parametric CAD that uses a NURBS representation, including NURBS booleans, is FreeCAD.) While it was already suitable for practical work, it had a much greater unrealized potential.
 
 Thus, M-Labs has developed many additional features:
 
 - Native Linux (GTK) and OS X ports;
-
 - stippling as well as <a href="https://m-labs.hk/solvespace/images/hiddenline.gif" target="_blank" rel="noopener noreferrer">outline and hidden line</a> styling in preparation for export of shop drawings according to ISO or another standard;
-
 - WebGL export using Three.js, which is how the interactive models on this page work;
-
 - DXF export that preserves the ability to edit the drawing afterwards, by mapping parametric constraints to DXF dimensions and grouping the lines;
-
 - DXF import that automatically infers (some) constraints, such as horizontal/vertical, point-coincident, linear and angular dimensions from DXF geometry and dimensions;
-
 - internationalization;
-
 - and many other minor ones.
 
 

sass/css/_base.scss

@@ -125,7 +125,8 @@ a {
 
 .dropdown-menu {
   border: none;
-  margin-top: 12px;
+  margin-top: 0;
+  padding-top: 0;
 }
 .dropdown-item {
   &:hover,
@@ -175,8 +176,35 @@ ul.th li::before {
   margin-left: -1em;
 }
 
+
+ul:not(.navbar-nav) {
+  list-style: none;
+  margin-left: 0!important;
+}
+
+ul:not(.navbar-nav) li::before {
+  content: "\2022";
+  color: $brand-color;
+  font-weight: bold;
+  display: inline-block;
+  width: 1em;
+  margin-left: -1em;
+}
+ul:not(.navbar-nav) li {
+  padding: .5rem 0;
+}
+
+
 .bg-white-shadow {
   background: url(../images/migen-links@2x.png);
   background-repeat: no-repeat;
   background-size: 730px 262px;
+}
+
+.badge-primary {
+  background-color: $brand-color;
+}
+
+.modal-lg {
+  max-width: 90%;
 }

sass/css/_layout.scss

@@ -106,6 +106,15 @@ h3, h2, h1 {
       }
     }
   }
+
+  .dropdown-menu {
+    padding-top: .5rem;
+    margin-top: 12px;
+  }
+
+  .modal-lg {
+    max-width: 70%;
+  }
 }
 
 // Extra large devices (large desktops, 1200px and up)

static/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

static/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

templates/_base.html

@@ -23,6 +23,23 @@
     <meta property="og:image" content={{ get_url(path='images/logo@2x.png', cachebust=true) }}>
     {% block meta %}{% endblock meta %}
 
+    <link rel="manifest" href="/manifest.json" />
+
+    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-114x114.png') }}" sizes="114x114">
+    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-120x120.png') }}" sizes="120x120">
+    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-144x144.png') }}" sizes="144x144">
+    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-152x152.png') }}" sizes="152x152">
+    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-180x180.png') }}" sizes="180x180">
+    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-57x57.png') }}" sizes="57x57">
+    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-60x60.png') }}" sizes="60x60">
+    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-72x72.png') }}" sizes="72x72">
+    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-76x76.png') }}" sizes="76x76">
+    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon.png') }}">
+
+    <link rel="icon" href="{{ get_url(path='/favicon-16x16.png') }}" sizes="16x16">
+    <link rel="icon" href="{{ get_url(path='/favicon-32x32.png') }}" sizes="32x32">
+    <link rel="icon" href="{{ get_url(path='/favicon-96x96.png') }}" sizes="96x96">
+
     <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="shortcut icon" type="image/x-icon">
     <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="icon" type="image/x-icon">
 
@@ -68,7 +85,7 @@
                     </a>
                     <div class="dropdown-menu shadow-none shadow-lg text-right text-lg-left" aria-labelledby="navbarDropdown">
                       {% for page in subsection.pages %}
-                        <a class="dropdown-item pt-3 pb-3 {% if current_path == page.path %}active{% endif %}" href="{{ page.permalink }}">{{ page.title }}</a>
+                        <a class="dropdown-item pt-2 pb-2 pt-sm-3 pb-sm-3 {% if current_path == page.path %}active{% endif %}" href="{{ page.permalink }}">{{ page.title }}</a>
                       {% endfor %}
                     </div>
                   </li>
@@ -111,73 +128,7 @@
 
       {% block footer_contact %}
 
-        <div class="row pt-5 pb-5">
-
-          <div class="col-12 col-md-6 pb-5 pb-md-0">
-
-            <h5 class="pb-3">Sales inquiries</h5>
-
-            <p>
-              To purchase ARTIQ Sinara hardware, software and gateware development services, or technical support: contact sales@m-***s.hk.
-            </p>
-
-          </div>
-
-          <div class="col-12 col-md-6">
-
-            <h5 class="pb-3">Technical inquiries</h5>
-
-            <p>
-              Ask on the <a href="https://chat.m-labs.hk/" target="_blank" rel="noopener noreferrer">live chat room</a> (bridged to the IRC channel #m-labs on Freenode), or go to <a href="https://forum.m-labs.hk/" rel="noopener noreferrer" target="_blank">forum.m-labs.hk</a>, a place to discuss all things ARTIQ, (n)Migen, MiSoC and HeavyX with the community.
-            </p>
-
-          </div>
-
-        </div>
-
-
-        <div class="row pb-5">
-
-          <div class="col-12 col-md-6 pb-5 pb-md-0">
-
-            <h5 class="pb-3">Office</h5>
-
-            <p>
-              <strong>M-Labs Limited</strong>
-              <br>
-              G/F Kam Hoi Mansion, 31 Pan Hoi Street, Quarry Bay, Hong Kong
-              <br>
-              <br>
-
-              This is part of the building complex numbered 15-53A on the street entrance.
-              <br>
-              <br>
-
-              <strong>MTR:</strong> Island Line, Quarry Bay, exit A
-              <br>
-              <strong>Tramway:</strong> Mount Parker Road
-              <br>
-              <strong>Bus:</strong> Sunway Gardens / Westlands Road / Pan Hoi Street
-              <br>
-              <br>
-
-              <strong>Tel:</strong> +852 59362721
-            </p>
-
-            <p>
-            </p>
-
-          </div>
-
-          <div class="col-12 col-md-6">
-
-            <div class="card">
-              <img class="card-img-top img-fluid" src="{{ get_url(path='images/map@2x.jpg', cachebust=true) }}" alt="map">
-            </div>
-
-          </div>
-
-        </div>
+        {% include "includes/footer_contact_direction.html" %}
 
       {% endblock %}
 
@@ -189,6 +140,20 @@
 
     <!-- ./FOOTER -->
 
+    <!-- MODAL for enlarged picture -->
+    <div class="modal" id="modalEnlarged" tabindex="-1" role="dialog">
+      <div class="modal-dialog  modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-body">
+            <img src="" id="enlarged" class="img-fluid">
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
 
     <script src="{{ get_url(path='js/jquery-3.3.1.slim.min.js', cachebust=true) }}"></script>
     <script src="{{ get_url(path='js/popper-1.14.7.min.js', cachebust=true) }}"></script>
@@ -202,6 +167,17 @@
 
     </script>
 
+    <script>
+      $(function () {
+        $('[data-popup]').click(function (evt) {
+          var _self = $(this);
+          var _img_enlarged = _self.data('nsrc');
+          $('#enlarged').attr('src', _img_enlarged);
+          $('#modalEnlarged').modal('show');
+        });
+      });
+    </script>
+
   </body>
 
 </html>

templates/customs/about-us.html

@@ -1,102 +0,0 @@
-{% extends 'section.html' %}
-
-
-{% block hero %}
-
-  <div class="container-fluid hero2 d-flex flex-column justify-content-center">
-
-    <div class="container">
-
-        <div class="row mt-4 mb-4">
-
-          <div class="col-12 text-center mt-n0 mt-lg-n5">
-
-            <h1>About us</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">
-
-      <div class="col-12 col-md-8 mx-auto">
-
-        {% block main_content %}
-
-          <div class="mb-5 pb-5 text-center ">
-
-            <h5 class="mb-3">History</h5>
-
-            <div class="row">
-
-              <div class="col-12">
-
-                <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">
-
-                <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="col-12">
-
-              <p>
-                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.
-              </p>
-
-            </div>
-
-          </div>
-
-          {% endblock %}
-
-      </div>
-
-    </div>
-
-  </main>
-
-
-  <div class="container-fluid hero3 d-flex flex-column justify-content-center">
-
-    <div class="container">
-
-        <div class="row">
-
-          <div class="col-12 text-center mt-0 mt-lg-5">
-
-            <h1>Contact us</h1>
-
-            <img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" width="100" align="ion">
-
-          </div>
-
-        </div>
-
-    </div>
-
-  </div>
-
-{% endblock %}

templates/customs/resources.html

@@ -1,252 +0,0 @@
-{% extends 'section.html' %}
-
-
-{% block hero %}
-
-  <div class="container-fluid hero2 d-flex flex-column justify-content-center">
-
-    <div class="container">
-
-        <div class="row mt-4 mb-4">
-
-          <div class="col-12 text-center mt-n0 mt-lg-n5">
-
-            <h1>Resources</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">
-
-      <div class="col-12 col-md-4">
-
-        <div class="card shadow mb-4">
-          <div class="card-body">
-            <div class="card-title">
-              <h5 class="mb-0">ARTIQ Documentation</h5>
-            </div>
-            <small>Beta (development) version</small>
-            <br><br>
-            <a href="https://m-labs.hk/artiq/manual-beta.pdf" target="_blank">PDF</a> | <a href="https://m-labs.hk/artiq/manual-beta/" target="_blank" rel="noopener noreferrer">HTML</a>
-          </div>
-        </div>
-
-      </div>
-
-      <div class="col-12 col-md-4">
-
-        <div class="card shadow mb-4">
-          <div class="card-body">
-            <div class="card-title">
-              <h5 class="mb-0">ARTIQ Documentation</h5>
-            </div>
-            <small>Stable version</small>
-            <br><br>
-            <a href="https://m-labs.hk/artiq/manual/" target="_blank">HTML</a>
-          </div>
-        </div>
-
-      </div>
-
-      <div class="col-12 col-md-4">
-
-        <div class="card shadow mb-4">
-          <div class="card-body">
-            <div class="card-title">
-              <h5 class="mb-0">ARTIQ Documentation</h5>
-            </div>
-            <small>Older manuals (HTML only)</small>
-            <br><br>
-            <a href="https://m-labs.hk/artiq/manual-release-3/" target="_blank" rel="noopener noreferrer">ARTIQ-3</a> | <a href="https://m-labs.hk/artiq/manual-release-2/" target="_blank" rel="noopener noreferrer">ARTIQ-2</a>
-          </div>
-        </div>
-
-      </div>
-
-      <div class="col-12 col-md-4">
-
-        <div class="card shadow mb-4">
-          <div class="card-body">
-            <div class="card-title">
-              <h5 class="mb-0">The ARTIQ experiment control system</h5>
-            </div>
-            <small></small>
-            <br><br>
-            <a href="/docs/artiq/artiq_overview.pdf" target="_blank" rel="noopener noreferrer">View slides</a>
-          </div>
-        </div>
-
-      </div>
-
-      <div class="col-12 col-md-4">
-
-        <div class="card shadow mb-4">
-          <div class="card-body">
-            <div class="card-title">
-              <h5 class="mb-0">Timing control in ARTIQ</h5>
-            </div>
-            <small></small>
-            <br><br>
-            <a href="/docs/artiq/slides_timing.pdf" target="_blank" rel="noopener noreferrer">View slides</a>
-          </div>
-        </div>
-
-      </div>
-
-    </div>
-
-  </main>
-
-
-  <div class="d-none container-fluid hero3 d-md-flex flex-column justify-content-center">
-
-    <div class="container">
-
-    </div>
-
-  </div>
-
-
-  <div class="container mt-4 mt-md-0">
-
-    <div class="row">
-
-      <div class="col-12 col-md-8 mx-auto text-center">
-
-        <h1>Announcements, community support and discussions</h1>
-
-        <img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" width="100" align="ion">
-
-      </div>
-
-    </div>
-
-
-    <div class="row mt-5">
-
-      <div class="col-12 col-md-3">
-
-        <div class="card shadow mb-4 text-center">
-          <div class="px-auto pt-4">
-            <img src="{{ get_url(path='images/mattermost@2x.png', cachebust=true) }}" width="40px">
-          </div>
-          <div class="card-body">
-            <a href="http://chat.m-labs.hk/" target="_blank" rel="noopener noreferrer">Mattermost live chat</a>
-            <br>
-            <small>(bridged to IRC)</small>
-          </div>
-        </div>
-
-      </div>
-
-      <div class="col-12 col-md-3">
-
-        <div class="card shadow mb-4 text-center">
-          <div class="px-auto pt-4">
-            <img src="{{ get_url(path='images/forum@2x.png', cachebust=true) }}" width="40px">
-          </div>
-          <div class="card-body">
-            <a href="https://forum.m-labs.hk/" target="_blank" rel="noopener noreferrer">Forum</a>
-            <br>
-            <small>(New!)</small>
-          </div>
-        </div>
-
-      </div>
-
-      <div class="col-12 col-md-3">
-
-        <div class="card shadow mb-4 text-center">
-          <div class="px-auto pt-4">
-            <img src="{{ get_url(path='images/irc@2x.png', cachebust=true) }}" width="40px">
-          </div>
-          <div class="card-body">
-            <a href="https://webchat.freenode.net/" target="_blank" rel="noopener noreferrer">IRC: #m-labs</a>
-            <br>
-            <small>on Freenode</small>
-          </div>
-        </div>
-
-      </div>
-
-      <div class="col-12 col-md-3">
-
-        <div class="card shadow mb-4 text-center">
-          <div class="px-auto pt-4">
-            <img src="{{ get_url(path='images/github@2x.png', cachebust=true) }}" width="40px">
-          </div>
-          <div class="card-body">
-            <a href="https://github.com/m-labs/artiq" target="_blank" rel="noopener noreferrer">Source code repository</a>
-            <br>
-            <small>&nbsp;</small>
-          </div>
-        </div>
-
-      </div>
-
-    </div>
-
-
-    <div class="row mt-5">
-
-      <div class="col-12">
-
-        <h5 class="py-3">Commercial support available</h5>
-
-      </div>
-
-      <div class="col-12 col-md-6">
-
-        <p>
-          <strong>Sinara hardware purchases, ports to your hardware, feature development, technical support, bugfixing</strong>
-          <br>contact sales@m-***s.hk
-        </p>
-
-        <p>
-          We welcome inquiries from research groups of all sizes.<br><a href="https://github.com/m-labs/artiq/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Afor-contract" target="_blank" rel="noopener noreferrer">Proposed extensions</a>
-        </p>
-
-      </div>
-
-      <div class="col-12 col-md-6 mt-4 mt-md-0">
-
-        <div class="d-flex mb-3">
-          <img src="{{ get_url(path='images/directory@2x.png', cachebust=true) }}" width="40px" height="40px">
-          <p class="pl-3">
-            <a href="https://ssl.serverraum.org/lists/listinfo/artiq" target="_blank" rel="noopener noreferrer">Public mailing list</a>
-          </p>
-        </div>
-
-        <div class="d-flex mb-3">
-          <img src="{{ get_url(path='images/press@2x.png', cachebust=true) }}" width="40px" height="40px">
-          <p class="pl-3">
-            <strong>NIST press release</strong>
-            <br>
-            <a href="https://www.nist.gov/news-events/news/2015/01/open-source-software-quantum-information" target="_blank" rel="noopener noreferrer">Open-Source Software for Quantum Information</a>
-          </p>
-        </div>
-
-      </div>
-
-    </div>
-
-  </div>
-
-{% endblock %}
-
-
-{% block footer_contact %}{% endblock %}

templates/includes/footer_contact_direction.html

@@ -0,0 +1,64 @@
+<div class="row pt-5 pb-5">
+
+  <div class="col-12 col-md-6 pb-5 pb-md-0">
+
+    <h5 class="pb-3">Sales inquiries</h5>
+
+    <p>
+      To purchase ARTIQ Sinara hardware, software and gateware development services, or technical support: contact sales@m-***s.hk.
+    </p>
+
+  </div>
+
+  <div class="col-12 col-md-6 pb-5 pb-md-0">
+
+    <h5 class="pb-3">Technical inquiries</h5>
+
+    <p>
+      Ask on the <a href="https://chat.m-labs.hk/" target="_blank" rel="noopener noreferrer">live chat room</a> (bridged to the IRC channel #m-labs on Freenode), or go to <a href="https://forum.m-labs.hk/" rel="noopener noreferrer" target="_blank">forum.m-labs.hk</a>, a place to discuss all things ARTIQ, (n)Migen, MiSoC and HeavyX with the community.
+    </p>
+
+  </div>
+
+</div>
+
+
+<div class="row pb-5">
+
+  <div class="col-12 col-md-6 pb-5 pb-md-0">
+
+    <h5 class="pb-3">Office</h5>
+
+    <p>
+      <strong>M-Labs Limited</strong>
+      <br>
+      G/F Kam Hoi Mansion, 31 Pan Hoi Street, Quarry Bay, Hong Kong
+      <br>
+      <br>
+
+      This is part of the building complex numbered 15-53A on the street entrance. <a href="{{ get_url(path='@/about-us/directions.md') }}">Directions</a>
+      <br>
+      <br>
+
+      <strong>MTR:</strong> Island Line, Quarry Bay, exit A
+      <br>
+      <strong>Tramway:</strong> Mount Parker Road
+      <br>
+      <strong>Bus:</strong> Sunway Gardens / Westlands Road / Pan Hoi Street
+      <br>
+      <br>
+
+      <strong>Tel:</strong> +852 59362721
+    </p>
+
+  </div>
+
+  <div class="col-12 col-md-6 pb-5 pb-md-0">
+
+    <div class="card">
+      <img class="card-img-top img-fluid" src="{{ get_url(path='images/map@2x.jpg', cachebust=true) }}" alt="map">
+    </div>
+
+  </div>
+
+</div>

templates/includes/separator_design.html

@@ -0,0 +1,23 @@
+<div class="container-fluid {% if not separator_rm_bg %}hero3{% else %}{% endif %} d-flex flex-column justify-content-center">
+
+  <div class="container">
+
+      <div class="row">
+
+        <div class="col-12 text-center mt-2 mt-lg-5 mb-2 mb-lg-5">
+
+          {% if separator_title %}
+
+            <h2>{{ separator_title }}</h2>
+
+            <img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" width="100" align="ion">
+
+          {% endif %}
+
+        </div>
+
+      </div>
+
+  </div>
+
+</div>

templates/page-contact.html

@@ -0,0 +1,8 @@
+{% extends 'page.html' %}
+
+
+{% block footer_contact %}
+
+  {% include "includes/footer_contact_direction.html" %}
+
+{% endblock %}

templates/page.html

@@ -2,8 +2,8 @@
 
 {% block styles %}
 <style>
-  h2, h5 {
-    margin-bottom: 3rem!important;
+  h5 {
+    margin-bottom: 2rem!important;
   }
 </style>
 {% endblock %}
@@ -20,13 +20,13 @@
           <div class="col-12 text-center mt-n0 mt-lg-n5">
 
             {% if page.extra and page.extra.logo %}
-            <img src="{{ get_url(path=page.extra.logo, cachebust=true) }}" alt="logo" {% if page.extra and page.extra.logo_size %}width="{{ page.extra.logo_size }}"{% endif %}>
+              <img src="{{ get_url(path=page.extra.logo, cachebust=true) }}" alt="logo" {% if page.extra and page.extra.logo_size %}width="{{ page.extra.logo_size }}"{% endif %}>
             {% endif %}
 
             {% if page.extra and page.extra.title %}
-            <h1>{{ page.extra.title }}</h1>
+              <h1>{{ page.extra.title }}</h1>
             {% else %}
-            <h1>{{ page.title }}</h1>
+              <h1>{{ page.title }}</h1>
             {% endif %}
 
             <img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" width="100" align="ion">
@@ -46,9 +46,9 @@
 
   <main class="container">
 
-    <div class="row pb-5">
+    <div class="row">
 
-      <div class="{% if page and page.extra and page.extra.layoutcss %}{{ page.extra.layoutcss }}{% else %}col-12{% endif %}">
+      <div class="{% if page and page.extra and page.extra.layout_css %}{{ page.extra.layout_css }}{% else %}col-12{% endif %}">
 
         {% block main_content %}
 
@@ -64,7 +64,9 @@
 
   </main>
 
+  {% block outside %}{% endblock %}
+
 {% endblock %}
 
 
-{% block footer_contact %}{% endblock %}
+{% block footer_contact %}{% endblock %}

templates/section.html

@@ -1,26 +1,28 @@
 {% extends '_base.html' %}
 
 
-{% block main %}
+{% block hero %}
 
-  <main class="container">
+  <div class="container-fluid hero2 d-flex flex-column justify-content-center">
 
-    <div class="row mt-5 pt-5 pb-5">
+    <div class="container">
 
-      <div class="col-12">
+        <div class="row mt-4 mb-4">
 
-        {% block main_content %}
+          <div class="col-12 text-center mt-n0 mt-lg-n5">
 
-          {% if page and page.content %}
-          {{ page.content | safe }}
-          {% endif %}
+            {% if section.extra.title %}
+            <h1>{{ section.extra.title | markdown | safe }}</h1>
+            {% endif %}
 
-        {% endblock %}
+            <img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" width="100" align="ion">
 
-      </div>
+          </div>
+
+        </div>
 
     </div>
 
-  </main>
+  </div>
 
 {% endblock %}

templates/shortcodes/centercontent.html

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

templates/shortcodes/centerp.html

@@ -1,9 +0,0 @@
-<div class="text-center {% if css %}{{ css }}{% else %}mt-3{% endif %}">
-  {% if markdown %}
-    {{ body | markdown | safe}}
-  {% elif safe %}
-    {{ body | safe }}
-  {% else %}
-    {{ body }}
-  {% endif %}
-</div>

templates/shortcodes/herocontent.html

@@ -1,19 +0,0 @@
-<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/layout_card.html

@@ -0,0 +1,49 @@
+<div class="{% if css %}{{ css }}{% else %}col-12 col-md-4{% endif %}">
+
+  <div class="card shadow mb-4">
+
+    {% if not imgbottom %}
+
+      {% if src %}
+      <div class="px-auto pt-4">
+        <img src="{{ get_url(path=src, cachebust=true) }}" width="40px">
+      </div>
+      {% endif %}
+
+      <div class="card-body">
+        {% if title %}
+        <div class="card-title">
+          <h5 class="mb-0">{{ title }}</h5>
+        </div>
+        {% endif %}
+
+        {{ body | markdown | safe }}
+
+      </div>
+
+    {% else %}
+
+      <div class="card-body">
+        {% if title %}
+        <div class="card-title">
+          <h5 class="mb-0">{{ title }}</h5>
+        </div>
+        {% endif %}
+
+        {{ body | markdown | safe }}
+
+      </div>
+
+      {% if src %}
+      <div class="">
+        <img src="{{ get_url(path=src, cachebust=true) }}" class="card-img img-fluid">
+      </div>
+      {% endif %}
+
+
+
+    {% endif %}
+
+  </div>
+
+</div>

templates/shortcodes/layout_centered_content.html

@@ -0,0 +1,15 @@
+<div class="{% if css %}{{ css }}{% else %}row d-flex align-items-center mt-5 mb-5{% endif %}">
+
+  <div class="{% if min_width %}col-12 col-md-8 mx-auto{% else %}col-12{% endif %} {% if not force_left %}text-center{% endif %}">
+
+    {% if card %}
+    <div class="card shadow py-4 px-3">
+      {{ body | markdown | safe }}
+    </div>
+    {% else %}
+      {{ body | markdown | safe }}
+    {% endif %}
+
+  </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_centered_simple.html

@@ -0,0 +1,5 @@
+<div class="text-center {% if css %}{{ css }}{% endif %}">
+
+  {{ body | markdown | safe}}
+
+</div>

templates/shortcodes/layout_div.html

@@ -0,0 +1,5 @@
+<div class="{% if css %}{{ css }}{% else %}col-12{% endif %}">
+
+  {{ body | markdown | safe }}
+
+</div>

templates/shortcodes/layout_html.html

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

templates/shortcodes/layout_icon_label.html

@@ -0,0 +1,9 @@
+<div class="d-flex mb-3">
+
+  <img src="{{ get_url(path=src, cachebust=true) }}" width="40px" height="40px">
+
+  <p class="pl-3">
+    {{ body | markdown | safe }}
+  </p>
+
+</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 {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=src, cachebust=true) }}"{% endif %} 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 {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=src, cachebust=true) }}"{% endif %} 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>

templates/shortcodes/layout_treejs.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 d-flex flex-column flex-lg-row justify-content-center {% if two %}justify-content-md-between{% else %}justify-content-md-center{% endif %} align-items-center">
+
+      {{ body | safe }}
+
+  </div>
+
+</div>

templates/shortcodes/layoutlr1.html

@@ -1,5 +0,0 @@
-<div class="{% if customcss %}{{ customcss }}{% else %}row{% endif %}">
-
-  {{ body | safe }}
-
-</div>

templates/shortcodes/layoutsmall.html

@@ -1,8 +0,0 @@
-<div class="{% if customcss %}{{ customcss }}{% else %}row{% endif %}">
-
-  <div class="col-12 col-md-8 mx-auto">
-    <h5 class="text-center">{{ title }}</h5>
-    {{ body | markdown | safe }}
-  </div>
-
-</div>

templates/shortcodes/textimg.html

@@ -1,61 +0,0 @@
-<div class="{% if customcss %}{{ customcss }}{% else %}row d-flex align-items-center mt-4 mb-4 pt-2 pb-2{% endif%}">
-
-  {% 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 pt-3 pt-sm-0">
-
-      <div class="card {% if shadow %}shadow{% endif %}">
-
-        {% if src %}
-        <img src="{{ get_url(path=src, cachebust=true) }}" alt="{{ alt }}" 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="{{ alt }}" width="100%" class="card-img-top img-fluid">
-        {% endif %}
-
-      </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>