Merge pull request #631 from chanezon/master

added website code for containerd.io
This commit is contained in:
Phil Estes 2017-03-21 09:14:26 -07:00 committed by GitHub
commit fa71fc91fa
32 changed files with 2070 additions and 0 deletions

5
docs/.dockerignore Normal file
View file

@ -0,0 +1,5 @@
.dockerignore
.git
.gitignore
Dockerfile
docker-compose.yml

8
docs/.gitignore vendored Normal file
View file

@ -0,0 +1,8 @@
**/.DS_Store
**/desktop.ini
.bundle/**
.jekyll-metadata
_site/**
.sass-cache/**
CNAME
Gemfile.lock

3
docs/Dockerfile Normal file
View file

@ -0,0 +1,3 @@
FROM nginx
COPY _site /usr/share/nginx/html

10
docs/README.md Normal file
View file

@ -0,0 +1,10 @@
# Containerd website
The containerd website is built using Jekyll and published to Github pages.
In order to build and test locally:
```
docker run -v "$PWD":/usr/src/app -p "4000:4000" starefossen/github-pages
```
Then browser to localhost:4000 to see the rendered site. The site autorefreshes when you modify files locally.

23
docs/_config.yml Normal file
View file

@ -0,0 +1,23 @@
markdown: kramdown
kramdown:
input: GFM
html_to_native: true
hard_wrap: false
syntax_highlighter: rouge
incremental: true
permalink: pretty
safe: false
lsi: false
exclude: [README.md]
gems:
- jekyll-redirect-from
- jekyll-seo-tag
defaults:
-
scope:
path: ""
type: "pages"
values:
layout: default

View file

@ -0,0 +1,21 @@
<div class="footer">
<div class="footer-links">
{% include links.html %}
</div>
<div class="copyright">
Copyright (c) 2016, Docker Inc.
</div>
</div>
<script src="/style/js/jquery-2.1.4.min.js"></script>
<script src="/style/js/highlight.min.js"></script>
<script src="/style/js/main.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-71407002-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.title }}</title>
<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
<link href="/style/css/flexboxgrid.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="/style/css/main.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="/style/css/tomorrow-night.css" type="text/css" rel="stylesheet" media="screen,projection"/><link href="https://fonts.googleapis.com/css?family=Lato:300,400|Raleway:400,700i,800" rel="stylesheet">
</head>
<body>
<div class="container">

View file

@ -0,0 +1,3 @@
<div class="link">
<a href="https://github.com/docker/containerd"><img src="/images/GitHub-Mark-Light-64px.png"/></a>
</div>

View file

@ -0,0 +1,15 @@
{% include header.html %}
<div class="navbar white">
<div class="name"><a href="/">containerd<span class="org">By Docker</span></a></div>
<div class="actions">
{% include links.html %}
</div>
</div>
<div class="content">
<div class="wrapper-details">
{{ content }}
</div>
</div>
{% include footer.html %}

18
docs/_layouts/home.html Normal file
View file

@ -0,0 +1,18 @@
{% include header.html %}
<div class="hero">
<div class="navbar">
<div class="name"><a href="/">containerd</a></div>
<div class="actions">
{% include links.html %}
</div>
</div>
<p class="definition"><strong>containerd</strong> <span>| kənˈtānər D |</span><br> - an industry-standard container runtime<br>with an emphasis on <i>simplicity</i>,<br><i>robustness</i> and <i>portability</i>.</p>
</div>
<div class="content">
<div class="wrapper-details">
{{ content }}
</div>
</div>
{% include footer.html %}

View file

@ -1,3 +1,8 @@
---
title: Dockercon 2017 Summit
layout: home
---
# Dockercon 2017 Summit
This year at Dockercon US 2017 we will be having a containerd Summit on Thursday morning the week of the conference.

10
docs/hooks/pre_build Executable file
View file

@ -0,0 +1,10 @@
#!/bin/bash
echo "=> Building the binary"
docker run --privileged \
-v $(pwd):/usr/src/app \
-v /var/run/docker.sock:/var/run/docker.sock \
starefossen/github-pages jekyll build
echo $(pwd)
ls -la
ls -la _site

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
docs/images/bg10.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

BIN
docs/images/chart-a.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

BIN
docs/images/chart-b.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

BIN
docs/images/chart-c.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

BIN
docs/images/chart-d.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

BIN
docs/images/chart-f.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

BIN
docs/images/chart-g.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

115
docs/index.md Normal file
View file

@ -0,0 +1,115 @@
---
title: containerd
layout: home
---
## News
* [Sign up for containerd Summit at DockerCon in April](dockercon-summit)
* [March 15th: Docker to donate containerd to the Cloud Native Computing Foundation](https://blog.docker.com/2017/03/docker-donates-containerd-to-cncf/)
* [February 28th: containerd Summit recap](https://blog.docker.com/2017/02/containerd-summit-recap-slides-videos-meeting-notes/)
* [January 4th: containerd Livestream recap](https://blog.docker.com/2017/01/containerd-livestream-recap)
## About containerd
containerd is an industry-standard core container runtime with an emphasis on simplicity, robustness and portability. It is available as a daemon for Linux and Windows, which can manage the complete container lifecycle of its host system: image transfer and storage, container execution and supervision, low-level storage and network attachments, etc..
containerd is designed to be embedded into a larger system, rather than being used directly by developers or end-users.
containerd includes a daemon exposing gRPC API over a local UNIX socket. The API is a low-level one designed for higher layers to wrap and extend. It also includes a barebone CLI (`ctr`) designed specifically for development and debugging purpose. It uses [runC](https://github.com/opencontainers/runc) to run containers according to the [OCI specification](https://www.opencontainers.org/about). The code can be found on [GitHub](https://github.com/docker/containerd), and here are the [contribution guidelines](https://github.com/docker/containerd/blob/master/CONTRIBUTING.md).
containerd is based on the Docker Engines core container runtime to benefit from its maturity and existing contributors.
![Containerd High Level Architecture](/images/chart-a.png "Containerd High Level Architecture")
## Features and roadmap
* OCI Image Spec support
* OCI Runtime Spec support (aka runC)
* Image push and pull support
* Container runtime and lifecycle support
* Network primitives for creation, modification, and deletion of interfaces
* Management of network namespaces containers to join existing namespaces
* Multi-tenant supported with CAS storage for global images
containerd, currently in [version 0.2.4](https://github.com/docker/containerd/releases/tag/v0.2.4), is a daemon born from extracting the container execution subset of the Docker Engine, and is [used internally by Docker since the 1.11 release](https://blog.docker.com/2016/04/docker-engine-1-11-runc/). containerd will graduate to version 1.0 once its feature scope matches the requirements above, from which it will commit to API stability as well as committing to a 1-year LTS release. Docker Engine commits to upgrading to containerd 1.0 as part of its regular release cycle.
[containerd roadmap](https://github.com/docker/containerd/blob/master/ROADMAP.md) to implement these features is described in the containerd Github repository.
## Architecture
Containerd [architecture](https://github.com/docker/containerd/blob/master/design/architecture.md) and [API](https://github.com/docker/containerd/tree/master/api/) are described in the Github repository.
![Containerd Architecture](/images/chart-b.png "Containerd High Level Architecture")
## Principles and Releases
Having a clearly defined scope of a project is important for ensuring consistency and focus.
These following criteria will be used when reviewing pull requests, features, and changes for the project before being accepted.
### Components
Components should not have tight dependencies on each other so that they are unable to be used independently.
The APIs for images and containers should be designed in a way that when used together the components have a natural flow but still be useful independently.
An example for this design can be seen with the overlay filesystems and the container execution layer.
The execution layer and overlay filesystems can be used independently but if you were to use both, they share a common `Mount` struct that the filesystems produce and the execution layer consumes.
### Primitives
containerd should expose primitives to solve problems instead of building high level abstractions in the API.
A common example of this is how build would be implemented.
Instead of having a build API in containerd we should expose the lower level primitives that allow things required in build to work.
Breaking up the filesystem APIs to allow snapshots, copy functionality, and mounts allow people implementing build at the higher levels more flexibility.
### Extensibility and Defaults
For the various components in containerd there should be defined extension points where implementations can be swapped for alternatives.
The best example of this is that containerd will use `runc` from OCI as the default runtime in the execution layer but other runtimes conforming to the OCI Runtime specification they can be easily added to containerd.
containerd will come with a default implementation for the various components.
These defaults will be chosen by the maintainers of the project and should not change unless better tech for that component comes out.
Additional implementations will not be accepted into the core repository and should be developed in a separate repository not maintained by the containerd maintainers.
### Releases
containerd will be released with a 1.0 when feature complete with Linux and Windows parity and this version will be supported for 1 year with security and bug fixes applied and released.
The upgrade path for containerd is that the 0.0.x patch releases are always backward compatible with its major and minor version.
Minor (0.x.0) version will always be compatible with the previous minor release. i.e. 1.2.0 is backwards compatible with 1.1.0 and 1.1.0 is compatible with 1.0.0.
There is no compatibility guarantees with upgrades from two minor relases. i.e. 1.0.0 to 1.2.0.
There are no backwards compatibility guarantees with upgrades to major versions. i.e 1.0.0 to 2.0.0.
Each major version will be supported for 1 year with bug fixes and security patches.
## FAQ
1. What is the relationship between containerd and Docker?
Docker is a complete platform and programming environment for containerized applications. containerd is one of dozens of specialized components integrated into Docker. Developers and IT professionals looking to build, ship and run containerized applications should continue to use Docker. Operators and integrators looking for specialized components to swap into their platform should consider containerd.
![Containerd and Docker](/images/chart-c.png "Containerd and Docker")
containerd 0.2.4 used in Docker 1.12 covers only container execution and process management.
![Containerd in Docker today](/images/chart-g.png "Containerd in Docker today")
containerd's roadmap is to refactor the Docker Engine codebase to extract more of its logic for distribution, networking and storage on a single host into a reusable component that Docker will use, and that can be used by other container orchestration projects or hosted container services.
![Containerd in Docker tomorrow](/images/chart-d.png "Containerd in Docker tomorrow")
2. What is the relationship between containerd, OCI and runc?
Docker [donated the OCI specification to the Linux Foundation in 2015](https://blog.docker.com/2015/06/open-container-project-foundation/), along with a reference implementation called `runc`. containerd integrates [OCI](https://www.opencontainers.org/)/[runc](https://runc.io/) into a feature-complete, production-ready core container runtime. runc is a component of containerd, the executor for containers. containerd has a wider scope than just executing containers: downloading container images, managing storage and network interfaces, calling runc with the right parameters to run containers. containerd fully leverages the Open Container Initiatives (OCI) runtime, image format specifications and OCI reference implementation (runc) and will pursue OCI certification when it is available. Because of its massive adoption, containerd is the industry standard for implementing OCI.
![Containerd, runc and OCI](/images/chart-a.png "Containerd, runc and OCI")
3. What is the relationship between containerd and container orchestration systems like Kubernetes and Mesos?
Kubernetes today uses Docker directly. In a future version Kubernetes can implement container support in the Kubelet by implementing it's [Container Runtime Interface](https://github.com/kubernetes/kubernetes/blob/release-1.5/docs/devel/container-runtime-interface.md) using containerd. Mesos and other orchestration engines can leverage containerd for core container runtime functionality as well.
![Containerd in the container ecosystem](/images/chart-f.png "Containerd in the container ecosystem")
4. What is the relationship between containerd and cloud managed container services?
See answer above: cloud managed container services can leverage containerd instead of Docker in order to provide container functionalities to their users.

View file

@ -0,0 +1,802 @@
/*
*
* Uncomment and set these variables to customize the grid.
*
* :root {
* --gutter-width: 1rem;
* --outer-margin: 2rem;
* --gutter-compensation: calc( var( --gutter-width / 2 ) * -1 );
* --half-gutter-width: calc( var( --gutter-width / 2 ) );
* --screen-xs-min: 30em;
* --screen-sm-min: 48em;
* --screen-md-min: 62em;
* --screen-lg-min: 75em;
* --container-sm: calc( 45rem + var( --gutter-width ) );
* --container-md: calc( 60rem + var( --gutter-width ) );
* --container-lg: calc( 70rem + var( --gutter-width ) );
* }
*
*/
@custom-media --sm-viewport only screen and (min-width: 48em);
@custom-media --md-viewport only screen and (min-width: 62em);
@custom-media --lg-viewport only screen and (min-width: 75em);
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-right: var( --outer-margin, 2rem );
padding-left: var( --outer-margin, 2rem );
}
.row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: var( --gutter-compensation, -0.5rem );
margin-left: var( --gutter-compensation, -0.5rem );
}
.row.reverse {
flex-direction: row-reverse;
}
.col.reverse {
flex-direction: column-reverse;
}
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: var( --half-gutter-width, 0.5rem );
padding-left: var( --half-gutter-width, 0.5rem );
}
.col-xs {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-xs-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-xs-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-xs-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-xs-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-xs-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-xs-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-xs-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-xs-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-xs-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-xs-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-xs-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-xs-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-xs-offset-1 {
margin-left: 8.333%;
}
.col-xs-offset-2 {
margin-left: 16.667%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-4 {
margin-left: 33.333%;
}
.col-xs-offset-5 {
margin-left: 41.667%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-7 {
margin-left: 58.333%;
}
.col-xs-offset-8 {
margin-left: 66.667%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-10 {
margin-left: 83.333%;
}
.col-xs-offset-11 {
margin-left: 91.667%;
}
.start-xs {
justify-content: flex-start;
text-align: start;
}
.center-xs {
justify-content: center;
text-align: center;
}
.end-xs {
justify-content: flex-end;
text-align: end;
}
.top-xs {
align-items: flex-start;
}
.middle-xs {
align-items: center;
}
.bottom-xs {
align-items: flex-end;
}
.around-xs {
justify-content: space-around;
}
.between-xs {
justify-content: space-between;
}
.first-xs {
order: -1;
}
.last-xs {
order: 1;
}
@media (--sm-viewport) {
.container {
width: var( --container-sm, 46rem );
}
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-offset-1,
.col-sm-offset-2,
.col-sm-offset-3,
.col-sm-offset-4,
.col-sm-offset-5,
.col-sm-offset-6,
.col-sm-offset-7,
.col-sm-offset-8,
.col-sm-offset-9,
.col-sm-offset-10,
.col-sm-offset-11,
.col-sm-offset-12 {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: var( --half-gutter-width, 0.5rem );
padding-left: var( --half-gutter-width, 0.5rem );
}
.col-sm {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-sm-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-sm-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-sm-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-sm-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-sm-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-sm-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-sm-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-sm-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-sm-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-sm-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-sm-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-sm-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-sm-offset-1 {
margin-left: 8.333%;
}
.col-sm-offset-2 {
margin-left: 16.667%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-4 {
margin-left: 33.333%;
}
.col-sm-offset-5 {
margin-left: 41.667%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-7 {
margin-left: 58.333%;
}
.col-sm-offset-8 {
margin-left: 66.667%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-10 {
margin-left: 83.333%;
}
.col-sm-offset-11 {
margin-left: 91.667%;
}
.start-sm {
justify-content: flex-start;
text-align: start;
}
.center-sm {
justify-content: center;
text-align: center;
}
.end-sm {
justify-content: flex-end;
text-align: end;
}
.top-sm {
align-items: flex-start;
}
.middle-sm {
align-items: center;
}
.bottom-sm {
align-items: flex-end;
}
.around-sm {
justify-content: space-around;
}
.between-sm {
justify-content: space-between;
}
.first-sm {
order: -1;
}
.last-sm {
order: 1;
}
}
@media (--md-viewport) {
.container {
width: var( --container-md, 61rem );
}
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-offset-1,
.col-md-offset-2,
.col-md-offset-3,
.col-md-offset-4,
.col-md-offset-5,
.col-md-offset-6,
.col-md-offset-7,
.col-md-offset-8,
.col-md-offset-9,
.col-md-offset-10,
.col-md-offset-11,
.col-md-offset-12 {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: var( --half-gutter-width, 0.5rem );
padding-left: var( --half-gutter-width, 0.5rem );
}
.col-md {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-md-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-md-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-md-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-md-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-md-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-md-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-md-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-md-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-md-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-md-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-md-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-md-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-md-offset-1 {
margin-left: 8.333%;
}
.col-md-offset-2 {
margin-left: 16.667%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-4 {
margin-left: 33.333%;
}
.col-md-offset-5 {
margin-left: 41.667%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-7 {
margin-left: 58.333%;
}
.col-md-offset-8 {
margin-left: 66.667%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-10 {
margin-left: 83.333%;
}
.col-md-offset-11 {
margin-left: 91.667%;
}
.start-md {
justify-content: flex-start;
text-align: start;
}
.center-md {
justify-content: center;
text-align: center;
}
.end-md {
justify-content: flex-end;
text-align: end;
}
.top-md {
align-items: flex-start;
}
.middle-md {
align-items: center;
}
.bottom-md {
align-items: flex-end;
}
.around-md {
justify-content: space-around;
}
.between-md {
justify-content: space-between;
}
.first-md {
order: -1;
}
.last-md {
order: 1;
}
}
@media (--lg-viewport) {
.container {
width: var( --container-lg, 71rem );
}
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-offset-1,
.col-lg-offset-2,
.col-lg-offset-3,
.col-lg-offset-4,
.col-lg-offset-5,
.col-lg-offset-6,
.col-lg-offset-7,
.col-lg-offset-8,
.col-lg-offset-9,
.col-lg-offset-10,
.col-lg-offset-11,
.col-lg-offset-12 {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: var( --half-gutter-width, 0.5rem );
padding-left: var( --half-gutter-width, 0.5rem );
}
.col-lg {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-lg-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-lg-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-lg-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-lg-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-lg-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-lg-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-lg-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-lg-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-lg-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-lg-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-lg-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-lg-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-lg-offset-1 {
margin-left: 8.333%;
}
.col-lg-offset-2 {
margin-left: 16.667%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-4 {
margin-left: 33.333%;
}
.col-lg-offset-5 {
margin-left: 41.667%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-7 {
margin-left: 58.333%;
}
.col-lg-offset-8 {
margin-left: 66.667%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-10 {
margin-left: 83.333%;
}
.col-lg-offset-11 {
margin-left: 91.667%;
}
.start-lg {
justify-content: flex-start;
text-align: start;
}
.center-lg {
justify-content: center;
text-align: center;
}
.end-lg {
justify-content: flex-end;
text-align: end;
}
.top-lg {
align-items: flex-start;
}
.middle-lg {
align-items: center;
}
.bottom-lg {
align-items: flex-end;
}
.around-lg {
justify-content: space-around;
}
.between-lg {
justify-content: space-between;
}
.first-lg {
order: -1;
}
.last-lg {
order: 1;
}
}

469
docs/style/css/main.css Normal file
View file

@ -0,0 +1,469 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
background: url(../../images/bg10.jpg);
background-position: center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
ol,
ul {
list-style: disc;
}
ul li {
padding: 10px 0;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 2px;
border: 2px solid black;
}
td, tr, th {
border: 1px solid black;
margin: 3px;
padding: 3px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Raleway', sans-serif;
}
.container {
max-width: 900px;
margin: 0 auto;
}
.navbar {
padding: 6rem 2rem;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: center;
flex-direction: column;
}
.navbar .name {
font-size: 2rem;
font-weight: 500;
color: white;
clear: both;
text-align: center;
}
.navbar .name a {
padding: .3rem 2rem;
color: rgba(255, 255, 255, 1);
font-size: 1.6rem;
# text-transform: uppercase;
font-family: 'Raleway', sans-serif;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.navbar .name a b {
font-weight: 800;color: rgba(255, 255, 255, 1);
border-bottom: 1px solid rgba(255, 255, 255, 1);
}
.navbar .name .org {
font-size: 0.8rem;
text-align: center;
margin-left: 0.5rem;
color: rgba(255, 255, 255, 1);
}
.navbar .actions {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
padding-top: 1rem;
padding-right: 1rem;
text-align: center;
display: block;
}
.navbar .actions .link {
margin-left: 2rem;
text-transform: uppercase;
font-size: 0.8rem;
display: inline;
}
.navbar .actions .link a {
color: rgba(255, 255, 255, 0.8);
}
.navbar .actions .link a:hover {
color: white;
}
.navbar.white {
background-color: white;
}
.navbar.white .name {
color: #254451;
}
.navbar.white .name a {
color: #254451;
}
.navbar.white .name a span.org {
color: #254451;
font-weight: normal !important;
}
.navbar.white .actions .link a {
color: #00da9c;
}
@media screen and (max-width: 600px) {
.navbar .name .org {
display: block;
margin-left: 0;
margin-top: 0.5rem;
line-height: 1rem;
}
}
.hero {
min-height: 600px;
}
.definition span{
opacity: .7;
font-weight: bold;
}
.headerlink a {
color: white;
}
.headerlink a:hover {
color: white;
}
.hero .hamster {
padding: 1rem 2rem 3rem 2rem;
text-align: center;
}
.hero .hamster img {
width: 100%;
max-width: 500px;
}
.hero h3 {
padding-top: 1.5rem;
text-align: center;
color: white;
margin-bottom: 1rem;
}
.hero h3 img {
height: 30px;
width: auto;
margin-right: 0.7rem;
position: relative;
top: 0.4rem;
}
.hero p {
color: white;
font-size: 1.3rem;
text-align: center;
font-weight: 300;
padding: 1rem 2rem 0 2rem;
line-height: 2rem;
font-family: 'Raleway', sans-serif;
}
.hero p i {
font-style: italic;
font-weight: 700;
}
.hero p strong {
font-weight: 700;
}
.content {
background-color: rgba(255, 255, 255, 0.95);
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.content.blue {
background-color: #364449;
color: white;
}
.content.blue h2 {
color: white;
}
.content.blue p {
color: rgba(255, 255, 255, 0.8);
}
.content .wrapper-details {
padding: 2rem 2.5rem;
}
.content .details .points {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.content .details .points .point {
padding-top: 1rem;
border-bottom: 1px solid #e7f4f9;
}
.content .details .points .point:last-child {
border-bottom: 0;
}
.content .terminal {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
.content .terminal img {
width: 100%;
}
.content img {
width: 100%;
}
.footer {
padding: 2rem;
color: white;
}
.footer footer-links a {
color: #fff;
}
.footer h3 {
text-align: center;
color: white;
margin-bottom: 0;
}
.footer h3 img {
height: 30px;
width: auto;
margin-right: 0.7rem;
position: relative;
top: 0.4rem;
}
.footer .footer-links {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
margin-top: 1.5rem;
}
.footer .footer-links .link {
margin-right: 0.7rem;
}
.footer .footer-links .link a {
color: rgba(255, 255, 255, 0.5);
}
.footer .footer-links .link a:hover {
color: rgba(255, 255, 255, 1);
}
.footer .copyright {
text-align: center;
margin-top: 1.5rem;
color: rgba(255, 255, 255, 0.6);
}
@media screen and (max-width: 960px) {
.details,
.terminal {
width: 100%;
}
.wrapper-terminal {
padding: 0 2rem 2rem 2rem;
}
}
@media screen and (min-width: 960px) {
.details {
width: 60%;
}
.terminal {
width: 40%;
}
.wrapper-terminal {
padding: 0 2rem 0 0;
}
}
p {
font-size: .9rem;
line-height: 1.5rem;
margin-bottom: 1rem;
font-family: 'Lato', sans-serif;
}
h2 {
font-size: 1.4rem;
font-weight: 500;
padding: 3rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
margin: 2rem 0;
text-transform: uppercase;
text-align: center;
color: rgba(0, 0, 0, 0.7);
}
h3 {
font-size: 1.2rem;
font-weight: 500;
color: rgba(0, 0, 0, 0.81);
margin: 4rem 0 1rem;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
a {
color: #96090d;
text-decoration: none;
}
ol li {
font-size: 1.2rem;
font-family: 'Raleway', sans-serif;
color: rgba(0, 0, 0, 0.81);
margin: 4rem 0 1rem;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.wrapper-details a {
font-weight: 800
}
a:hover {
color: #5e0608;
}
body {
font-family: "Helvetica Neue", Segoe UI, Arial, "Lucida Grande", sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
color: #254451;
background-color: #e7f4f9;
}

View file

@ -0,0 +1,101 @@
/* Tomorrow Night Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Tomorrow Comment */
.hljs-comment {
color: #969896;
}
/* Tomorrow Red */
.hljs-variable,
.hljs-attribute,
.hljs-tag,
.hljs-regexp,
.ruby .hljs-constant,
.xml .hljs-tag .hljs-title,
.xml .hljs-pi,
.xml .hljs-doctype,
.html .hljs-doctype,
.css .hljs-id,
.css .hljs-class,
.css .hljs-pseudo {
color: #cc6666;
}
/* Tomorrow Orange */
.hljs-number,
.hljs-preprocessor,
.hljs-pragma,
.hljs-built_in,
.hljs-literal,
.hljs-params,
.hljs-constant {
color: #de935f;
}
/* Tomorrow Yellow */
.ruby .hljs-class .hljs-title,
.css .hljs-rule .hljs-attribute {
color: #f0c674;
}
/* Tomorrow Green */
.hljs-string,
.hljs-value,
.hljs-inheritance,
.hljs-header,
.hljs-name,
.ruby .hljs-symbol,
.xml .hljs-cdata {
color: #b5bd68;
}
/* Tomorrow Aqua */
.hljs-title,
.css .hljs-hexcolor {
color: #8abeb7;
}
/* Tomorrow Blue */
.hljs-function,
.python .hljs-decorator,
.python .hljs-title,
.ruby .hljs-function .hljs-title,
.ruby .hljs-title .hljs-keyword,
.perl .hljs-sub,
.javascript .hljs-title,
.coffeescript .hljs-title {
color: #81a2be;
}
/* Tomorrow Purple */
.hljs-keyword,
.javascript .hljs-function {
color: #b294bb;
}
.hljs {
font-family: Menlo, Monaco, Consolas, monospace;
-webkit-font-smoothing: subpixel-antialiased;
line-height: 1.2rem;
display: block;
overflow-x: auto;
background: #1d1f21;
color: #c5c8c6;
padding: 1rem;
-webkit-text-size-adjust: none;
border-radius: 4px;
margin-bottom: 1rem;
}
.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
opacity: 0.5;
}

2
docs/style/js/highlight.min.js vendored Normal file

File diff suppressed because one or more lines are too long

4
docs/style/js/jquery-2.1.4.min.js vendored Normal file

File diff suppressed because one or more lines are too long

7
docs/style/js/main.js Normal file
View file

@ -0,0 +1,7 @@
hljs.initHighlightingOnLoad();
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-71407002-1', 'auto');
ga('send', 'pageview');

View file

@ -0,0 +1,135 @@
// --------------------------------------------------
// Flexbox LESS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------
// Flexbox display
// flex or inline-flex
.flex-display(@display: flex) {
display: ~"-webkit-@{display}";
display: ~"-moz-@{display}";
display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
display: ~"-ms-@{display}"; // IE11
display: @display;
}
// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
.flex(@columns: initial) {
-webkit-flex: @columns;
-moz-flex: @columns;
-ms-flex: @columns;
flex: @columns;
}
// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
.flex-direction(@direction: row) {
-webkit-flex-direction: @direction;
-moz-flex-direction: @direction;
-ms-flex-direction: @direction;
flex-direction: @direction;
}
// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
.flex-wrap(@wrap: nowrap) {
-webkit-flex-wrap: @wrap;
-moz-flex-wrap: @wrap;
-ms-flex-wrap: @wrap;
flex-wrap: @wrap;
}
// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
.flex-flow(@flow) {
-webkit-flex-flow: @flow;
-moz-flex-flow: @flow;
-ms-flex-flow: @flow;
flex-flow: @flow;
}
// Display Order
// - applies to: flex items
// <integer>
.flex-order(@order: 0) {
-webkit-order: @order;
-moz-order: @order;
-ms-order: @order;
order: @order;
}
// Flex grow factor
// - applies to: flex items
// <number>
.flex-grow(@grow: 0) {
-webkit-flex-grow: @grow;
-moz-flex-grow: @grow;
-ms-flex-grow: @grow;
flex-grow: @grow;
}
// Flex shrink
// - applies to: flex item shrink factor
// <number>
.flex-shrink(@shrink: 1) {
-webkit-flex-shrink: @shrink;
-moz-flex-shrink: @shrink;
-ms-flex-shrink: @shrink;
flex-shrink: @shrink;
}
// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
.flex-basis(@width: auto) {
-webkit-flex-basis: @width;
-moz-flex-basis: @width;
-ms-flex-basis: @width;
flex-basis: @width;
}
// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
.justify-content(@justify: flex-start) {
-webkit-justify-content: @justify;
-moz-justify-content: @justify;
-ms-justify-content: @justify;
justify-content: @justify;
}
// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
.align-content(@align: stretch) {
-webkit-align-content: @align;
-moz-align-content: @align;
-ms-align-content: @align;
align-content: @align;
}
// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
.align-items(@align: stretch) {
-webkit-align-items: @align;
-moz-align-items: @align;
-ms-align-items: @align;
align-items: @align;
}
// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
.align-self(@align: auto) {
-webkit-align-self: @align;
-moz-align-self: @align;
-ms-align-self: @align;
align-self: @align;
}

237
docs/style/less/layout.less Normal file
View file

@ -0,0 +1,237 @@
.container {
max-width: 1271px;
margin: 0 auto;
}
.navbar {
padding: 1rem 2rem;
.flex-display();
.justify-content(space-between);
.name {
font-size: 2rem;
font-weight: 500;
color: white;
a {
color: white;
}
.org {
font-size: 0.8rem;
margin-left: 0.5rem;
color: rgba(255,255,255,0.8);
}
}
.actions {
.flex-display();
padding-top: 1rem;
padding-right: 1rem;
.link {
margin-left: 2rem;
text-transform: uppercase;
font-weight: 600;
font-size: 0.8rem;
a {
color: rgba(255,255,255,0.6);
&:hover {
color: white;
}
}
}
}
&.white {
background-color: white;
.name {
a {
color: @gray-darkest;
}
color: @gray-darkest;
.org {
color: @gray-darkest;
}
}
.actions {
.link {
a {
color: @brand-primary;
}
}
}
}
}
@media screen and (max-width: 600px) {
.navbar {
.name {
.org {
display: block;
margin-left: 0;
margin-top: 0.5rem;
line-height: 1rem;
}
}
}
}
.hero {
background-color: @color-gradient-start;
background-image: linear-gradient(-135deg, @color-gradient-start 0%, @color-gradient-end 100%);
.hamster {
padding: 1rem 2rem 3rem 2rem;
img {
width: 100%;
max-width: 500px;
}
text-align: center;
}
h3 {
padding-top: 1.5rem;
text-align: center;
color: white;
margin-bottom: 1rem;
img {
height: 30px;
width: auto;
margin-right: 0.7rem;
position: relative;
top: 0.4rem;
}
}
p {
strong {
font-weight: 700;
}
color: white;
font-size: 1.5rem;
text-align: center;
font-weight: 300;
padding: 1rem 2rem 0 2rem;
line-height: 2rem;
}
}
.content {
background-color: white;
.flex-display();
.flex-flow(row wrap);
&.blue {
background-color: @gray-dark;
color: white;
h2 {
color: white;
}
p {
color: rgba(255,255,255,0.8);
}
}
.wrapper-details {
padding: 2rem 2.5rem;
}
.details {
.points {
.flex-display();
.flex-direction(column);
.point {
padding-top: 1rem;
border-bottom: 1px solid @color-background;
&:last-child {
border-bottom: 0;
}
}
}
}
.terminal {
.flex-display();
.align-items(center);
.justify-content(center);
img {
width: 100%;
}
}
}
.footer {
background-color: @gray-darkest;
padding: 2rem;
color: white;
h3 {
text-align: center;
color: white;
margin-bottom: 0;
img {
height: 30px;
width: auto;
margin-right: 0.7rem;
position: relative;
top: 0.4rem;
}
}
.footer-links {
.flex-display();
.justify-content(center);
margin-top: 1.5rem;
.link {
margin-right: 0.7rem;
}
}
.copyright {
text-align: center;
margin-top: 1.5rem;
color: rgba(255,255,255,0.6);
}
}
@media screen and (max-width: 960px) {
.details, .terminal {
width: 100%;
}
.wrapper-terminal {
padding: 0 2rem 2rem 2rem;
}
}
@media screen and (min-width: 960px) {
.details {
width: 60%;
}
.terminal {
width: 40%;
}
.wrapper-terminal {
padding: 0 2rem 0 0;
}
}
p {
font-size: 1.2rem;
line-height: 1.5rem;
margin-bottom: 1rem;
}
h2 {
font-size: 2rem;
font-weight: 500;
margin-bottom: 1rem;
color: @blue-dark;
}
h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: @blue-dark;
}
a {
color: @brand-primary;
text-decoration: none;
&:hover {
color: lighten(@brand-primary, 5%);
}
}
body {
font-family: @font-regular;
-webkit-font-smoothing: antialiased;
font-size: 14px;
color: @gray-darkest;
background-color: @color-background;
}

View file

@ -0,0 +1,4 @@
@import "reset.less";
@import "variables.less";
@import "flexbox.less";
@import "layout.less";

View file

@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

View file

@ -0,0 +1,12 @@
@font-regular: "Helvetica Neue", Segoe UI, Arial, "Lucida Grande", sans-serif;
@brand-primary: #00DA9C;
@gray-darkest: #254451;
@gray-dark: #364449;
@blue-dark: #0077A8;
@color-background: #E7F4F9;
@color-gradient-start: #0078C5;
@color-gradient-end: #004775;