feat(website): Adds desktop homepage

This commit is contained in:
sovanna 2019-07-03 11:52:11 +02:00
commit 6a1cdb9078
31 changed files with 619 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
public

54
README.md Normal file
View File

@ -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
```

11
config.toml Normal file
View File

@ -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"

15
content/_index.md Normal file
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

118
sass/css/_base.scss Normal file
View File

@ -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;
}

39
sass/css/_layout.scss Normal file
View File

@ -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;
}

28
sass/css/styles.scss Normal file
View File

@ -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"
;

BIN
static/images/artiq.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
static/images/artiq@2x.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

BIN
static/images/gateware.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

BIN
static/images/gateware@2x.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

BIN
static/images/hero.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

BIN
static/images/hero@2x.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 293 KiB

BIN
static/images/ion.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 896 B

BIN
static/images/ion@2x.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/images/logo-old.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
static/images/logo@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/images/map.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
static/images/map@2x.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

312
templates/index.html Normal file
View File

@ -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>