refactor(website): Updates

content/about-us/company.md

@@ -21,4 +21,4 @@ The company's current main project is <a href="/experiment-control/artiq/">ARTIQ
 {% end %}
 
 
-{{ layout_separator(separator_title="Contact us") }}
+{{ layout_separator(separator_title="Contact us", separator_bg="true") }}

content/experiment-control/artiq.md

@@ -57,7 +57,7 @@ Technologies employed include <a href="http://python.org/" target="_blank" rel="
 
 
 
-{{ layout_separator(separator_title="Partners") }}
+{{ layout_separator(separator_title="Partners", separator_bg="true") }}
 
 
 

content/experiment-control/control-loops.md

@@ -93,7 +93,7 @@ This module is still in development and is not currently available.
 
 
 
-{% layout_text_img(textleft=true, shadow=false) %}
+{% layout_text_img(src="images/side-min.png", textleft=true, shadow=false) %}
 
 ##### SU-Servo
 

content/experiment-control/resources.md

@@ -49,6 +49,10 @@ template = "page.html"
 
 
 
+{{ layout_separator_empty(style="margin-top: -200px;") }}
+
+
+
 {{ layout_separator(separator_title="Announcements, community support and discussions") }}
 
 

content/experiment-control/sinara-core.md

@@ -166,11 +166,15 @@ A low-noise clock distribution module that can be used to distribute low jitter
 
 
 
-{{ layout_separator(separator_title="Purchasing Sinara hardware") }}
+{{ layout_separator_empty() }}
 
 
 
-{% layout_centered_content(min_width=true) %}
+{{ layout_separator(separator_title="Purchasing Sinara hardware", css="col-12 text-center mt-2 mb-2 mb-lg-5") }}
+
+
+
+{% layout_centered_content(min_width=true, css="row d-flex align-items-center mt-5") %}
 
 ##### Kasli and EEMs can be ordered now
 
@@ -181,6 +185,8 @@ Contact sales@m-***s.hk with your requirements and we will establish a quote.
 {% end %}
 
 
+{{ layout_separator_empty(inverted="true") }}
+
 
 {% layout_centered_content(min_width=true) %}
 

content/gateware/migen.md

@@ -41,7 +41,7 @@ Migen is the foundation for MiSoC.
 {% end %}
 
 
-{% layout_centered_content(min_width=true, force_left=true, card=true) %}
+{% layout_centered_content(min_width=true, force_left=true, bg="background-image: url(/images/stripe.svg); background-repeat: no-repeat; background-size: auto 100%; padding-left: 40px;") %}
 
 ##### More...
 

sass/css/_layout.scss

@@ -101,10 +101,19 @@ p ~ h5 {
   .hero5 {
     height: 380px;
     background: url("../images/bottom-graphic-min@2x.png") no-repeat top center;
-    -webkit-background-size: contain;
+    -webkit-background-size: cover;
-    -moz-background-size: contain;
+    -moz-background-size: cover;
-    -o-background-size: contain;
+    -o-background-size: cover;
-    background-size: contain;
+    background-size: cover;
+  }
+
+  .hero6 {
+    height: 380px;
+    background: url("../images/top-graphic-min@2x.png") no-repeat top center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
   }
 
   .hero + main {

static/images/stripe.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="6" height="336" viewBox="0 0 6 336">
+  <defs>
+    <style>
+
+      .cls-2 {
+        fill: url(#linear-gradient-1);
+        stroke: #ffffff;
+      }
+    </style>
+
+    <linearGradient id="linear-gradient-1" gradientUnits="userSpaceOnUse" x1="3" y1="336" x2="3" y2="0">
+      <stop offset="0" stop-color="#76c5d2"/>
+      <stop offset="0.32" stop-color="#1a6d93"/>
+      <stop offset="0.66" stop-color="#715ec7"/>
+      <stop offset="1" stop-color="#a88cfd"/>
+    </linearGradient>
+  </defs>
+  <rect id="rect-1" class="cls-2" width="6" height="336"/>
+</svg>

templates/includes/separator_design.html

@@ -4,7 +4,7 @@
 
       <div class="row">
 
-        <div class="col-12 text-center mt-2 mt-lg-5 mb-2 mb-lg-5">
+        <div class="{% if not css %}col-12 text-center mt-2 mt-lg-5 mb-2 mb-lg-5{% else %}{{ css }}{% endif %}">
 
           {% if separator_title %}
 

templates/shortcodes/layout_card.html

@@ -1,6 +1,6 @@
 <div class="{% if css %}{{ css }}{% else %}col-12 col-md-4{% endif %}">
 
-  <div class="card shadow mb-4">
+  <div class="mb-4">
 
     {% if not imgbottom %}
 

templates/shortcodes/layout_centered_content.html

@@ -1,13 +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 %}">
+  <div class="{% if min_width %}col-12 col-md-8 mx-auto{% else %}col-12{% endif %} {% if not force_left %}text-center{% endif %}" style="{% if bg %}{{ bg  }}{% endif %}">
 
     {% if card %}
     <div class="card shadow py-4 px-3">
       {{ body | markdown | safe }}
     </div>
     {% else %}
-      {{ body | markdown | safe }}
+      <div>
+        {{ body | markdown | safe }}
+      </div>
     {% endif %}
 
   </div>

templates/shortcodes/layout_separator.html

@@ -1,6 +1,6 @@
 {% if separator_title %}
 
-{% set separator_rm_bg = true %}
+{% set separator_rm_bg = not separator_bg %}
 
 {% include "includes/separator_design.html" %}
 

templates/shortcodes/layout_separator_empty.html

@@ -0,0 +1,2 @@
+<div class="container-fluid {% if not inverted %}hero5{% else %}hero6{% endif %} d-flex flex-column justify-content-center" style="{% if style %}{{ style }}{% endif %}">
+</div>