refactor(about-us): Updates

sass/css/_layout.scss

@@ -2,7 +2,7 @@
   height: 230px;
   background: none;
 }
-.hero2 {
+.hero2, .hero3 {
   height: 130px;
   background: none;
 }
@@ -74,6 +74,15 @@ h3, h2, h1 {
     background-size: contain;
   }
 
+  .hero3 {
+    height: 380px;
+    background: url("../images/hero3@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/about-us.html

@@ -1,18 +1,48 @@
 {% extends 'section.html' %}
 
 
-{% block main_content %}
+{% block hero %}
 
-<h2>ABOUT US</h2>
+  <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>About us</h1>
+
+            <img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" width="100" align="ion">
+
+          </div>
+
+        </div>
+
+    </div>
+
+  </div>
+
+{% endblock %}
 
 
-<div class="mt-5 pt-3 mb-5 pb-5">
+{% block main %}
+
+  <main class="container">
+
+    <div class="row">
+
+      <div class="col-8 mx-auto">
+
+        {% block main_content %}
+
+          <div class="mb-5 pb-5 text-center ">
 
             <h5 class="mb-3">Milkymist</h5>
 
             <div class="row">
 
-    <div class="col-12 col-md-6">
+              <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.
@@ -20,7 +50,7 @@
 
               </div>
 
-    <div class="col-12 col-md-6">
+              <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.
@@ -42,9 +72,34 @@
 
             </div>
 
-</div>
+          </div>
 
+          {% endblock %}
 
-<h2>CONTACT US</h2>
+      </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 %}