From 1bdbd47e4a04bea7bdc26b8811d87962dad0b91a Mon Sep 17 00:00:00 2001 From: Sebastiaan van Stijn Date: Thu, 2 Sep 2021 00:32:23 +0200 Subject: [PATCH 1/4] 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 --- _scss/_content.scss | 30 +++++++++++++++++++++--------- _scss/_utilities.scss | 5 ----- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/_scss/_content.scss b/_scss/_content.scss index 4f968f7ee7..06a703a7fa 100755 --- a/_scss/_content.scss +++ b/_scss/_content.scss @@ -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 { diff --git a/_scss/_utilities.scss b/_scss/_utilities.scss index 50a6667cee..35bd445db3 100755 --- a/_scss/_utilities.scss +++ b/_scss/_utilities.scss @@ -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; From f3d07dd16486c1ed84458ede7c72eb116ddd3f5a Mon Sep 17 00:00:00 2001 From: Dan Bamikiya Date: Thu, 2 Sep 2021 00:50:15 +0100 Subject: [PATCH 2/4] fix width of "get docker" blocks on `max-width: 768px` views --- get-docker.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/get-docker.md b/get-docker.md index d22641401d..23c9c72a12 100644 --- a/get-docker.md +++ b/get-docker.md @@ -22,7 +22,7 @@ section and choose the best installation path for you.
-
+
Docker Desktop for Mac @@ -31,7 +31,7 @@ section and choose the best installation path for you.

A native application using the macOS sandbox security model which delivers all Docker tools to your Mac.

-
+
Docker Desktop for Windows @@ -40,7 +40,7 @@ section and choose the best installation path for you.

A native Windows application which delivers all Docker tools to your Windows computer.

-
+
Docker for Linux From a5da30abede5c3d9b685792d797a4043c409f183 Mon Sep 17 00:00:00 2001 From: Sebastiaan van Stijn Date: Thu, 2 Sep 2021 00:32:23 +0200 Subject: [PATCH 3/4] _scss: minor changes to styles for "get docker" blocks Make the rule more specific, reduce margin around tiles, and remove unneeded float. Signed-off-by: Sebastiaan van Stijn --- _scss/_content.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/_scss/_content.scss b/_scss/_content.scss index 06a703a7fa..47aeeee048 100755 --- a/_scss/_content.scss +++ b/_scss/_content.scss @@ -63,23 +63,21 @@ code { margin: 0 0 50px; width: 100%; - .block { - padding: 0 15px 10px 15px; - } - .row { display: flex; flex-wrap: wrap; } - .row > [class*='col-'] { + + // "get-docker" tiles + .row > .block { display: flex; flex-direction: column; + padding: 10px; } .component { padding: 15px 25px 15px 15px; text-align: center; - float: left; height: 100%; width: 100%; background: $bg-component; From 81177c8b02e7292739fefd9f105efc6bfc7ca0ed Mon Sep 17 00:00:00 2001 From: Sebastiaan van Stijn Date: Thu, 2 Sep 2021 12:43:23 +0200 Subject: [PATCH 4/4] fix language guides markup - force "nowrap" - add "col-xs-12" to fix size on smaller sizes - remove the "component-icon" div, as it was not styled Signed-off-by: Sebastiaan van Stijn --- language/index.md | 28 +++++++++------------------- 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/language/index.md b/language/index.md index a1c8baa1eb..f2f91a3285 100644 --- a/language/index.md +++ b/language/index.md @@ -23,28 +23,18 @@ Learn how to set up your Docker environment and start containerizing your applic
-
-
-
- Develop with Node -
+
+
+ Develop with Node
-
- -
- Develop with Python -
- +
+ Develop with Python
-
-
- Develop with Java -
+
+ Develop with Java
-
-
- Develop with Go -
+
+ Develop with Go