From feb57a7eea159ea0b33a0abfeddb611b4dc2c25a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Drouet?= Date: Wed, 29 Apr 2020 15:22:50 +0200 Subject: [PATCH] landing page: change style MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Jérémie Drouet --- _includes/body-landing.html | 863 ++++++++++++++++++++++++++++++++++ _includes/body.html | 216 +++++++++ _includes/global-header.html | 47 -- _includes/head.html | 74 +++ _includes/header-landing.html | 21 + _includes/theme-switch.html | 14 + _layouts/docs.html | 271 +---------- _scss/_breakpoint.scss | 25 + _scss/_landing.scss | 278 +++++++++++ _scss/_layout.scss | 5 +- _scss/_typography.scss | 10 +- css/style.scss | 2 + images/download-docker.svg | 16 + images/engine.svg | 44 ++ images/guides.svg | 5 + images/hub.svg | 51 ++ images/laptop.svg | 79 ++++ images/manuals.svg | 8 + images/reference.svg | 9 + images/rocket.svg | 10 + images/slack-icon.svg | 33 ++ images/whats-new.svg | 8 + index.md | 72 --- js/landing-page.js | 50 ++ 24 files changed, 1823 insertions(+), 388 deletions(-) create mode 100644 _includes/body-landing.html create mode 100644 _includes/body.html delete mode 100644 _includes/global-header.html create mode 100644 _includes/head.html create mode 100644 _includes/header-landing.html create mode 100644 _includes/theme-switch.html create mode 100644 _scss/_breakpoint.scss create mode 100644 _scss/_landing.scss create mode 100644 images/download-docker.svg create mode 100644 images/engine.svg create mode 100644 images/guides.svg create mode 100644 images/hub.svg create mode 100644 images/laptop.svg create mode 100644 images/manuals.svg create mode 100644 images/reference.svg create mode 100644 images/rocket.svg create mode 100644 images/slack-icon.svg create mode 100644 images/whats-new.svg create mode 100644 js/landing-page.js diff --git a/_includes/body-landing.html b/_includes/body-landing.html new file mode 100644 index 0000000000..9716f0f1eb --- /dev/null +++ b/_includes/body-landing.html @@ -0,0 +1,863 @@ + +
+
+
+
+
+
+
+ +
+
+ +
    +
  • + {% include theme-switch.html %} +
    • +
+
+
+
+
+
+
+ +
+
+
+

+ What can we help you find? +

+
+
+
+
+ +
+
+
+ +
+
+
+ + get started +
Get started
+

+ Learn Docker basics and the benefits of containerizing you + applications. +

+ +
+
+ + download and install docker +
Download and install
+

+ Download and install Docker on your machine in a few easy steps. +

+ +
+
+ + guides +
Guides
+

+ Learn how to set up your Docker environment and start containerizing + you applications. +

+ +
+
+ + what's new +
What's new?
+

+ Learn about the cool new features, updates, and bug fixes. +

+ +
+
+ + products manuals +
Product manuals
+

+ Browse through the manuals and learn how to use Docker products. +

+ +
+
+ + reference +
Reference
+

+ Browse through the through the CLI and API reference documentation. +

+ +
+
+
+ +
+
+
+
+
+
+
How do I?
+

+ Check out the following topics to learn how to build, run, and + deploy your applications using Docker. +

+
+
+
+
+ Write a Dockerfile +
+
+ Manage container networking +
+
+ Write a Docker Compose file +
+
+ Work with volumes and bind mounts +
+
+ Share my image on Docker Hub +
+
+ Configure the Docker daemon +
+
+ Build and run an image +
+
+ Manage Docker objects +
+
+ Use multi-stage builds +
+
+ Scale apps using Kubernetes +
+
+ Run a command in a container +
+
+ Scale apps using Swarm +
+
+
+
+
+
+
+
+
Most popular articles
+

Check out the most popular articles on docs.docker.com.

+
+
+
+
+ Install Docker Engine on Ubuntu +
+
+ Install Docker Desktop on Windows +
+
+ Compose file reference +
+
+ Dockerfile reference +
+
+ Run a command in a container +
+
+ Build and run your image +
+
+
+
+
+
+ +
+
+
+
+
+ Connect with Docker Captains and Docker enthusiasts through our + Community Slack channel. +
+

+ It’s a great place to learn and ask questions along your journey. +

+
+
+ + slack + Join the community + +
+
+
+
+ +
+
+
+
+
+
+
Help by product
+
+
+ +
+
+ +
+
+
+
Docker Desktop
+
+ + +
+
+
+
+ Getting Started with Docker +
+

+ Take a walkthrough that covers writing your first app, data + storage, networking, and swarms, and ends with your app running + on production servers in the cloud. +

+

+ Learn Docker +

+
FAQs
+

+ + Can I install Docker Desktop on Windows 10 Home? + +

+

+ + What are the system requirements for Docker Desktop? + +

+

+ + What is the difference between the Stable and Edge versions of Docker Desktop? + +

+

+ + How do I connect from a container to a service? + +

+

+ + What is the difference between the Stable and Edge versions of Docker Desktop? + +

+

+ + What are the system requirements for Docker Desktop? + +

+

+ + How do I connect to a container from Mac? + +

+

+ + Can I use an SSH agent inside a container? + +

+

+ + View all + +

+
+
+
+ Popular articles +
+

+ + Docker Desktop WSL 2 backend + +

+

+ + Install Docker Desktop on Mac + +

+

+ + Docker Desktop Dashboard + +

+

+ + Deploy on Kubernetes + +

+

+ + Stable Release notes + +

+

+ + Logs and troubleshooting + +

+

+ + Networking features in Docker Desktop + +

+

+ + Mac file system sharing + +

+
+
+ +
+
+
+
Hub
+
+
+
+ Getting Started with Docker +
+

+ Take a walkthrough that covers writing your first app, data + storage, networking, and swarms, and ends with your app running + on production servers in the cloud. +

+

+ Learn Docker +

+
FAQ's
+

+ + How do I share images on Docker Hub + +

+

+ + How do I create an organization? + +

+

+ + How do I create a team and add team members? + +

+
+
+
+ Popular articles +
+

+ + Docker Hub official images + +

+

+ + Create Docker Hub repositories + +

+

+ + Set up automated builds + +

+

+ + Manage access tokens + +

+

+ + Docker Hub Webhooks + +

+
+
+ +
+
+
+
Engine
+
+
+
+ Getting Started with Docker +
+

+ Take a walkthrough that covers writing your first app, data + storage, networking, and swarms, and ends with your app running + on production servers in the cloud. +

+

+ Learn Docker +

+
+
+
+ Popular articles +
+

+ + Install Docker Engine on Ubuntu + +

+

+ + Run a command in a container + +

+

+ + Dockerfile reference + +

+

+ + Docker daemon reference + +

+

+ + Docker build reference + +

+
+
+ +
+
+
+
Compose
+
+
+
+ Getting Started with Docker +
+

+ Take a walkthrough that covers writing your first app, data + storage, networking, and swarms, and ends with your app running + on production servers in the cloud. +

+

+ Learn Docker +

+
FAQ's
+

+ + How do I run multiple copies of a Compose file on the same host? + +

+

+ + Can I use json instead of yaml for my Compose file? + +

+

+ + Where can I find example Compose files? + +

+

+ View all +

+
+
+
+ Popular articles +
+

+ + Install Docker Compose + +

+

+ + Getting started with Docker Compose + +

+

+ + Environment variables in Compose + +

+

+ + Networking in Compose + +

+
+
+
+
+
+
+ +
+
+
+
+
+
+

Best practices

+

+ Take a look at our best practices and reference architecture + topics to fine tune your deployment. +

+

+ + Best practices for writing Dockerfile + +

+

+ + Best practices for writing a Docker Compose file + +

+

+ + Docker Development best practices + +

+

+ + Docker Security best practices + +

+

+ + Docker Reference architecture: Docker logging design and best practices + +

+

+ + Docker Swarm reference architecture: Exploring scalable, portable container networks + +

+
+
+

Troubleshooting

+

+ Refer to our troubleshooting topics to learn how to diagnose and + troubleshoot common issues. +

+

+ + Troubleshoot the Docker daemon + +

+

+ + Troubleshoot volumes or bind mount errors + +

+

+ + Troubleshoot container networking errors + +

+

+ + Docker Desktop logs and troubleshooting + +

+
+
+
+
+

Stack Overflow

+

+ Browse through some of the frequent questions asked about Docker + on Stack Overflow. +

+

+ + From inside of a Docker container, how do I connect to the localhost of the machine? + +

+

+ + How is Docker different from a virtual machine? + +

+

+ + What is the difference between CMD and ENTRYPOINT in a Dockerfile? + +

+

+ + What is the difference between “expose” and “publish” in Docker? + +

+

+ + Where are Docker images stored on the host machine? + +

+
+
+
+
+
+
+ +
+
+
+

Community resources

+
+
+
+
+ +
Find a local meetup
+

Attend one of the 200+ Docker Meetups around the globe.

+ +
+
+ +
Upcoming Events
+

+ Complete a workshop without installing anything using this Docker + playground. +

+ +
+
+ +
Tune in Monthly
+

+ Join the Virtual Docker Meetup Group and online meetups every month. +

+ +
+
+ +
Community news
+

+ The Docker Weekly is a email newsletter with the latest content on + Docker and the event agenda for the upcoming weeks. +

+ +
+
+ +
Meet the Captains
+

+ Select members of the community that are both experts in their field + and are passionate about sharing their Docker knowledge with others. +

+ +
+
+ +
Educational resources
+

Expand your understanding of Docker with these additional resources.

+ +
+
+
+ +
+
+
+

Play with Docker

+
+
+
+
+ +
Tutorial
+

Self-paced tutorials to increase your Docker knowledge.

+ +
+
+ +
Lab Environment
+

+ Complete a workshop without installing anything using this Docker + playground. +

+ +
+
+ +
Community Training
+

Free and paid learning materials from Docker Captains.

+ +
+
+
+ +
+ {% include footer.html %} +
+ + + + + + + diff --git a/_includes/body.html b/_includes/body.html new file mode 100644 index 0000000000..dbe6447914 --- /dev/null +++ b/_includes/body.html @@ -0,0 +1,216 @@ + +
+ {% include header.html %} +
+
+
+
+
+
+
+ {% if page.url != '/' %} + {% if page.title %} +

{{ page.title }}

{% endif %} {% if page.advisory %} +
{{ site.data.advisories.texts[page.advisory] | markdownify }}
+ {% endif %}{% endif %} + {% unless page.tree == false or page.skip_read_time == true %}{% include read_time.html %}{% endunless %} + {% if page.enterprise %}{% include ee_dropdown.html %}{% endif %} + {% if page.ui_tabs or page.cli_tabs or page.api_tabs %} + {% capture content %} + + {% if page.intro %}{{ page.intro | markdownify }}{% else %}{{ page.description | markdownify }}{% endif %} + + {% if page.ui_tabs %} + +
{% for tab in page.ui_tabs %} +
+ {% capture thistab %}{% include_relative {{ page.path | split: "/" | last }} version=tab.version ui="true" %}{% endcapture %}{{ thistab | split: "---" | shift:2 | join: "---" | markdownify }} +
{% endfor %} +
+ {% endif %} + {% if page.cli_tabs %} + +
{% for tab in page.cli_tabs %} +
+ {% capture thistab %}{% include_relative {{ page.path | split: "/" | last }} version=tab.version cli="true" %}{% endcapture %}{{ thistab | split: "---" | shift:2 | join: "---" | markdownify }} +
{% endfor %} +
+ {% endif %} + {% if page.api_tabs %} + +
{% for tab in page.api_tabs %} +
+ {% capture thistab %}{% include_relative {{ page.path | split: "/" | last }} version=tab.version api="true" %}{% endcapture %}{{ thistab | split: "---" | shift:2 | join: "---" | markdownify }} +
{% endfor %} +
+ {% endif %} + {% if page.next_steps %} +

Next steps

+ + {% endif %} + {% endcapture %} + {% endif %} + {{ content }} + + {% unless page.notags == true %} + {% assign keywords = page.keywords | split:"," -%} + {% if keywords.size > 0 -%} + + {%- for keyword in keywords -%} + {%- assign strippedKeyword = keyword | strip -%} + {{ strippedKeyword }} + {%- unless forloop.last %}, {% endunless -%} + {% endfor -%} + + {% endif -%} + {% endunless %} + {% if page.noratings != true %} + + {% endif %} +
+
+ +
+ +
+
+
+
+
+ + {% if page.path == "404.md" %} + + {% endif %} +
+ {% include footer.html %} +
+ + {% if page.highlightjs == true %} + + + {% endif %} + + + + + + + + + + + + + + diff --git a/_includes/global-header.html b/_includes/global-header.html deleted file mode 100644 index 3856a696df..0000000000 --- a/_includes/global-header.html +++ /dev/null @@ -1,47 +0,0 @@ -
-
-
-
- -
-
- -
-
-
-
-

{{ site.name }}

-

Docker provides a way to run applications securely isolated in a container, packaged with all its dependencies and libraries.

- -
-
-
-
- - - -
diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000000..1ab980be28 --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,74 @@ + + + + + + + {% if site.GH_ENV == "gh_pages" %} + {% endif %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ page.title }} | Docker Documentation + + + + + + + + + + {% if page.hide_from_sitemap %}{% endif %} + + diff --git a/_includes/header-landing.html b/_includes/header-landing.html new file mode 100644 index 0000000000..a32ccd2ce9 --- /dev/null +++ b/_includes/header-landing.html @@ -0,0 +1,21 @@ +
+
+
+
+
+
+ +
+
+ +
+ + +
+
+
diff --git a/_includes/theme-switch.html b/_includes/theme-switch.html new file mode 100644 index 0000000000..b75b30c26b --- /dev/null +++ b/_includes/theme-switch.html @@ -0,0 +1,14 @@ +
+
+ +
+
+ +
+
+ +
+
diff --git a/_layouts/docs.html b/_layouts/docs.html index 3209e6950c..23bcc85532 100755 --- a/_layouts/docs.html +++ b/_layouts/docs.html @@ -14,269 +14,10 @@ --> - - - - - - - {% if site.GH_ENV == "gh_pages" %} - {% endif %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{ page.title }} | Docker Documentation - - - - - - - - - - {% if page.hide_from_sitemap %}{% endif %} - - - -
- {% if page.landing == true %} - {% include global-header.html %} - {% else %} - {% include header.html %} - {% endif %} -
-
-
-
-
-
-
- {% if page.url == '/' %} -

{{ site.name }}

- {% else %} - {% if page.title %} -

{{ page.title }}

{% endif %} {% if page.advisory %} -
{{ site.data.advisories.texts[page.advisory] | markdownify }}
{% endif %}{% endif %} {% unless page.tree == false or page.skip_read_time == true %}{% include read_time.html %}{% endunless %} - {% if page.enterprise %}{% include ee_dropdown.html %}{% endif %} - {% if page.ui_tabs or page.cli_tabs or page.api_tabs %} - {% capture content %} - - {% if page.intro %}{{ page.intro | markdownify }}{% else %}{{ page.description | markdownify }}{% endif %} - - {% if page.ui_tabs %} - -
{% for tab in page.ui_tabs %} -
{% capture thistab %}{% include_relative {{ page.path | split: "/" | last }} version=tab.version ui="true" %}{% endcapture %}{{ thistab | split: "---" | shift:2 | join: "---" | markdownify }}
{% endfor %} -
- {% endif %} - {% if page.cli_tabs %} - -
{% for tab in page.cli_tabs %} -
{% capture thistab %}{% include_relative {{ page.path | split: "/" | last }} version=tab.version cli="true" %}{% endcapture %}{{ thistab | split: "---" | shift:2 | join: "---" | markdownify }}
{% endfor %} -
- {% endif %} - {% if page.api_tabs %} - -
{% for tab in page.api_tabs %} -
{% capture thistab %}{% include_relative {{ page.path | split: "/" | last }} version=tab.version api="true" %}{% endcapture %}{{ thistab | split: "---" | shift:2 | join: "---" | markdownify }}
{% endfor %} -
- {% endif %} - {% if page.next_steps %} -

Next steps

- - {% endif %} - {% endcapture %} - {% endif %} - {{ content }} - - {% unless page.notags == true %} - {% assign keywords = page.keywords | split:"," -%} - {% if keywords.size > 0 -%} - - {%- for keyword in keywords -%} - {%- assign strippedKeyword = keyword | strip -%} - {{ strippedKeyword }} - {%- unless forloop.last %}, {% endunless -%} - {% endfor -%} - - {% endif -%} - {% endunless %} - {% if page.noratings != true %} - - {% endif %} -
-
- -
- -
-
-
-
-
- - {% if page.path == "404.md" %} - - {% endif %} -
- {% include footer.html %} -
- - {% if page.highlightjs == true %} - - - {% endif %} - - - - - - - - - - - - - - +{% include head.html %} +{% if page.landing == true %} + {% include body-landing.html %} +{%else%} + {% include body.html %} +{% endif %} diff --git a/_scss/_breakpoint.scss b/_scss/_breakpoint.scss new file mode 100644 index 0000000000..ae52b58ba7 --- /dev/null +++ b/_scss/_breakpoint.scss @@ -0,0 +1,25 @@ +$sm-min-width: 576px; +$md-min-width: 768px; +$lg-min-width: 992px; +$xl-min-width: 1200px; + +@mixin sm-width { + @media (min-width: $sm-min-width) { + @content; + } +} +@mixin md-width { + @media (min-width: $md-min-width) { + @content; + } +} +@mixin lg-width { + @media (min-width: $lg-min-width) { + @content; + } +} +@mixin xl-width { + @media (min-width: $xl-min-width) { + @content; + } +} diff --git a/_scss/_landing.scss b/_scss/_landing.scss new file mode 100644 index 0000000000..07125021c1 --- /dev/null +++ b/_scss/_landing.scss @@ -0,0 +1,278 @@ +$light-blue: #2496ed; +$dark-blue: #002c66; +$bg-header-night: #101c29; + +body#landing { + background-color: $bg-sidebar; + color: $body-text-color; + font-family: "Geomanist Regular"; + font-size: $body-text-size; + margin: $clear; + padding: $clear; + overflow-x: hidden; + + section { + margin-top: 40px; + margin-bottom: 40px; + } + + .header { + background-color: $light-blue; + + a, .toggle-mode { + color: white; + } + + .navbar-nav > li > a { + font-weight: bold; + padding-bottom: 11px; + border-bottom-style: solid; + border-bottom-width: 4px; + border-bottom-color: rgba(255, 255, 255, 0); + } + + .navbar-nav > li.active > a { + border-bottom-color: rgba(255, 255, 255, 0.5); + } + + .logo { + margin: 12px 10px; + } + + .toggle-mode { + margin-top: 15px; + + .icon { + margin-top: 4px; + } + } + } + + .hero { + padding-top: 50px; + padding-bottom: 50px; + + h2 { + font-size: 32px; + line-height: 32px; + margin-bottom: 14px; + margin-top: 50px; + } + } + + .card-holder { + padding: 7.5px; + } + + .card { + background-color: $bg-body; + box-shadow: 0px 3px 6px rgba(11, 33, 74, 0.09), + 0px -2px 2px rgba(11, 33, 74, 0.03); + padding: 24px 36px; + min-height: 200px; + + @include sm-width { + min-height: 230px; + } + + img { + height: 35px; + margin-bottom: 5px; + + @include sm-width { + height: 40px; + margin-bottom: 6px; + } + + @include md-width { + height: 50px; + margin-bottom: 8px; + } + + @include lg-width { + height: 60px; + margin-bottom: 10px; + } + } + + .title { + font-size: 16px; + line-height: 16px; + margin: 8px 0; + + @include sm-width { + font-size: 18px; + line-height: 18px; + margin: 6px 0; + } + + @include md-width { + font-size: 20px; + line-height: 20px; + margin: 6px 0; + } + + @include lg-width { + font-size: 22px; + line-height: 22px; + margin: 8px 0; + } + } + + p { + font-size: 14px; + line-height: 19px; + } + } + + a.card { + display: block; + transition: transform 150ms ease-in-out; + + &:focus, + &:visited { + text-decoration: none; + } + + &:hover { + opacity: 1; + transform: scale(1.01); + } + } + + .cardlet { + background-color: #F2F3F5; + padding: 24px 36px; + + p { + font-size: 14px; + line-height: 18px; + } + } + + section.join-community { + background-color: $dark-blue; + padding: 75px 0; + + h5, p { + color: white; + } + + a.slack-button { + background: #FFFFFF; + border: 2px solid #FFFFFF; + box-sizing: border-box; + border-radius: 3px; + align-items: center; + display: inline-flex; + padding: 0 26px 0 2px; + text-transform: none; + margin-top: 2rem; + + img { + height: 56px; + width: 56px; + } + span { + font-weight: bold; + font-size: 17px; + line-height: 24px; + color: $dark-blue; + } + } + } + + .help-by-product { + ul.nav.nav-tabs { + li a { + cursor: pointer; + } + + li.active a { + background-color: inherit; + border: none; + border-bottom: 5px solid $dark-blue; + } + } + + .row[data-tab] { + display: none; + + &[data-os] .only-win, + &[data-os] .only-mac { + display: none; + } + + &[data-os="win"] .only-win, + &[data-os="mac"] .only-mac { + display: initial; + } + + &[data-os="win"] p.only-win, + &[data-os="mac"] p.only-mac { + display: block; + } + + &.active { + display: block; + } + + .image { + background-position: center; + background-size: contain; + background-repeat: no-repeat; + margin-top: 15px; + width: 130px; + height: 130px; + margin-left: auto; + margin-right: auto; + } + } + } + + #community-resources, + #play-with-docker { + .card { + position: relative; + min-height: 200px; + + &::after { + content: '→'; + position: absolute; + top: 10px; + right: 10px; + transform: rotate(-45deg); + font-size: large; + } + + @include sm-width { + min-height: 185px; + } + } + } + + footer.footer { + background-color: $dark-blue; + + a, p { + color: white; + } + } +} + +body#landing.night { + background-color: $bg-body-night; + color: $body-text-color-night; + + .header { + background-color: $bg-header-night; + } + + .card { + background-color: $bg-header-night; + } + + .cardlet { + background-color: $bg-header-night; + } +} diff --git a/_scss/_layout.scss b/_scss/_layout.scss index b1894da2d6..61186c0ccd 100755 --- a/_scss/_layout.scss +++ b/_scss/_layout.scss @@ -25,7 +25,6 @@ background: $bg-secondary; // animation: gradientswitch 80s infinite; // -webkit-animation: gradientswitch 80s infinite; - height: $global-header-height; position: relative; z-index: 1; transition: all 0.1s ease; @@ -150,7 +149,7 @@ section.section { */ .wrapper.right-open #sidebar-wrapper { - width: 270px; + width: 270px; } .wrapper.right-open .page-content { @@ -189,7 +188,7 @@ section.section { .swagger-section { padding-top: 2rem; -} +} /* * diff --git a/_scss/_typography.scss b/_scss/_typography.scss index c0bee71e33..0fa06f8f86 100755 --- a/_scss/_typography.scss +++ b/_scss/_typography.scss @@ -12,6 +12,14 @@ font-style: normal; } +@font-face { + font-family: 'Geomanist Regular'; + src: url("../fonts/geomanist/hinted-Geomanist-Regular.eot"); + src: url("../fonts/geomanist/hinted-Geomanist-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Regular.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Regular.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Regular.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Book.svg#Geomanist-Regular") format("svg"); + font-weight: normal; + font-style: normal; +} + h1, h2, h3, @@ -68,4 +76,4 @@ ul { dd, dt { line-height: 25px; -} \ No newline at end of file +} diff --git a/css/style.scss b/css/style.scss index 7116b195d1..79f34e5e83 100644 --- a/css/style.scss +++ b/css/style.scss @@ -2,10 +2,12 @@ # Docker Documentation Theme --- +@import "breakpoint"; @import "variables"; @import "night-mode"; @import "base"; @import "typography"; +@import "landing"; @import "layout"; @import "global-header"; @import "navigation"; diff --git a/images/download-docker.svg b/images/download-docker.svg new file mode 100644 index 0000000000..36919890ac --- /dev/null +++ b/images/download-docker.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/images/engine.svg b/images/engine.svg new file mode 100644 index 0000000000..7b948c51f9 --- /dev/null +++ b/images/engine.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/guides.svg b/images/guides.svg new file mode 100644 index 0000000000..c0819c299b --- /dev/null +++ b/images/guides.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/hub.svg b/images/hub.svg new file mode 100644 index 0000000000..9cb09ef346 --- /dev/null +++ b/images/hub.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/laptop.svg b/images/laptop.svg new file mode 100644 index 0000000000..5b332bdf74 --- /dev/null +++ b/images/laptop.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/manuals.svg b/images/manuals.svg new file mode 100644 index 0000000000..26951598b9 --- /dev/null +++ b/images/manuals.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/reference.svg b/images/reference.svg new file mode 100644 index 0000000000..72aebbb76b --- /dev/null +++ b/images/reference.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/images/rocket.svg b/images/rocket.svg new file mode 100644 index 0000000000..6ed711feca --- /dev/null +++ b/images/rocket.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/slack-icon.svg b/images/slack-icon.svg new file mode 100644 index 0000000000..c37dc5eb49 --- /dev/null +++ b/images/slack-icon.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/whats-new.svg b/images/whats-new.svg new file mode 100644 index 0000000000..3b169065e0 --- /dev/null +++ b/images/whats-new.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/index.md b/index.md index 5f564f62e0..b788109b2d 100644 --- a/index.md +++ b/index.md @@ -7,75 +7,3 @@ notoc: true notags: true skip_read_time: true --- -{% assign page.title = site.name %} - -## Get started with Docker - -Try our multi-part walkthrough that covers writing your first app, -data storage, networking, and swarms, and ends with your app running on -production servers in the cloud. Total reading time is less than an hour. - -[Get started with Docker](/get-started/){: class="button outline-btn"} - -## Docker products - -
- -
-
-
-
- Docker Desktop for Mac -
-

Docker Desktop for Mac

-

A native application using the macOS sandbox security model which delivers all Docker tools to your Mac.

-
-
-
-
-
- Docker Desktop for Windows -
-

Docker Desktop for Windows

-

A native Windows application which delivers all Docker tools to your Windows computer.

-
-
-
-
-
- Docker for Linux -
-

Docker for Linux

-

Install Docker on a computer which already has a Linux distribution installed.

-
-
-
-
- -
-
- -### Docker Engine - Community - -Get started with Docker and experimenting with container-based apps. Docker Engine - Community -is available on many platforms, from desktop to cloud to server. Build and share -containers and automate the development pipeline from a single environment. -Choose the Edge channel to get access to the latest features, or the Stable -channel for more predictability. - -[Learn more about Docker Engine - Community](engine/index.md){: class="button outline-btn"} - -
-
- -### Docker Enterprise - -Designed for enterprise development and IT teams who build, ship, and run -business critical applications in production at scale. Integrated, certified, -and supported to provide enterprises with the most secure container platform in -the industry to modernize all applications. Docker Enterprise comes with Universal Control Plane (UCP) for managing and orchestrating the container runtime, and Docker Trusted Registry (DTR) for storing and securing images in an enterprise grade registry. - -[Learn more about Docker Enterprise](/ee/){: class="button outline-btn"} - -
-
diff --git a/js/landing-page.js b/js/landing-page.js new file mode 100644 index 0000000000..e054ba1b60 --- /dev/null +++ b/js/landing-page.js @@ -0,0 +1,50 @@ +// Cookie functions +function createCookie(name, value, days) { + var expires = ""; + if (days) { + var date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + expires = "; expires=" + date.toUTCString(); + } + document.cookie = name + "=" + value + expires + "; path=/"; +} + +function readCookie(name) { + var nameEQ = name + "="; + var ca = document.cookie.split(";"); + for (var i = 0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0) === " ") c = c.substring(1, c.length); + if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); + } + return null; +} + +var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; +var selectedNightTheme = readCookie("night"); + +if (selectedNightTheme === "true" || (selectedNightTheme === null && prefersDark)) { + applyNight(); + $("#switch-style").prop("checked", true); +} else { + applyDay(); + $("#switch-style").prop("checked", false); +} + +function applyNight() { + $("body").addClass("night"); +} + +function applyDay() { + $("body").removeClass("night"); +} + +$("#switch-style").change(function () { + if ($(this).is(":checked")) { + applyNight(); + createCookie("night", true, 999) + } else { + applyDay(); + createCookie("night", false, 999); + } +});