docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix vertical size of "get docker" blocks 

This attempts to fix the problem where (on smaller windows), the text
flows out of the blocks.

This uses one of the solutions mentioned in https://stackoverflow.com/a/19695851/1811501,
with some additonal style changes.

Unfortunately, it introduces another issue, where (just before a break-point; after
the right-hand navigation is hidden, but before we switch to "mobile" / "small",
the blocks are wrapped, but no longer have equal _widths_.

See https://github.com/docker/docker.github.io/pull/13433#issuecomment-910843789

Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
This commit is contained in:
Sebastiaan van Stijn 2021-09-02 00:32:23 +02:00
parent 316fe44977
commit 1bdbd47e4a
No known key found for this signature in database
GPG Key ID: 76698F39D527CE8C
2 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
_scss/_content.scss
View File

@ -59,17 +59,28 @@ 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;
.block {
padding: 0 15px 10px 15px;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.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 +91,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;