feat(website): Adds desktop homepage

.gitignore

@@ -0,0 +1 @@
+public

README.md

@@ -0,0 +1,54 @@
+# m-labs with zola
+
+
+## Getting Started
+
+These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
+
+
+### Prerequisites
+
+What things you need to install the software and how to install them
+
+- Docker Community Edition (Docker Engine Community)
+
+  [https://docs.docker.com/install/](https://docs.docker.com/install/)
+
+  **You may need to create a dockerhub account to download docker.**
+
+
+### Installing
+
+A step by step series of examples that tell you how to get a development env running
+
+
+1. Clone the project
+
+  ```
+  git clone https://github.com/sovanna/m-labs-zola.git \
+  && cd m-labs-zola
+  ```
+
+2. Build the docker container for development
+
+  ```
+  cd <path-to-workspace>/m-labs/zola/website
+
+  docker run \
+    -p 1111:1111 \
+    -v "$PWD:/usr/src/app/website" \
+    --name mlabs-zola \
+    -it \
+    sovanna/zola
+
+  ctrl+d # to exit the container
+  ```
+
+3. Start
+
+  ```
+  docker start mlabs-zola
+  docker exec -it mlabs-zola /bin/bash
+  cd website
+  zola serve --interface 0.0.0.0 --port 1111
+  ```

config.toml

@@ -0,0 +1,11 @@
+base_url = "m-labs.hk"
+title = "System-on-chip design capable of running MilkDrop"
+description = "M-Labs has varied activities. One of them is ARTIQ, a leading-edge open source control system for quantum information experiments"
+
+compile_sass = true
+highlight_code = true
+insert_anchor_links = true
+build_search_index = false
+
+[extra]
+author = "M-Labs"

content/_index.md

@@ -0,0 +1,15 @@
++++
+template = "index.html"
+sort_by = "weight"
++++
+
+Experiment control
+ - Artiq
+ - Sinara
+
+Gateware
+ - Migen
+
+Software
+ - Solvespace
+ - Smoltcp

content/about-us/_index.md

@@ -0,0 +1,7 @@
++++
+title = "About us"
+weight = 4
+template = "index.html"
++++
+
+hello

content/experiment-control/_index.md

@@ -0,0 +1,5 @@
++++
+title = "Experiment control"
+weight = 1
+sort_by = "weight"
++++

content/experiment-control/artiq.md

@@ -0,0 +1,4 @@
++++
+title = "Artiq"
+weight = 1
++++

content/experiment-control/sinara.md

@@ -0,0 +1,4 @@
++++
+title = "Sinara"
+weight = 2
++++

content/gateware/_index.md

@@ -0,0 +1,4 @@
++++
+title = "Gateware"
+weight = 2
++++

content/gateware/migen.md

@@ -0,0 +1,4 @@
++++
+title = "Migen"
+weight = 1
++++

content/software/_index.md

@@ -0,0 +1,5 @@
++++
+title = "Software"
+weight = 3
+sort_by = "weight"
++++

content/software/smoltcp.md

@@ -0,0 +1,4 @@
++++
+title = "Smoltcp"
+weight = 2
++++

content/software/solvespace.md

@@ -0,0 +1,4 @@
++++
+title = "Solvespace"
+weight = 1
++++

sass/css/_base.scss

@@ -0,0 +1,118 @@
+/**
+ * Basic styling
+ */
+body {
+  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+  color: $text-color;
+  background-color: $background-color;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-feature-settings: "kern" 1;
+     -moz-font-feature-settings: "kern" 1;
+       -o-font-feature-settings: "kern" 1;
+          font-feature-settings: "kern" 1;
+  font-kerning: normal;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+figcaption {
+  font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+  margin-left: $spacing-unit;
+}
+
+li {
+  > ul,
+  > ol {
+    margin-bottom: 0;
+  }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: $big-font-weight;
+  line-height: 1.1;
+}
+
+
+
+/**
+ * Links
+ */
+a {
+  color: $btn-primary-2;
+  text-decoration: underline;
+
+  &:hover {
+    color: $btn-secondary-2;
+    text-decoration: none;
+  }
+}
+
+.navbar-light .navbar-nav .nav-link,
+.dropdown-item {
+  outline: none;
+  color: $color-primary;
+  text-decoration: none;
+
+  &:visited {
+    color: $color-primary;
+  }
+
+  &:hover {
+    color: $color-secondary;
+  }
+}
+
+
+
+/**
+ * Custom
+ */
+.shadow.th {
+  -webkit-box-shadow: 0px 2px 8px 0px rgba(218,218,218,1) !important;
+  -moz-box-shadow: 0px 2px 8px 0px rgba(218,218,218,1) !important;
+  box-shadow: 0px 2px 8px 0px rgba(218,218,218,1) !important;
+}
+
+.card {
+  border: 1px solid transparent;
+}
+
+.dropdown-menu {
+  border: none;
+  margin-top: 12px;
+}
+.dropdown-item {
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+.btn-primary {
+  background-color: $btn-primary-2;
+  color: #fff !important;
+  border: 1px solid $btn-primary-2 !important;
+  text-decoration: none;
+
+  &:hover {
+    background-color: $btn-secondary-2;
+    border: 1px solid $btn-secondary-2 !important;
+  }
+}
+.btn-lg {
+  font-size: 1rem;
+  padding: 1rem 1.25rem;
+}

sass/css/_layout.scss

@@ -0,0 +1,39 @@
+.hero {
+  height: 692px;
+  background: url("../images/hero@2x.png") repeat-x top center;
+  -webkit-background-size: contain;
+  -moz-background-size: contain;
+  -o-background-size: contain;
+  background-size: contain;
+
+  h1 {
+    color: $background-color;
+    margin-bottom: 30px;
+    margin-top: -100px;
+  }
+}
+
+main {
+  margin-top: -150px;
+}
+
+.card-artiq {
+  background: #fff url("../images/artiq@2x.png") no-repeat top right;
+}
+
+.card-gateware {
+  background: #fff url("../images/gateware@2x.png") no-repeat top right;
+}
+
+.card h5,
+h5 {
+  color: $brand-color;
+}
+
+h3 {
+  color: $color-secondary;
+}
+
+.shadow.sticky-top {
+  background: #fff;
+}

sass/css/styles.scss

@@ -0,0 +1,28 @@
+@charset "utf-8";
+
+// Define defaults for each variable.
+
+$base-font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
+$base-font-size:   16px !default;
+$base-font-weight: 400 !default;
+$big-font-weight:  700 !default;
+$small-font-size:  $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$spacing-unit:     30px !default;
+
+$text-color:       #0d3547 !default;
+$background-color: #fff !default;
+$brand-color:      #715ec7 !default;
+
+$color-primary:    #0d3547 !default;
+$color-secondary:  #1a6d93 !default;
+
+$btn-primary-2:    #715ec7 !default;
+$btn-secondary-2:  #a88cfd !default;
+
+// Import partials.
+@import
+  "_base",
+  "_layout"
+;

templates/index.html

@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+  <head>
+    <title>{% block title%}{{ config.title }}{% endblock %}</title>
+    <meta name="description" content="{% block description%}{{ config.description }}{% endblock %}">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <meta property="og:type" content="website">
+    {% block ogtitle %}
+    <meta property="og:title" content="{% block og_title%}{{ config.title }}{% endblock %}">
+    {% endblock %}
+    {% block ogdescription %}
+    <meta property="og:description" content="{% block og_description%}{{ config.description }}{% endblock %}">
+    {% endblock %}
+    <meta property="og:site_name" content="{{ config.extra.author }}">
+    <meta property="og:url" content="{{ config.base_url }}">
+    <meta property="og:image" content={{ get_url(path='images/logo@2x.png', cachebust=true) }}>
+    {% block meta %}{% endblock meta %}
+
+    <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">
+
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
+    {% block styles %}{% endblock %}
+  </head>
+
+  <body>
+
+    <div class="container-fluid shadow th sticky-top">
+
+      <header class="container">
+
+        <nav class="navbar navbar-expand-lg navbar-light bg-th-1 justify-content-center justify-content-md-between pt-3 pb-3" role="navigation">
+
+          <a class="navbar-brand logo mr-0" href="/">
+            <img src="{{ get_url(path='images/logo@2x.png') }}" height="25" alt="logo">
+          </a>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+
+
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+
+            <ul class="navbar-nav ml-md-auto text-center text-md-left pt-2 pb-2 pt-md-0 pb-md-0">
+
+              {% set section = get_section(path='_index.md') %}
+              {% for section in section.subsections %}
+
+                {% set subsection = get_section(path=section) %}
+
+                {% if subsection.pages|length > 0 %}
+
+                  <li class="nav-item ml-4 dropdown {% if current_path == subsection.path %}active{% endif %}">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      {{ subsection.title }}
+                    </a>
+                    <div class="dropdown-menu shadow" aria-labelledby="navbarDropdown">
+                      {% for page in subsection.pages %}
+                        <a class="dropdown-item pt-3 pb-3" href="{{ page.permalink }}">{{ page.title }}</a>
+                      {% endfor %}
+                    </div>
+                  </li>
+
+                {% else %}
+
+                  <li class="nav-item ml-4 {% if current_path == subsection.path %}active{% endif %}">
+                    <a class="nav-link" href="{{ subsection.permalink }}">{{ subsection.title }}</a>
+                  </li>
+
+                {% endif %}
+
+              {% endfor %}
+
+            </ul>
+
+          </div>
+
+        </nav>
+
+      </header>
+
+    </div>
+
+
+    <div class="container-fluid hero d-flex flex-column justify-content-center">
+
+      <div class="container">
+
+          <div class="row">
+
+            <div class="col-12 text-center">
+
+              <h1>Open tools for open physics.</h1>
+
+              <img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" height="12" align="ion">
+
+            </div>
+
+          </div>
+
+      </div>
+
+    </div>
+
+
+    <main class="container">
+
+      <div class="row">
+
+        <div class="col-12">
+
+          <div class="card shadow mt-3 mb-3">
+
+            <div class="card-body p-5 card-artiq">
+
+              <div class="col-12 col-md-6">
+
+                <h5 class="card-title">ARTIQ</h5>
+
+                <p class="card-text pt-3">
+                  ARTIQ (Advanced Real-Time Infrastructure for Quantum physics) is a leading-edge control system for quantum information experiments, developed in partnership with a growing number of research institutions worldwide.
+                </p>
+
+                <p class="card-text pt-3 pb-3">
+                  The system features a high-level programming language that helps describe complex experiments, which is compiled and executed on dedicated hardware with nanosecond timing resolution and sub-microsecond latency.
+                </p>
+
+                <a href="" class="btn btn-primary btn-lg">Read More</a>
+
+              </div>
+
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+
+
+      <div class="row pb-5">
+
+        <div class="col-12">
+
+          <div class="card shadow mt-3 mb-3">
+
+            <div class="card-body p-5 card-gateware">
+
+              <div class="col-12 col-md-6">
+
+                <h5 class="card-title">Gateware and system-on-chip design</h5>
+
+                <p class="card-text pt-3">
+                  Traditional gateware design with Verilog and VHDL is well known to be tedious and inefficient. M-Labs have developed Migen, a Python-based HDL and toolbox that addresses many of their issues and makes gateware design more productive.
+                </p>
+
+                <p class="card-text pt-3 pb-3">
+                  Built on Migen, MiSoC provides a high performance, flexible and lightweight solution to build system-on-chips for various applications.
+                </p>
+
+                <a href="" class="btn btn-primary btn-lg">Read More</a>
+
+              </div>
+
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+
+
+      <div class="row pt-5 pb-5">
+
+        <div class="col-12">
+
+          <h3 class="text-center">We'd love to hear from you!</h3>
+
+        </div>
+
+      </div>
+
+
+    </main>
+
+
+    <footer class="container">
+
+      <div class="row pt-5 pb-5">
+
+        <div class="col-12 col-md-6">
+
+          <h5 class="pb-3">Sales inquiries</h5>
+
+          <table class="w-50">
+
+            <tbody>
+
+              <tr>
+                <td class="font-weight-bold w-50">Sales</td>
+                <td class="w-50">sales@m-***s.hk</td>
+              </tr>
+
+              <tr>
+                <td class="font-weight-bold w-50">Sébastien</td>
+                <td class="w-50">sb@m-***s.hk</td>
+              </tr>
+
+              <tr>
+                <td class="font-weight-bold w-50">Robert</td>
+                <td class="w-50">rj@m-***s.hk</td>
+              </tr>
+
+            </tbody>
+
+          </table>
+
+        </div>
+
+        <div class="col-12 col-md-6">
+
+          <h5 class="pb-3">Technicals inquiries</h5>
+
+          <p>
+            Ask on the <a href="https://chat.m-labs.hk/" target="_blank" rel="noopener noreferrer">Mattermost chat room</a> (or the IRC channel #m-labs on Freenode), open an issue in the relevant project, or write to the mailing list <a href="https://ssl.serverraum.org/lists/listinfo/devel" rel="noopener noreferrer" target="_blank">devel</a> (for Migen/MiSoC) or <a href="https://ssl.serverraum.org/lists/listinfo/artiq" rel="noopener noreferrer" target="_blank">ARTIQ</a>.
+            <br>
+            Patches should be sent via a pull request.
+          </p>
+
+          <p>
+            Go to <a href="https://forum.m-labs.hk/" rel="noopener noreferrer" target="_blank">forum.m-labs.hk</a> 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">
+
+          <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>
+
+
+      <p class="pt-5 pb-2 text-center">
+        <small>Copyright &copy; <span id="copyright_year"></span>, M-Labs. All Rights Reserved.</small>
+      </p>
+
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
+    <script>
+
+      (function () {
+        document.getElementById('copyright_year').textContent = (new Date()).getFullYear();
+      })();
+
+    </script>
+
+  </body>
+
+</html>