centersl/docker-docs
1
0
Fork 0
mirror of https://github.com/docker/docs.git synced 2026-04-12 14:25:46 +07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13452 from thaJeztah/fix_get_docker_blocks

Browse Source 
fix vertical size of "get docker" blocks
This commit is contained in:
Usha Mandya
2021-09-02 14:10:20 +01:00
committed by GitHub
parent 316fe44977 81177c8b02
commit ca42b821eb
4 changed files with 32 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
_scss/_content.scss
View File

@@ -59,17 +59,26 @@ code {
*/
.component-container {
padding: 0;
margin: 0 0 50px;
width: 100%;
}
padding: 0;
margin: 0 0 50px;
width: 100%;
.component {
padding: 15px 25px 5px 15px;
.row {
display: flex;
flex-wrap: wrap;
}
// "get-docker" tiles
.row > .block {
display: flex;
flex-direction: column;
padding: 10px;
}
.component {
padding: 15px 25px 15px 15px;
text-align: center;
margin: 0 8px 15px;
float: left;
height: 250px;
height: 100%;
width: 100%;
background: $bg-component;
img {
@@ -80,11 +89,12 @@ code {
justify-content: center;
}
h2 {
font-size: 22px;
font-size: 18px;
}
h2, h3, p {
margin: 0;
}
}
}
a.anchorLink {

5
_scss/_utilities.scss
View File

@@ -67,11 +67,6 @@ i.fa.fa-outdent {
opacity: 0.5;
}
.block {
padding: 0 15px 10px 15px;
}
/* Inline graphics and icons (like the whale menu icon in d4mac, d4win) */
img.inline {
display: inline;

6
get-docker.md
View File

@@ -22,7 +22,7 @@ section and choose the best installation path for you.
<div class="component-container">
<!--start row-->
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 block">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
<div class="component">
<div class="component-icon">
<a href="/desktop/mac/install/"><img src="/images/apple_48.svg" alt="Docker Desktop for Mac" width="70" height="70"></a>
@@ -31,7 +31,7 @@ section and choose the best installation path for you.
<p>A native application using the macOS sandbox security model which delivers all Docker tools to your Mac.</p>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-4 block">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
<div class="component">
<div class="component-icon">
<a href="/desktop/windows/install/"><img src="/images/windows_48.svg" alt="Docker Desktop for Windows" width="70" height="70"></a>
@@ -40,7 +40,7 @@ section and choose the best installation path for you.
<p>A native Windows application which delivers all Docker tools to your Windows computer.</p>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-4 block">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
<div class="component">
<div class="component-icon">
<a href="/engine/install/"><img src="/images/linux_48.svg" alt="Docker for Linux" width="70" height="70"></a>

28
language/index.md
View File

@@ -23,28 +23,18 @@ Learn how to set up your Docker environment and start containerizing your applic
<div class="component-container">
<!--start row-->
<div class="row" style="display: flex; align-items: center">
<div class="col-sm-12 col-md-12 col-lg-4 block" style="margin: 0 10px;box-shadow: 0 3px 6px #0b214a17, 0 -2px 2px #0b214a08; height: 140px; display: flex; align-items: center">
<div class="component-icon">
<a href="/language/nodejs/"><img src="/language/images/nodejs.png" alt="Develop with Node"></a>
</div>
<div class="row" style="display: flex; align-items: center; flex-wrap: nowrap;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4" style="margin: 0 10px;box-shadow: 0 3px 6px #0b214a17, 0 -2px 2px #0b214a08; height: 140px; display: flex; align-items: center">
<a href="/language/nodejs/"><img src="/language/images/nodejs.png" alt="Develop with Node"></a>
</div>
<div class="col-sm-12 col-md-12 col-lg-4 block" style="margin: 0 10px;box-shadow: 0 3px 6px #0b214a17, 0 -2px 2px #0b214a08; height: 140px; display: flex; align-items: center">
<a href="/language/python/">
<div class="component-icon">
<img src="/language/images/python.png" alt="Develop with Python">
</div>
</a>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4" style="margin: 0 10px;box-shadow: 0 3px 6px #0b214a17, 0 -2px 2px #0b214a08; height: 140px; display: flex; align-items: center">
<a href="/language/python/"><img src="/language/images/python.png" alt="Develop with Python"></a>
</div>
<div class="col-sm-12 col-md-12 col-lg-4 block" style="margin: 0 10px;box-shadow: 0 3px 6px #0b214a17, 0 -2px 2px #0b214a08; height: 140px; display: flex; align-items: center">
<div class="component-icon">
<a href="/language/java/"><img src="/language/images/java.png" alt="Develop with Java"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4" style="margin: 0 10px;box-shadow: 0 3px 6px #0b214a17, 0 -2px 2px #0b214a08; height: 140px; display: flex; align-items: center">
<a href="/language/java/"><img src="/language/images/java.png" alt="Develop with Java"></a>
</div>
<div class="col-sm-12 col-md-12 col-lg-4 block" style="margin: 0 10px;box-shadow: 0 3px 6px #0b214a17, 0 -2px 2px #0b214a08; height: 140px; display: flex; align-items: center">
<div class="component-icon">
<a href="/language/golang/"><img src="/language/images/golang.png" alt="Develop with Go"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4" style="margin: 0 10px;box-shadow: 0 3px 6px #0b214a17, 0 -2px 2px #0b214a08; height: 140px; display: flex; align-items: center">
<a href="/language/golang/"><img src="/language/images/golang.png" alt="Develop with Go"></a>
</div>
</div>
</div>