landing page grid

This commit is contained in:
Josh south 2017-03-02 01:06:27 -08:00
parent f401035ddf
commit 27773084ed
2 changed files with 23 additions and 24 deletions

View File

@ -650,11 +650,11 @@ a.button.outline-btn {
.content,
.main-content {
max-width: 860px;
max-width: 920px;
}
.main-content {
padding: 15px 15px 25px 21px;
padding: 10px 15px 25px 10px;
}
@ -1179,20 +1179,21 @@ i.fa.fa-outdent {
}
.component {
padding: 35px 20px;
padding: 25px 25px;
text-align: center;
margin: 0 8px 15px;
float: left;
height: 250px;
width: 250px;
min-width: 240px;
}
.component-full {
padding: 10px 0 10px 20px;
padding: 5px 0 10px 20px;
float: left;
width: 100%;
min-height: 120px;
margin: 15px 0 0;
min-height: 100px;
max-width: 750px;
margin: 0px 0 15px 8px;
}
.component,
@ -1310,9 +1311,9 @@ code {
}
.block {
float: left;
padding: 0px 20px 20px 16px;
min-width: 280px;
// float: left;
padding: 0px 15px 0 16px;
min-width: 255px;
}
@ -1791,14 +1792,6 @@ footer {
/** temporarily hide **/
// display: none;
}
.component {
// padding: 9px 140px 20px;
text-align: center;
margin: 0 8px 15px;
float: left;
height: 100%;
width: 97%;
}
// .sidebar {
// width: 200px;
// }
@ -1815,10 +1808,10 @@ footer {
float: right;
padding: 5px 16px 0;
}
.content, .main-content {
max-width: 365px;
margin: 0 auto;
}
// .content, .main-content {
// max-width: 365px;
// margin: 0 auto;
// }
}
/*

View File

@ -10,7 +10,7 @@ Docker packages your app with its dependencies, freeing you from worrying about
your system configuration, and making your app more portable.
<div class="row">
<div class="col-md-6 block">
<div class="col-sm-12 col-md-12 col-lg-6 block">
{% capture basics %}
### Learn the basics of Docker
@ -21,7 +21,7 @@ This tutorial stops short of teaching you how to deploy applications.
{% capture basics %}[Start the basic tutorial](/engine/getstarted/){: class="button outline-btn"}{% endcapture %}{{ basics | markdownify }}
</div>
<div class="col-md-6 block">
<div class="col-sm-12 col-md-12 col-lg-6 block">
{% capture apps %}
### Define and deploy applications
@ -39,6 +39,7 @@ mode.
<div class="component-container">
<div class="row">
<div class="col-sm-4 col-md-12 col-lg-3 block">
<div class="component">
<div class="component-icon">
<a href="docker-for-mac/"> <img src="../images/apple_48.svg" alt="Docker for Mac"> </a>
@ -46,6 +47,8 @@ mode.
<h3 id="docker-for-mac"><a href="docker-for-mac/">Docker for Mac</a></h3>
<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-4 col-md-12 col-lg-3 block">
<div class="component">
<div class="component-icon">
<a href="docker-for-windows/"> <img src="../images/windows_48.svg" alt="Docker for Windows"> </a>
@ -53,6 +56,8 @@ mode.
<h3 id="docker-for-windows"><a href="docker-for-windows/">Docker for Windows</a></h3>
<p>A native Windows application which delivers all Docker tools to your Windows computer.</p>
</div>
</div>
<div class="col-sm-4 col-md-12 col-lg-3 block">
<div class="component">
<div class="component-icon">
<a href="/engine/installation/linux/ubuntu/"> <img src="../images/linux_48.svg" alt="Docker for Linux"> </a>
@ -60,6 +65,7 @@ mode.
<h3 id="docker-for-linux"><a href="/engine/installation/linux/ubuntu/">Docker for Linux</a></h3>
<p>Install Docker on a computer which already has a Linux distribution installed.</p>
</div>
</div>
<!--components-full-width-->
<div class="col-md-12">
<!--editions-->