Merge pull request #10837 from thaJeztah/landing_page_touch_ups

Landing page touch-ups
This commit is contained in:
Usha Mandya 2020-05-26 07:40:09 +01:00 committed by GitHub
commit cf76d7a865
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 113 additions and 136 deletions

View File

@ -80,8 +80,7 @@
<section class="container"> <section class="container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder"> <div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
<a class="card" href="/get-started/"> <a class="card rocket" href="/get-started/">
<img src="/images/rocket.svg" alt="get started" />
<h5 class="title">Get started</h5> <h5 class="title">Get started</h5>
<p> <p>
Learn Docker basics and the benefits of containerizing you Learn Docker basics and the benefits of containerizing you
@ -90,11 +89,7 @@
</a> </a>
</div> </div>
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder"> <div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
<a class="card" href="/get-docker/"> <a class="card download-docker" href="/get-docker/">
<img
src="/images/download-docker.svg"
alt="download and install docker"
/>
<h5 class="title">Download and install</h5> <h5 class="title">Download and install</h5>
<p> <p>
Download and install Docker on your machine in a few easy steps. Download and install Docker on your machine in a few easy steps.
@ -102,8 +97,7 @@
</a> </a>
</div> </div>
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder"> <div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
<a class="card" href="/develop/"> <a class="card guides" href="/develop/">
<img src="/images/guides.svg" alt="guides" />
<h5 class="title">Guides</h5> <h5 class="title">Guides</h5>
<p> <p>
Learn how to set up your Docker environment and start containerizing Learn how to set up your Docker environment and start containerizing
@ -112,8 +106,7 @@
</a> </a>
</div> </div>
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder"> <div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
<a class="card" href="/release-notes/"> <a class="card whats-new" href="/release-notes/">
<img src="/images/whats-new.svg" alt="what's new" />
<h5 class="title">What's new?</h5> <h5 class="title">What's new?</h5>
<p> <p>
Learn about the cool new features, updates, and bug fixes. Learn about the cool new features, updates, and bug fixes.
@ -121,8 +114,7 @@
</a> </a>
</div> </div>
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder"> <div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
<a class="card" href="/engine/"> <a class="card manuals" href="/engine/">
<img src="/images/manuals.svg" alt="products manuals" />
<h5 class="title">Product manuals</h5> <h5 class="title">Product manuals</h5>
<p> <p>
Browse through the manuals and learn how to use Docker products. Browse through the manuals and learn how to use Docker products.
@ -130,8 +122,7 @@
</a> </a>
</div> </div>
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder"> <div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
<a class="card" href="/reference/"> <a class="card reference" href="/reference/">
<img src="/images/reference.svg" alt="reference" />
<h5 class="title">Reference</h5> <h5 class="title">Reference</h5>
<p> <p>
Browse through the through the CLI and API reference documentation. Browse through the through the CLI and API reference documentation.

View File

@ -27,7 +27,7 @@ a.button.outline-btn.min-hgt {
.button { .button {
margin: 10px 10px 10px 0; margin: 10px 10px 10px 0;
font-family: Geomanist Book; font-family: Geomanist Book, sans-serif;
padding: 12px 35px 10px; padding: 12px 35px 10px;
min-width: 200px; min-width: 200px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
@ -61,8 +61,7 @@ a.button.outline-btn.min-hgt {
.outline-btn { .outline-btn {
background: #fff; background: #fff;
border: 1px solid; border: 1px solid #0087C8;
border-color: #0087C8;
text-decoration: none; text-decoration: none;
margin: 0; margin: 0;
} }

View File

@ -72,7 +72,7 @@ pre code {
padding: 5px 0 10px 20px; padding: 5px 0 10px 20px;
float: left; float: left;
min-height: 100px; min-height: 100px;
margin: 0px 0 15px 0; margin: 0 0 15px 0;
width: 100%; width: 100%;
} }

View File

@ -24,13 +24,15 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
font-weight: bold; font-weight: bold;
} }
/*
.hljs-number, .hljs-number,
.hljs-literal, .hljs-literal,
.hljs-variable, .hljs-variable,
.hljs-template-variable, .hljs-template-variable,
.hljs-tag .hljs-attr { .hljs-tag .hljs-attr {
// color: #008080; color: #008080;
} }
*/
.hljs-string, .hljs-string,
.hljs-doctag { .hljs-doctag {
@ -61,33 +63,37 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
font-weight: normal; font-weight: normal;
} }
/*
.hljs-regexp, .hljs-regexp,
.hljs-link { .hljs-link {
// color: #009926; color: #009926;
} }
.hljs-symbol, .hljs-symbol,
.hljs-bullet { .hljs-bullet {
// color: #990073; color: #990073;
} }
.hljs-built_in, .hljs-built_in,
.hljs-builtin-name { .hljs-builtin-name {
// color: #0086b3; color: #0086b3;
} }
*/
.hljs-meta { .hljs-meta {
// color: #999; // color: #999;
font-weight: bold; font-weight: bold;
} }
/*
.hljs-deletion { .hljs-deletion {
// background: #fdd; background: #fdd;
} }
.hljs-addition { .hljs-addition {
// background: #dfd; background: #dfd;
} }
*/
.hljs-emphasis { .hljs-emphasis {
font-style: italic; font-style: italic;

View File

@ -13,7 +13,7 @@ body#landing {
overflow-x: hidden; overflow-x: hidden;
h2, h5, h6 { h2, h5, h6 {
font-family: 'Geomanist Regular'; font-family: 'Geomanist Regular', sans-serif;
} }
section { section {
@ -117,34 +117,47 @@ body#landing {
padding: 7.5px; padding: 7.5px;
} }
.card { %icon-card {
background-color: $bg-body; background-image: none;
box-shadow: 0px 3px 6px rgba(11, 33, 74, 0.09), background-origin: content-box;
0px -2px 2px rgba(11, 33, 74, 0.03); background-repeat: no-repeat;
padding: 24px 36px; background-size: auto 35px;
min-height: 200px;
@include sm-width { @include sm-width { background-size: auto 40px; min-height: 220px; }
min-height: 230px; @include md-width { background-size: auto 50px }
@include lg-width { background-size: auto 60px }
.title {
margin-top: 0;
margin-left: 60px;
@include sm-width { margin-left: 0; margin-top: 60px }
@include md-width { margin-left: 0; margin-top: 72px }
@include lg-width { margin-left: 0; margin-top: 90px }
} }
img { p {
height: 35px; margin-left: 60px;
margin-bottom: 5px; @include sm-width { margin-left: 0 }
}
}
@include sm-width { $icons: rocket, download-docker, guides, whats-new, manuals, reference;
height: 40px;
margin-bottom: 6px;
}
@include md-width { .card {
height: 50px; background-color: $bg-body;
margin-bottom: 8px; box-shadow: 0 3px 6px rgba(11, 33, 74, 0.09),
} 0 -2px 2px rgba(11, 33, 74, 0.03);
padding: 24px 36px;
min-height: 100px;
@include lg-width { @include sm-width {
height: 60px; min-height: 185px;
margin-bottom: 10px; }
@each $icon in $icons {
&.#{$icon} {
@extend %icon-card;
background-image: url("/images/#{$icon}.svg");
} }
} }
@ -191,6 +204,13 @@ body#landing {
opacity: 1; opacity: 1;
transform: scale(1.01); transform: scale(1.01);
} }
&[target=_blank] {
background-image: url(/images/arrow.svg);
background-position: top 10px right 10px;
background-repeat: no-repeat;
background-size: 15px 15px;
}
} }
.cardlet { .cardlet {
@ -198,7 +218,7 @@ body#landing {
padding: 24px 36px; padding: 24px 36px;
.title { .title {
font-family: 'Geomanist Book'; font-family: 'Geomanist Book', sans-serif;
line-height: 22px; line-height: 22px;
font-size: 22px; font-size: 22px;
} }
@ -238,7 +258,7 @@ body#landing {
a.btn { a.btn {
background-color: #FF3F73; background-color: #FF3F73;
color: white; color: white;
font-family: 'Open Sans'; font-family: 'Open Sans', sans-serif;
font-size: 17px; font-size: 17px;
font-weight: bold; font-weight: bold;
padding: 20px 60px; padding: 20px 60px;
@ -274,12 +294,12 @@ body#landing {
.help-by-product { .help-by-product {
.title { .title {
font-family: 'Geomanist Book'; font-family: 'Geomanist Book', sans-serif;
font-size: 22px; font-size: 22px;
} }
ul.nav.nav-tabs li a, h5, h6 { ul.nav.nav-tabs li a, h5, h6 {
font-family: 'Geomanist Regular'; font-family: 'Geomanist Regular', sans-serif;
font-size: 18px; font-size: 18px;
} }
@ -288,6 +308,8 @@ body#landing {
li a { li a {
cursor: pointer; cursor: pointer;
padding: 10px 3px;
@include sm-width { padding: 10px 15px; }
} }
li.active a { li.active a {
@ -332,30 +354,6 @@ body#landing {
} }
} }
#community-resources,
#play-with-docker {
.card {
position: relative;
min-height: 200px;
&::after {
content: '';
background-image: url(/images/arrow.svg);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 10px;
right: 10px;
width: 15px;
height: 15px;
}
@include sm-width {
min-height: 185px;
}
}
}
footer.footer { footer.footer {
background-color: $dark-blue; background-color: $dark-blue;
margin-top: 130px; margin-top: 130px;

View File

@ -26,7 +26,7 @@
h2, h2,
h3 { h3 {
margin-top: 10px; margin-top: 10px;
margin-bottom: 0px; margin-bottom: 0;
} }
h1 { h1 {
font-size: 24px; font-size: 24px;
@ -100,7 +100,7 @@
h2, h2,
h3 { h3 {
margin-top: 10px; margin-top: 10px;
margin-bottom: 0px; margin-bottom: 0;
} }
h1 { h1 {
font-size: 24px; font-size: 24px;
@ -124,8 +124,7 @@
height: 100px; height: 100px;
} }
.nav-secondary input[type=search] { .nav-secondary input[type=search] {
background: rgb(78, 77, 77) url(/images/search.png) no-repeat; background: rgb(78, 77, 77) url(/images/search.png) no-repeat 10px 9px;
background-position: 10px 9px;
} }
.nav-sidebar a { .nav-sidebar a {
color: #a8a8a8; color: #a8a8a8;
@ -221,7 +220,7 @@
h2, h2,
h3 { h3 {
margin-top: 10px; margin-top: 10px;
margin-bottom: 0px; margin-bottom: 0;
} }
h1 { h1 {
font-size: 24px; font-size: 24px;
@ -248,7 +247,7 @@
padding: 120px 20px; padding: 120px 20px;
} }
.main-content { .main-content {
padding: 0px 10px; padding: 0 10px;
} }
.nav-sidebar a { .nav-sidebar a {
color: #a8a8a8; color: #a8a8a8;
@ -296,7 +295,7 @@
h2, h2,
h3 { h3 {
margin-top: 10px; margin-top: 10px;
margin-bottom: 0px; margin-bottom: 0;
} }
h1 { h1 {
font-size: 24px; font-size: 24px;
@ -322,8 +321,7 @@
and (max-device-width: 1024px) and (max-device-width: 1024px)
and (orientation: portrait) { and (orientation: portrait) {
.nav-secondary input[type=search] { .nav-secondary input[type=search] {
background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat; background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat 10px 9px;
background-position: 10px 9px;
} }
} }
@ -343,8 +341,7 @@
width: 270px; width: 270px;
} }
.nav-secondary input[type=search] { .nav-secondary input[type=search] {
background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat; background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat 10px 9px;
background-position: 10px 9px;
} }
} }

View File

@ -113,7 +113,7 @@
.nav-sidebar ul { .nav-sidebar ul {
list-style: none; list-style: none;
padding: 0px; padding: 0;
text-align: left; text-align: left;
li { li {
display: block; display: block;
@ -121,7 +121,7 @@
} }
.nav-sidebar .nav ul { .nav-sidebar .nav ul {
padding: 0px 0px 0px 15px; padding: 0 0 0 15px;
} }
.nav-sidebar ul li a:hover { .nav-sidebar ul li a:hover {
@ -204,7 +204,7 @@
.toc-nav i.fa { .toc-nav i.fa {
font-size: 14px; font-size: 14px;
margin: 0px 8px 0 0; margin: 0 8px 0 0;
color: #4fa1d0; color: #4fa1d0;
} }
@ -371,12 +371,12 @@ input:checked+.slider:before {
.ctrl-left { .ctrl-left {
float: left; float: left;
width: 20px; width: 20px;
margin: 3px 0px 0px 0; margin: 3px 0 0 0;
} }
.ctrl-right { .ctrl-right {
float: right; float: right;
padding: 5px 0px; padding: 5px 0;
} }
.ctrl-right .btn-group { .ctrl-right .btn-group {

View File

@ -44,21 +44,17 @@ body.night {
background: $bg-secondary-night; background: $bg-secondary-night;
} }
.nav-secondary input[type=search] { .nav-secondary input[type=search] {
background: rgba(76, 76, 76, 0.47) url(/images/search.png) no-repeat; background: rgba(76, 76, 76, 0.47) url(/images/search.png) no-repeat 10px 9px;
background-position: 10px 9px;
color: $white; color: $white;
} }
.nav-secondary-tabs .search-form input[type=search] { .nav-secondary-tabs .search-form input[type=search] {
background: rgba(16, 28, 41, 0.6) url(/images/search.png) no-repeat; background: rgba(16, 28, 41, 0.6) url(/images/search.png) no-repeat 10px 9px;
background-position: 10px 9px;
} }
.nav-secondary-tabs .search-form input[type=search]:focus { .nav-secondary-tabs .search-form input[type=search]:focus {
background: rgba(255,255,255,0.17) url(/images/search.png) no-repeat; background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat 10px 9px;
background-position: 10px 9px;
} }
.nav-secondary .search-form input[type=search]:focus { .nav-secondary .search-form input[type=search]:focus {
background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat!important; background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat 10px 9px !important;
background-position: 10px 9px!important;
} }
.sidebar-home, .sidebar-home,
.sidebar, .sidebar,
@ -130,7 +126,7 @@ body.night {
background: #0a121b !important; background: #0a121b !important;
} }
pre>code { pre>code {
padding: 0px; padding: 0;
} }
.nav-secondary .dropdown-btn { .nav-secondary .dropdown-btn {
color: #d0e8ff; color: #d0e8ff;
@ -175,7 +171,7 @@ body.night {
background: $bg-search-results-night; background: $bg-search-results-night;
border: 1px solid $black; border: 1px solid $black;
color: $white; color: $white;
padding: 20px 0 15px 0px; padding: 20px 0 15px 0;
margin: 10px 0 0 0; margin: 10px 0 0 0;
position: absolute; position: absolute;
width: 800px; width: 800px;
@ -328,7 +324,6 @@ body.night {
cursor: default; cursor: default;
background-color: #4e6071; background-color: #4e6071;
border: 1px solid transparent; border: 1px solid transparent;
border-bottom-color: transparent;
} }
.popover { .popover {
color: $black; color: $black;

View File

@ -7,7 +7,7 @@
.nav-secondary-tabs .dropdown-btn { .nav-secondary-tabs .dropdown-btn {
background: transparent; background: transparent;
color: #fff; color: #fff;
padding: 5px 11px 0px 0px; padding: 5px 11px 0 0;
margin-top: 7px; margin-top: 7px;
border: 0; border: 0;
font-size: 12px; font-size: 12px;
@ -16,7 +16,7 @@
.nav-secondary .dropdown-btn { .nav-secondary .dropdown-btn {
background: transparent; background: transparent;
color: #b4d4e4; color: #b4d4e4;
padding: 5px 11px 0px 0px; padding: 5px 11px 0 0;
margin-top: 7px; margin-top: 7px;
border: 0; border: 0;
font-size: 12px; font-size: 12px;
@ -68,8 +68,7 @@
.btn-group.open .dropdown-toggle { .btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); //box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
background: trr;
background: transparent; background: transparent;
color: #fff; color: #fff;
box-shadow: none; box-shadow: none;
@ -82,7 +81,7 @@
.open>.dropdown-toggle.btn-default:hover { .open>.dropdown-toggle.btn-default:hover {
color: #fff!important; color: #fff!important;
background-color: transparent!important; background-color: transparent!important;
border-color: none!important; border-color: transparent !important;
box-shadow: none!important box-shadow: none!important
} }
@ -171,4 +170,4 @@ input.gsc-search-button-v2 {
padding: 6px 27px; padding: 6px 27px;
min-width: 13px; min-width: 13px;
margin-top: 2px; margin-top: 2px;
} }

View File

@ -64,7 +64,7 @@ i.fa.fa-outdent {
.block { .block {
padding: 0px 15px 10px 15px; padding: 0 15px 10px 15px;
} }
@ -86,14 +86,13 @@ img.inline {
.search-form { .search-form {
float: left; float: left;
margin: 5px 0 0px; margin: 5px 0 0;
// width: 200px; // width: 200px;
& input[type=text] { & input[type=text] {
background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat; background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat 10px 9px;
background-position: 10px 9px;
border: 0; border: 0;
color: #0C5176; color: #0C5176;
border-radius: 0px; border-radius: 0;
margin: 0; margin: 0;
transition: all 0.2s ease; transition: all 0.2s ease;
width: 230px; width: 230px;
@ -101,8 +100,7 @@ img.inline {
} }
.nav-secondary-tabs .search-form input[type=search] { .nav-secondary-tabs .search-form input[type=search] {
background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat; background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat 10px 9px;
background-position: 10px 9px;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
color: #fff; color: #fff;
@ -111,7 +109,7 @@ img.inline {
-moz-transition: all 0.2s ease; -moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease; -o-transition: all 0.2s ease;
transition: all 0.2s ease; transition: all 0.2s ease;
padding: 0px 0 0 35px; padding: 0 0 0 35px;
width: 100%; width: 100%;
} }
@ -128,22 +126,19 @@ input[type=text],
} }
.nav-secondary-tabs .search-form input[type=search]:focus { .nav-secondary-tabs .search-form input[type=search]:focus {
background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat; background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat 10px 9px;
background-position: 10px 9px;
} }
.nav-secondary-tabs.affix input[type=search], .nav-secondary-tabs.affix input[type=search],
input[type=text] { input[type=text] {
background: rgba(0, 0, 0, 0.17) url(/images/search.png) no-repeat; background: rgba(0, 0, 0, 0.17) url(/images/search.png) no-repeat 10px 9px;
background-position: 10px 9px;
border: 1px solid transparent; border: 1px solid transparent;
box-shadow: none; box-shadow: none;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.nav-secondary input[type=search] { .nav-secondary input[type=search] {
background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat; background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat 10px 9px;
background-position: 10px 9px;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
color: #fff; color: #fff;
@ -152,12 +147,11 @@ input[type=text] {
-moz-transition: all 0.2s ease; -moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease; -o-transition: all 0.2s ease;
transition: all 0.2s ease; transition: all 0.2s ease;
padding: 0px 0 0 35px; padding: 0 0 0 35px;
} }
.nav-secondary .search-form input[type=search]:focus { .nav-secondary .search-form input[type=search]:focus {
background: rgba(255,255,255,0.17) url(/images/search.png) no-repeat; background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat 10px 9px;
background-position: 10px 9px;
} }
.search-form input[type=search]::-webkit-input-placeholder { .search-form input[type=search]::-webkit-input-placeholder {
@ -214,7 +208,7 @@ div#autocompleteResults {
background: #E6F5FD; background: #E6F5FD;
border: 1px solid #eee; border: 1px solid #eee;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.28); box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.28);
padding: 20px 0 15px 0px; padding: 20px 0 15px 0;
margin: 10px 0 0 0; margin: 10px 0 0 0;
position: absolute; position: absolute;
width: 600px!important; width: 600px!important;
@ -246,9 +240,9 @@ div#autocompleteResults span {
.autocompleteList { .autocompleteList {
list-style-type: none; list-style-type: none;
width: 400px; width: 400px;
/* commented out 0px padding to allow inherit padding, search results on autocompleteList were getting smashed up against left margin due to this */ /* commented out 0 padding to allow inherit padding, search results on autocompleteList were getting smashed up against left margin due to this */
/* padding:0px; */ /* padding: 0; */
margin-bottom: 0px; margin-bottom: 0;
} }
.autoCompleteResult { .autoCompleteResult {
@ -262,9 +256,9 @@ div#autocompleteResults span {
.autocompleteList li { .autocompleteList li {
width: 380px; width: 380px;
border: 0px; border: 0;
padding-right: 20px; padding-right: 20px;
margin: 0px; margin: 0;
} }
/* /*
* *
@ -308,11 +302,9 @@ input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:
} }
.alert-info { .alert-info {
border: 0; border: 0 #bce8f1;
border-radius: 0; border-radius: 0;
color: #31708f;
background-color: #3F51B5!important; background-color: #3F51B5!important;
border-color: #bce8f1;
text-align: center; text-align: center;
color: #fff; color: #fff;
margin-bottom: 0; margin-bottom: 0;

View File

@ -32,7 +32,7 @@ $bg-body: #fff;
$heading-color: #254356; $heading-color: #254356;
$body-text-color: #33444C;//grey #11 in color pallette $body-text-color: #33444C;//grey #11 in color palette
$bg-footer: #fff; $bg-footer: #fff;