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> <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 %} {% endcapture %}
{% capture aws_blue_latest %} {% 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 %} {% endcapture %}
{% capture aws_blue_beta %} {% 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 %} {% endcapture %}
{% capture azure_blue_latest %} {% capture azure_blue_latest %}
@ -17,4 +17,3 @@
{% capture azure_button_latest %} {% 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> <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 %} {% endcapture %}

View File

@ -1,17 +1,18 @@
<!-- NEED TO UPDATE FINAL SCRIPT FOR NEWSLETTER SIGNUP --> <!-- footer -->
<section class="newsletter_section"> <footer class="footer">
<!-- newsletter -->
<div class="newsletter_section">
<div class="container"> <div class="container">
<div class="col-md-8">
<form class="form-inline"> <form class="form-inline">
<div class="form-group"> <div class="form-group">
<input type="email" class="form-control input" id="#add-id-here" placeholder="email address"> <input type="email" class="form-control input" placeholder="email address">
<button type="submit" class="outline-btn">Submit</button> <button type="submit" class="button outline-btn newsletter">Submit</button>
</div> </div>
</form> </form>
</div> </div>
</section> </div>
</div>
<!-- global footer -->
<footer class="footer">
<div class="container"> <div class="container">
<div class="top_footer"> <div class="top_footer">
<div class="row"> <div class="row">
@ -30,18 +31,18 @@
</ul> </ul>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-2"> <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/products/overview">Product</a></li>
<li><a href="https://www.docker.com/pricing">Pricing</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/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/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-datacenter">Docker Datacenter</a></li>
<li><a href="https://www.docker.com/products/docker-cloud">Docker Cloud</a></li> <li><a href="https://cloud.docker.com/">Docker Cloud</a></li>
<li><a href="https://docs.docker.com/docker-store/">Docker Store</a></li> <li><a href="https://store.docker.com/">Docker Store</a></li>
</ul> </ul>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <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-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-windows">Docker for Windows(PC)</a></li>
<li><a href="https://www.docker.com/docker-aws" class="web30">Docker for AWS</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://blog.docker.com" target="_blank">Blog</a></li>
<li><a href="https://training.docker.com/" target="_blank">Training</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-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> <li><a href="https://www.docker.com/products/resources">Resources</a></li>
</ul> </ul>
</div> </div>
@ -75,7 +76,7 @@
<li><a href="https://forums.docker.com/" target="_blank">Forums</a></li> <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/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/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> </ul>
</div> </div>
</div> </div>
@ -110,4 +111,4 @@
</div> </div>
</div> </div>
</footer> </footer>
<!-- / end footer --> <!-- /end footer -->

View File

@ -1,4 +1,4 @@
<header class="header"> <div class="header">
<div class="fan"></div> <div class="fan"></div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -11,7 +11,7 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<img class="logo" src="/images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs"> <img class="logo" src="../images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs">
</div> </div>
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="primary nav navbar-nav"> <ul class="primary nav navbar-nav">
@ -38,7 +38,7 @@
</ul> </ul>
</li> </li>
<li><a href="https://docs.docker.com">Docs</a></li> <li><a href="https://docs.docker.com">Docs</a></li>
<li><a href="https://forums.docker.com">Community</a></li> <li><a href="https://docker.com/docker-community">Community</a></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right user-nav"> <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/">Create Docker ID</a></li>
@ -57,11 +57,46 @@
<div class="hero-text-centered"> <div class="hero-text-centered">
<h1>Docker's Documentation</h1> <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> <p>Docker provides a way to run applications securely isolated in a container, packaged with all its dependencies and libraries.</p>
<ul> <ul class="buttons">
<li><a class="button transparent-btn" href="#">Looking for Support</a></li> <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="#">Get Training</a></li> <li> <a class="button secondary-btn" href="https://training.docker.com" target="_blank">Get Training</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</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 id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<div class="search-form" id="search-div"> <div class="search-form" id="search-div">
<form class="navbar-form navbar-left"> <form>
<!-- <input type="text" class="form-control" id ="search" placeholder="Search Documentation"> -->
<form class="search-form form-inline ng-pristine ng-valid" id="searchForm" action="/search/"> <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;"> <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="autocompleteContainer">
@ -35,8 +34,9 @@
Docker 1.13 <span class="caret"></span> Docker 1.13 <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Docker 1.12</a></li> {% for item in site.data.docsarchive.docker-compose %}
<li><a href="#">Docker 1.11</a></li> <li><a href="/{{ item[0] }}/">Docker {{ item[0] }}</a></li>
{% endfor %}
</ul> </ul>
</div> </div>
</div> </div>

View File

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

View File

@ -2,7 +2,7 @@
{% for item in tree %} {% 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 %} {% 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> <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> </li>
{% else %} {% else %}
<li><a href="{{ item.path }}"{% if item.path == page.url and item.nosync != true %} class="active currentPage"{% endif %}>{{ item.title }}</a></li> <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' --> <!-- End of logic for 'edit this button' -->
<!DOCTYPE html> <!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> <head>
<base href="{{ basehref }}"/> <base href="{{ basehref }}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@ -38,18 +38,6 @@
ng\:form { ng\:form {
display: block; 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> </style>
<script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=k6svi4faiclrdpi5eax4n23dzy"></script> <script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=k6svi4faiclrdpi5eax4n23dzy"></script>
<script type="text/javascript"> <script type="text/javascript">
@ -74,30 +62,31 @@ div#autocompleteContainer {
<!-- <link rel="stylesheet" href="/css/documentation.css"> --> <!-- <link rel="stylesheet" href="/css/documentation.css"> -->
<link rel="stylesheet" href="/css/font-awesome.min.css"> <link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.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 --> <!-- temp css will be removed -->
<link rel="stylesheet" href="/css/temp.css"> <link rel="stylesheet" href="/css/temp.css">
{% seo %} {% seo %}
{% if page.hide_from_sitemap %}<meta name="robots" content="noindex" />{% endif %} {% if page.hide_from_sitemap %}<meta name="robots" content="noindex" />{% endif %}
</head> </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=""> <body ng-app="Docker" ng-controller="DockerController">
<header> <header>
{% if page.landing == true %}{% include global-header.html %}{% endif %} {% if page.landing == true %}{% include global-header.html %}{% endif %}
{% include header.html %} {% if page.landing != true %}{% include header.html %}{% endif %}
</header> </header>
<div id="wrapper"> <div id="wrapper" class="toggled">
<main class="main" id="page-content-wrapper"> <main class="main" id="page-content-wrapper">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <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 %} {% include side-menu.html %}
</div> </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"> <section class="section" id="DocumentationText">
{% if page.title %} {% if page.title %}
<h1>{{ page.title }}</h1>{% endif %} {% if page.advisory %} <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"> <div style="text-align: center; margin-top: 50px">
<img src="/images/chat.png" alt="chat icon" style="margin-right: 10px"> <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 != "" %} <b>Feedback?</b> Suggestions? Can't find something in the docs?<br/> {% if edit_url != "" %}
@ -148,20 +137,17 @@ div#autocompleteContainer {
} }
</script> </script>
</div> </div>
<div id="{% if page.landing == true %}sidebar-wrapper-home{%else%}sidebar-wrapper{% endif %}">
<div id="sidebar-wrapper">
<div class="toc-nav"> <div class="toc-nav">
<section class="section" id="RightColumnSection"> <section class="section" id="RightColumnSection">
<div id="feedback-links"> <div id="feedback-links">
<ul> <ul>
{% if edit_url != "" %} {% 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 }})" <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> 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">&#x0003F;&nbsp;Get support</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>
</ul> <li><div class="toggle-mode">
</div>
<div class="toggle-mode">
<div class="icon"> <div class="icon">
<i class="fa fa-sun-o" aria-hidden="true"></i> <i class="fa fa-sun-o" aria-hidden="true"></i>
</div> </div>
@ -174,6 +160,8 @@ div#autocompleteContainer {
<div class="icon"> <div class="icon">
<i class="fa fa-moon-o" aria-hidden="true"></i> <i class="fa fa-moon-o" aria-hidden="true"></i>
</div> </div>
</div></li>
</ul>
</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" %} {% 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">
@ -199,10 +187,10 @@ div#autocompleteContainer {
<script> <script>
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();
</script> </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 src="/js/jquery.js"></script>
<script async="" defer src="/js/menu.js"></script> <script src="/js/bootstrap.min.js"></script>
<script async="" src="/js/bootstrap.min.js"></script> <script defer src="/js/docs.js"></script>
<script async="" defer src="/js/docs.js"></script>
</body> </body>
</html> </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....... * this css will be integrated into master. for now testing.......
* *
*/ */
.alert-info {
.search-form { border: 0;
float: left; border-radius: 0;
width: 295px; color: #31708f;
margin: 2px 0 0!important; background-color: #3F51B5!important;
border-color: #bce8f1;
text-align: center;
color: #fff;
margin-bottom: 0;
} }
.form-control:focus { .alert-info ul {
outline: 0; list-style-type: none;
-webkit-box-shadow: none;
box-shadow: none;
} }
.search-banner {
width: 100%; .close {
align: center; 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; 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 { img.with-border {
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
} }
div#autocompleteContainer { .cse input.gsc-search-button:focus,
border: 0!important; input.gsc-search-button:focus {
margin: 0!important; 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 { .cse .gsc-search-button input.gsc-search-button-v2,
border: 0; input.gsc-search-button-v2 {
padding: 20px; width: 13px;
margin-top: 20px; height: 13px;
width: 100%; padding: 6px 27px;
} min-width: 13px;
margin-top: 2px;
#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;
} }

View File

@ -12,27 +12,6 @@ redirect_from:
- /engine/installation/rackspace/ - /engine/installation/rackspace/
- /engine/installation/joyent/ - /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> <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> <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%"> <table style="width:100%">
<tr> <tr>
<th style="font-size: x-large; font-family: arial">Stable channel</th> <th>Stable channel</th>
<th style="font-size: x-large; font-family: arial">Beta channel</th> <th>Beta channel</th>
</tr> </tr>
<tr valign="top"> <tr valign="top">
<td width="50%">This installer is fully baked and tested, and comes <td width="50%">This installer is fully baked and tested, and comes

223
index.md
View File

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

View File

@ -9,7 +9,7 @@ $("#menu-toggle").click(function(e) {
$("#wrapper").toggleClass("toggled"); $("#wrapper").toggleClass("toggled");
}); });
var navHeight = $('.navbar').outerHeight(true) + 10; var navHeight = $('.navbar').outerHeight(true) + 80;
$(document.body).scrollspy({ $(document.body).scrollspy({
target: '#leftCol', 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 ********************************************************************* * make dropdown show on hover *********************************************************************
@ -53,3 +81,43 @@ $('ul.nav li.dropdown').hover(function() {
}, function() { }, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); $(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); inputTxt = String(inputTxt);
simpletext = new RegExp("(" + keyword + ")","gi"); 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) function matches(inputTxt,searchTxt)
{ {

View File

@ -33,12 +33,12 @@ production environment. Highlights [Compose Version 3 new features](/engine/gets
<tr valign="top"> <tr valign="top">
<td width="50%"> <td width="50%">
{% capture basics %} {% 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 }} {% endcapture %}{{ basics | markdownify }}
</td> </td>
<td width="50%"> <td width="50%">
{% capture apps %} {% 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 }} {% endcapture %}{{ apps | markdownify }}
</td> </td>
</tr> </tr>