mirror of https://github.com/docker/docs.git
Landing page: apply icons using CSS, and remove duplication
This patch: - removes the icon images from the landing page, instead setting them as a background-image through css. - replaced the "community-resources" and "play-with-docker" styles in favor of a conditional style (based on cards linking to external websites) - changes the minimal height of cards for mobile devices (there was a big amount of padding on the smallest size, which didn't add much value). Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
This commit is contained in:
parent
e9547a8397
commit
9d446cfd44
|
@ -80,8 +80,7 @@
|
|||
<section class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
|
||||
<a class="card" href="/get-started/">
|
||||
<img src="/images/rocket.svg" alt="get started" />
|
||||
<a class="card rocket" href="/get-started/">
|
||||
<h5 class="title">Get started</h5>
|
||||
<p>
|
||||
Learn Docker basics and the benefits of containerizing you
|
||||
|
@ -90,11 +89,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
|
||||
<a class="card" href="/get-docker/">
|
||||
<img
|
||||
src="/images/download-docker.svg"
|
||||
alt="download and install docker"
|
||||
/>
|
||||
<a class="card download-docker" href="/get-docker/">
|
||||
<h5 class="title">Download and install</h5>
|
||||
<p>
|
||||
Download and install Docker on your machine in a few easy steps.
|
||||
|
@ -102,8 +97,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
|
||||
<a class="card" href="/develop/">
|
||||
<img src="/images/guides.svg" alt="guides" />
|
||||
<a class="card guides" href="/develop/">
|
||||
<h5 class="title">Guides</h5>
|
||||
<p>
|
||||
Learn how to set up your Docker environment and start containerizing
|
||||
|
@ -112,8 +106,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
|
||||
<a class="card" href="/release-notes/">
|
||||
<img src="/images/whats-new.svg" alt="what's new" />
|
||||
<a class="card whats-new" href="/release-notes/">
|
||||
<h5 class="title">What's new?</h5>
|
||||
<p>
|
||||
Learn about the cool new features, updates, and bug fixes.
|
||||
|
@ -121,8 +114,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
|
||||
<a class="card" href="/engine/">
|
||||
<img src="/images/manuals.svg" alt="products manuals" />
|
||||
<a class="card manuals" href="/engine/">
|
||||
<h5 class="title">Product manuals</h5>
|
||||
<p>
|
||||
Browse through the manuals and learn how to use Docker products.
|
||||
|
@ -130,8 +122,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
|
||||
<a class="card" href="/reference/">
|
||||
<img src="/images/reference.svg" alt="reference" />
|
||||
<a class="card reference" href="/reference/">
|
||||
<h5 class="title">Reference</h5>
|
||||
<p>
|
||||
Browse through the through the CLI and API reference documentation.
|
||||
|
|
|
@ -117,34 +117,41 @@ body#landing {
|
|||
padding: 7.5px;
|
||||
}
|
||||
|
||||
%icon-card {
|
||||
background-image: none;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 35px;
|
||||
|
||||
@include sm-width { background-size: auto 40px; min-height: 220px; }
|
||||
@include md-width { background-size: auto 50px }
|
||||
@include lg-width { background-size: auto 60px }
|
||||
|
||||
.title {
|
||||
margin-top: 50px;
|
||||
@include sm-width { margin-top: 60px }
|
||||
@include md-width { margin-top: 72px }
|
||||
@include lg-width { margin-top: 90px }
|
||||
}
|
||||
}
|
||||
|
||||
$icons: rocket, download-docker, guides, whats-new, manuals, reference;
|
||||
|
||||
.card {
|
||||
background-color: $bg-body;
|
||||
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: 200px;
|
||||
min-height: 100px;
|
||||
|
||||
@include sm-width {
|
||||
min-height: 230px;
|
||||
min-height: 185px;
|
||||
}
|
||||
|
||||
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;
|
||||
@each $icon in $icons {
|
||||
&.#{$icon} {
|
||||
@extend %icon-card;
|
||||
background-image: url("/images/#{$icon}.svg");
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -191,6 +198,13 @@ body#landing {
|
|||
opacity: 1;
|
||||
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 {
|
||||
|
@ -332,30 +346,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 {
|
||||
background-color: $dark-blue;
|
||||
margin-top: 130px;
|
||||
|
|
Loading…
Reference in New Issue