From 8301eb5e26efd55bd03adb46aac4202523deb88a Mon Sep 17 00:00:00 2001 From: Bryce Mecum Date: Fri, 17 Nov 2023 23:34:06 -0900 Subject: [PATCH] MINOR: [Docs] Make cards on index page of docs responsive (#38693) ### Rationale for this change The text inside the Specifications and Development cards in the docs get squished on mobile or small-viewport devices because their CSS grid definition isn't responsive. Example: ![arrow apache org_docs_(iPhone SE)](https://github.com/apache/arrow/assets/563/a38faf2a-fb8c-4390-a57c-9ee1d6c33a25) ### What changes are included in this PR? This changes this specific use of the [`grid-item`](https://sphinx-design.readthedocs.io/en/latest/grids.html) directive to take advantage of the responsive variant, > or four numbers for extra-small (<576px), small (768px), medium (992px) and large screens (>1200px), For the extra-small variant, the grid dynamically switches to a single-column which prevents squishing of the text inside the card. Otherwise a two-column grid is used. ### Are these changes tested? Yes, I built the docs in a local conda env and tested that the cards look right at all widths. At narrow widths, it looks like this: ![devd io_8000_(iPhone XR)](https://github.com/apache/arrow/assets/563/fe417e7f-92b2-42d9-ab74-d242c7c6acae) ### Are there any user-facing changes? Just to docs, see above. Authored-by: Bryce Mecum Signed-off-by: AlenkaF --- docs/source/cpp/index.rst | 4 ++-- docs/source/developers/index.rst | 4 ++-- docs/source/index.rst | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/source/cpp/index.rst b/docs/source/cpp/index.rst index 6d4d4aaa8148c..ee0434ac0fb54 100644 --- a/docs/source/cpp/index.rst +++ b/docs/source/cpp/index.rst @@ -22,7 +22,7 @@ C++ Implementation Welcome to the Apache Arrow C++ implementation documentation! -.. grid:: 2 +.. grid:: 1 2 2 2 :gutter: 4 :padding: 2 2 0 0 :class-container: sd-text-center @@ -60,7 +60,7 @@ Welcome to the Apache Arrow C++ implementation documentation! To the User Guide -.. grid:: 2 +.. grid:: 1 2 2 2 :gutter: 4 :padding: 2 2 0 0 :class-container: sd-text-center diff --git a/docs/source/developers/index.rst b/docs/source/developers/index.rst index c2f10c9e95c47..83dc556e1605a 100644 --- a/docs/source/developers/index.rst +++ b/docs/source/developers/index.rst @@ -71,7 +71,7 @@ Code of Conduct All participation in the Apache Arrow project is governed by the ASF's `Code of Conduct `_. -.. grid:: 2 +.. grid:: 1 2 2 2 :gutter: 4 :padding: 2 2 0 0 :class-container: sd-text-center @@ -146,7 +146,7 @@ All participation in the Apache Arrow project is governed by the ASF's * :ref:`documentation` * :ref:`building-docs` -.. grid:: 2 +.. grid:: 1 2 2 2 :gutter: 4 :padding: 2 2 0 0 :class-container: sd-text-center diff --git a/docs/source/index.rst b/docs/source/index.rst index 8407813bd7abb..e6e82c13d7eff 100644 --- a/docs/source/index.rst +++ b/docs/source/index.rst @@ -37,7 +37,7 @@ such topics as: **To learn how to use Arrow refer to the documentation specific to your target environment.** -.. grid:: 2 +.. grid:: 1 2 2 2 :gutter: 4 :padding: 2 2 0 0 :class-container: sd-text-center