Layout updates, dark themes, tons o stuff (#1971)

This commit is contained in:
Josh south 2017-02-24 12:24:59 -08:00 committed by John Mulhausen
parent 1b2a71b4af
commit 12c25322c3
16 changed files with 3271 additions and 358 deletions

View File

@ -2,10 +2,10 @@
<a href="https://console.aws.amazon.com/cloudformation/home#/stacks/new?stackName=Docker&templateURL=https://editions-us-east-1.s3.amazonaws.com/aws/stable/Docker.tmpl" data-rel="Stable-1" target="blank" class="aws-deploy">![Docker for AWS](https://s3.amazonaws.com/cloudformation-examples/cloudformation-launch-stack.png)</a>
{% endcapture %}
{% capture aws_blue_latest %}
<a class="button darkblue-btn aws-deploy" href="https://console.aws.amazon.com/cloudformation/home#/stacks/new?stackName=Docker&templateURL=https://editions-us-east-1.s3.amazonaws.com/aws/stable/Docker.tmpl" data-rel="Stable-1" target="blank">Deploy Docker for AWS (stable)</a>
<a class="button primary-btn aws-deploy" href="https://console.aws.amazon.com/cloudformation/home#/stacks/new?stackName=Docker&templateURL=https://editions-us-east-1.s3.amazonaws.com/aws/stable/Docker.tmpl" data-rel="Stable-1" target="blank">Deploy Docker for AWS (stable)</a>
{% endcapture %}
{% capture aws_blue_beta %}
<a class="button darkblue-btn aws-deploy" href="https://console.aws.amazon.com/cloudformation/home#/stacks/new?stackName=Docker&templateURL=https://editions-us-east-1.s3.amazonaws.com/aws/edge/Docker.tmpl" data-rel="Beta-14" target="blank">Deploy Docker for AWS (beta)</a>
<a class="button primary-btn aws-deploy" href="https://console.aws.amazon.com/cloudformation/home#/stacks/new?stackName=Docker&templateURL=https://editions-us-east-1.s3.amazonaws.com/aws/edge/Docker.tmpl" data-rel="Beta-14" target="blank">Deploy Docker for AWS (beta)</a>
{% endcapture %}
{% capture azure_blue_latest %}
@ -17,4 +17,3 @@
{% capture azure_button_latest %}
<a href="https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fdownload.docker.com%2Fazure%2Fstable%2FDocker.tmpl" data-rel="Stable-1" target="_blank" class="azure-deploy">![Docker for Azure](http://azuredeploy.net/deploybutton.png)</a>
{% endcapture %}

View File

@ -1,17 +1,18 @@
<!-- NEED TO UPDATE FINAL SCRIPT FOR NEWSLETTER SIGNUP -->
<section class="newsletter_section">
<div class="container">
<form class="form-inline">
<div class="form-group">
<input type="email" class="form-control input" id="#add-id-here" placeholder="email address">
<button type="submit" class="outline-btn">Submit</button>
</div>
</form>
</div>
</section>
<!-- global footer -->
<!-- footer -->
<footer class="footer">
<!-- newsletter -->
<div class="newsletter_section">
<div class="container">
<div class="col-md-8">
<form class="form-inline">
<div class="form-group">
<input type="email" class="form-control input" placeholder="email address">
<button type="submit" class="button outline-btn newsletter">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="top_footer">
<div class="row">
@ -30,18 +31,18 @@
</ul>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<ul class="footer_links links_2">
<ul class="footer_links">
<li><a href="https://www.docker.com/products/overview">Product</a></li>
<li><a href="https://www.docker.com/pricing">Pricing</a></li>
<li><a href="https://www.docker.com/docker-community">Community Edition</a></li>
<li><a href="https://www.docker.com/enterprise">Enterprise Edition </a></li>
<li><a href="https://www.docker.com/products/docker-datacenter">Docker Datacenter</a></li>
<li><a href="https://www.docker.com/products/docker-cloud">Docker Cloud</a></li>
<li><a href="https://docs.docker.com/docker-store/">Docker Store</a></li>
<li><a href="https://cloud.docker.com/">Docker Cloud</a></li>
<li><a href="https://store.docker.com/">Docker Store</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<ul class="footer_links links_3">
<ul class="footer_links">
<li><a href="https://www.docker.com/docker-mac">Docker for Mac </a></li>
<li><a href="https://www.docker.com/docker-windows">Docker for Windows(PC)</a></li>
<li><a href="https://www.docker.com/docker-aws" class="web30">Docker for AWS</a></li>
@ -63,7 +64,7 @@
<li><a href="https://blog.docker.com" target="_blank">Blog</a></li>
<li><a href="https://training.docker.com/" target="_blank">Training</a></li>
<li><a href="https://www.docker.com/docker-support-services">Support</a></li>
<li><a href="https://www.docker.com/docker">KB</a></li>
<li><a href="https://success.docker.com/kbase">Knowledge Base</a></li>
<li><a href="https://www.docker.com/products/resources">Resources</a></li>
</ul>
</div>
@ -75,7 +76,7 @@
<li><a href="https://forums.docker.com/" target="_blank">Forums</a></li>
<li><a href="https://www.docker.com/community/docker-captains">Docker Captians</a></li>
<li><a href="https://www.docker.com/docker-community/scholarships">Scholarships</a></li>
<li><a href="https://www.docker.com/company/news-and-press">Community News</a></li>
<li><a href="https://blog.docker.com/curated/">Community News</a></li>
</ul>
</div>
</div>
@ -110,4 +111,4 @@
</div>
</div>
</footer>
<!-- / end footer -->
<!-- /end footer -->

View File

@ -1,54 +1,54 @@
<header class="header">
<div class="header">
<div class="fan"></div>
<div class="container">
<div class="row">
<nav class="nav-primary">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="logo" src="/images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="primary nav navbar-nav">
<li><a href="https://docker.com/what-docker">What is Docker?</a></li>
<li><a href="https://docker.com/get-docker">Product</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Get Docker <span class="caret"></span></a>
<ul class="dropdown-menu nav-main">
<h6 class="dropdown-header">For Desktops</h6>
<li><a href="https://docker.com/docker-mac">Mac</a></li>
<li><a href="https://docker.com/docker-windows">Windows</a></li>
<h6 class="dropdown-header">For Cloud Providers</h6>
<li><a href="https://docker.com/docker-aws">AWS</a></li>
<li><a href="https://docker.com/docker-microsoft-azure">Azure</a></li>
<h6 class="dropdown-header">For Servers</h6>
<li><a href="https://docker.com/docker-windows-server">Windows Server</a></li>
<li><a href="https://docker.com/docker-centos">CentOS</a></li>
<li><a href="https://docker.com/docker-debian">Debian</a></li>
<li><a href="https://docker.com/docker-fedora">Fedora</a></li>
<li><a href="https://docker.com/docker-oracle-linux">Oracle Enterprise Linux</a></li>
<li><a href="https://docker.com/docker-rhel">RHEL</a></li>
<li><a href="https://docker.com/docker-sles">SLES</a></li>
<li><a href="https://docker.com/docker-ubuntu">Ubuntu</a></li>
</ul>
</li>
<li><a href="https://docs.docker.com">Docs</a></li>
<li><a href="https://forums.docker.com">Community</a></li>
</ul>
<ul class="nav navbar-nav navbar-right user-nav">
<li><a href="https://cloud.docker.com/">Create Docker ID</a></li>
<li><a href="https://cloud.docker.com/login">Sign In</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
<div class="row">
<nav class="nav-primary">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="logo" src="../images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="primary nav navbar-nav">
<li><a href="https://docker.com/what-docker">What is Docker?</a></li>
<li><a href="https://docker.com/get-docker">Product</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Get Docker <span class="caret"></span></a>
<ul class="dropdown-menu nav-main">
<h6 class="dropdown-header">For Desktops</h6>
<li><a href="https://docker.com/docker-mac">Mac</a></li>
<li><a href="https://docker.com/docker-windows">Windows</a></li>
<h6 class="dropdown-header">For Cloud Providers</h6>
<li><a href="https://docker.com/docker-aws">AWS</a></li>
<li><a href="https://docker.com/docker-microsoft-azure">Azure</a></li>
<h6 class="dropdown-header">For Servers</h6>
<li><a href="https://docker.com/docker-windows-server">Windows Server</a></li>
<li><a href="https://docker.com/docker-centos">CentOS</a></li>
<li><a href="https://docker.com/docker-debian">Debian</a></li>
<li><a href="https://docker.com/docker-fedora">Fedora</a></li>
<li><a href="https://docker.com/docker-oracle-linux">Oracle Enterprise Linux</a></li>
<li><a href="https://docker.com/docker-rhel">RHEL</a></li>
<li><a href="https://docker.com/docker-sles">SLES</a></li>
<li><a href="https://docker.com/docker-ubuntu">Ubuntu</a></li>
</ul>
</li>
<li><a href="https://docs.docker.com">Docs</a></li>
<li><a href="https://docker.com/docker-community">Community</a></li>
</ul>
<ul class="nav navbar-nav navbar-right user-nav">
<li><a href="https://cloud.docker.com/">Create Docker ID</a></li>
<li><a href="https://cloud.docker.com/login">Sign In</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</div>
<!-- hero banner text -->
<div class="container">
@ -57,11 +57,46 @@
<div class="hero-text-centered">
<h1>Docker's Documentation</h1>
<p>Docker provides a way to run applications securely isolated in a container, packaged with all its dependencies and libraries.</p>
<ul>
<li><a class="button transparent-btn" href="#">Looking for Support</a></li>
<li> <a class="button secondary-btn" href="#">Get Training</a></li>
<ul class="buttons">
<li><a class="button transparent-btn" href="https://support.docker.com" target="_blank">Looking for Support</a></li>
<li> <a class="button secondary-btn" href="https://training.docker.com" target="_blank">Get Training</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- nav-secondary -->
<nav class="nav-secondary-tabs" data-spy="affix" data-offset-top="490">
<div class="container-fluid">
<!-- <div class="affix-logo">
<img class="logo" src="../images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs">
</div> -->
<div class="search-form">
<form class="search-form form-inline ng-pristine ng-valid" id="searchForm" action="/search/">
<input class="search-field form-control ds-input" id="st-search-input" value="" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
<div id="autocompleteContainer">
<div id="autocompleteResults"></div>
</div>
<!-- <button type="submit" class="search-submit btn btn-default">Search</button> -->
</form>
</div>
<div id="tabs">
<ul class="tabs nav navbar-nav navbar-left">
{% include treebuilder.html %}
</ul>
</div>
<div class="ctrl-right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Docker 1.13 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
{% for item in site.data.docsarchive.docker-compose %}
<li><a href="/{{ item[0] }}/">Docker {{ item[0] }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
</nav>
</div>

View File

@ -12,8 +12,7 @@
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<div class="search-form" id="search-div">
<form class="navbar-form navbar-left">
<!-- <input type="text" class="form-control" id ="search" placeholder="Search Documentation"> -->
<form>
<form class="search-form form-inline ng-pristine ng-valid" id="searchForm" action="/search/">
<input class="search-field form-control ds-input" id="st-search-input" value="" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
<div id="autocompleteContainer">
@ -35,8 +34,9 @@
Docker 1.13 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Docker 1.12</a></li>
<li><a href="#">Docker 1.11</a></li>
{% for item in site.data.docsarchive.docker-compose %}
<li><a href="/{{ item[0] }}/">Docker {{ item[0] }}</a></li>
{% endfor %}
</ul>
</div>
</div>

View File

@ -2,5 +2,4 @@
<ul class="nav navbar-collapse" id="stacked-menu">
{{ leftnav }}
</ul>
<!-- end sidebar nav -->
</div>

View File

@ -2,7 +2,7 @@
{% for item in tree %}
{% if item.sectiontitle %}{% if foundBranch=="false" %}{% capture treeString %}{{ item.section | downcase }}{% endcapture %}{% capture pageURLString %}"{{ page.url }}"{% endcapture %}{% else %}{% assign treeString="" %}{% endif %}
<li><a data-target="#item{{ forloop.index }}" data-toggle="collapse" data-parent="#stacked-menu"{% if treeString contains pageURLString %}{% assign foundBranch="true"%} class="active" aria-expanded="true"{% else %} class="collapsed" aria-expanded="false"{% endif %}>{{ item.sectiontitle }}<span class="caret arrow"></span></a>
<ul class="nav collapse{% if foundBranch == "true" %} in{% endif %}" id="#item{{ forloop.index }}" aria-expanded="{% if foundBranch == "true" %}true{% else %}false{% endif %}">{% assign tree = item.section %}{% include tree.html %}</ul>
<ul class="nav collapse{% if foundBranch == "true" %}{% endif %}" id="#item{{ forloop.index }}" aria-expanded="{% if foundBranch == "true" %}true{% else %}false{% endif %}">{% assign tree = item.section %}{% include tree.html %}</ul>
</li>
{% else %}
<li><a href="{{ item.path }}"{% if item.path == page.url and item.nosync != true %} class="active currentPage"{% endif %}>{{ item.title }}</a></li>

View File

@ -26,7 +26,7 @@
<!-- End of logic for 'edit this button' -->
<!DOCTYPE html>
<html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface no-generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths retina-display is_not_retina chrome version webkit" lang="en">
<html lang="en">
<head>
<base href="{{ basehref }}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@ -38,18 +38,6 @@
ng\:form {
display: block;
}
div#autocompleteContainer {
background: #fff;
border: 1px solid #ccc;
/* float: left; */
padding: 21px 0 30px 0;
margin: 10px 0 0 0;
position: absolute;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
</style>
<script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=k6svi4faiclrdpi5eax4n23dzy"></script>
<script type="text/javascript">
@ -74,30 +62,31 @@ div#autocompleteContainer {
<!-- <link rel="stylesheet" href="/css/documentation.css"> -->
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/main.css">
<link id="pagestyle" rel="stylesheet" href="/css/style.css">
<!-- temp css will be removed -->
<link rel="stylesheet" href="/css/temp.css">
{% seo %}
{% if page.hide_from_sitemap %}<meta name="robots" content="noindex" />{% endif %}
</head>
<body class="html front not-logged-in no-sidebars page-node page-node- page-node-1 node-type-front-page path-docker ng-scope short retina-display all_loaded" ng-app="Docker" ng-controller="DockerController" style="">
<header>
{% if page.landing == true %}{% include global-header.html %}{% endif %}
{% include header.html %}
</header>
<body ng-app="Docker" ng-controller="DockerController">
<header>
{% if page.landing == true %}{% include global-header.html %}{% endif %}
{% if page.landing != true %}{% include header.html %}{% endif %}
</header>
<div id="wrapper">
<div id="wrapper" class="toggled">
<main class="main" id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar collapse">
<div class="col-sm-3 col-md-3 sidebar{% if page.landing == true %}-home{%else%} col-sm-2 col-md-2{% endif %} collapse">
{% include side-menu.html %}
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 content">
<div class="{% if page.landing == true %}col-sm-9 col-md-9 main-content{%else%}col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-2 content{% endif %}">
<section class="section" id="DocumentationText">
{% if page.title %}
<h1>{{ page.title }}</h1>{% endif %} {% if page.advisory %}
<blockquote style="border-left: 6px solid #FFD601; background: -webkit-gradient(linear, left top, left bottom, from(#FBFCFC), to(#EBEDEF));">{{ site.data.advisories.texts[page.advisory] | markdownify }}</blockquote>{% endif %} {% unless page.tree == false %}{% include read_time.html %}{% endunless %} {{ content }} {% if page.noratings != true %}
<blockquote>{{ site.data.advisories.texts[page.advisory] | markdownify }}</blockquote>{% endif %} {% unless page.tree == false %}{% include read_time.html %}{% endunless %} {{ content }} {% if page.noratings != true %}
<div style="text-align: center; margin-top: 50px">
<img src="/images/chat.png" alt="chat icon" style="margin-right: 10px">
<b>Feedback?</b> Suggestions? Can't find something in the docs?<br/> {% if edit_url != "" %}
@ -148,33 +137,32 @@ div#autocompleteContainer {
}
</script>
</div>
<div id="sidebar-wrapper">
<div id="{% if page.landing == true %}sidebar-wrapper-home{%else%}sidebar-wrapper{% endif %}">
<div class="toc-nav">
<section class="section" id="RightColumnSection">
<div id="feedback-links">
<ul>
{% if edit_url != "" %}
<li><a href="{{ edit_url }}">&#9998;&nbsp;Edit this page</a></li>{% endif %}
<li><a href="{{ edit_url }}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit this page</a></li>{% endif %}
<li><a href="https://github.com/docker/docker.github.io/issues/new?title=Feedback for: {{ page.path }}&assignee={% if page.assignee %}{{ page.assignee }}{% else %}{{ page.defaultassignee }}{% endif %}&body=File: [{{ page.path }}](https://docs.docker.com{{ page.url }})"
class="nomunge">&#10003;&nbsp;Request docs changes</a></li>
<li><a href="https://www.docker.com/docker-support-services">&#x0003F;&nbsp;Get support</a></li>
class="nomunge"><i class="fa fa-check" aria-hidden="true"></i> Request docs changes</a></li>
<li><a href="https://www.docker.com/docker-support-services"><i class="fa fa-question" aria-hidden="true"></i> Get support</a></li>
<li><div class="toggle-mode">
<div class="icon">
<i class="fa fa-sun-o" aria-hidden="true"></i>
</div>
<div class="toggle-switch">
<label class="switch">
<input type="checkbox" id="switch-style">
<div class="slider round"></div>
</label>
</div>
<div class="icon">
<i class="fa fa-moon-o" aria-hidden="true"></i>
</div>
</div></li>
</ul>
</div>
<div class="toggle-mode">
<div class="icon">
<i class="fa fa-sun-o" aria-hidden="true"></i>
</div>
<div class="toggle-switch">
<label class="switch">
<input type="checkbox" id="switch-style">
<div class="slider round"></div>
</label>
</div>
<div class="icon">
<i class="fa fa-moon-o" aria-hidden="true"></i>
</div>
</div>
{% unless page.notoc %} {% assign my_min = page.toc_min | default: site.toc_min | default: 2 %} {% assign my_max = page.toc_max | default: site.toc_max | default: 3 %} {% assign my_name = page.url | default: "unnamed" %}
<div id="side-toc">
<div id="side-toc-title">On this page:</div>
@ -199,10 +187,10 @@ div#autocompleteContainer {
<script>
hljs.initHighlightingOnLoad();
</script>
<script async="" src="/js/anchorlinks.js"></script>
<script src="/js/anchorlinks.js"></script>
<script defer src="/js/menu.js"></script>
<script src="/js/jquery.js"></script>
<script async="" defer src="/js/menu.js"></script>
<script async="" src="/js/bootstrap.min.js"></script>
<script async="" defer src="/js/docs.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script defer src="/js/docs.js"></script>
</body>
</html>

1429
css/style-alt.css Normal file

File diff suppressed because it is too large Load Diff

1454
css/style.css Normal file

File diff suppressed because it is too large Load Diff

View File

@ -3,26 +3,49 @@
* this css will be integrated into master. for now testing.......
*
*/
.search-form {
float: left;
width: 295px;
margin: 2px 0 0!important;
.alert-info {
border: 0;
border-radius: 0;
color: #31708f;
background-color: #3F51B5!important;
border-color: #bce8f1;
text-align: center;
color: #fff;
margin-bottom: 0;
}
.form-control:focus {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
.alert-info ul {
list-style-type: none;
}
.search-banner {
width: 100%;
align: center;
.close {
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #fffdfd;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
margin: 10px 15px 0 0;
}
.search-form .algolia-autocomplete {
width: 100%;
padding-right: 54px;
/*
*
* toc **********************************************************
*
*/
div#side-toc-title {
font-weight: bold;
margin: 0 0 10px 13px;
}
.offcanvas a:focus, .toc-nav a:hover {
color: opacity: .8;
}
/*
*
* MOBILE VIEWS
*
*/
/*
*
@ -43,67 +66,22 @@ a.gs-title {
font-size: 14px!important;
}
span.reading-time {
font-style: italic;
font-size: 80%;
display: block;
padding-top: 10px;
padding-bottom: 10px;
color: #999;
}
span.reading-time-label {
}
img.with-border {
border: 1px solid #eaeaea;
}
div#autocompleteContainer {
border: 0!important;
margin: 0!important;
.cse input.gsc-search-button:focus,
input.gsc-search-button:focus {
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
}
#side-toc {
border: 0;
padding: 20px;
margin-top: 20px;
width: 100%;
}
#feedback-links {
margin-top: 20px;
width: 100%;
}
#side-toc-contents,
#feedback-links {
list-style-type: none;
font-size: 80%;
}
#side-toc-contents ul,
#feedback-links ul {
margin-bottom: 0;
}
#side-toc-contents li {
padding-bottom: 7px;
padding-top: 7px;
line-height: 1!important;
}
#side-toc-contents ul ul li {
padding-left: 14px;
}
#side-toc-title {
font-weight: bolder;
font-size: 90%;
color: #155A74;
padding-bottom: 5px;
}
#site-generation {
font-size: 9px;
color: #999;
font-style: italic;
.cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
width: 13px;
height: 13px;
padding: 6px 27px;
min-width: 13px;
margin-top: 2px;
}

View File

@ -12,27 +12,6 @@ redirect_from:
- /engine/installation/rackspace/
- /engine/installation/joyent/
---
<style type="text/css">
.tg td {
width="50%";padding:10px 5px;border:none;overflow:hidden;word-break:normal; margin-bottom: .5rem;
}
#DocumentationText .bluebar {
width="50%";font-size:20px;font-weight:bold;background-color:#1488C6;color:#ffffff;text-align:center;vertical-align:top;
}
#DocumentationText .bluebar a{
color:#ffffff;font-weight:normal;text-decoration: underline;
}
#DocumentationText .plain p{
font-weight:normal;margin-bottom: 0.5rem
}
.plain p{
width="50%";vertical-align:top;
}
.whale a img
{
float:right;
}
</style>
<center>
<div class="whale"><a href="https://cloud.docker.com/" target="_blank" class="_"><img src="images/Docker-Cloud-Blue.svg" height="150" width="150" fill="#1488C6" alt="Docker Cloud logo" title="Let's go! Click to go to Docker Cloud." float="right"></a></div>

View File

@ -21,8 +21,8 @@ beta channels, see the
<table style="width:100%">
<tr>
<th style="font-size: x-large; font-family: arial">Stable channel</th>
<th style="font-size: x-large; font-family: arial">Beta channel</th>
<th>Stable channel</th>
<th>Beta channel</th>
</tr>
<tr valign="top">
<td width="50%">This installer is fully baked and tested, and comes

247
index.md
View File

@ -9,9 +9,8 @@ notoc: true
Docker packages your app with its dependencies, freeing you from worrying about your
system configuration, and making your app more portable.
<table>
<tr valign="top">
<td width="50%">
<div class="row">
<div class="col-md-6">
{% capture basics %}
### Learn the basics of Docker
@ -19,9 +18,10 @@ The basic tutorial introduces Docker concepts, tools, and commands. The examples
and pull Docker images, and run them as containers. This
tutorial stops short of teaching you how to deploy applications.
{% endcapture %}{{ basics | markdownify }}
</td>
<td width="50%">
{% capture basics %}[Start the basic tutorial](/engine/getstarted/){: class="button outline-btn"}{% endcapture %}{{ basics | markdownify }}
</div>
<div class="col-md-6">
{% capture apps %}
### Define and deploy applications
@ -29,135 +29,118 @@ The define-and-deploy tutorial shows how to relate
containers to each other and define them as services in an application that is ready to deploy at scale in a
production environment. Highlights [Compose Version 3 new features](/engine/getstarted-voting-app/index.md#compose-version-3-features-and-compatibility) and swarm mode.
{% endcapture %}{{ apps | markdownify }}
{% capture apps %}[Start the application tutorial](/engine/getstarted-voting-app/){: class="button outline-btn"}{% endcapture %}{{ apps | markdownify }}
</div>
</div>
</td></tr>
<tr valign="top">
<td width="50%">{% capture basics %}[Start the basic tutorial](/engine/getstarted/){: class="button outline-btn"}{% endcapture %}{{ basics | markdownify }}
</td>
<td width="50%">{% capture apps %}[Start the application tutorial](/engine/getstarted-voting-app/){: class="button outline-btn"}{% endcapture %}{{ apps | markdownify }}
</td>
</tr>
</table>
## Components
<section class="section projects_items_section GenericDev" style="margin-top:-150px; margin-bottom:-150px">
<ul class="items widthcol3 media">
<li>
<div class="media_image">
<a href="/docker-for-mac/"><img src="/images/icon-apple@2X.png" alt="Docker for Mac"></a>
</div>
<div class="media_content">
<div data-mh="mh_docker_projects">
<h3><a href="/docker-for-mac/">Docker for Mac</a></h3>
<p>A native application using the macOS sandbox security model which delivers all Docker tools to your Mac.</p>
</div>
</div>
</li>
<li>
<div class="media_image">
<a href="/docker-for-windows/"><img src="/images/icon-windows@2X.png" alt="Docker for Windows"></a>
</div>
<div class="media_content">
<div data-mh="mh_docker_projects">
<h3><a href="/docker-for-windows/">Docker for Windows</a></h3>
<p>A native Windows application which delivers all Docker tools to your Windows computer.</p>
</div>
</div>
</li>
<li>
<div class="media_image">
<a href="/engine/installation/linux/"><img src="/images/icon-linux@2X.png" alt="Docker for Linux"></a>
</div>
<div class="media_content">
<div data-mh="mh_docker_projects">
<h3><a href="/engine/installation/linux/">Docker for Linux</a></h3>
<p>Install Docker on a computer which already has a Linux distribution installed.</p>
</div>
</div>
</li>
</ul>
<ul class="items widthcol media">
<li>
<div class="media_image">
<a href="/engine/installation/"><img src="/images/icon-engine@2X.png" alt="Docker Engine"></a>
</div>
<div class="media_content">
<div data-mh="mh_docker_projects">
<h3><a href="/engine/installation/">Docker Engine</a></h3>
<p>
Create Docker images and run Docker containers.</p>
<p>
As of v1.12.0, Engine includes <a href="/engine/swarm/">swarm mode</a> container orchestration features.</p>
</div>
</div>
</li>
</ul>
<ul class="items widthcol2 media">
<li>
<div class="media_image">
<a href="/docker-hub/index.md"><img src="/images/icon-hub@2X.png" alt="Docker Hub"></a>
</div>
<div class="media_content">
<div data-mh="mh_docker_projects">
<h3><a href="/docker-hub/index.md">Docker Hub</a></h3>
<p>
A hosted registry service for managing and building images.</p>
</div>
</div>
</li>
<li>
<div class="media_image">
<a href="/docker-cloud/index.md"><img src="/images/icon-cloud@2X.png" alt="Docker Cloud"></a>
</div>
<div class="media_content">
<div data-mh="mh_docker_projects">
<h3><a href="/docker-cloud/index.md">Docker Cloud</a></h3>
<p>
A hosted service for building, testing, and deploying Docker images to your hosts.</p>
</div>
</div>
</li>
<li>
<div class="media_image">
<a href="/datacenter/dtr/2.2/guides/"><img src="/images/icon-registry@2X.png" alt="Docker Trusted Registry"></a>
</div>
<div class="media_content">
<div data-mh="mh_docker_projects">
<h3><a href="/datacenter/dtr/2.2/guides/">Docker Trusted Registry</a></h3>
<p>
(DTR) stores and signs your images.</p>
</div>
</div>
</li>
<li>
<div class="media_image">
<a href="/datacenter/ucp/2.1/guides/index.md"><img src="/images/icon-ucp@2X.png" alt="Docker Universal Control Plane"></a>
</div>
<div class="media_content">
<div data-mh="mh_docker_projects">
<h3><a href="/datacenter/ucp/2.1/guides/index.md">Docker Universal Control Plane</a></h3>
<p>
(UCP) Manage a cluster of on-premises Docker hosts as if they were a single machine.
</p>
</div>
</div>
</li>
<li>
<div class="media_image">
<a href="/machine/install-machine/"><img src="/images/icon-machine@2X.png" alt="Docker Machine"></a>
</div>
<div class="media_content">
<div data-mh="mh_docker_projects">
<h3><a href="/machine/install-machine/">Docker Machine</a></h3>
<p>
Automate container provisioning on your network or in
the cloud. Available for Windows, macOS, or Linux.</p>
</div>
</div>
</li>
<li>
<div class="media_image">
<a href="/compose/overview/"><img src="/images/icon-compose@2X.png" alt="Docker Compose"></a>
<div class="block">
<div class="component-container">
<div class="row">
<div class="col-md-4">
<div class="component">
<div class="component-icon">
<a href="docker-for-mac/"> <img src="../images/icon-apple@2X.png" alt="Docker for Mac"> </a>
</div>
<h3 id="docker-for-mac"><a href="docker-for-mac/">Docker for Mac</a></h3>
<p>A native application using the macOS sandbox security model which delivers all Docker tools to your Mac.</p>
</div>
</div>
<div class="col-md-4">
<div class="component">
<div class="component-icon">
<a href="docker-for-mac/"> <img src="../images/icon-windows@2X.png" alt="Docker for Mac"> </a>
</div>
<h3 id="docker-for-windows"><a href="/#docker-for-windows">Docker for Windows</a></h3>
<p>A native Windows application which delivers all Docker tools to your Windows computer.</p>
</div>
</div>
<div class="col-md-4">
<div class="component">
<div class="component-icon">
<a href="docker-for-mac/"> <img src="../images/icon-linux@2X.png" alt="Docker for Mac"> </a>
</div>
<h3 id="docker-for-linux"><a href="/#docker-for-linux">Docker for Linux</a></h3>
<p>Install Docker on a computer which already has a Linux distribution installed.</p>
</div>
</div>
<!--components-full-width-->
<div class="col-md-12">
<!--engine-->
<div class="component-full">
<div class="component-full-icon">
<img src="../images/icon-engine@2X.png" alt="Docker Engine">
</div>
<div class="component-full-copy">
<h3 id="docker-engine"><a href="engine/installation/">Docker Engine</a></h3>
<p>Create Docker images and run Docker containers. As of v1.12.0, Engine includes <a href="/#">swarm mode</a> container orchestration features.</p>
</div>
</div>
<!--cloud-->
<div class="component-full">
<div class="component-full-icon">
<img src="../images/icon-cloud@2X.png" alt="Docker Engine">
</div>
<div class="component-full-copy">
<h3 id="docker-cloud"><a href="/#">Docker Cloud</a></h3>
<p>A hosted service for building, testing, and deploying Docker images to your hosts.</p>
</div>
</div>
<!--UCP-->
<div class="component-full">
<div class="component-full-icon">
<img src="../images/icon-ucp@2X.png" alt="Docker Universal Control Plane">
</div>
<div class="component-full-copy">
<h3 id="docker-cloud"><a href="datacenter/ucp/1.1/overview/">Docker Universal Control Plane</a></h3>
<p>(UCP) Manage a cluster of on-premises Docker hosts as if they were a single machine.</p>
</div>
</div>
<!--compose-->
<div class="component-full">
<div class="component-full-icon">
<img src="../images/icon-compose@2X.png" alt="Docker Compose">
</div>
<div class="component-full-copy">
<h3 id="docker-cloud"><a href="compose/overview/">Docker Compose</a></h3>
<p>Define applications built using multiple containers.</p>
</div>
</div>
<!--hub-->
<div class="component-full">
<div class="component-full-icon">
<img src="../images/icon-hub@2X.png" alt="Docker Hub">
</div>
<div class="component-full-copy">
<h3 id="docker-cloud"><a href="docker-hub/overview/">Docker Hub</a></h3>
<p>A hosted registry service for managing and building images.</p>
</div>
</div>
<!--dtr-->
<div class="component-full">
<div class="component-full-icon">
<img src="../images/icon-registry@2X.png" alt="Docker Trusted Registry">
</div>
<div class="component-full-copy">
<h3 id="docker-cloud"><a href="docker-trusted-registry/">Docker Trusted Registry</a></h3>
<p>(DTR) stores and signs your images.</p>
</div>
</div>
<!--machine-->
<div class="component-full">
<div class="component-full-icon">
<img src="../images/icon-machine@2X.png" alt="Docker Machine">
</div>
<div class="component-full-copy">
<h3 id="docker-cloud"><a href="machine/install-machine/">Docker Machine</a></h3>
<p>Automate container provisioning on your network or in the cloud. Available for Windows, macOS, or Linux.</p>
</div>
</div>
<!-- end col-12-->
</div>
<!-- end component-container-->
</div>
</div>
</div>

View File

@ -9,7 +9,7 @@ $("#menu-toggle").click(function(e) {
$("#wrapper").toggleClass("toggled");
});
var navHeight = $('.navbar').outerHeight(true) + 10;
var navHeight = $('.navbar').outerHeight(true) + 80;
$(document.body).scrollspy({
target: '#leftCol',
@ -42,6 +42,34 @@ $(document).ready(function(){
});
});
$(document).ready(function(){
// Add smooth scrolling to all links
$(".nav-sidebar ul li a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
/*
*
* make dropdown show on hover *********************************************************************
@ -53,3 +81,43 @@ $('ul.nav li.dropdown').hover(function() {
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
/*
*
* swapStyleSheet*********************************************************************
*
*/
function swapStyleSheet(sheet) {
document.getElementById('pagestyle').setAttribute('href', sheet);
}
$('#switch-style').change(function() {
if ($(this).is(':checked')) {
swapStyleSheet('/css/style-alt.css');
} else {
swapStyleSheet('/css/style.css');
}
});
/*
*
* TEMP HACK For side menu*********************************************************************
*
*/
$('.nav-sidebar ul li a').click(function() {
$(this).addClass('collapse').siblings().toggleClass('in');
});
if($('.nav-sidebar ul a.active').length != 0)
{
$('.nav-sidebar ul').click(function() {
$(this).addClass('collapse in').siblings;
});
}

View File

@ -36,7 +36,7 @@ function highlightMe(inputTxt,keyword)
{
inputTxt = String(inputTxt);
simpletext = new RegExp("(" + keyword + ")","gi");
return inputTxt.replace(simpletext, "<span style='background-color:yellow'>$1</span>")
return inputTxt.replace(simpletext, "<span>$1</span>")
}
function matches(inputTxt,searchTxt)
{

View File

@ -33,12 +33,12 @@ production environment. Highlights [Compose Version 3 new features](/engine/gets
<tr valign="top">
<td width="50%">
{% capture basics %}
[Start the basic tutorial](/engine/getstarted/){: class="button secondary-btn"}
[Start the basic tutorial](/engine/getstarted/){: class="button primary-btn"}
{% endcapture %}{{ basics | markdownify }}
</td>
<td width="50%">
{% capture apps %}
[Start the application tutorial](/engine/getstarted-voting-app/){: class="button secondary-btn"}
[Start the application tutorial](/engine/getstarted-voting-app/){: class="button primary-btn"}
{% endcapture %}{{ apps | markdownify }}
</td>
</tr>