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:
Sebastiaan van Stijn 2020-05-19 10:33:07 +02:00
parent e9547a8397
commit 9d446cfd44
No known key found for this signature in database
GPG Key ID: 76698F39D527CE8C
2 changed files with 39 additions and 58 deletions

View File

@ -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.

View File

@ -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;